diff --git a/config-dist.php b/config-dist.php index f6da7527..82ae183e 100644 --- a/config-dist.php +++ b/config-dist.php @@ -154,3 +154,4 @@ Setting('FEATURE_FLAG_CHORES_ASSIGNMENTS', true); # Feature settings Setting('FEATURE_SETTING_STOCK_COUNT_OPENED_PRODUCTS_AGAINST_MINIMUM_STOCK_AMOUNT', true); // When set to false, opened products will not be considered for minimum stock amounts +Setting('FEATURE_FLAG_AUTO_TORCH_ON_WITH_CAMERA', true); // Enables the torch automaticaly in every camera barcode scanner. diff --git a/public/css/grocy.css b/public/css/grocy.css index 68bc85ae..957bdf13 100644 --- a/public/css/grocy.css +++ b/public/css/grocy.css @@ -259,6 +259,21 @@ input::-webkit-inner-spin-button { color: inherit; } +/* Barcodescanner Quagga */ +#barcodescanner-container { + max-height: 90vw; +} +#livestream-container { + max-height: 100%; +} +#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 5db834fa..dc21c717 100644 --- a/public/viewjs/components/barcodescanner.js +++ b/public/viewjs/components/barcodescanner.js @@ -1,5 +1,42 @@ Grocy.Components.BarcodeScanner = { }; +Grocy.Components.BarcodeScanner.CheckCapabilities = function() +{ + var track = Quagga.CameraAccess.getActiveTrack(); + var capabilities = {}; + if (typeof track.getCapabilities === 'function') { + capabilities = track.getCapabilities(); + } + + // Check if the camera is capable to turn on a torch. + var canTorch = typeof capabilities.torch === 'boolean' && capabilities.torch + // Remove the torch button, if either the device can not torch or AutoTorchOn is set. + var node = document.querySelector('.torch'); + if (node) { + node.style.display = canTorch && !Grocy.FeatureFlags.GROCY_FEATURE_FLAG_AUTO_TORCH_ON_WITH_CAMERA ? 'inline-block' : 'none'; + } + // If AutoTorchOn is set, turn on the torch. + if (canTorch && Grocy.FeatureFlags.GROCY_FEATURE_FLAG_AUTO_TORCH_ON_WITH_CAMERA) { + Grocy.Components.BarcodeScanner.TorchOn(track); + } + + // Reduce the height of the video, if it's heigher than then the viewport + var bc = document.getElementById('barcodescanner-container'); + if (bc) { + var bcAspectRatio = bc.offsetWidth / bc.offsetHeight; + var settings = track.getSettings(); + if (bcAspectRatio > settings.aspectRatio) { + var v = document.querySelector('#barcodescanner-livestream video') + if (v) { + var c = document.querySelector('#barcodescanner-livestream canvas') + var newWidth = v.clientWidth / bcAspectRatio * settings.aspectRatio + 'px'; + v.style.width = newWidth; + c.style.width = newWidth; + } + } + } +} + Grocy.Components.BarcodeScanner.StartScanning = function() { Grocy.Components.BarcodeScanner.DecodedCodesCount = 0; @@ -11,8 +48,6 @@ Grocy.Components.BarcodeScanner.StartScanning = function() type: "LiveStream", target: document.querySelector("#barcodescanner-livestream"), constraints: { - width: 436, - height: 327, facingMode: "environment" } }, @@ -70,6 +105,9 @@ Grocy.Components.BarcodeScanner.StartScanning = function() }, 500); return; } + + Grocy.Components.BarcodeScanner.CheckCapabilities(); + Quagga.start(); }); } @@ -84,6 +122,19 @@ Grocy.Components.BarcodeScanner.StopScanning = function() bootbox.hideAll(); } +Grocy.Components.BarcodeScanner.TorchOn = function(track) +{ + if (track) { + track.applyConstraints({ + advanced: [ + { + torch: true + } + ] + }); + } +} + Quagga.onDetected(function(result) { $.each(result.codeResult.decodedCodes, function(id, error) @@ -157,10 +208,10 @@ $(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 }] }); + Grocy.Components.BarcodeScanner.TorchOn(Quagga.CameraAccess.getActiveTrack()); return false; } },