Added static and live examples

examples/index.md

@@ -3,4 +3,7 @@ layout: default
 title: Examples
 ---
 
-# Examples
+# Examples
+
+- [Demo with sample images]({{ site.url }}/examples/static_images.html "Demo")
+- [Demo with live-stream]({{ site.url }}/examples/live_w_locator.html "Demo") using `getUserMedia`

examples/live_w_locator.html

@@ -0,0 +1,30 @@
+---
+layout: default
+title: Examples
+---
+
+<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. 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">
+    <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>
+  </div>
+  <div id="interactive" class="viewport"></div>
+</section>
+    
+<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
+<script src="https://raw.githubusercontent.com/serratus/quaggaJS/master/dist/quagga.js?token=ABUVvugjRdStIMzGkd_hFXxHvXL2s9geks5UYn1zwA%3D%3D" type="text/javascript"></script>
+<script src="live_w_locator.js" type="text/javascript"></script>

examples/live_w_locator.js

@@ -0,0 +1,44 @@
+$(function() {
+    var App = {
+        init : function() {
+            Quagga.init({
+                inputStream : {
+                    name : "Live",
+                    type : "LiveStream"
+                },
+                decoder : {
+                    readers : ["code_128_reader"]
+                },
+                readyFunc : function() {
+                    App.attachListeners();
+                    Quagga.start();
+                }
+            });
+        },
+        attachListeners : function() {
+            $(".controls .reader-group").on("change", "input", function(e) {
+                e.preventDefault();
+                Quagga.setReaders([e.target.value + "_reader"]);
+            });
+        },
+        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);
+        }
+    });
+
+});

examples/static_images.html

@@ -0,0 +1,36 @@
+---
+layout: default
+title: Examples
+---
+
+
+<section id="container" class="container">
+    <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. 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>
+  </div>
+  <div id="interactive" class="viewport"></div>
+</section>
+      <footer>
+    <p>
+      &copy; Copyright by Christoph Oberhofer
+    </p>
+  </footer>
+<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
+<script src="https://raw.githubusercontent.com/serratus/quaggaJS/master/dist/quagga.js?token=ABUVvugjRdStIMzGkd_hFXxHvXL2s9geks5UYn1zwA%3D%3D" type="text/javascript"></script>
+<script src="static_images.js" type="text/javascript"></script>

examples/static_images.js

@@ -0,0 +1,53 @@
+$(function() {
+    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();
+                }
+            });
+        },
+        config: {
+            reader: "code_128",
+            length: 10
+        },
+        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;
+
+        $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);
+    });
+});