Added v1.0.0-beta.1 examples
Christoph Oberhofer
9 years ago
parent
32463b3e51
commit
6d05be3a44
@ -0,0 +1,86 @@
|
||||
---
|
||||
layout: examples
|
||||
title: Demo with file-input
|
||||
showInMenu: false
|
||||
---
|
||||
|
||||
|
||||
<section id="container" class="container">
|
||||
<h3>Working with file-input</h3>
|
||||
<p>This example let's you select an image from your local filesystem.
|
||||
There is no server interaction needed as the file is
|
||||
simply accessed through the
|
||||
<a href="http://www.w3.org/TR/file-upload/">File API</a>.
|
||||
<p>This also works great on a wide range of mobile-phones where the
|
||||
camera access through <code>getUserMedia</code> is still very
|
||||
limited. </p>
|
||||
<p>If the default configuration does not suit your use-case, you can
|
||||
adjust various parameters of the localization and decoding process.</p>
|
||||
<div class="controls">
|
||||
<fieldset class="input-group">
|
||||
<input type="file" accept="image/*;capture=camera"/>
|
||||
<button>Rerun</button>
|
||||
</fieldset>
|
||||
<fieldset class="reader-config-group">
|
||||
<label>
|
||||
<span>Barcode-Type</span>
|
||||
<select name="decoder_readers">
|
||||
<option value="code_128" selected="selected">Code 128</option>
|
||||
<option value="code_39">Code 39</option>
|
||||
<option value="code_39_vin">Code 39 VIN</option>
|
||||
<option value="ean">EAN</option>
|
||||
<option value="ean_extended">EAN-extended</option>
|
||||
<option value="ean_8">EAN-8</option>
|
||||
<option value="upc">UPC</option>
|
||||
<option value="upc_e">UPC-E</option>
|
||||
<option value="codabar">Codabar</option>
|
||||
<option value="i2of5">ITF</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>Resolution (long side)</span>
|
||||
<select name="input-stream_size">
|
||||
<option value="320">320px</option>
|
||||
<option value="640">640px</option>
|
||||
<option selected="selected" value="800">800px</option>
|
||||
<option value="1280">1280px</option>
|
||||
<option value="1600">1600px</option>
|
||||
<option value="1920">1920px</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>Patch-Size</span>
|
||||
<select name="locator_patch-size">
|
||||
<option value="x-small">x-small</option>
|
||||
<option value="small">small</option>
|
||||
<option selected="selected" value="medium">medium</option>
|
||||
<option value="large">large</option>
|
||||
<option value="x-large">x-large</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>Half-Sample</span>
|
||||
<input type="checkbox" name="locator_half-sample" />
|
||||
</label>
|
||||
<label>
|
||||
<span>Workers</span>
|
||||
<select name="numOfWorkers">
|
||||
<option value="0">0</option>
|
||||
<option value="1" selected="selected">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="4">4</option>
|
||||
<option value="8">8</option>
|
||||
</select>
|
||||
</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div id="result_strip">
|
||||
<ul class="thumbnails"></ul>
|
||||
</div>
|
||||
<div id="interactive" class="viewport">
|
||||
<canvas class="drawing" />
|
||||
</div>
|
||||
</section>
|
||||
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
|
||||
<script src="js/quagga.min.js" type="text/javascript"></script>
|
||||
<script src="file_input.js" type="text/javascript"></script>
|
||||
@ -0,0 +1,185 @@
|
||||
$(function() {
|
||||
var App = {
|
||||
init: function() {
|
||||
this.overlay = document.querySelector('#interactive canvas.drawing');
|
||||
App.attachListeners();
|
||||
},
|
||||
attachListeners: function() {
|
||||
var self = this;
|
||||
|
||||
$(".controls input[type=file]").on("change", function(e) {
|
||||
if (e.target.files && e.target.files.length) {
|
||||
App.decode(e.target.files[0]);
|
||||
}
|
||||
});
|
||||
|
||||
$(".controls button").on("click", function(e) {
|
||||
var input = document.querySelector(".controls input[type=file]");
|
||||
if (input.files && input.files.length) {
|
||||
App.decode(input.files[0]);
|
||||
}
|
||||
});
|
||||
|
||||
$(".controls .reader-config-group").on("change", "input, select", function(e) {
|
||||
e.preventDefault();
|
||||
var $target = $(e.target),
|
||||
value = $target.attr("type") === "checkbox" ? $target.prop("checked") : $target.val(),
|
||||
name = $target.attr("name"),
|
||||
state = self._convertNameToState(name);
|
||||
|
||||
console.log("Value of "+ state + " changed to " + value);
|
||||
self.setState(state, value);
|
||||
});
|
||||
|
||||
},
|
||||
_accessByPath: function(obj, path, val) {
|
||||
var parts = path.split('.'),
|
||||
depth = parts.length,
|
||||
setter = (typeof val !== "undefined") ? true : false;
|
||||
|
||||
return parts.reduce(function(o, key, i) {
|
||||
if (setter && (i + 1) === depth) {
|
||||
o[key] = val;
|
||||
}
|
||||
return key in o ? o[key] : {};
|
||||
}, obj);
|
||||
},
|
||||
_convertNameToState: function(name) {
|
||||
return name.replace("_", ".").split("-").reduce(function(result, value) {
|
||||
return result + value.charAt(0).toUpperCase() + value.substring(1);
|
||||
});
|
||||
},
|
||||
detachListeners: function() {
|
||||
$(".controls input[type=file]").off("change");
|
||||
$(".controls .reader-config-group").off("change", "input, select");
|
||||
$(".controls button").off("click");
|
||||
|
||||
},
|
||||
decode: function(file) {
|
||||
this.detachListeners();
|
||||
var scanner = Quagga
|
||||
.config(this.state)
|
||||
.fromSource(file, {size: this.state.inputStream.size});
|
||||
scanner
|
||||
.toPromise()
|
||||
.then(function(result) {
|
||||
addToResults(scanner, result);
|
||||
return result;
|
||||
})
|
||||
.catch(function(result) {
|
||||
console.log('Not found', result);
|
||||
return result;
|
||||
})
|
||||
.then(function(result) {
|
||||
drawResult(scanner, result);
|
||||
this.attachListeners();
|
||||
}.bind(this));
|
||||
},
|
||||
setState: function(path, value) {
|
||||
var self = this;
|
||||
|
||||
if (typeof self._accessByPath(self.inputMapper, path) === "function") {
|
||||
value = self._accessByPath(self.inputMapper, path)(value);
|
||||
}
|
||||
|
||||
self._accessByPath(self.state, path, value);
|
||||
|
||||
console.log(JSON.stringify(self.state));
|
||||
App.detachListeners();
|
||||
App.init();
|
||||
},
|
||||
inputMapper: {
|
||||
inputStream: {
|
||||
size: function(value){
|
||||
return parseInt(value);
|
||||
}
|
||||
},
|
||||
numOfWorkers: function(value) {
|
||||
return parseInt(value);
|
||||
},
|
||||
decoder: {
|
||||
readers: function(value) {
|
||||
if (value === 'ean_extended') {
|
||||
return [{
|
||||
format: "ean_reader",
|
||||
config: {
|
||||
supplements: [
|
||||
'ean_5_reader', 'ean_2_reader'
|
||||
]
|
||||
}
|
||||
}];
|
||||
}
|
||||
return [{
|
||||
format: value + "_reader",
|
||||
config: {}
|
||||
}];
|
||||
}
|
||||
}
|
||||
},
|
||||
state: {
|
||||
inputStream: {
|
||||
size: 800
|
||||
},
|
||||
locator: {
|
||||
patchSize: "medium",
|
||||
halfSample: false
|
||||
},
|
||||
numOfWorkers: 1,
|
||||
decoder: {
|
||||
readers: [{
|
||||
format: "code_128_reader",
|
||||
config: {}
|
||||
}]
|
||||
},
|
||||
locate: true,
|
||||
src: null
|
||||
}
|
||||
};
|
||||
|
||||
App.init();
|
||||
|
||||
function drawResult(scanner, result) {
|
||||
var processingCanvas = scanner.getCanvas(),
|
||||
canvas = App.overlay,
|
||||
ctx = canvas.getContext("2d");
|
||||
|
||||
canvas.setAttribute('width', processingCanvas.getAttribute('width'));
|
||||
canvas.setAttribute('height', processingCanvas.getAttribute('height'));
|
||||
|
||||
if (result) {
|
||||
if (result.boxes) {
|
||||
ctx.clearRect(0, 0, parseInt(canvas.getAttribute("width")), parseInt(canvas.getAttribute("height")));
|
||||
result.boxes.filter(function (box) {
|
||||
return box !== result.box;
|
||||
}).forEach(function (box) {
|
||||
Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, ctx, {color: "green", lineWidth: 2});
|
||||
});
|
||||
}
|
||||
|
||||
if (result.box) {
|
||||
Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, ctx, {color: "#00F", lineWidth: 2});
|
||||
}
|
||||
|
||||
if (result.codeResult && result.codeResult.code) {
|
||||
Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, ctx, {color: 'red', lineWidth: 3});
|
||||
}
|
||||
|
||||
if (App.state.inputStream.area) {
|
||||
var area = calculateRectFromArea(canvas, App.state.inputStream.area);
|
||||
drawingCtx.strokeStyle = "#0F0";
|
||||
drawingCtx.strokeRect(area.x, area.y, area.width, area.height);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function addToResults(scanner, result) {
|
||||
var code = result.codeResult.code,
|
||||
$node,
|
||||
canvas = scanner.getCanvas();
|
||||
|
||||
$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(code);
|
||||
$("#result_strip ul.thumbnails").prepend($node);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,29 @@
|
||||
---
|
||||
layout: default
|
||||
title: Examples
|
||||
showInMenu: true
|
||||
---
|
||||
|
||||
Examples
|
||||
========
|
||||
|
||||
The following examples showcase some of the features offered by QuaggaJS.
|
||||
|
||||
## Using static image files
|
||||
|
||||
[This example](static_images.html) shows the capabilities of QuaggaJS using images taken under various conditions.
|
||||
|
||||
[   ](static_images.html)
|
||||
|
||||
## Using the live-stream from your webcam
|
||||
|
||||
This is the preferred mode of using QuaggaJS. [This example](live_w_locator.html) demonstrates the real-time decoding capabilities of QuaggaJS by using your
|
||||
webcam as a barcode-scanner.
|
||||
|
||||
[](live_w_locator.html)
|
||||
|
||||
## Using the File API
|
||||
|
||||
Instead of directly accessing the user's webcam, [this example](file_input.html) shows you how to use QuaggaJS with the HTML5 File API to decode a pre-taken image.
|
||||
|
||||
[](file_input.html)
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,81 @@
|
||||
---
|
||||
layout: examples
|
||||
title: Demo with live-stream
|
||||
showInMenu: false
|
||||
---
|
||||
|
||||
<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.</p>
|
||||
<p>The various options available allow you to adjust the decoding
|
||||
process to your needs (Type of barcode, resolution, ...)</p>
|
||||
<div class="controls">
|
||||
<fieldset class="input-group">
|
||||
<button class="stop">Stop</button>
|
||||
</fieldset>
|
||||
<fieldset class="reader-config-group">
|
||||
<label>
|
||||
<span>Barcode-Type</span>
|
||||
<select name="decoder_readers">
|
||||
<option value="code_128" selected="selected">Code 128</option>
|
||||
<option value="code_39">Code 39</option>
|
||||
<option value="code_39_vin">Code 39 VIN</option>
|
||||
<option value="ean">EAN</option>
|
||||
<option value="ean_extended">EAN-extended</option>
|
||||
<option value="ean_8">EAN-8</option>
|
||||
<option value="upc">UPC</option>
|
||||
<option value="upc_e">UPC-E</option>
|
||||
<option value="codabar">Codabar</option>
|
||||
<option value="i2of5">I2of5</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>Resolution (long side)</span>
|
||||
<select name="input-stream_constraints">
|
||||
<option value="320x240">320px</option>
|
||||
<option selected="selected" value="640x480">640px</option>
|
||||
<option value="800x600">800px</option>
|
||||
<option value="1280x720">1280px</option>
|
||||
<option value="1600x960">1600px</option>
|
||||
<option value="1920x1080">1920px</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>Patch-Size</span>
|
||||
<select name="locator_patch-size">
|
||||
<option value="x-small">x-small</option>
|
||||
<option value="small">small</option>
|
||||
<option selected="selected" value="medium">medium</option>
|
||||
<option value="large">large</option>
|
||||
<option value="x-large">x-large</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>Half-Sample</span>
|
||||
<input type="checkbox" checked="checked" name="locator_half-sample" />
|
||||
</label>
|
||||
<label>
|
||||
<span>Workers</span>
|
||||
<select name="numOfWorkers">
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option selected="selected" value="2">2</option>
|
||||
<option value="8">8</option>
|
||||
</select>
|
||||
</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div id="result_strip">
|
||||
<ul class="thumbnails"></ul>
|
||||
</div>
|
||||
<div id="interactive" class="viewport">
|
||||
<canvas class="drawing" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
|
||||
<script src="js/quagga.min.js" type="text/javascript"></script>
|
||||
<script src="live_w_locator.js" type="text/javascript"></script>
|
||||
@ -0,0 +1,180 @@
|
||||
$(function() {
|
||||
var App = {
|
||||
init : function() {
|
||||
this.overlay = document.querySelector('#interactive canvas.drawing');
|
||||
|
||||
this.scanner = Quagga
|
||||
.fromConfig(this.state);
|
||||
|
||||
this.scanner
|
||||
.addEventListener("processed", drawResult.bind(this, this.scanner))
|
||||
.addEventListener("detected", addToResults.bind(this, this.scanner));
|
||||
|
||||
this.scanner.start()
|
||||
.then(function (){
|
||||
console.log("started");
|
||||
this.attachListeners();
|
||||
}.bind(this))
|
||||
.catch(function(err) {
|
||||
console.log("Error: " + err);
|
||||
});
|
||||
},
|
||||
attachListeners: function() {
|
||||
var self = this;
|
||||
|
||||
$(".controls").on("click", "button.stop", function(e) {
|
||||
e.preventDefault();
|
||||
this.detachListeners();
|
||||
this.scanner.stop();
|
||||
this.scanner.removeEventListener();
|
||||
}.bind(this));
|
||||
|
||||
$(".controls .reader-config-group").on("change", "input, select", function(e) {
|
||||
e.preventDefault();
|
||||
var $target = $(e.target),
|
||||
value = $target.attr("type") === "checkbox" ? $target.prop("checked") : $target.val(),
|
||||
name = $target.attr("name"),
|
||||
state = self._convertNameToState(name);
|
||||
|
||||
console.log("Value of "+ state + " changed to " + value);
|
||||
self.setState(state, value);
|
||||
});
|
||||
},
|
||||
_accessByPath: function(obj, path, val) {
|
||||
var parts = path.split('.'),
|
||||
depth = parts.length,
|
||||
setter = (typeof val !== "undefined") ? true : false;
|
||||
|
||||
return parts.reduce(function(o, key, i) {
|
||||
if (setter && (i + 1) === depth) {
|
||||
o[key] = val;
|
||||
}
|
||||
return key in o ? o[key] : {};
|
||||
}, obj);
|
||||
},
|
||||
_convertNameToState: function(name) {
|
||||
return name.replace("_", ".").split("-").reduce(function(result, value) {
|
||||
return result + value.charAt(0).toUpperCase() + value.substring(1);
|
||||
});
|
||||
},
|
||||
detachListeners: function() {
|
||||
$(".controls").off("click", "button.stop");
|
||||
$(".controls .reader-config-group").off("change", "input, select");
|
||||
},
|
||||
setState: function(path, value) {
|
||||
var self = this;
|
||||
|
||||
if (typeof self._accessByPath(self.inputMapper, path) === "function") {
|
||||
value = self._accessByPath(self.inputMapper, path)(value);
|
||||
}
|
||||
|
||||
self._accessByPath(self.state, path, value);
|
||||
|
||||
console.log(JSON.stringify(self.state));
|
||||
this.detachListeners();
|
||||
this.scanner.stop();
|
||||
this.scanner.removeEventListener();
|
||||
this.init();
|
||||
},
|
||||
inputMapper: {
|
||||
inputStream: {
|
||||
constraints: function(value){
|
||||
var values = value.split('x');
|
||||
return {
|
||||
width: parseInt(values[0]),
|
||||
height: parseInt(values[1])
|
||||
}
|
||||
}
|
||||
},
|
||||
numOfWorkers: function(value) {
|
||||
return parseInt(value);
|
||||
},
|
||||
decoder: {
|
||||
readers: function(value) {
|
||||
if (value === 'ean_extended') {
|
||||
return [{
|
||||
format: "ean_reader",
|
||||
config: {
|
||||
supplements: [
|
||||
'ean_5_reader', 'ean_2_reader'
|
||||
]
|
||||
}
|
||||
}];
|
||||
}
|
||||
return [{
|
||||
format: value + "_reader",
|
||||
config: {}
|
||||
}];
|
||||
}
|
||||
}
|
||||
},
|
||||
state: {
|
||||
inputStream: {
|
||||
type : "LiveStream",
|
||||
constraints: {
|
||||
width: 640,
|
||||
height: 480,
|
||||
facingMode: "environment" // or user
|
||||
}
|
||||
},
|
||||
locator: {
|
||||
patchSize: "medium",
|
||||
halfSample: true
|
||||
},
|
||||
numOfWorkers: 2,
|
||||
frequency: 10,
|
||||
decoder: {
|
||||
readers : [{
|
||||
format: "code_128_reader",
|
||||
config: {}
|
||||
}]
|
||||
},
|
||||
locate: true
|
||||
},
|
||||
lastResult : null
|
||||
};
|
||||
|
||||
App.init();
|
||||
|
||||
function drawResult(scanner, result) {
|
||||
var processingCanvas = scanner.getCanvas(),
|
||||
canvas = App.overlay,
|
||||
ctx = canvas.getContext("2d");
|
||||
|
||||
canvas.setAttribute('width', processingCanvas.getAttribute('width'));
|
||||
canvas.setAttribute('height', processingCanvas.getAttribute('height'));
|
||||
|
||||
if (result) {
|
||||
if (result.boxes) {
|
||||
ctx.clearRect(0, 0, parseInt(canvas.getAttribute("width")), parseInt(canvas.getAttribute("height")));
|
||||
result.boxes.filter(function (box) {
|
||||
return box !== result.box;
|
||||
}).forEach(function (box) {
|
||||
Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, ctx, {color: "green", lineWidth: 2});
|
||||
});
|
||||
}
|
||||
|
||||
if (result.box) {
|
||||
Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, ctx, {color: "#00F", lineWidth: 2});
|
||||
}
|
||||
|
||||
if (result.codeResult && result.codeResult.code) {
|
||||
Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, ctx, {color: 'red', lineWidth: 3});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function addToResults(scanner, result) {
|
||||
var code = result.codeResult.code,
|
||||
$node,
|
||||
canvas = scanner.getCanvas();
|
||||
|
||||
if (App.lastResult !== code) {
|
||||
App.lastResult = code;
|
||||
$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(code);
|
||||
$("#result_strip ul.thumbnails").prepend($node);
|
||||
}
|
||||
};
|
||||
});
|
||||
@ -0,0 +1,47 @@
|
||||
---
|
||||
layout: examples
|
||||
title: Demo with sample images
|
||||
showInMenu: false
|
||||
---
|
||||
|
||||
|
||||
<section id="container" class="container">
|
||||
<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. You can also switch between different test-sets,
|
||||
depending on the barcode-type.
|
||||
</p>
|
||||
<div class="controls">
|
||||
<fieldset class="input-group">
|
||||
<button class="next">Next</button>
|
||||
</fieldset>
|
||||
<fieldset class="reader-config-group">
|
||||
<span>Barcode-Type</span>
|
||||
<select name="decoder_readers;input-stream_src">
|
||||
<option value="code_128" selected="selected">Code 128</option>
|
||||
<option value="code_39">Code 39</option>
|
||||
<option value="ean">EAN</option>
|
||||
<option value="ean_extended">EAN-extended</option>
|
||||
<option value="ean_8">EAN-8</option>
|
||||
<option value="upc">UPC</option>
|
||||
<option value="upc_e">UPC-E</option>
|
||||
<option value="codabar">Codabar</option>
|
||||
<option value="i2of5">I2of5</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div id="result_strip">
|
||||
<ul class="thumbnails"></ul>
|
||||
</div>
|
||||
<div id="interactive" class="viewport">
|
||||
<canvas class="drawing" />
|
||||
</div>
|
||||
</section>
|
||||
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
|
||||
<script src="js/quagga.min.js" type="text/javascript"></script>
|
||||
<script>
|
||||
site = {baseurl: "{{ site.baseurl }}"};
|
||||
</script>
|
||||
<script src="static_images.js" type="text/javascript"></script>
|
||||
@ -0,0 +1,183 @@
|
||||
$(function() {
|
||||
var App = {
|
||||
init: function() {
|
||||
this.overlay = document.querySelector('#interactive canvas.drawing');
|
||||
var config = this.config[this.state.decoder.readers[0].format] || this.config.default;
|
||||
config = $.extend(true, {}, config, this.state);
|
||||
|
||||
this.scanner = Quagga
|
||||
.fromConfig(config);
|
||||
|
||||
this.scanner
|
||||
.addEventListener("processed", drawResult.bind(this, this.scanner))
|
||||
.addEventListener("detected", addToResults.bind(this, this.scanner));
|
||||
|
||||
this.scanner.start().then(function() {
|
||||
console.log("Started");
|
||||
this.attachListeners();
|
||||
}.bind(this));
|
||||
},
|
||||
config: {
|
||||
"default": {
|
||||
inputStream: { name: "Test",
|
||||
type: "ImageStream",
|
||||
length: 10,
|
||||
size: 800
|
||||
},
|
||||
locator: {
|
||||
patchSize: "medium",
|
||||
halfSample: true
|
||||
}
|
||||
},
|
||||
"i2of5_reader": {
|
||||
inputStream: {
|
||||
size: 800,
|
||||
type: "ImageStream",
|
||||
length: 5
|
||||
},
|
||||
locator: {
|
||||
patchSize: "small",
|
||||
halfSample: false
|
||||
}
|
||||
}
|
||||
},
|
||||
attachListeners: function() {
|
||||
var self = this;
|
||||
|
||||
$(".controls").on("click", "button.next", function(e) {
|
||||
e.preventDefault();
|
||||
self.scanner.start();
|
||||
});
|
||||
|
||||
$(".controls .reader-config-group").on("change", "input, select", function(e) {
|
||||
e.preventDefault();
|
||||
var $target = $(e.target),
|
||||
value = $target.attr("type") === "checkbox" ? $target.prop("checked") : $target.val(),
|
||||
name = $target.attr("name"),
|
||||
states = self._convertNameToStates(name);
|
||||
|
||||
console.log("Value of "+ states + " changed to " + value);
|
||||
self.setState(states, value);
|
||||
});
|
||||
},
|
||||
detachListeners: function() {
|
||||
$(".controls").off("click", "button.next");
|
||||
$(".controls .reader-config-group").off("change", "input, select");
|
||||
},
|
||||
_accessByPath: function(obj, path, val) {
|
||||
var parts = path.split('.'),
|
||||
depth = parts.length,
|
||||
setter = (typeof val !== "undefined") ? true : false;
|
||||
|
||||
return parts.reduce(function(o, key, i) {
|
||||
if (setter && (i + 1) === depth) {
|
||||
o[key] = val;
|
||||
}
|
||||
return key in o ? o[key] : {};
|
||||
}, obj);
|
||||
},
|
||||
_convertNameToStates: function(names) {
|
||||
return names.split(";").map(this._convertNameToState.bind(this));
|
||||
},
|
||||
_convertNameToState: function(name) {
|
||||
return name.replace("_", ".").split("-").reduce(function(result, value) {
|
||||
return result + value.charAt(0).toUpperCase() + value.substring(1);
|
||||
});
|
||||
},
|
||||
setState: function(paths, value) {
|
||||
var self = this;
|
||||
|
||||
paths.forEach(function(path) {
|
||||
var mappedValue;
|
||||
if (typeof self._accessByPath(self.inputMapper, path) === "function") {
|
||||
mappedValue = self._accessByPath(self.inputMapper, path)(value);
|
||||
}
|
||||
self._accessByPath(self.state, path, mappedValue);
|
||||
});
|
||||
|
||||
console.log(JSON.stringify(self.state));
|
||||
App.detachListeners();
|
||||
this.scanner.stop();
|
||||
this.scanner.removeEventListener();
|
||||
App.init();
|
||||
},
|
||||
inputMapper: {
|
||||
decoder: {
|
||||
readers: function(value) {
|
||||
if (value === 'ean_extended') {
|
||||
return [{
|
||||
format: "ean_reader",
|
||||
config: {
|
||||
supplements: [
|
||||
'ean_5_reader', 'ean_2_reader'
|
||||
]
|
||||
}
|
||||
}];
|
||||
}
|
||||
return [{
|
||||
format: value + "_reader",
|
||||
config: {}
|
||||
}];
|
||||
}
|
||||
},
|
||||
inputStream: {
|
||||
src: function(value) {
|
||||
return site.baseurl + "/test/fixtures/" + value + "/"
|
||||
}
|
||||
}
|
||||
},
|
||||
state: {
|
||||
inputStream: {
|
||||
src: "../../test/fixtures/code_128/"
|
||||
},
|
||||
numOfWorkers: 1,
|
||||
decoder : {
|
||||
readers : [{
|
||||
format: "code_128_reader",
|
||||
config: {}
|
||||
}]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
App.init();
|
||||
|
||||
function drawResult(scanner, result) {
|
||||
var processingCanvas = scanner.getCanvas(),
|
||||
canvas = App.overlay,
|
||||
ctx = canvas.getContext("2d");
|
||||
|
||||
canvas.setAttribute('width', processingCanvas.getAttribute('width'));
|
||||
canvas.setAttribute('height', processingCanvas.getAttribute('height'));
|
||||
|
||||
if (result) {
|
||||
if (result.boxes) {
|
||||
ctx.clearRect(0, 0, parseInt(canvas.getAttribute("width")), parseInt(canvas.getAttribute("height")));
|
||||
result.boxes.filter(function (box) {
|
||||
return box !== result.box;
|
||||
}).forEach(function (box) {
|
||||
Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, ctx, {color: "green", lineWidth: 2});
|
||||
});
|
||||
}
|
||||
|
||||
if (result.box) {
|
||||
Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, ctx, {color: "#00F", lineWidth: 2});
|
||||
}
|
||||
|
||||
if (result.codeResult && result.codeResult.code) {
|
||||
Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, ctx, {color: 'red', lineWidth: 3});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function addToResults(scanner, result) {
|
||||
var code = result.codeResult.code,
|
||||
$node,
|
||||
canvas = scanner.getCanvas();
|
||||
|
||||
$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(code);
|
||||
$("#result_strip ul.thumbnails").prepend($node);
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue