Added static and live examples

.gitignore

@@ -1 +1,3 @@
 _site
+node_modules/
+example/.sass-cache/

_config.yml

@@ -1,2 +1,5 @@
 name: QuaggaJS
 markdown: redcarpet
+
+
+exclude: [node_modules]

_layouts/default.html

@@ -6,6 +6,7 @@
     <title>QuaggaJS, an advanced barcode-reader written in JavaScript</title>
     
     <link rel="stylesheet" href="/stylesheets/styles.css">
+    <link rel="stylesheet" href="/stylesheets/example.css">
     <link rel="stylesheet" href="/stylesheets/pygment_trac.css">
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
     <!--[if lt IE 9]>

examples/index.md

@@ -4,3 +4,6 @@ title: 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);
+    });
+}); 

stylesheets/example.css

@@ -0,0 +1,149 @@
+@charset "UTF-8";
+/* usual styles */
+/* LESS - http://lesscss.org style sheet */
+/* Palette color codes */
+/* Palette URL: http://paletton.com/#uid=31g0q0kHZAviRSkrHLOGomVNzac */
+/* Feel free to copy&paste color codes to your application */
+/* MIXINS */
+/* As hex codes */
+/* Main Primary color */
+/* Main Secondary color (1) */
+/* Main Secondary color (2) */
+/* As RGBa codes */
+/* Main Primary color */
+/* Main Secondary color (1) */
+/* Main Secondary color (2) */
+/* Generated by Paletton.com ├é┬® 2002-2014 */
+/* http://paletton.com */
+/* line 1, ../sass/_viewport.scss */
+#interactive.viewport {
+  width: 640px;
+  height: 480px;
+}
+
+/* line 6, ../sass/_viewport.scss */
+#interactive.viewport canvas, video {
+  float: left;
+  width: 640px;
+  height: 480px;
+}
+/* line 10, ../sass/_viewport.scss */
+#interactive.viewport canvas.drawingBuffer, video.drawingBuffer {
+  margin-left: -640px;
+}
+
+/* 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;
+}
+/* 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 37, ../sass/_viewport.scss */
+#result_strip ul.thumbnails > li {
+  display: inline-block;
+  vertical-align: middle;
+  width: 160px;
+}
+/* line 41, ../sass/_viewport.scss */
+#result_strip ul.thumbnails > li .thumbnail {
+  padding: 5px;
+  margin: 4px;
+  border: 1px dashed #CCC;
+}
+/* line 46, ../sass/_viewport.scss */
+#result_strip ul.thumbnails > li .thumbnail img {
+  max-width: 140px;
+}
+/* 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 61, ../sass/_viewport.scss */
+#result_strip ul.thumbnails:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+@media (min-width: 604px) and (max-width: 1024px) {
+  /* tablet styles */
+}
+@media (max-width: 603px) {
+  /* line 2, ../sass/phone/_core.scss */
+  #container {
+    width: 300px;
+    margin: 10px auto;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+  }
+  /* line 9, ../sass/phone/_core.scss */
+  #container form.voucher-form input.voucher-code {
+    width: 180px;
+  }
+}
+@media (max-width: 603px) {
+  /* line 5, ../sass/phone/_viewport.scss */
+  #interactive.viewport {
+    width: 300px;
+    height: 300px;
+    overflow: hidden;
+  }
+
+  /* line 11, ../sass/phone/_viewport.scss */
+  #interactive.viewport canvas, video {
+    margin-top: -50px;
+    width: 300px;
+    height: 400px;
+  }
+  /* line 15, ../sass/phone/_viewport.scss */
+  #interactive.viewport canvas.drawingBuffer, video.drawingBuffer {
+    margin-left: -300px;
+  }
+
+  /* line 20, ../sass/phone/_viewport.scss */
+  #result_strip {
+    margin-top: 5px;
+    padding-top: 5px;
+  }
+  /* line 24, ../sass/phone/_viewport.scss */
+  #result_strip ul.thumbnails > li {
+    width: 150px;
+  }
+  /* line 27, ../sass/phone/_viewport.scss */
+  #result_strip ul.thumbnails > li .thumbnail .imgWrapper {
+    width: 130px;
+    height: 130px;
+    overflow: hidden;
+  }
+  /* line 31, ../sass/phone/_viewport.scss */
+  #result_strip ul.thumbnails > li .thumbnail .imgWrapper img {
+    margin-top: -25px;
+    width: 130px;
+    height: 180px;
+  }
+}

stylesheets/styles.css

@@ -54,7 +54,7 @@ a:hover small {
 }
 
 .wrapper {
-  width:860px;
+  width:960px;
   margin:0 auto;
 }
 
@@ -192,7 +192,7 @@ header ul a strong {
 }
 
 section {
-  width:500px;
+  width:640px;
   float:right;
   padding-bottom:50px;
 }