Merged master

example/css/styles.css

@@ -74,7 +74,7 @@
   padding: 10px 0;
 }
 /* line 50, ../sass/_viewport.scss */
-#result_strip ul.thumbnails {
+#result_strip > ul {
   padding: 0;
   margin: 0;
   list-style-type: none;
@@ -84,34 +84,34 @@
   white-space: nowrap;
 }
 /* line 59, ../sass/_viewport.scss */
-#result_strip ul.thumbnails > li {
+#result_strip > ul > li {
   display: inline-block;
   vertical-align: middle;
   width: 160px;
 }
 /* line 63, ../sass/_viewport.scss */
-#result_strip ul.thumbnails > li .thumbnail {
+#result_strip > ul > li .thumbnail {
   padding: 5px;
   margin: 4px;
   border: 1px dashed #CCC;
 }
 /* line 68, ../sass/_viewport.scss */
-#result_strip ul.thumbnails > li .thumbnail img {
+#result_strip > ul > li .thumbnail img {
   max-width: 140px;
 }
 /* line 71, ../sass/_viewport.scss */
-#result_strip ul.thumbnails > li .thumbnail .caption {
+#result_strip > ul > li .thumbnail .caption {
   white-space: normal;
 }
 /* line 73, ../sass/_viewport.scss */
-#result_strip ul.thumbnails > li .thumbnail .caption h4 {
+#result_strip > ul > li .thumbnail .caption h4 {
   text-align: center;
   word-wrap: break-word;
   height: 40px;
   margin: 0px;
 }
 /* line 83, ../sass/_viewport.scss */
-#result_strip ul.thumbnails:after {
+#result_strip > ul:after {
   content: "";
   display: table;
   clear: both;

example/file_input.html

@@ -77,14 +77,15 @@
                 <span>Half-Sample</span>
                 <input type="checkbox" name="locator_half-sample" />
             </label>
+            <label>
+                <span>Single Channel</span>
+                <input type="checkbox" name="input-stream_single-channel" />
+            </label>
             <label>
                 <span>Workers</span>
                 <select name="numOfWorkers">
-                    <option selected="selected" value="0">0</option>
-                    <option value="1">1</option>
-                    <option value="2">2</option>
-                    <option value="4">4</option>
-                    <option value="8">8</option>
+                    <option value="0">0</option>
+                    <option selected="selected" value="1">1</option>
                 </select>
             </label>
         </fieldset>

example/file_input.js

@@ -88,17 +88,16 @@ $(function() {
         },
         state: {
             inputStream: {
-                size: 640
+                size: 640,
+                singleChannel: false
             },
             locator: {
                 patchSize: "large",
                 halfSample: false
             },
-            numOfWorkers: 0,
+            numOfWorkers: 1,
             decoder: {
-                readers: ["code_128_reader"],
-                showFrequency: true,
-                showPattern: true
+                readers: ["code_128_reader"]
             },
             locate: true,
             src: null

example/file_input_require.html

@@ -68,24 +68,19 @@
                 <select name="locator_patch-size">
                     <option value="x-small">x-small</option>
                     <option value="small">small</option>
-                    <option value="medium">medium</option>
-                    <option selected="selected" value="large">large</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" />
+                <input type="checkbox" checked="checked"
+                       name="locator_half-sample" />
             </label>
             <label>
-                <span>Workers</span>
-                <select name="numOfWorkers">
-                    <option selected="selected" value="0">0</option>
-                    <option value="1">1</option>
-                    <option value="2">2</option>
-                    <option value="4">4</option>
-                    <option value="8">8</option>
-                </select>
+                <span>Single Channel</span>
+                <input type="checkbox" name="input-stream_single-channel" />
             </label>
         </fieldset>
     </div>

example/file_input_require.js

@@ -112,11 +112,12 @@ define(['quagga'], function(Quagga) {
         },
         state: {
             inputStream: {
-                size: 640
+                size: 640,
+                singleChannel: false
             },
             locator: {
-                patchSize: "large",
-                halfSample: false
+                patchSize: "medium",
+                halfSample: true
             },
             numOfWorkers: 0,
             decoder: {
@@ -162,7 +163,7 @@ define(['quagga'], function(Quagga) {
 
         $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);
+        $node.find("h4.code").html(code + " (" + result.codeResult.format + ")");
         $("#result_strip ul.thumbnails").prepend($node);
     });
 });

example/live_w_locator.html

@@ -82,6 +82,7 @@
         </div>
       <div id="result_strip">
         <ul class="thumbnails"></ul>
+        <ul class="collector"></ul>
       </div>
       <div id="interactive" class="viewport"></div>
     </section>

example/live_w_locator.js

@@ -1,17 +1,37 @@
 $(function() {
+    var resultCollector = Quagga.ResultCollector.create({
+        capture: true,
+        capacity: 20,
+        blacklist: [{code: "3574660239843", format: "ean_13"}],
+        filter: function(codeResult) {
+            // only store results which match this constraint
+            // e.g.: codeResult
+            return true;
+        }
+    });
     var App = {
         init : function() {
-            Quagga.init(this.state, function() {
+            var self = this;
+
+            Quagga.init(this.state, function(err) {
+                if (err) {
+                    return self.handleError(err);
+                }
+                Quagga.registerResultCollector(resultCollector);
                 App.attachListeners();
                 Quagga.start();
             });
         },
+        handleError: function(err) {
+            console.log(err);
+        },
         attachListeners: function() {
             var self = this;
 
             $(".controls").on("click", "button.stop", function(e) {
                 e.preventDefault();
                 Quagga.stop();
+                self._printCollectedResults();
             });
 
             $(".controls .reader-config-group").on("change", "input, select", function(e) {
@@ -25,6 +45,18 @@ $(function() {
                 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) {
             var parts = path.split('.'),
                 depth = parts.length,

example/sass/_viewport.scss

@@ -47,7 +47,7 @@
   border-bottom: 1px solid #EEE;
   padding: 10px 0;
   
-  ul.thumbnails{
+  & > ul {
     padding: 0;
     margin: 0;
     list-style-type: none;