Add barcode scanning
This commit is contained in:
@@ -24,6 +24,7 @@
|
||||
type="text/css" />
|
||||
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
||||
<script src="https://cdn.jsdelivr.net/npm/@ericblade/quagga2/dist/quagga.min.js"></script>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
@@ -8,35 +8,302 @@
|
||||
</div>
|
||||
<form action="/import" method="POST">
|
||||
<div class="modal-body">
|
||||
<!-- Mode Toggle -->
|
||||
<div class="mb-3">
|
||||
<div class="btn-group w-100" role="group">
|
||||
<input type="radio" class="btn-check" name="input-mode" id="manual-mode" checked>
|
||||
<label class="btn btn-outline-primary" for="manual-mode">Manual Entry</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="input-mode" id="scan-mode">
|
||||
<label class="btn btn-outline-primary" for="scan-mode">Scan Barcode</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Manual Entry -->
|
||||
<div id="manual-entry" class="mb-3">
|
||||
<label for="isbn" class="form-label">ISBN</label>
|
||||
<input type="text" class="form-control" id="isbn" name="isbn"
|
||||
placeholder="Enter ISBN-10 or ISBN-13"
|
||||
pattern="[0-9X\-]{10,17}"
|
||||
title="Enter a valid ISBN (10 or 13 digits, may contain hyphens)"
|
||||
required>
|
||||
<input type="text" class="form-control" id="isbn" name="isbn" placeholder="Enter ISBN-10 or ISBN-13"
|
||||
pattern="[0-9X\-]{10,17}" title="Enter a valid ISBN (10 or 13 digits, may contain hyphens)" required>
|
||||
<div class="form-text">
|
||||
Enter the ISBN (International Standard Book Number) to automatically fetch book details from Google Books.
|
||||
</div>
|
||||
</div>
|
||||
{% if session.get('viewing_as_user') %}
|
||||
<div class="mb-3">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="set-owner" name="set_owner" checked>
|
||||
<label class="form-check-label" for="set-owner">
|
||||
Set {{ session.get('viewing_as_user').title() }} as owner
|
||||
</label>
|
||||
|
||||
<!-- Barcode Scanner -->
|
||||
<div id="scanner-section" class="mb-3" style="display: none;">
|
||||
<div class="mb-3">
|
||||
<label for="camera-select" class="form-label">Camera</label>
|
||||
<select id="camera-select" class="form-select form-select-sm">
|
||||
<option value="">Loading cameras...</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div id="interactive" class="viewport"
|
||||
style="position: relative; width: 100%; max-width: 320px; height: 240px; margin: 0 auto; border: 1px solid #dee2e6; border-radius: 0.375rem; overflow: hidden;">
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<button type="button" id="start-scan-btn" class="btn btn-success btn-sm">Start Scanning</button>
|
||||
<button type="button" id="stop-scan-btn" class="btn btn-danger btn-sm" style="display: none;">Stop
|
||||
Scanning</button>
|
||||
</div>
|
||||
<div id="scan-status" class="text-muted small mt-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="bi bi-cloud-download me-1"></i> Import Book
|
||||
</button>
|
||||
{% if session.get('viewing_as_user') %}
|
||||
<div class="mb-3">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="set-owner" name="set_owner" checked>
|
||||
<label class="form-check-label" for="set-owner">
|
||||
Set {{ session.get('viewing_as_user').title() }} as owner
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="bi bi-cloud-download me-1"></i> Import Book
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* QuaggaJS viewport styling - overlay video and canvas */
|
||||
#interactive.viewport video,
|
||||
#interactive.viewport canvas {
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#interactive.viewport canvas {
|
||||
pointer-events: none;
|
||||
/* Allow interactions with video underneath */
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Simplified Barcode Scanner based on QuaggaJS example
|
||||
(function () {
|
||||
var isScanning = false;
|
||||
var currentDeviceId = null;
|
||||
|
||||
var manualMode = document.getElementById('manual-mode');
|
||||
var scanMode = document.getElementById('scan-mode');
|
||||
var manualEntry = document.getElementById('manual-entry');
|
||||
var scannerSection = document.getElementById('scanner-section');
|
||||
var cameraSelect = document.getElementById('camera-select');
|
||||
var startBtn = document.getElementById('start-scan-btn');
|
||||
var stopBtn = document.getElementById('stop-scan-btn');
|
||||
var status = document.getElementById('scan-status');
|
||||
var isbnInput = document.getElementById('isbn');
|
||||
|
||||
// QuaggaJS state - simplified from example
|
||||
var state = {
|
||||
inputStream: {
|
||||
type: "LiveStream",
|
||||
//target: document.querySelector('#scanner-canvas'),
|
||||
constraints: {
|
||||
width: { min: 320 },
|
||||
height: { min: 240 },
|
||||
facingMode: "environment"
|
||||
},
|
||||
},
|
||||
locator: {
|
||||
patchSize: "x-large",
|
||||
halfSample: true
|
||||
},
|
||||
frequency: 10,
|
||||
decoder: {
|
||||
readers: ["ean_reader"]
|
||||
},
|
||||
locate: true
|
||||
};
|
||||
|
||||
// Initialize camera list when scanner section is shown
|
||||
function initCameras() {
|
||||
console.log('Initializing camera list...');
|
||||
if (!navigator.mediaDevices?.getUserMedia) {
|
||||
status.textContent = 'Camera not supported on this browser';
|
||||
return;
|
||||
}
|
||||
|
||||
Quagga.CameraAccess.enumerateVideoDevices()
|
||||
.then(function (devices) {
|
||||
var currentDeviceId = cameraSelect.value;
|
||||
cameraSelect.innerHTML = '';
|
||||
if (devices.length === 0) {
|
||||
cameraSelect.innerHTML = '<option>No cameras found</option>';
|
||||
return;
|
||||
}
|
||||
|
||||
devices.forEach(function (device) {
|
||||
var option = document.createElement('option');
|
||||
option.value = device.deviceId || device.id;
|
||||
var label = device.label || ('Camera ' + (cameraSelect.children.length + 1));
|
||||
option.textContent = label.length > 30 ? label.substr(0, 30) + '...' : label;
|
||||
cameraSelect.appendChild(option);
|
||||
});
|
||||
|
||||
// Default to current or back camera if available
|
||||
if (currentDeviceId) {
|
||||
cameraSelect.value = currentDeviceId;
|
||||
} else {
|
||||
var backCamera = devices.find(d => d.label.toLowerCase().includes('back'));
|
||||
if (backCamera) {
|
||||
cameraSelect.value = backCamera.deviceId || backCamera.id;
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(function (err) {
|
||||
console.error('Camera enumeration failed:', err);
|
||||
cameraSelect.innerHTML = '<option>Camera access failed</option>';
|
||||
});
|
||||
}
|
||||
|
||||
function startScanning() {
|
||||
if (isScanning) return;
|
||||
|
||||
var selectedDeviceId = cameraSelect.value;
|
||||
//if (!selectedDeviceId) {
|
||||
// status.textContent = 'Please select a camera';
|
||||
// return;
|
||||
//}
|
||||
|
||||
status.textContent = 'Starting camera...';
|
||||
|
||||
// Update constraints with selected camera
|
||||
if (selectedDeviceId) {
|
||||
state.inputStream.constraints.deviceId = { exact: selectedDeviceId };
|
||||
}
|
||||
console.log('Starting Quagga with state:', state);
|
||||
|
||||
Quagga.init(state, function (err) {
|
||||
if (err) {
|
||||
console.error('Quagga init error:', err);
|
||||
status.textContent = 'Failed to start camera. Try a different camera.';
|
||||
return;
|
||||
}
|
||||
|
||||
isScanning = true;
|
||||
startBtn.style.display = 'none';
|
||||
stopBtn.style.display = 'inline-block';
|
||||
status.textContent = 'Point camera at barcode...';
|
||||
|
||||
initCameras();
|
||||
Quagga.start();
|
||||
});
|
||||
}
|
||||
|
||||
function stopScanning() {
|
||||
if (!isScanning) return;
|
||||
|
||||
isScanning = false;
|
||||
startBtn.style.display = 'inline-block';
|
||||
stopBtn.style.display = 'none';
|
||||
status.textContent = '';
|
||||
|
||||
try {
|
||||
Quagga.stop();
|
||||
} catch (e) {
|
||||
console.warn('Error stopping Quagga:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// Mode switching
|
||||
function switchToManual() {
|
||||
manualEntry.style.display = 'block';
|
||||
scannerSection.style.display = 'none';
|
||||
stopScanning();
|
||||
}
|
||||
|
||||
function switchToScanner() {
|
||||
manualEntry.style.display = 'none';
|
||||
scannerSection.style.display = 'block';
|
||||
//if (cameraSelect.children.length === 1 && cameraSelect.children[0].textContent === 'Loading cameras...') {
|
||||
// initCameras();
|
||||
//}
|
||||
}
|
||||
|
||||
// Event listeners
|
||||
manualMode.addEventListener('change', switchToManual);
|
||||
scanMode.addEventListener('change', switchToScanner);
|
||||
startBtn.addEventListener('click', startScanning);
|
||||
stopBtn.addEventListener('click', stopScanning);
|
||||
|
||||
// Camera selection change - restart scanning if active
|
||||
cameraSelect.addEventListener('change', function () {
|
||||
if (isScanning) {
|
||||
stopScanning();
|
||||
setTimeout(startScanning, 250);
|
||||
}
|
||||
});
|
||||
|
||||
// Barcode detection - simplified from example
|
||||
Quagga.onDetected(function (result) {
|
||||
var code = result.codeResult.code;
|
||||
console.log('Barcode detected:', code);
|
||||
|
||||
// Simple ISBN validation
|
||||
if (code && /^[0-9X]{10,13}$/.test(code)) {
|
||||
isbnInput.value = code;
|
||||
status.textContent = 'ISBN detected: ' + code;
|
||||
stopScanning();
|
||||
|
||||
// Switch back to manual mode
|
||||
manualMode.checked = true;
|
||||
switchToManual();
|
||||
}
|
||||
});
|
||||
|
||||
var processedCount = 0;
|
||||
Quagga.onProcessed(function (result) {
|
||||
processedCount++;
|
||||
//console.log('onProcessed #' + processedCount + ':', result ? {
|
||||
// hasBox: !!result.box,
|
||||
// boxLength: result.box ? result.box.length : 0,
|
||||
// hasBoxes: !!result.boxes,
|
||||
// boxesLength: result.boxes ? result.boxes.length : 0,
|
||||
// codeResult: !!result.codeResult
|
||||
//} : 'null result');
|
||||
var drawingCtx = Quagga.canvas.ctx.overlay,
|
||||
drawingCanvas = Quagga.canvas.dom.overlay;
|
||||
|
||||
if (result) {
|
||||
if (result.boxes) {
|
||||
drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
|
||||
result.boxes.filter(function (box) {
|
||||
return box !== result.box;
|
||||
}).forEach(function (box) {
|
||||
Quagga.ImageDebug.drawPath(box, { x: 0, y: 1 }, drawingCtx, { color: "orange", lineWidth: 2 });
|
||||
});
|
||||
}
|
||||
|
||||
if (result.box) {
|
||||
Quagga.ImageDebug.drawPath(result.box, { x: 0, y: 1 }, drawingCtx, { color: "#00F", lineWidth: 2 });
|
||||
}
|
||||
|
||||
if (result.codeResult && result.codeResult.code) {
|
||||
Quagga.ImageDebug.drawPath(result.line, { x: 'x', y: 'y' }, drawingCtx, { color: 'red', lineWidth: 3 });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Clean up on modal close
|
||||
document.getElementById('import-modal').addEventListener('hidden.bs.modal', function () {
|
||||
stopScanning();
|
||||
manualMode.checked = true;
|
||||
switchToManual();
|
||||
isbnInput.value = '';
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
Reference in New Issue
Block a user