Improved versions of the examples-pages. Now including the possibility to switch between Code128 and EAN.

pull/5/head
Christoph Oberhofer 11 years ago
parent 5e4c3aeb55
commit d806d48b0f

8
dist/quagga.js vendored

@ -6641,6 +6641,11 @@ define('barcode_decoder',["bresenham", "image_debug", 'code_128_reader', 'ean_re
return result;
}
}
},
setReaders: function(readers) {
config.readers = readers;
_barcodeReaders.length = 0;
initReaders();
}
};
}
@ -7175,6 +7180,9 @@ function(Code128Reader, EANReader, InputStream, ImageWrapper, BarcodeLocator, Ba
isInitialized : function() {
return _initialized;
},
setReaders: function(readers) {
_decoder.setReaders(readers);
},
canvas : _canvasContainer,
decodeSingle : function(config, resultCallback) {
config.inputStream = {

File diff suppressed because one or more lines are too long

@ -33,43 +33,57 @@
margin-left: -640px;
}
/* line 15, ../sass/_viewport.scss */
/* line 16, ../sass/_viewport.scss */
.controls .reader-group {
float: right;
border: none;
}
/* line 22, ../sass/_viewport.scss */
#result_strip {
margin: 10px 0;
border-top: 1px solid #EEE;
border-bottom: 1px solid #EEE;
padding: 10px 0;
overflow: auto;
}
/* line 21, ../sass/_viewport.scss */
/* line 28, ../sass/_viewport.scss */
#result_strip ul.thumbnails {
padding: 0;
margin: 0;
list-style-type: none;
width: auto;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
/* line 26, ../sass/_viewport.scss */
/* line 37, ../sass/_viewport.scss */
#result_strip ul.thumbnails > li {
float: left;
display: inline-block;
vertical-align: middle;
width: 160px;
}
/* line 29, ../sass/_viewport.scss */
/* line 41, ../sass/_viewport.scss */
#result_strip ul.thumbnails > li .thumbnail {
padding: 5px;
margin: 4px;
border: 1px dashed #CCC;
}
/* line 34, ../sass/_viewport.scss */
/* line 46, ../sass/_viewport.scss */
#result_strip ul.thumbnails > li .thumbnail img {
max-width: 140px;
}
/* line 38, ../sass/_viewport.scss */
/* line 49, ../sass/_viewport.scss */
#result_strip ul.thumbnails > li .thumbnail .caption {
white-space: normal;
}
/* line 51, ../sass/_viewport.scss */
#result_strip ul.thumbnails > li .thumbnail .caption h4 {
text-align: center;
word-wrap: break-word;
height: 40px;
margin: 0px;
}
/* line 48, ../sass/_viewport.scss */
/* line 61, ../sass/_viewport.scss */
#result_strip ul.thumbnails:after {
content: "";
display: table;

@ -22,11 +22,18 @@
<section id="container" class="container">
<h3>The user's camera</h3>
<p>If your platform supports the <strong>getUserMedia</strong> API call, you can try the real-time locating and decoding features.
Simply allow the page to access your web-cam and point it to a barcode encoded with <strong>Code128</strong>.
Simply allow the page to access your web-cam and point it to a barcode. You can switch between <strong>Code128</strong>
and <strong>EAN</strong> to test different scenarios.
It works best if your camera has built-in auto-focus.
</p>
<div class="controls">
<button class="next">Start/Continue</button>
<fieldset class="reader-group">
<label>Code128</label>
<input type="radio" name="reader" value="code_128" checked />
<label>EAN</label>
<input type="radio" name="reader" value="ean" />
</fieldset>
<br clear="all" />
</div>
<div id="result_strip">
<ul class="thumbnails"></ul>

@ -1,28 +1,44 @@
$(function() {
Quagga.init({
inputStream : {
name : "Live",
type : "LiveStream"
var App = {
init : function() {
Quagga.init({
inputStream : {
name : "Live",
type : "LiveStream"
},
decoder : {
readers : ["code_128_reader"]
},
readyFunc : function() {
App.attachListeners();
Quagga.start();
}
});
},
decoder : {
readers : ['code_128_reader']
attachListeners : function() {
$(".controls .reader-group").on("change", "input", function(e) {
e.preventDefault();
Quagga.setReaders([e.target.value + "_reader"]);
});
},
readyFunc : function() {
Quagga.start();
}
});
detachListeners : function() {
$(".controls .reader-group").off("change", "input");
},
lastResult : null
};
App.init();
Quagga.onDetected(function(result) {
Quagga.stop();
var $node = null, canvas = Quagga.canvas.dom.image;
if (App.lastResult !== result) {
App.lastResult = result;
var $node = null, canvas = Quagga.canvas.dom.image;
$node = $('<li><div class="thumbnail"><div class="imgWrapper"><img /></div><div class="caption"><h4 class="code"></h4></div></div></li>');
$node.find("img").attr("src", canvas.toDataURL());
$node.find("h4.code").html(result);
$("#result_strip ul.thumbnails").prepend($node);
});
$(".controls").on("click", "button.next", function(e) {
Quagga.start();
$node = $('<li><div class="thumbnail"><div class="imgWrapper"><img /></div><div class="caption"><h4 class="code"></h4></div></div></li>');
$node.find("img").attr("src", canvas.toDataURL());
$node.find("h4.code").html(result);
$("#result_strip ul.thumbnails").prepend($node);
}
});
});
});

@ -12,19 +12,31 @@
}
}
.controls {
.reader-group {
float: right;
border: none;
}
}
#result_strip{
margin: 10px 0;
border-top: 1px solid #EEE;
border-bottom: 1px solid #EEE;
padding: 10px 0;
overflow: auto;
ul.thumbnails{
padding: 0;
margin: 0;
list-style-type: none;
width: auto;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
& > li{
float: left;
display: inline-block;
vertical-align: middle;
width: $videoWidth/4;
.thumbnail{
padding: 5px;
@ -35,6 +47,7 @@
max-width: $videoWidth/4 - 20px;
}
.caption{
white-space: normal;
h4{
text-align: center;
word-wrap: break-word;

@ -24,9 +24,18 @@
<h3>Working with static images</h3>
<p>This examples uses static image files as input which are loaded from the server on startup.
The locating and decoding process takes place inside the browser.
Hit the <strong>next</strong> button to try a different image</p>
Hit the <strong>next</strong> button to try a different image. You can also switch between
two different test-sets. Each of those contains 10 images, demonstrating the capabilities of decoding
<strong>Code128</strong> and <strong>EAN</strong> encoded barcodes.
</p>
<div class="controls">
<button class="next">Next</button>
<fieldset class="reader-group">
<label>Code128</label>
<input type="radio" name="reader" value="code_128" checked />
<label>EAN</label>
<input type="radio" name="reader" value="ean" />
</fieldset>
</div>
<div id="result_strip">
<ul class="thumbnails"></ul>

@ -1,17 +1,46 @@
$(function() {
Quagga.init({
inputStream: { name: "Test",
type: "ImageStream",
src: "/test/fixtures/code_128/",
length: 10
var App = {
init: function() {
Quagga.init({
inputStream: { name: "Test",
type: "ImageStream",
src: "/test/fixtures/" + App.config.reader + "/",
length: App.config.length
},
decoder : {
readers : [App.config.reader + "_reader"]
},
readyFunc : function() {
App.attachListeners();
Quagga.start();
}
});
},
decoder : {
readers : ['code_128_reader']
config: {
reader: "code_128",
length: 10
},
readyFunc : function() {
Quagga.start();
attachListeners: function() {
$(".controls").on("click", "button.next", function(e) {
e.preventDefault();
Quagga.start();
});
$(".controls .reader-group").on("change", "input", function(e) {
e.preventDefault();
App.detachListeners();
Quagga.stop();
App.config.reader = e.target.value;
App.init();
});
},
detachListeners: function() {
$(".controls").off("click", "button.next");
$(".controls .reader-group").off("change", "input");
}
});
};
App.init();
Quagga.onDetected(function(result) {
var $node = null, canvas = Quagga.canvas.dom.image;
@ -21,8 +50,4 @@ $(function() {
$node.find("h4.code").html(result);
$("#result_strip ul.thumbnails").prepend($node);
});
$(".controls").on("click", "button.next", function(e) {
Quagga.start();
});
});

@ -238,6 +238,11 @@ define(["bresenham", "image_debug", 'code_128_reader', 'ean_reader'], function(B
return result;
}
}
},
setReaders: function(readers) {
config.readers = readers;
_barcodeReaders.length = 0;
initReaders();
}
};
}

@ -198,6 +198,9 @@ function(Code128Reader, EANReader, InputStream, ImageWrapper, BarcodeLocator, Ba
isInitialized : function() {
return _initialized;
},
setReaders: function(readers) {
_decoder.setReaders(readers);
},
canvas : _canvasContainer,
decodeSingle : function(config, resultCallback) {
config.inputStream = {

Loading…
Cancel
Save