Improved versions of the examples-pages. Now including the possibility to switch between Code128 and EAN.

example/css/styles.css

@@ -33,43 +33,57 @@
   margin-left: -640px;
 }
 
-/* line 15, ../sass/_viewport.scss */
+/* line 16, ../sass/_viewport.scss */
+.controls .reader-group {
+  float: right;
+  border: none;
+}
+
+/* line 22, ../sass/_viewport.scss */
 #result_strip {
   margin: 10px 0;
   border-top: 1px solid #EEE;
   border-bottom: 1px solid #EEE;
   padding: 10px 0;
-  overflow: auto;
 }
-/* line 21, ../sass/_viewport.scss */
+/* line 28, ../sass/_viewport.scss */
 #result_strip ul.thumbnails {
   padding: 0;
   margin: 0;
   list-style-type: none;
+  width: auto;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
 }
-/* line 26, ../sass/_viewport.scss */
+/* line 37, ../sass/_viewport.scss */
 #result_strip ul.thumbnails > li {
-  float: left;
+  display: inline-block;
+  vertical-align: middle;
   width: 160px;
 }
-/* line 29, ../sass/_viewport.scss */
+/* line 41, ../sass/_viewport.scss */
 #result_strip ul.thumbnails > li .thumbnail {
   padding: 5px;
   margin: 4px;
   border: 1px dashed #CCC;
 }
-/* line 34, ../sass/_viewport.scss */
+/* line 46, ../sass/_viewport.scss */
 #result_strip ul.thumbnails > li .thumbnail img {
   max-width: 140px;
 }
-/* line 38, ../sass/_viewport.scss */
+/* line 49, ../sass/_viewport.scss */
+#result_strip ul.thumbnails > li .thumbnail .caption {
+  white-space: normal;
+}
+/* line 51, ../sass/_viewport.scss */
 #result_strip ul.thumbnails > li .thumbnail .caption h4 {
   text-align: center;
   word-wrap: break-word;
   height: 40px;
   margin: 0px;
 }
-/* line 48, ../sass/_viewport.scss */
+/* line 61, ../sass/_viewport.scss */
 #result_strip ul.thumbnails:after {
   content: "";
   display: table;

example/live_w_locator.html

@@ -22,11 +22,18 @@
     <section id="container" class="container">
         <h3>The user's camera</h3>
         <p>If your platform supports the <strong>getUserMedia</strong> API call, you can try the real-time locating and decoding features.
-            Simply allow the page to access your web-cam and point it to a barcode encoded with <strong>Code128</strong>.
+            Simply allow the page to access your web-cam and point it to a barcode. You can switch between <strong>Code128</strong>
+            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="next">Start/Continue</button>
+        <fieldset class="reader-group">
+            <label>Code128</label>
+            <input type="radio" name="reader" value="code_128" checked />
+            <label>EAN</label>
+            <input type="radio" name="reader" value="ean" />
+        </fieldset>
+        <br clear="all" />
       </div>
       <div id="result_strip">
         <ul class="thumbnails"></ul>

example/live_w_locator.js

@@ -1,28 +1,44 @@
 $(function() {
-    Quagga.init({
-        inputStream : {
-            name : "Live",
-            type : "LiveStream"
+    var App = {
+        init : function() {
+            Quagga.init({
+                inputStream : {
+                    name : "Live",
+                    type : "LiveStream"
+                },
+                decoder : {
+                    readers : ["code_128_reader"]
+                },
+                readyFunc : function() {
+                    App.attachListeners();
+                    Quagga.start();
+                }
+            });
         },
-        decoder : {
-            readers : ['code_128_reader']
+        attachListeners : function() {
+            $(".controls .reader-group").on("change", "input", function(e) {
+                e.preventDefault();
+                Quagga.setReaders([e.target.value + "_reader"]);
+            });
         },
-        readyFunc : function() {
-            Quagga.start();
+        detachListeners : function() {
+            $(".controls .reader-group").off("change", "input");
+        },
+        lastResult : null
+    };
+
+    App.init();
+
+    Quagga.onDetected(function(result) {
+        if (App.lastResult !== result) {
+            App.lastResult = result;
+            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.find("img").attr("src", canvas.toDataURL());
+            $node.find("h4.code").html(result);
+            $("#result_strip ul.thumbnails").prepend($node);
         }
     });
 
-    Quagga.onDetected(function(result) {
-        Quagga.stop();
-        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.find("img").attr("src", canvas.toDataURL());
-        $node.find("h4.code").html(result);
-        $("#result_strip ul.thumbnails").prepend($node);
-    });
-    
-    $(".controls").on("click", "button.next", function(e) {
-        Quagga.start();
-    });
-}); 
+});

example/sass/_viewport.scss

@@ -12,19 +12,31 @@
   }
 }
 
+.controls {
+  .reader-group {
+    float: right;
+    border: none;
+  }
+}
+
 #result_strip{
   margin: 10px 0;
   border-top: 1px solid #EEE;
   border-bottom: 1px solid #EEE;
   padding: 10px 0;
-  overflow: auto;
+  
   ul.thumbnails{
     padding: 0;
     margin: 0;
     list-style-type: none;
+    width: auto;
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
     
     & > li{
-      float: left;
+      display: inline-block;
+      vertical-align: middle;
       width: $videoWidth/4;
       .thumbnail{
         padding: 5px;
@@ -35,6 +47,7 @@
           max-width: $videoWidth/4 - 20px;
         }
         .caption{
+          white-space: normal;
           h4{
             text-align: center;
             word-wrap: break-word;

example/static_images.html

@@ -24,9 +24,18 @@
         <h3>Working with static images</h3>
         <p>This examples uses static image files as input which are loaded from the server on startup.
             The locating and decoding process takes place inside the browser.
-            Hit the <strong>next</strong> button to try a different image</p>
+            Hit the <strong>next</strong> button to try a different image. You can also switch between
+            two different test-sets. Each of those contains 10 images, demonstrating the capabilities of decoding
+            <strong>Code128</strong> and <strong>EAN</strong> encoded barcodes.
+        </p>
       <div class="controls">
         <button class="next">Next</button>
+        <fieldset class="reader-group">
+            <label>Code128</label>
+            <input type="radio" name="reader" value="code_128" checked />
+            <label>EAN</label>
+            <input type="radio" name="reader" value="ean" />
+        </fieldset>
       </div>
       <div id="result_strip">
         <ul class="thumbnails"></ul>

example/static_images.js

@@ -1,17 +1,46 @@
 $(function() {
-    Quagga.init({
-        inputStream: { name: "Test",
-           type: "ImageStream",
-           src: "/test/fixtures/code_128/",
-           length: 10
+    var App = {
+        init: function() {
+            Quagga.init({
+                inputStream: { name: "Test",
+                   type: "ImageStream",
+                   src: "/test/fixtures/" + App.config.reader + "/",
+                   length: App.config.length
+                },
+                decoder : {
+                    readers : [App.config.reader + "_reader"]
+                },
+                readyFunc : function() {
+                    App.attachListeners();
+                    Quagga.start();
+                }
+            });
         },
-        decoder : {
-            readers : ['code_128_reader']
+        config: {
+            reader: "code_128",
+            length: 10
         },
-        readyFunc : function() {
-            Quagga.start();
+        attachListeners: function() {
+            $(".controls").on("click", "button.next", function(e) {
+                e.preventDefault();
+                Quagga.start();
+            });
+            
+            $(".controls .reader-group").on("change", "input", function(e) {
+                e.preventDefault();
+                App.detachListeners();
+                Quagga.stop();
+                App.config.reader = e.target.value;
+                App.init();
+            });
+        },
+        detachListeners: function() {
+            $(".controls").off("click", "button.next");
+            $(".controls .reader-group").off("change", "input");
         }
-    });
+    };
+    
+    App.init();
 
     Quagga.onDetected(function(result) {
         var $node = null, canvas = Quagga.canvas.dom.image;
@@ -21,8 +50,4 @@ $(function() {
         $node.find("h4.code").html(result);
         $("#result_strip ul.thumbnails").prepend($node);
     });
-    
-    $(".controls").on("click", "button.next", function(e) {
-        Quagga.start();
-    });
 });