UnknownObject/quaggaJS
1
0
Fork 0
mirror of https://github.com/serratus/quaggaJS.git synced 2026-08-12 21:21:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fixed live-view example

Browse Source
This commit is contained in:
Christoph Oberhofer
2016-07-30 11:43:18 +02:00
parent 2dca130bee
commit 31d2a086cd
3 changed files with 52 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/live_w_locator.html
+5 -3
View File
@@ -76,8 +76,8 @@
<select name="numOfWorkers"> <select name="numOfWorkers">
<option value="0">0</option> <option value="0">0</option>
<option value="1">1</option> <option value="1">1</option>
<option value="2">2</option> <option selected="selected" value="2">2</option>
<option selected="selected" value="4">4</option> <option value="4">4</option>
<option value="8">8</option> <option value="8">8</option>
</select> </select>
</label> </label>
@@ -87,7 +87,9 @@
<ul class="thumbnails"></ul> <ul class="thumbnails"></ul>
<ul class="collector"></ul> <ul class="collector"></ul>
</div> </div>
<div id="interactive" class="viewport"></div> <div id="interactive" class="viewport">
<canvas class="drawing" />
</div>
</section> </section>
<footer> <footer>
<p> <p>
example/live_w_locator.js
+45 -59
View File
@@ -1,38 +1,33 @@
$(function() { $(function() {
var resultCollector = Quagga.ResultCollector.create({
capture: true,
capacity: 20,
blacklist: [{code: "2167361334", format: "i2of5"}],
filter: function(codeResult) {
// only store results which match this constraint
// e.g.: codeResult
return true;
}
});
var App = { var App = {
init : function() { init : function() {
var self = this; this.overlay = document.querySelector('#interactive canvas.drawing');
Quagga.init(this.state, function(err) { this.scanner = Quagga
if (err) { .fromConfig(this.state);
return self.handleError(err);
} this.scanner
Quagga.registerResultCollector(resultCollector); .addEventListener("processed", drawResult.bind(this, this.scanner))
App.attachListeners(); .addEventListener("detected", addToResults.bind(this, this.scanner));
Quagga.start();
this.scanner.start()
.then(function (){
console.log("started");
this.attachListeners();
}.bind(this))
.catch(function(err) {
console.log("Error: " + err);
}); });
}, },
handleError: function(err) {
console.log(err);
},
attachListeners: function() { attachListeners: function() {
var self = this; var self = this;
$(".controls").on("click", "button.stop", function(e) { $(".controls").on("click", "button.stop", function(e) {
e.preventDefault(); e.preventDefault();
Quagga.stop(); this.detachListeners();
self._printCollectedResults(); this.scanner.stop();
}); this.scanner.removeEventListener();
}.bind(this));
$(".controls .reader-config-group").on("change", "input, select", function(e) { $(".controls .reader-config-group").on("change", "input, select", function(e) {
e.preventDefault(); e.preventDefault();
@@ -45,18 +40,6 @@ $(function() {
self.setState(state, value); self.setState(state, value);
}); });
}, },
_printCollectedResults: function() {
var results = resultCollector.getResults(),
$ul = $("#result_strip ul.collector");
results.forEach(function(result) {
var $li = $('<li><div class="thumbnail"><div class="imgWrapper"><img /></div><div class="caption"><h4 class="code"></h4></div></div></li>');
$li.find("img").attr("src", result.frame);
$li.find("h4.code").html(result.codeResult.code + " (" + result.codeResult.format + ")");
$ul.prepend($li);
});
},
_accessByPath: function(obj, path, val) { _accessByPath: function(obj, path, val) {
var parts = path.split('.'), var parts = path.split('.'),
depth = parts.length, depth = parts.length,
@@ -79,17 +62,16 @@ $(function() {
$(".controls .reader-config-group").off("change", "input, select"); $(".controls .reader-config-group").off("change", "input, select");
}, },
setState: function(path, value) { setState: function(path, value) {
var self = this; if (typeof this._accessByPath(this.inputMapper, path) === "function") {
value = this._accessByPath(this.inputMapper, path)(value);
if (typeof self._accessByPath(self.inputMapper, path) === "function") {
value = self._accessByPath(self.inputMapper, path)(value);
} }
self._accessByPath(self.state, path, value); this._accessByPath(this.state, path, value);
console.log(JSON.stringify(self.state)); console.log(JSON.stringify(this.state));
App.detachListeners(); this.detachListeners();
Quagga.stop(); this.scanner.stop();
this.scanner.removeEventListener();
App.init(); App.init();
}, },
inputMapper: { inputMapper: {
@@ -137,7 +119,8 @@ $(function() {
patchSize: "medium", patchSize: "medium",
halfSample: true halfSample: true
}, },
numOfWorkers: 4, numOfWorkers: 2,
frequency: 10,
decoder: { decoder: {
readers : [{ readers : [{
format: "code_128_reader", format: "code_128_reader",
@@ -151,42 +134,45 @@ $(function() {
App.init(); App.init();
Quagga.onProcessed(function(result) { function drawResult(scanner, result) {
var drawingCtx = Quagga.canvas.ctx.overlay, var processingCanvas = scanner.getCanvas(),
drawingCanvas = Quagga.canvas.dom.overlay; canvas = App.overlay,
ctx = canvas.getContext("2d");
canvas.setAttribute('width', processingCanvas.getAttribute('width'));
canvas.setAttribute('height', processingCanvas.getAttribute('height'));
if (result) { if (result) {
if (result.boxes) { if (result.boxes) {
drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height"))); ctx.clearRect(0, 0, parseInt(canvas.getAttribute("width")), parseInt(canvas.getAttribute("height")));
result.boxes.filter(function (box) { result.boxes.filter(function (box) {
return box !== result.box; return box !== result.box;
}).forEach(function (box) { }).forEach(function (box) {
Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, drawingCtx, {color: "green", lineWidth: 2}); Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, ctx, {color: "green", lineWidth: 2});
}); });
} }
if (result.box) { if (result.box) {
Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, drawingCtx, {color: "#00F", lineWidth: 2}); Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, ctx, {color: "#00F", lineWidth: 2});
} }
if (result.codeResult && result.codeResult.code) { if (result.codeResult && result.codeResult.code) {
Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, drawingCtx, {color: 'red', lineWidth: 3}); Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, ctx, {color: 'red', lineWidth: 3});
} }
} }
}); };
Quagga.onDetected(function(result) { function addToResults(scanner, result) {
var code = result.codeResult.code; var code = result.codeResult.code,
$node,
canvas = scanner.getCanvas();
if (App.lastResult !== code) { if (App.lastResult !== code) {
App.lastResult = code; App.lastResult = code;
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 = $('<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("img").attr("src", canvas.toDataURL());
$node.find("h4.code").html(code); $node.find("h4.code").html(code);
$("#result_strip ul.thumbnails").prepend($node); $("#result_strip ul.thumbnails").prepend($node);
} }
}); };
}); });
example/static_images.js
+2 -2
View File
@@ -12,10 +12,10 @@ $(function() {
.addEventListener("processed", drawResult.bind(this, this.scanner)) .addEventListener("processed", drawResult.bind(this, this.scanner))
.addEventListener("detected", addToResults.bind(this, this.scanner)); .addEventListener("detected", addToResults.bind(this, this.scanner));
this.scanner.start().then(() => { this.scanner.start().then(function() {
console.log("Started"); console.log("Started");
this.attachListeners(); this.attachListeners();
}); }.bind(this));
}, },
config: { config: {
"default": { "default": {