Add Javascript file for QR code reading

30ce1f43 · Aljaž Srebrnič · 64c12b64 · 30ce1f43 · 30ce1f43 · 30ce1f43
Commit 30ce1f43 authored May 29, 2017 by Aljaž Srebrnič
Hide whitespace changes
Inline Side-by-side

Showing with 54 additions and 1 deletion

settings.py invman/settings.py +2 -0

main.html templates/main.html +2 -1

main.js things/static/things/main.js +45 -0

index.html things/templates/things/index.html +5 -0

No files found.
--- 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">