inventree/InvenTree
2
0
Fork 0
mirror of https://github.com/inventree/InvenTree.git synced 2025-06-18 13:05:42 +00:00
Code Activity

QR code scanner using camera if available

Browse Source
This commit is contained in:
Kálmán Rózsahegyi
2022-03-26 19:33:38 +01:00
parent 84717f8103
commit a523401a2f
4 changed files with 184 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
InvenTree/templates/base.html
View File

@ -160,6 +160,7 @@
<script type='text/javascript' src="{% static 'script/clipboard.min.js' %}"></script>
<script type='text/javascript' src="{% static 'script/randomColor.min.js' %}"></script>
<script type='text/javascript' src="{% static 'script/qr-scanner.umd.min.js' %}"></script>
<!-- general InvenTree -->
<script type='text/javascript' src="{% static 'script/inventree/inventree.js' %}"></script>

52
InvenTree/templates/js/translated/barcode.js
View File

@ -31,6 +31,9 @@ function makeBarcodeInput(placeholderText='', hintText='') {
hintText = hintText || '{% trans "Enter barcode data" %}';
var html = `
<div id='barcode_scan_video_container' class='text-center' style='height: 240px; display: none;'>
<video id='barcode_scan_video' disablepictureinpicture playsinline height='240' style='object-fit: fill;'></video>
</div>
<div class='form-group'>
<label class='control-label' for='barcode'>{% trans "Barcode" %}</label>
<div class='controls'>
@ -39,6 +42,7 @@ function makeBarcodeInput(placeholderText='', hintText='') {
<span class='fas fa-qrcode'></span>
</span>
<input id='barcode' class='textinput textInput form-control' type='text' name='barcode' placeholder='${placeholderText}'>
<button id='barcode_scan_btn' class='btn btn-secondary' onclick='onBarcodeScanClicked()' style='display: none;'><span class='fas fa-camera'></span></button>
</div>
<div id='hint_barcode_data' class='help-block'>${hintText}</div>
</div>
@ -48,6 +52,45 @@ function makeBarcodeInput(placeholderText='', hintText='') {
return html;
}
qrScanner = null;
function startQrScanner()
{
$('#barcode_scan_video_container').show();
qrScanner.start();
}
function stopQrScanner()
{
if (qrScanner != null) qrScanner.stop();
$('#barcode_scan_video_container').hide();
}
function onBarcodeScanClicked(e) {
if ($('#barcode_scan_video_container').is(':visible') == false) startQrScanner(); else stopQrScanner();
}
function onCameraAvailable(hasCamera, options) {
if ( hasCamera == true ) {
// Camera is only acccessible if page is served over secure connection
if ( window.isSecureContext == true ) {
qrScanner = new QrScanner(document.getElementById('barcode_scan_video'), result => onBarcodeScanCompleted(result, options), {
highlightScanRegion: true,
highlightCodeOutline: true,
});
$('#barcode_scan_btn').show();
}
}
}
function onBarcodeScanCompleted(result, options)
{
if (result.data == '') return;
console.log('decoded qr code:', result.data);
stopQrScanner();
postBarcodeData(result.data, options);
}
function makeNotesField(options={}) {
var tooltip = options.tooltip || '{% trans "Enter optional notes for stock transfer" %}';
@ -186,6 +229,9 @@ function barcodeDialog(title, options={}) {
$(modal).on('shown.bs.modal', function() {
$(modal + ' .modal-form-content').scrollTop(0);
// Check for qr-scanner camera
QrScanner.hasCamera().then( hasCamera => onCameraAvailable(hasCamera, options) );
var barcode = $(modal + ' #barcode');
// Handle 'enter' key on barcode
@ -220,6 +266,12 @@ function barcodeDialog(title, options={}) {
});
$(modal).on('hidden.bs.modal', function() {
stopQrScanner();
if (qrScanner != null) qrScanner.destroy();
qrScanner = null;
});
modalSetTitle(modal, title);
if (options.onSubmit) {