Added scan-to-input example
Christoph Oberhofer
9 years ago
parent
b44dd76a07
commit
6c3772eda3
@ -1,16 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
/* LESS - http://lesscss.org style sheet */
|
|
||||||
/* Palette color codes */
|
|
||||||
/* Palette URL: http://paletton.com/#uid=31g0q0kHZAviRSkrHLOGomVNzac */
|
|
||||||
/* Feel free to copy&paste color codes to your application */
|
|
||||||
/* MIXINS */
|
|
||||||
/* As hex codes */
|
|
||||||
/* Main Primary color */
|
|
||||||
/* Main Secondary color (1) */
|
|
||||||
/* Main Secondary color (2) */
|
|
||||||
/* As RGBa codes */
|
|
||||||
/* Main Primary color */
|
|
||||||
/* Main Secondary color (1) */
|
|
||||||
/* Main Secondary color (2) */
|
|
||||||
/* Generated by Paletton.com ├é┬® 2002-2014 */
|
|
||||||
/* http://paletton.com */
|
|
||||||
@ -1 +1,31 @@
|
|||||||
@import url("http://fonts.googleapis.com/css?family=Ubuntu:400,700|Cabin+Condensed:400,600");
|
@import url("https://fonts.googleapis.com/css?family=Ubuntu:400,700|Cabin+Condensed:400,600");
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'icomoon';
|
||||||
|
src: url('../fonts/icomoon.eot?tad2ln');
|
||||||
|
src: url('../fonts/icomoon.eot?tad2ln#iefix') format('embedded-opentype'),
|
||||||
|
url('../fonts/icomoon.ttf?tad2ln') format('truetype'),
|
||||||
|
url('../fonts/icomoon.woff?tad2ln') format('woff'),
|
||||||
|
url('../fonts/icomoon.svg?tad2ln#icomoon') format('svg');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class^="icon-"], [class*=" icon-"] {
|
||||||
|
/* use !important to prevent issues with browser extensions that change fonts */
|
||||||
|
font-family: 'icomoon' !important;
|
||||||
|
speak: none;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: normal;
|
||||||
|
font-variant: normal;
|
||||||
|
text-transform: none;
|
||||||
|
line-height: 1;
|
||||||
|
|
||||||
|
/* Better Font Rendering =========== */
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-barcode:before {
|
||||||
|
content: "\e937";
|
||||||
|
}
|
||||||
|
|||||||
@ -0,0 +1,99 @@
|
|||||||
|
/*
|
||||||
|
|
||||||
|
Original highlight.js style (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
.hljs {
|
||||||
|
display: block;
|
||||||
|
overflow-x: auto;
|
||||||
|
padding: 0.5em;
|
||||||
|
background: #F0F0F0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Base color: saturation 0; */
|
||||||
|
|
||||||
|
.hljs,
|
||||||
|
.hljs-subst {
|
||||||
|
color: #444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-comment {
|
||||||
|
color: #888888;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-keyword,
|
||||||
|
.hljs-attribute,
|
||||||
|
.hljs-selector-tag,
|
||||||
|
.hljs-meta-keyword,
|
||||||
|
.hljs-doctag,
|
||||||
|
.hljs-name {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* User color: hue: 0 */
|
||||||
|
|
||||||
|
.hljs-type,
|
||||||
|
.hljs-string,
|
||||||
|
.hljs-number,
|
||||||
|
.hljs-selector-id,
|
||||||
|
.hljs-selector-class,
|
||||||
|
.hljs-quote,
|
||||||
|
.hljs-template-tag,
|
||||||
|
.hljs-deletion {
|
||||||
|
color: #880000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-title,
|
||||||
|
.hljs-section {
|
||||||
|
color: #880000;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-regexp,
|
||||||
|
.hljs-symbol,
|
||||||
|
.hljs-variable,
|
||||||
|
.hljs-template-variable,
|
||||||
|
.hljs-link,
|
||||||
|
.hljs-selector-attr,
|
||||||
|
.hljs-selector-pseudo {
|
||||||
|
color: #BC6060;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Language color: hue: 90; */
|
||||||
|
|
||||||
|
.hljs-literal {
|
||||||
|
color: #78A960;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-built_in,
|
||||||
|
.hljs-bullet,
|
||||||
|
.hljs-code,
|
||||||
|
.hljs-addition {
|
||||||
|
color: #397300;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Meta color: hue: 200 */
|
||||||
|
|
||||||
|
.hljs-meta {
|
||||||
|
color: #1f7199;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-meta-string {
|
||||||
|
color: #4d99bf;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Misc effects */
|
||||||
|
|
||||||
|
.hljs-emphasis {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-strong {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
Binary file not shown.
@ -0,0 +1,11 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<metadata>Generated by IcoMoon</metadata>
|
||||||
|
<defs>
|
||||||
|
<font id="icomoon" horiz-adv-x="1024">
|
||||||
|
<font-face units-per-em="1024" ascent="960" descent="-64" />
|
||||||
|
<missing-glyph horiz-adv-x="1024" />
|
||||||
|
<glyph unicode=" " horiz-adv-x="512" d="" />
|
||||||
|
<glyph unicode="" glyph-name="barcode" d="M0 832h128v-640h-128zM192 832h64v-640h-64zM320 832h64v-640h-64zM512 832h64v-640h-64zM768 832h64v-640h-64zM960 832h64v-640h-64zM640 832h32v-640h-32zM448 832h32v-640h-32zM864 832h32v-640h-32zM0 128h64v-64h-64zM192 128h64v-64h-64zM320 128h64v-64h-64zM640 128h64v-64h-64zM960 128h64v-64h-64zM768 128h128v-64h-128zM448 128h128v-64h-128z" />
|
||||||
|
</font></defs></svg>
|
||||||
|
After Width: | Height: | Size: 821 B |
Binary file not shown.
Binary file not shown.
@ -0,0 +1,85 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||||
|
|
||||||
|
<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="../css/highlight-default.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">
|
||||||
|
<h3>Scan barcode to input-field</h3>
|
||||||
|
<p>Click the <strong>button</strong> next to the input-field
|
||||||
|
to start scanning an <strong>EAN-13</strong> barcode</p>
|
||||||
|
<div>
|
||||||
|
<form>
|
||||||
|
<div class="input-field">
|
||||||
|
<label for="isbn_input">ISBN:</label>
|
||||||
|
<input id="isbn_input" class="isbn" type="text" />
|
||||||
|
<button type="button" class="icon-barcode button scan"> </button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<p>An overlay will pop-up showing the users's back-facing
|
||||||
|
camera if access is granted.</p>
|
||||||
|
<div className="source-code">
|
||||||
|
<h4>Source</h4>
|
||||||
|
<pre>
|
||||||
|
<code class="javascript">
|
||||||
|
|
||||||
|
var scanner = Quagga
|
||||||
|
.decoder({readers: ['ean_reader']})
|
||||||
|
.locator({patchSize: 'medium'})
|
||||||
|
.fromVideo({
|
||||||
|
target: '.overlay__content',
|
||||||
|
constraints: {
|
||||||
|
width: 800,
|
||||||
|
height: 600,
|
||||||
|
facingMode: "environment"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelector('.input-field input + button.scan')
|
||||||
|
.addEventListener("click", function onClick(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.target.removeEventListener("click", onClick);
|
||||||
|
|
||||||
|
// Start scanning
|
||||||
|
scanner.addEventListener('detected', function detected(result) {
|
||||||
|
// show result and stop scanner
|
||||||
|
document.querySelector('input.isbn').value = result.codeResult.code;
|
||||||
|
scanner.stop();
|
||||||
|
scanner.removeEventListener('detected', detected);
|
||||||
|
}).start();
|
||||||
|
});
|
||||||
|
|
||||||
|
</code>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<footer>
|
||||||
|
<p>
|
||||||
|
© Copyright by Christoph Oberhofer
|
||||||
|
</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="../../dist/quagga.js" type="text/javascript"></script>
|
||||||
|
<script src="index.js" type="text/javascript"></script>
|
||||||
|
<script src="../vendor/highlight.pack.js"></script>
|
||||||
|
<script>hljs.initHighlightingOnLoad();</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,78 @@
|
|||||||
|
var Quagga = window.Quagga;
|
||||||
|
var App = {
|
||||||
|
_scanner: null,
|
||||||
|
init: function() {
|
||||||
|
this.attachListeners();
|
||||||
|
},
|
||||||
|
activateScanner: function() {
|
||||||
|
var scanner = this.configureScanner('.overlay__content'),
|
||||||
|
onDetected = function (result) {
|
||||||
|
document.querySelector('input.isbn').value = result.codeResult.code;
|
||||||
|
stop();
|
||||||
|
}.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);
|
||||||
|
scanner.addEventListener('detected', onDetected).start();
|
||||||
|
},
|
||||||
|
attachListeners: function() {
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
document.querySelector('.input-field input + button.scan')
|
||||||
|
.addEventListener("click", function onClick(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.target.removeEventListener("click", onClick);
|
||||||
|
self.activateScanner();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
showOverlay: function(cancelCb) {
|
||||||
|
if (!this._overlay) {
|
||||||
|
var content = document.createElement('div'),
|
||||||
|
closeButton = document.createElement('div');
|
||||||
|
|
||||||
|
closeButton.appendChild(document.createTextNode('X'));
|
||||||
|
content.className = 'overlay__content';
|
||||||
|
closeButton.className = 'overlay__close';
|
||||||
|
this._overlay = document.createElement('div');
|
||||||
|
this._overlay.className = 'overlay';
|
||||||
|
this._overlay.appendChild(content);
|
||||||
|
content.appendChild(closeButton);
|
||||||
|
closeButton.addEventListener('click', function closeClick(e) {
|
||||||
|
e.target.removeEventListener('click', closeClick);
|
||||||
|
cancelCb();
|
||||||
|
});
|
||||||
|
document.body.appendChild(this._overlay);
|
||||||
|
} else {
|
||||||
|
var closeButton = document.querySelector('.overlay__close');
|
||||||
|
closeButton.addEventListener('click', cancelCb);
|
||||||
|
}
|
||||||
|
this._overlay.style.display = "block";
|
||||||
|
},
|
||||||
|
hideOverlay: function() {
|
||||||
|
if (this._overlay) {
|
||||||
|
this._overlay.style.display = "none";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
configureScanner: function(selector) {
|
||||||
|
if (!this._scanner) {
|
||||||
|
this._scanner = Quagga
|
||||||
|
.decoder({readers: ['ean_reader']})
|
||||||
|
.locator({patchSize: 'medium'})
|
||||||
|
.fromVideo({
|
||||||
|
target: selector,
|
||||||
|
constraints: {
|
||||||
|
width: 800,
|
||||||
|
height: 600,
|
||||||
|
facingMode: "environment"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return this._scanner;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
App.init();
|
||||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue