Added result-collector; Relates to #48

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,6 +77,10 @@
                 <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">

example/file_input.js

@@ -88,11 +88,12 @@ $(function() {
         },
         state: {
             inputStream: {
-                size: 640
+                size: 640,
+                singleChannel: false
             },
             locator: {
-                patchSize: "large",
-                halfSample: false
+                patchSize: "medium",
+                halfSample: true
             },
             numOfWorkers: 0,
             decoder: {

example/file_input_require.html

@@ -77,6 +77,10 @@
                 <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">

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: {

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,7 +1,18 @@
 $(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() {
+                Quagga.registerResultCollector(resultCollector);
                 App.attachListeners();
                 Quagga.start();
             });
@@ -12,6 +23,7 @@ $(function() {
             $(".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 +37,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,
@@ -93,9 +117,9 @@ $(function() {
                 patchSize: "medium",
                 halfSample: true
             },
-            numOfWorkers: 4,
+            numOfWorkers: 1,
             decoder: {
-                readers : ["code_128_reader"]
+                readers : ["ean_reader"]
             },
             locate: true
         },

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;