Fixed Events; Added example for multiple types of barcodes
Christoph Oberhofer
9 years ago
parent
be70d72e0b
commit
2f2ed46cf3
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,80 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||||
|
<meta name="mobile-web-app-capable" content="yes">
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
|
|
||||||
|
<title>index</title>
|
||||||
|
<meta name="description" content="" />
|
||||||
|
<meta name="author" content="Christoph Oberhofer" />
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="../css/fonts.css" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="../css/styles.css" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="../css/prism.css" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="headline">
|
||||||
|
<h1>QuaggaJS</h1>
|
||||||
|
<h2>An advanced barcode-scanner written in JavaScript</h2>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<section id="container" class="container">
|
||||||
|
<div class="controls">
|
||||||
|
<h3>Scan various barcodes continously</h3>
|
||||||
|
<button type="button" class="icon-barcode button scan">Start Scanning</button>
|
||||||
|
<div class="readers">
|
||||||
|
<label>
|
||||||
|
<span>EAN-13</span>
|
||||||
|
<input type="checkbox" checked name="ean_reader" />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<span>EAN-8</span>
|
||||||
|
<input type="checkbox" name="ean_8_reader" />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<span>UPC-E</span>
|
||||||
|
<input type="checkbox" name="upc_e_reader" />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<span>Code 39</span>
|
||||||
|
<input type="checkbox" checked name="code_39_reader" />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<span>Codabar</span>
|
||||||
|
<input type="checkbox" name="codabar_reader" />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<span>Code 128</span>
|
||||||
|
<input type="checkbox" checked name="code_128_reader" />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<span>Interleaved 2 of 5</span>
|
||||||
|
<input type="checkbox" name="i2of5_reader" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
Be aware that not all combinations play together nicely. Some
|
||||||
|
codes do not have a checksum (e.g. ITF).
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="overlay overlay--inline">
|
||||||
|
<div class="overlay__content">
|
||||||
|
<div class="overlay__close">X</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<ul class="results"></ul>
|
||||||
|
|
||||||
|
<script src="../../dist/quagga.js" type="text/javascript"></script>
|
||||||
|
<script src="index.js" type="text/javascript"></script>
|
||||||
|
<script src="../vendor/prism.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,96 @@
|
|||||||
|
var Quagga = window.Quagga;
|
||||||
|
var App = {
|
||||||
|
_lastResult: null,
|
||||||
|
init: function() {
|
||||||
|
this.attachListeners();
|
||||||
|
},
|
||||||
|
activateScanner: function() {
|
||||||
|
var scanner = this.configureScanner('.overlay__content'),
|
||||||
|
onDetected = function (result) {
|
||||||
|
this.addToResults(result);
|
||||||
|
}.bind(this),
|
||||||
|
stop = function() {
|
||||||
|
scanner.stop(); // should also clear all event-listeners?
|
||||||
|
scanner.removeEventListener('detected', onDetected);
|
||||||
|
this.hideOverlay();
|
||||||
|
this.attachListeners();
|
||||||
|
}.bind(this);
|
||||||
|
|
||||||
|
this.showOverlay(stop);
|
||||||
|
console.log("activateScanner");
|
||||||
|
scanner.addEventListener('detected', onDetected).start();
|
||||||
|
},
|
||||||
|
addToResults: function(result) {
|
||||||
|
if (this._lastResult === result.codeResult.code) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this._lastResult = result.codeResult.code;
|
||||||
|
var results = document.querySelector('ul.results'),
|
||||||
|
li = document.createElement('li'),
|
||||||
|
format = document.createElement('span'),
|
||||||
|
code = document.createElement('span');
|
||||||
|
|
||||||
|
li.className = "result";
|
||||||
|
format.className = "format";
|
||||||
|
code.className = "code";
|
||||||
|
|
||||||
|
li.appendChild(format);
|
||||||
|
li.appendChild(code);
|
||||||
|
|
||||||
|
format.appendChild(document.createTextNode(result.codeResult.format));
|
||||||
|
code.appendChild(document.createTextNode(result.codeResult.code));
|
||||||
|
|
||||||
|
results.insertBefore(li, results.firstChild);
|
||||||
|
},
|
||||||
|
attachListeners: function() {
|
||||||
|
var button = document.querySelector('button.scan'),
|
||||||
|
self = this;
|
||||||
|
|
||||||
|
button.addEventListener("click", function clickListener (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
button.removeEventListener("click", clickListener);
|
||||||
|
self.activateScanner();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
showOverlay: function(cancelCb) {
|
||||||
|
document.querySelector('.container .controls')
|
||||||
|
.classList.add('hide');
|
||||||
|
document.querySelector('.overlay--inline')
|
||||||
|
.classList.add('show');
|
||||||
|
var closeButton = document.querySelector('.overlay__close');
|
||||||
|
closeButton.addEventListener('click', function closeHandler() {
|
||||||
|
closeButton.removeEventListener("click", closeHandler);
|
||||||
|
cancelCb();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
hideOverlay: function() {
|
||||||
|
document.querySelector('.container .controls')
|
||||||
|
.classList.remove('hide');
|
||||||
|
document.querySelector('.overlay--inline')
|
||||||
|
.classList.remove('show');
|
||||||
|
},
|
||||||
|
querySelectedReaders: function() {
|
||||||
|
return Array.prototype.slice.call(document.querySelectorAll('.readers input[type=checkbox]'))
|
||||||
|
.filter(function(element) {
|
||||||
|
return !!element.checked;
|
||||||
|
})
|
||||||
|
.map(function(element) {
|
||||||
|
return element.getAttribute("name");
|
||||||
|
});
|
||||||
|
},
|
||||||
|
configureScanner: function(selector) {
|
||||||
|
var scanner = Quagga
|
||||||
|
.decoder({readers: this.querySelectedReaders()})
|
||||||
|
.locator({patchSize: 'medium'})
|
||||||
|
.fromVideo({
|
||||||
|
target: selector,
|
||||||
|
constraints: {
|
||||||
|
width: 600,
|
||||||
|
height: 600,
|
||||||
|
facingMode: "environment"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return scanner;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
App.init();
|
||||||
@ -0,0 +1,140 @@
|
|||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding-bottom: 0;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > header {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
header > .headline {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.headline h1, .headline h2 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.headline h2 {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > .container {
|
||||||
|
margin: 0;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
overflow-y: scroll;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Controls */
|
||||||
|
|
||||||
|
/* Scan! Button */
|
||||||
|
|
||||||
|
.icon-barcode.scan {
|
||||||
|
font-size: x-large;
|
||||||
|
padding: 0.5rem;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: block;
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-barcode.scan:before {
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Reader Checkboxes */
|
||||||
|
|
||||||
|
.controls .readers {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
width: 70%;
|
||||||
|
margin: 2rem auto 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls .readers label {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls .readers input {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
height: 1.5rem;
|
||||||
|
width: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls .readers span {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Results */
|
||||||
|
|
||||||
|
body > .results {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
background-color: #DDD;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0.25rem;
|
||||||
|
overflow-x: scroll;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
border-top: 1px solid #777;
|
||||||
|
}
|
||||||
|
|
||||||
|
.results > li {
|
||||||
|
flex: 0 1 auto;
|
||||||
|
margin: 0.25rem;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 2px;
|
||||||
|
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
|
||||||
|
}
|
||||||
|
|
||||||
|
.results:empty {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result > .format {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result > .code {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scanner */
|
||||||
|
|
||||||
|
.container .controls.hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay--inline {
|
||||||
|
position: absolute;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay--inline.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue