mirror of
https://github.com/grocy/grocy.git
synced 2025-04-29 09:39:57 +00:00
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:
parent
caf7127c13
commit
f66a4c9631
@ -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.
|
||||
|
@ -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 */
|
||||
|
@ -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;
|
||||
}
|
||||
},
|
||||
|
Loading…
x
Reference in New Issue
Block a user