Merge pull request #8 from ttycelery/nimiq-qr-switch

Change the QR scanning library to `nimiq/qr-scanner`
ttycelery · Dec 23, 2021 · f29125e · f29125e
2 parents 065860e + a19785f
commit f29125e
Show file tree

Hide file tree

Showing 8 changed files with 156 additions and 70 deletions.
diff --git a/praesentia/static/html5-qrcode.min.js b/praesentia/static/html5-qrcode.min.js
diff --git a/praesentia/static/praesentia.js b/praesentia/static/praesentia.js
@@ -1,39 +1,33 @@
-let qrData = '';
-let html5QrcodeScanner = new Html5QrcodeScanner(
-    'reader',
-    {
-        fps: 10,
-        qrbox: 250,
-    });
+QrScanner.WORKER_PATH = 'static/qr-scanner-worker.min.js';
 
-html5QrcodeScanner.render(onScanSuccess);
+let qrData = '';
 
 $('body').on('paste', event => {
     let paste = event.originalEvent.clipboardData || window.clipboardData;
-
-    if(paste.files.length > 0) {
-        html5QrcodeScanner.html5Qrcode.scanFile(paste.files[0], true)
-        .then(decodedText => {
-            processDecodedText(decodedText)
-        })
-        .catch(err => {
-            swal.fire('Error', 'Cannot read QR code. Please make sure to only paste a QR code image.', 'error');
-        });
+    if (paste.files.length > 0) {
+        processQrImage(paste.files[0]);
     }
 
-    event.preventDefault()
+    event.preventDefault();
 });
 
-function onScanSuccess(decodedText, _) {
-    processDecodedText(decodedText)
-}
+$('#qrImageFile').on('change', event => {
+    processQrImage(event.target.files[0]);
+});
 
-function processDecodedText(decodedText) {
-    $('#qrData').text(decodedText.slice(0, 20) + '...');
-    qrData = decodedText;
-    $('#reader__dashboard_section_csr > span:nth-child(2) > button:nth-child(2)').click();
-    $('#btnSubmit').focus();
-    $('#hasQrData').show();
+function processQrImage(file) {
+    $('#qrData').text('scanning...');
+    QrScanner.scanImage(file).then((decodedText) => {
+        $('#qrData').text(decodedText.slice(0, 20) + '...');
+        qrData = decodedText;
+        $('#btnSubmit').focus();
+        $('#hasQrData').show();
+    }).catch(err => {
+        swal.fire('Error', 'Cannot read QR code. ' +
+            'Please make sure that it is an image that contains a QR code.', 'error');
+        $('#qrImageFile').val('');
+        $('#qrData').text('-');
+    });
 }
 
 function randomizeLatLong() {

diff --git a/praesentia/static/qr-scanner-worker.min.js b/praesentia/static/qr-scanner-worker.min.js
diff --git a/praesentia/static/qr-scanner-worker.min.js.map b/praesentia/static/qr-scanner-worker.min.js.map
diff --git a/praesentia/static/qr-scanner.umd.min.js b/praesentia/static/qr-scanner.umd.min.js
diff --git a/praesentia/static/qr-scanner.umd.min.js.map b/praesentia/static/qr-scanner.umd.min.js.map
diff --git a/praesentia/static/style.css b/praesentia/static/style.css
@@ -30,37 +30,20 @@
     }
 }
 
-#reader {
+#qrInput {
     margin-top: 1rem;
-    margin-bottom: 1rem;
-}
-
-#reader__filescan_input {
-    display: inline !important;
-    text-overflow: ellipsis !important;
-    overflow: hidden !important;
-}
-
-#reader__camera_selection {
-    display: inline;
-    font-size: 80%;
-    max-width: 200px;
-    overflow: hidden;
-}
-
-#reader > div:nth-child(1) > span:nth-child(1) > a {
-    font-size: smaller;
-    color: inherit;
-    text-decoration: none;
-}
-
-#reader_container {
-    max-width: 100% !important;
-    overflow-x: hidden !important;
+    padding: 1rem;
+    border: 1px solid #ccc;
+    -webkit-box-shadow: inset 0 1px 3px #ddd;
+    box-shadow: inset 0 1px 3px #ddd;
+    border-radius: 4px;
+    vertical-align: middle;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 footer {
     color: grey;
     text-align: center;
     margin-top: 2rem;
-}
+}
diff --git a/praesentia/templates/home.html b/praesentia/templates/home.html
@@ -45,12 +45,20 @@ <h1>Praesentia</h1>
                             location from GPS</button>
                     </small>
                 </div>
-                <div id="reader_container">
-                    <div id="reader" width="600px" class="mb-3"></div>
-                    <small><strong>ProTip!</strong> You can scan your QR code image from your clipboard, just
-                        <kbd>ctrl</kbd>+<kbd>v</kbd>
-                        it here.</small>
-                </div><br>
+                <div id="qrContainer">
+                    <div id="qrInput">
+                        <label>QR Image:</label>
+                        <input type="file" accept="image/*" id="qrImageFile">
+                    </div>
+                    <label>
+                        <small>
+                            <strong>ProTip!</strong> You can scan your QR code image from your clipboard, just
+                            <kbd>ctrl</kbd>+<kbd>v</kbd>
+                            it here.
+                        </small>
+                    </label>
+                </div>
+                <br>
                 <label><span id="hasQrData">✓</span> QR Data: <code id="qrData">-</code></label><br>
                 <div class="pure-g">
                     <div class="pure-u" style="margin-right: 1rem;">
@@ -77,9 +85,9 @@ <h1>Praesentia</h1>
     </div>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"
         integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
-    <script src="{{ url_for('static', filename='html5-qrcode.min.js') }}"></script>
+    <script src="{{ url_for('static', filename='qr-scanner.umd.min.js') }}"></script>
     <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
     <script src="{{ url_for('static', filename='praesentia.js') }}"></script>
 </body>
 
-</html>
+</html>