Improved EAN Reading; Added extended configuration to live examples

shiftcars · Apr 28, 2015 · badf9d0 · badf9d0
1 parent c31ed9c
commit badf9d0
Show file tree

Hide file tree

Showing 6 changed files with 146 additions and 43 deletions.
diff --git a/dist/quagga.js b/dist/quagga.js
@@ -1274,7 +1274,7 @@ define(
 
         EANReader.prototype._findEnd = function(offset, isWhite) {
             var self = this,
-                endInfo = self._findPattern(self.STOP_PATTERN, offset, isWhite);
+                endInfo = self._findPattern(self.STOP_PATTERN, offset, isWhite, false);
 
             return self._verifyTrailingWhitespace(endInfo);
         };
@@ -1303,7 +1303,7 @@ define(
                 }
             }
 
-            code = self._findPattern(self.MIDDLE_PATTERN, code.end, true);
+            code = self._findPattern(self.MIDDLE_PATTERN, code.end, true, false);
             if (code === null) {
                 return null;
             }

diff --git a/dist/quagga.min.js b/dist/quagga.min.js
diff --git a/example/file_input.js b/example/file_input.js
@@ -3,9 +3,6 @@ $(function() {
         init: function() {
             App.attachListeners();
         },
-        config: {
-            reader: "upc"
-        },
         attachListeners: function() {
             var self = this;
 

diff --git a/example/live_w_locator.html b/example/live_w_locator.html
@@ -26,24 +26,60 @@ <h3>The user's camera</h3>
             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="stop">Stop</button>
-        <fieldset class="reader-group">
-            <label>EAN-8</label>
-            <input type="radio" name="reader" value="ean_8" checked />
-            <label>UPC</label>
-            <input type="radio" name="reader" value="upc" />
-            <label>Code39</label>
-            <input type="radio" name="reader" value="codabar" />
-            <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" />
-        </fieldset>
-        <br clear="all" />
-      </div>
+        <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">Code 128</option>
+                        <option value="code_39">Code 39</option>
+                        <option value="ean" selected="selected">EAN</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>
+                    </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="4">4</option>
+                        <option value="8">8</option>
+                    </select>
+                </label>
+            </fieldset>
+        </div>
       <div id="result_strip">
         <ul class="thumbnails"></ul>
       </div>

diff --git a/example/live_w_locator.js b/example/live_w_locator.js
@@ -1,33 +1,103 @@
 $(function() {
     var App = {
         init : function() {
-            Quagga.init({
-                inputStream : {
-                    name : "Live",
-                    type : "LiveStream"
-                },
-                decoder : {
-                    readers : ["ean_8_reader"]
-                }
-            }, function() {
+            Quagga.init(this.state, function() {
                 App.attachListeners();
                 Quagga.start();
             });
         },
-        attachListeners : function() {
-            $(".controls .reader-group").on("change", "input", function(e) {
-                e.preventDefault();
-                Quagga.setReaders([e.target.value + "_reader"]);
-            });
+        attachListeners: function() {
+            var self = this;
 
             $(".controls").on("click", "button.stop", function(e) {
                 e.preventDefault();
                 Quagga.stop();
             });
+
+            $(".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 .reader-group").off("change", "input");
+        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));
+            App.detachListeners();
+            Quagga.stop();
+            App.init();
+        },
+        inputMapper: {
+            inputStream: {
+                constraints: function(value){
+                    var values = value.split('x');
+                    return {
+                        width: parseInt(values[0]),
+                        height: parseInt(values[1]),
+                        facing: "environment"
+                    }
+                }
+            },
+            numOfWorkers: function(value) {
+                return parseInt(value);
+            },
+            decoder: {
+                readers: function(value) {
+                    return [value + "_reader"];
+                }
+            }
+        },
+        state: {
+            inputStream: {
+                type : "LiveStream",
+                constraints: {
+                    width: 640,
+                    height: 480,
+                    facing: "environment" // or user
+                }
+            },
+            locator: {
+                patchSize: "medium",
+                halfSample: true
+            },
+            numOfWorkers: 4,
+            decoder: {
+                readers : ["ean_reader"]
+            },
+            locate: true
         },
         lastResult : null
     };

diff --git a/src/ean_reader.js b/src/ean_reader.js
@@ -201,7 +201,7 @@ define(
 
         EANReader.prototype._findEnd = function(offset, isWhite) {
             var self = this,
-                endInfo = self._findPattern(self.STOP_PATTERN, offset, isWhite);
+                endInfo = self._findPattern(self.STOP_PATTERN, offset, isWhite, false);
 
             return self._verifyTrailingWhitespace(endInfo);
         };
@@ -230,7 +230,7 @@ define(
                 }
             }
 
-            code = self._findPattern(self.MIDDLE_PATTERN, code.end, true);
+            code = self._findPattern(self.MIDDLE_PATTERN, code.end, true, false);
             if (code === null) {
                 return null;
             }