Add Javascript file for QR code reading

30ce1f43 · Aljaž Srebrnič · 64c12b64 · 30ce1f43 · 30ce1f43 · 30ce1f43
Commit 30ce1f43 authored May 29, 2017 by Aljaž Srebrnič
4 changed files
--- a/invman/settings.py
+++ b/invman/settings.py
@@ -130,6 +130,8 @@ USE_TZ = True
 STATIC_URL = '/static/'

 STATICFILES_FINDERS = (
+    'django.contrib.staticfiles.finders.FileSystemFinder',
+    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'djangobower.finders.BowerFinder',
 )


--- a/templates/main.html
+++ b/templates/main.html
@@ -17,7 +17,8 @@
        </style>
        <link rel="stylesheet" href="{% static 'css/main.css' %}">

-        <script src="{% static 'qcode-decoder/build/qcode-decoder.min.js' %}"></script>
+        {% block head_js %}
+        {% endblock %}
    </head>
    <body>
        {% include 'menu.html' %}

--- a/things/static/things/main.js
+++ b/things/static/things/main.js
+$(function () {
+    "use strict";
+    var qr = new QCodeDecoder();
+
+    var resultHandler = function (err, result) {
+        if (err) {
+            console.log(err.message);
+            return;
+        }
+        $("input#id")[0].value = result;
+        $("#qr-scan").modal("hide");
+    };
+
+    $("#cameraProcess").click(function(e) {
+        var input = $("#cameraInput")[0];
+        if (input.files && input.files[0]) {
+            var reader = new FileReader();
+            reader.onload = function (e) {
+                qr.decodeFromImage(e.target.result, resultHandler);
+            };
+            reader.readAsDataURL(input.files[0]);
+        }
+    });
+
+    $("#qr-scan").on("show.bs.modal", function(){
+
+        if (!(qr.isCanvasSupported() && qr.hasGetUserMedia())) {
+            alert("Your browser doesn\'t match the required specs.");
+            throw new Error("Canvas and getUserMedia are required");
+        }
+        var video = document.querySelector("video");
+        var reset = document.querySelector("#reset");
+
+        // prepare a canvas element that will receive the image to decode, sets
+        // the callback for the result and then prepares the videoElement to
+        // send its source to the decoder.
+        qr.decodeFromCamera(video, resultHandler);
+        // attach some event handlers to reset and stop whenever we want.
+        reset.onclick = function () {
+            qr.decodeFromCamera(video, resultHandler);
+        };
+    }).on("hide.bs.modal", function() {
+        qr.stop();
+    });
+});
--- a/things/templates/things/index.html
+++ b/things/templates/things/index.html
 {% extends 'main.html' %}
+{% load static %}
+{% block head_js %}
+    <script type="text/javascript" src="{% static 'qcode-decoder/build/qcode-decoder.min.js' %}"></script>
+    <script type="text/javascript" src="{% static 'things/main.js' %}"></script>
+{% endblock %}
 {% block modal %}
 <div class="modal fade" id="qr-scan" tabindex="-1" role="dialog" aria-labelledby="qr-scan-label" aria-hidden="true">
    <div class="modal-dialog" role="document">