Camera barcode scanner enhancements (#675)

* Disable torch button, if not supported

* Allow toggling torch

* Don't exceed the screen width with camera window

* Disable torch button, if not supported

* Allow toggling torch

* Don't exceed the screen width with camera window

* Allow toggling torch

* Disable torch button, if not supported

* Allow toggling torch

* Don't exceed the screen width with camera window

* Allow toggling torch

* Allow toggling torch

* Don't exceed the screen width with camera window

* Remove toggling of torch, as it's not working
and add resize of video to fit in viewport hieght

* Add feature to always turn on the torch in camera scanner.

* Fix feature flag name

Co-authored-by: Michael Neuendorf <neuendorf@gonicus.de>
This commit is contained in:
Mik- 2020-03-29 14:25:04 +02:00 committed by GitHub
parent caf7127c13
commit f66a4c9631
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 71 additions and 4 deletions

View File

@ -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.

View File

@ -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 */

View File

@ -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: '<i class="far fa-lightbulb"></i>',
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;
}
},