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

Added advanced configuration

Browse Source
This commit is contained in:
Christoph Oberhofer
2015-04-25 17:57:21 +02:00
parent 36f75d2a95
commit f75da96040
12 changed files with 441 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/css/styles.css
+39 -10
View File
@@ -19,12 +19,14 @@
/* line 1, ../sass/_viewport.scss */
#interactive.viewport {
width: 640px;
height: 480px;
}
/* line 6, ../sass/_viewport.scss */
#interactive.viewport canvas, video {
float: left;
width: 640px;
height: 480px;
}
/* line 10, ../sass/_viewport.scss */
#interactive.viewport canvas.drawingBuffer, video.drawingBuffer {
@@ -32,19 +34,46 @@
}
/* line 16, ../sass/_viewport.scss */
.controls .reader-group {
float: right;
.controls fieldset {
border: none;
}
/* line 19, ../sass/_viewport.scss */
.controls .input-group {
float: left;
}
/* line 21, ../sass/_viewport.scss */
.controls .input-group input, .controls .input-group button {
display: block;
}
/* line 25, ../sass/_viewport.scss */
.controls .reader-config-group {
float: right;
}
/* line 28, ../sass/_viewport.scss */
.controls .reader-config-group label {
display: block;
}
/* line 30, ../sass/_viewport.scss */
.controls .reader-config-group label span {
width: 11rem;
display: inline-block;
text-align: right;
}
/* line 37, ../sass/_viewport.scss */
.controls:after {
content: '';
display: block;
clear: both;
}
/* line 22, ../sass/_viewport.scss */
/* line 44, ../sass/_viewport.scss */
#result_strip {
margin: 10px 0;
border-top: 1px solid #EEE;
border-bottom: 1px solid #EEE;
padding: 10px 0;
}
/* line 28, ../sass/_viewport.scss */
/* line 50, ../sass/_viewport.scss */
#result_strip ul.thumbnails {
padding: 0;
margin: 0;
@@ -54,34 +83,34 @@
overflow-y: hidden;
white-space: nowrap;
}
/* line 37, ../sass/_viewport.scss */
/* line 59, ../sass/_viewport.scss */
#result_strip ul.thumbnails > li {
display: inline-block;
vertical-align: middle;
width: 160px;
}
/* line 41, ../sass/_viewport.scss */
/* line 63, ../sass/_viewport.scss */
#result_strip ul.thumbnails > li .thumbnail {
padding: 5px;
margin: 4px;
border: 1px dashed #CCC;
}
/* line 46, ../sass/_viewport.scss */
/* line 68, ../sass/_viewport.scss */
#result_strip ul.thumbnails > li .thumbnail img {
max-width: 140px;
}
/* line 49, ../sass/_viewport.scss */
/* line 71, ../sass/_viewport.scss */
#result_strip ul.thumbnails > li .thumbnail .caption {
white-space: normal;
}
/* line 51, ../sass/_viewport.scss */
/* line 73, ../sass/_viewport.scss */
#result_strip ul.thumbnails > li .thumbnail .caption h4 {
text-align: center;
word-wrap: break-word;
height: 40px;
margin: 0px;
}
/* line 61, ../sass/_viewport.scss */
/* line 83, ../sass/_viewport.scss */
#result_strip ul.thumbnails:after {
content: "";
display: table;
example/file_input.html
+49 -8
View File
@@ -34,14 +34,55 @@
access through <code>getUserMedia</code> is still very limited.</p>
<div class="controls">
<input type="file" capture/>
<fieldset class="reader-group">
<label>Code128</label>
<input type="radio" name="reader" value="code_128"/>
<label>EAN</label>
<input type="radio" name="reader" value="ean"/>
<label>Code39</label>
<input type="radio" name="reader" value="code_39" checked/>
<fieldset class="input-group">
<input type="file" capture/>
<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="ean">EAN</option>
<option value="codabar">Codabar</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">
example/file_input.js
+85 -14
View File
@@ -4,35 +4,106 @@ $(function() {
App.attachListeners();
},
config: {
reader: "code_39",
reader: "code_128",
length: 10
},
attachListeners: function() {
var self = this;
$(".controls input[type=file]").on("change", function(e) {
if (e.target.files && e.target.files.length) {
App.decode(URL.createObjectURL(e.target.files[0]));
}
});
$(".controls .reader-group").on("change", "input", function(e) {
$(".controls button").on("click", function(e) {
var input = document.querySelector(".controls input[type=file]");
if (input.files && input.files.length) {
App.decode(URL.createObjectURL(input.files[0]));
}
});
$(".controls .reader-config-group").on("change", "input, select", function(e) {
e.preventDefault();
App.detachListeners();
App.config.reader = e.target.value;
App.init();
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-group").off("change", "input");
$(".controls .reader-config-group").off("change", "input, select");
$(".controls button").off("click");
},
decode: function(src) {
Quagga.decodeSingle({
decoder: {
readers : [App.config.reader + '_reader']
},
locate : true,
src : src
}, function(result) {});
var self = this,
config = $.extend({}, self.state, {src: src});
Quagga.decodeSingle(config, function(result) {});
},
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) {
return [value + "_reader"];
}
}
},
state: {
inputStream: {
size: 800
},
locator: {
patchSize: "medium",
halfSample: false
},
numOfWorkers: 1,
decoder: {
readers: ["code_128_reader"]
},
locate: true,
src: null
}
};
example/sass/_viewport.scss
+24 -2
View File
@@ -13,10 +13,32 @@
}
.controls {
.reader-group {
float: right;
fieldset {
border: none;
}
.input-group {
float: left;
input, button {
display: block;
}
}
.reader-config-group {
float: right;
label {
display: block;
span {
width: 11rem;
display: inline-block;
text-align: right;
}
}
}
&:after {
content:'';
display: block;
clear: both;
}
}
#result_strip{