From c6a9a240e1907b69c0385006ebc3e20dd7abbbcf Mon Sep 17 00:00:00 2001 From: Michael Neuendorf Date: Tue, 24 Mar 2020 20:00:06 +0100 Subject: [PATCH 1/7] Disable torch button, if not supported --- public/viewjs/components/barcodescanner.js | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/public/viewjs/components/barcodescanner.js b/public/viewjs/components/barcodescanner.js index 5db834fa..a9be3faa 100644 --- a/public/viewjs/components/barcodescanner.js +++ b/public/viewjs/components/barcodescanner.js @@ -1,5 +1,20 @@ Grocy.Components.BarcodeScanner = { }; +Grocy.Components.BarcodeScanner.CheckCapabilities = function() +{ + var track = Quagga.CameraAccess.getActiveTrack(); + var capabilities = {}; + if (typeof track.getCapabilities === 'function') { + capabilities = track.getCapabilities(); + } + + var canTorch = typeof capabilities.torch === 'boolean' && capabilities.torch + var node = document.querySelector('.torch'); + if (node) { + node.style.display = canTorch ? 'block' : 'none'; + } +} + Grocy.Components.BarcodeScanner.StartScanning = function() { Grocy.Components.BarcodeScanner.DecodedCodesCount = 0; @@ -70,6 +85,9 @@ Grocy.Components.BarcodeScanner.StartScanning = function() }, 500); return; } + + Grocy.Components.BarcodeScanner.CheckCapabilities(); + Quagga.start(); }); } @@ -157,7 +175,7 @@ $(document).on("click", "#barcodescanner-start-button", function(e) buttons: { torch: { label: '', - className: 'btn-warning responsive-button', + className: 'btn-warning responsive-button torch', callback: function() { Quagga.CameraAccess.getActiveTrack().applyConstraints({ advanced: [{ torch: true }] }); From ec5012750d8ae2f6df8a1813aac830a4592bd3c0 Mon Sep 17 00:00:00 2001 From: Michael Neuendorf Date: Tue, 24 Mar 2020 20:00:44 +0100 Subject: [PATCH 2/7] Allow toggling torch --- public/viewjs/components/barcodescanner.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/public/viewjs/components/barcodescanner.js b/public/viewjs/components/barcodescanner.js index a9be3faa..10a3cecd 100644 --- a/public/viewjs/components/barcodescanner.js +++ b/public/viewjs/components/barcodescanner.js @@ -15,6 +15,8 @@ Grocy.Components.BarcodeScanner.CheckCapabilities = function() } } +Grocy.Components.BarcodeScanner.TorchState = false; + Grocy.Components.BarcodeScanner.StartScanning = function() { Grocy.Components.BarcodeScanner.DecodedCodesCount = 0; @@ -178,7 +180,15 @@ $(document).on("click", "#barcodescanner-start-button", function(e) className: 'btn-warning responsive-button torch', callback: function() { - Quagga.CameraAccess.getActiveTrack().applyConstraints({ advanced: [{ torch: true }] }); + Grocy.Components.BarcodeScanner.TorchState = !Grocy.Components.BarcodeScanner.TorchState; + + Quagga.CameraAccess.getActiveTrack().applyConstraints({ + advanced: [ + { + torch: Grocy.Components.BarcodeScanner.TorchState + } + ] + }); return false; } }, From ef373d77a2852208b7bc42ede6eefa3cc8d8ae7a Mon Sep 17 00:00:00 2001 From: Michael Neuendorf Date: Tue, 24 Mar 2020 20:16:30 +0100 Subject: [PATCH 3/7] Don't exceed the screen width with camera window --- public/css/grocy.css | 8 ++++++++ public/viewjs/components/barcodescanner.js | 6 +++--- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/public/css/grocy.css b/public/css/grocy.css index 68bc85ae..2be88364 100644 --- a/public/css/grocy.css +++ b/public/css/grocy.css @@ -259,6 +259,14 @@ input::-webkit-inner-spin-button { color: inherit; } +/* Barcodescanner Quagga */ +#barcodescanner-livestream video { + width: 100%; +} +#barcodescanner-livestream canvas { + width: 100%; +} + /* Third party component customizations - Bootstrap */ /* Hide the form validation feedback icons introduced in Bootstrap 4.2.0 - a colored border is enough */ diff --git a/public/viewjs/components/barcodescanner.js b/public/viewjs/components/barcodescanner.js index 10a3cecd..ed7a8feb 100644 --- a/public/viewjs/components/barcodescanner.js +++ b/public/viewjs/components/barcodescanner.js @@ -28,8 +28,8 @@ Grocy.Components.BarcodeScanner.StartScanning = function() type: "LiveStream", target: document.querySelector("#barcodescanner-livestream"), constraints: { - width: 436, - height: 327, + // width: 436, + // height: 327, facingMode: "environment" } }, @@ -181,7 +181,7 @@ $(document).on("click", "#barcodescanner-start-button", function(e) callback: function() { Grocy.Components.BarcodeScanner.TorchState = !Grocy.Components.BarcodeScanner.TorchState; - + Quagga.CameraAccess.getActiveTrack().applyConstraints({ advanced: [ { From 6b3ef4ee56ddb707a444a03f2f099066db08d417 Mon Sep 17 00:00:00 2001 From: Michael Neuendorf Date: Tue, 24 Mar 2020 20:00:06 +0100 Subject: [PATCH 4/7] Disable torch button, if not supported --- public/viewjs/components/barcodescanner.js | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/public/viewjs/components/barcodescanner.js b/public/viewjs/components/barcodescanner.js index 5db834fa..a9be3faa 100644 --- a/public/viewjs/components/barcodescanner.js +++ b/public/viewjs/components/barcodescanner.js @@ -1,5 +1,20 @@ Grocy.Components.BarcodeScanner = { }; +Grocy.Components.BarcodeScanner.CheckCapabilities = function() +{ + var track = Quagga.CameraAccess.getActiveTrack(); + var capabilities = {}; + if (typeof track.getCapabilities === 'function') { + capabilities = track.getCapabilities(); + } + + var canTorch = typeof capabilities.torch === 'boolean' && capabilities.torch + var node = document.querySelector('.torch'); + if (node) { + node.style.display = canTorch ? 'block' : 'none'; + } +} + Grocy.Components.BarcodeScanner.StartScanning = function() { Grocy.Components.BarcodeScanner.DecodedCodesCount = 0; @@ -70,6 +85,9 @@ Grocy.Components.BarcodeScanner.StartScanning = function() }, 500); return; } + + Grocy.Components.BarcodeScanner.CheckCapabilities(); + Quagga.start(); }); } @@ -157,7 +175,7 @@ $(document).on("click", "#barcodescanner-start-button", function(e) buttons: { torch: { label: '', - className: 'btn-warning responsive-button', + className: 'btn-warning responsive-button torch', callback: function() { Quagga.CameraAccess.getActiveTrack().applyConstraints({ advanced: [{ torch: true }] }); From a477902752f899ca0f5cb16b538a073e61f00d9f Mon Sep 17 00:00:00 2001 From: Michael Neuendorf Date: Tue, 24 Mar 2020 20:00:44 +0100 Subject: [PATCH 5/7] Allow toggling torch --- public/viewjs/components/barcodescanner.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/public/viewjs/components/barcodescanner.js b/public/viewjs/components/barcodescanner.js index a9be3faa..10a3cecd 100644 --- a/public/viewjs/components/barcodescanner.js +++ b/public/viewjs/components/barcodescanner.js @@ -15,6 +15,8 @@ Grocy.Components.BarcodeScanner.CheckCapabilities = function() } } +Grocy.Components.BarcodeScanner.TorchState = false; + Grocy.Components.BarcodeScanner.StartScanning = function() { Grocy.Components.BarcodeScanner.DecodedCodesCount = 0; @@ -178,7 +180,15 @@ $(document).on("click", "#barcodescanner-start-button", function(e) className: 'btn-warning responsive-button torch', callback: function() { - Quagga.CameraAccess.getActiveTrack().applyConstraints({ advanced: [{ torch: true }] }); + Grocy.Components.BarcodeScanner.TorchState = !Grocy.Components.BarcodeScanner.TorchState; + + Quagga.CameraAccess.getActiveTrack().applyConstraints({ + advanced: [ + { + torch: Grocy.Components.BarcodeScanner.TorchState + } + ] + }); return false; } }, From d17a573cbe5b2f9037d8033ea14c0d5df167fecb Mon Sep 17 00:00:00 2001 From: Michael Neuendorf Date: Tue, 24 Mar 2020 20:16:30 +0100 Subject: [PATCH 6/7] Don't exceed the screen width with camera window --- public/css/grocy.css | 8 ++++++++ public/viewjs/components/barcodescanner.js | 6 +++--- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/public/css/grocy.css b/public/css/grocy.css index 68bc85ae..2be88364 100644 --- a/public/css/grocy.css +++ b/public/css/grocy.css @@ -259,6 +259,14 @@ input::-webkit-inner-spin-button { color: inherit; } +/* Barcodescanner Quagga */ +#barcodescanner-livestream video { + width: 100%; +} +#barcodescanner-livestream canvas { + width: 100%; +} + /* Third party component customizations - Bootstrap */ /* Hide the form validation feedback icons introduced in Bootstrap 4.2.0 - a colored border is enough */ diff --git a/public/viewjs/components/barcodescanner.js b/public/viewjs/components/barcodescanner.js index 10a3cecd..ed7a8feb 100644 --- a/public/viewjs/components/barcodescanner.js +++ b/public/viewjs/components/barcodescanner.js @@ -28,8 +28,8 @@ Grocy.Components.BarcodeScanner.StartScanning = function() type: "LiveStream", target: document.querySelector("#barcodescanner-livestream"), constraints: { - width: 436, - height: 327, + // width: 436, + // height: 327, facingMode: "environment" } }, @@ -181,7 +181,7 @@ $(document).on("click", "#barcodescanner-start-button", function(e) callback: function() { Grocy.Components.BarcodeScanner.TorchState = !Grocy.Components.BarcodeScanner.TorchState; - + Quagga.CameraAccess.getActiveTrack().applyConstraints({ advanced: [ { From ae1094f243cd9431573c9b0f9d88d45184d946cd Mon Sep 17 00:00:00 2001 From: Michael Neuendorf Date: Tue, 24 Mar 2020 20:00:44 +0100 Subject: [PATCH 7/7] Allow toggling torch --- public/viewjs/components/barcodescanner.js | 1 - 1 file changed, 1 deletion(-) diff --git a/public/viewjs/components/barcodescanner.js b/public/viewjs/components/barcodescanner.js index ed7a8feb..6e4936f4 100644 --- a/public/viewjs/components/barcodescanner.js +++ b/public/viewjs/components/barcodescanner.js @@ -181,7 +181,6 @@ $(document).on("click", "#barcodescanner-start-button", function(e) callback: function() { Grocy.Components.BarcodeScanner.TorchState = !Grocy.Components.BarcodeScanner.TorchState; - Quagga.CameraAccess.getActiveTrack().applyConstraints({ advanced: [ {