227 lines
8.3 KiB
HTML
227 lines
8.3 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block additional_css %}
|
|
<link rel="preload" as="style" onload="this.rel='stylesheet';this.onload=null" href="https://unpkg.com/normalize.css@8.0.0/normalize.css">
|
|
<link rel="preload" as="style" onload="this.rel='stylesheet';this.onload=null" href="https://unpkg.com/milligram@1.3.0/dist/milligram.min.css">
|
|
{% endblock %}
|
|
|
|
{% block title %}Smartphone Scanner{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container" >
|
|
|
|
<div class="row-mb8" id="video-button-content">
|
|
<a class="button" id="startButton">Start</a>
|
|
<a class="button-outline" id="resetButton">Reset</a>
|
|
</div>
|
|
<div class="row" id="video-content">
|
|
<div class="col-6">
|
|
<video id="video" width="450" height="320" style="border: 1px solid gray"></video>
|
|
</div>
|
|
|
|
<div class="col-2" id="sourceSelectPanel" style="display:none">
|
|
<label for="sourceSelect">Change video source:</label>
|
|
<select id="sourceSelect" style="max-width:400px">
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-2">
|
|
<label>Result:</label>
|
|
<pre><code id="result"></code></pre>
|
|
<ul id="barcode-list"></ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
function beep() {
|
|
var audio = new Audio("{% static 'sound/beep.mp3' %}");
|
|
audio.volume = 0.1
|
|
console.log("Audio play {% static 'sound/beep.mp3' %}")
|
|
audio.play();
|
|
}
|
|
|
|
// check compatibility
|
|
if (!('BarcodeDetector' in window)) {
|
|
console.log('Barcode Detector is not supported by this browser.');
|
|
} else {
|
|
console.log('Barcode Detector supported!');
|
|
|
|
// create new detector
|
|
// var barcodeDetector = new BarcodeDetector({formats: ['code_128', 'code_39', 'code_93', 'codabar', 'data_matrix', 'ean_13', 'ean_8', 'qr_code', 'upc_a', 'upc_e']});
|
|
var barcodeDetector = new BarcodeDetector({formats: ['code_128', 'ean_13']});
|
|
console.log('Supported code formats:');
|
|
BarcodeDetector.getSupportedFormats().then(supportedFormats => {
|
|
supportedFormats.forEach(format => console.log(format));
|
|
});
|
|
console.log('end-of-format-list');
|
|
}
|
|
|
|
async function detect() {
|
|
const mediaStream = await navigator.mediaDevices.getUserMedia({
|
|
video: {facingMode: 'environment'}
|
|
});
|
|
const video = document.getElementById('video');
|
|
// const video = document.createElement('video');
|
|
let itemsFound = [];
|
|
|
|
video.srcObject = mediaStream;
|
|
video.autoplay = true;
|
|
const list = document.getElementById('barcode-list');
|
|
// list.before(video);
|
|
|
|
function render() {
|
|
barcodeDetector
|
|
.detect(video)
|
|
.then(barcodes => {
|
|
barcodes.forEach(barcode => {
|
|
if (!itemsFound.includes(barcode.rawValue)) {
|
|
itemsFound.push(barcode.rawValue);
|
|
const li = document.createElement('li');
|
|
li.innerHTML = barcode.rawValue;
|
|
list.appendChild(li);
|
|
console.log('Got scan ' + barcode.rawValue);
|
|
}
|
|
});
|
|
// beep();
|
|
})
|
|
.catch(console.error);
|
|
}
|
|
|
|
(function renderLoop() {
|
|
requestAnimationFrame(renderLoop);
|
|
render();
|
|
})();
|
|
}
|
|
|
|
window.addEventListener('load', function () {
|
|
detect();
|
|
document.getElementById('resetButton').addEventListener('click', () => {
|
|
document.getElementById('result').textContent = '';
|
|
codeReader.reset();
|
|
console.log('Reset.')
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<hr />
|
|
<div class="row mb-3">
|
|
<div class="col-8">
|
|
<div class="input-group">
|
|
<input class="form-control" type="text" maxlength="40" id="container_id" placeholder="Container ID">
|
|
<input class="form-control" type="text" maxlength="40" id="asset_id" placeholder="Asset ID">
|
|
</div>
|
|
</div>
|
|
<div class="col-2">
|
|
<div class="input-group">
|
|
<input class="btn btn-primary" id="book-in-button" type="button" value="+Book">
|
|
<input class="btn btn-primary" id="book-out-button" type="button" value="-Book">
|
|
</div>
|
|
</div>
|
|
<div class="col-8">
|
|
<div class="input-group">
|
|
<textarea class="form-control" readonly="readonly" rows="4" id="container_details"></textarea>
|
|
<textarea class="form-control" readonly="readonly" rows="4" id="asset_details"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="input-group">
|
|
<textarea class="form-control mb-2" id="chat-log" cols="100" rows="10"></textarea>
|
|
<input class="btn btn-secondary" id="clear-chat-area" type="button" value="Clear">
|
|
</div>
|
|
</div>
|
|
<script>
|
|
var containerIsValid = false;
|
|
var assetIsValid = false;
|
|
|
|
async function getContainerInfo(containerId) {
|
|
document.querySelector('#container_id').value = containerId;
|
|
url = '/api/containers?named_id=' + containerId;
|
|
document.querySelector('#container_details').value = 'Trying ' + url;
|
|
const response = await fetch(url);
|
|
const container = await response.json();
|
|
if (container.count >= 1) {
|
|
document.querySelector('#container_details').value = container.results[0].description;
|
|
containerIsValid = true;
|
|
} else {
|
|
document.querySelector('#container_details').value = document.querySelector('#container_details').value + "\nERROR: No result\n";
|
|
console.log(response);
|
|
containerIsValid = false;
|
|
}
|
|
}
|
|
|
|
async function getAssetInfo(assetId) {
|
|
document.querySelector('#asset_id').value = assetId;
|
|
url = '/api/assets?named_id=' + assetId;
|
|
document.querySelector('#asset_details').value = 'Trying ' + url;
|
|
const response = await fetch(url);
|
|
const asset = await response.json();
|
|
if (asset.count >= 1) {
|
|
document.querySelector('#asset_details').value = asset.results[0].description;
|
|
assetIsValid = true;
|
|
} else {
|
|
document.querySelector('#asset_details').value = document.querySelector('#asset_details').value + "\nERROR: No result\n";
|
|
console.log(response);
|
|
assetIsValid = false;
|
|
}
|
|
}
|
|
|
|
function useScannedText(msg) {
|
|
// const data = JSON.parse(e.data);
|
|
// msg = String(data.message);
|
|
document.querySelector('#chat-log').value += (msg + '\n');
|
|
if (msg.startsWith('C-')) {
|
|
getContainerInfo(data.message);
|
|
// document.querySelector('#container_id').value = msg;
|
|
} else if (msg.startsWith('A-')) {
|
|
getAssetInfo(data.message);
|
|
// document.querySelector('#asset_id').value = msg;
|
|
} else {
|
|
assetId = 'A-' + msg;
|
|
document.querySelector('#asset_id').value = assetId;
|
|
getAssetInfo(assetId);
|
|
}
|
|
};
|
|
|
|
document.querySelector('#clear-chat-area').onclick = function(e) {
|
|
document.querySelector('#chat-log').value = "cleared\n";
|
|
}
|
|
|
|
document.querySelector('#book-in-button').onclick = function(e) {
|
|
if (!containerIsValid) {
|
|
msg = 'Cannot book-in as container is invalid';
|
|
console.log(msg);
|
|
document.querySelector('#chat-log').value += ('ERROR: ' + msg + '\n');
|
|
return;
|
|
}
|
|
if (!assetIsValid) {
|
|
msg = 'Cannot book-in as asset is invalid';
|
|
console.log(msg);
|
|
document.querySelector('#chat-log').value += ('ERROR: ' + msg + '\n');
|
|
return;
|
|
}
|
|
}
|
|
|
|
document.querySelector('#book-out-button').onclick = function(e) {
|
|
if (!containerIsValid) {
|
|
msg = 'Cannot book-out as container is invalid';
|
|
console.log(msg);
|
|
document.querySelector('#chat-log').value += ('ERROR: ' + msg + '\n');
|
|
return;
|
|
}
|
|
if (!assetIsValid) {
|
|
msg = 'Cannot book-out as asset is invalid';
|
|
console.log(msg);
|
|
document.querySelector('#chat-log').value += ('ERROR: ' + msg + '\n');
|
|
return;
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
{% endblock %}
|