Added file-input example & updated static images

examples/file_input.html

@@ -0,0 +1,30 @@
+---
+layout: examples
+title: Demo with file-input
+showInMenu: false
+---
+
+
+<section id="container" class="container">
+    <h3>Working with file-input</h3>
+    <p>This example let's you select an image from your local filesystem. QuaggaJS then tries to decode the barcode using
+        the preferred method (<strong>Code128</strong> or <strong>EAN</strong>). There is no server interaction needed as the
+        file is simply accessed through the <a href="http://www.w3.org/TR/file-upload/">File API</a>.</p>
+    <p>This also works great on a wide range of mobile-phones where the camera access through <code>getUserMedia</code> is still very limited.</p>
+  <div class="controls">
+    <input type="file"  capture/>
+    <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>
+<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="file_input.js" type="text/javascript"></script>

examples/file_input.js

@@ -0,0 +1,47 @@
+$(function() {
+    var App = {
+        init: function() {
+            App.attachListeners();
+        },
+        config: {
+            reader: "code_128",
+            length: 10
+        },
+        attachListeners: function() {
+            $(".controls input[type=file]").on("change", function(e) {
+                if (e.target.files && e.target.files.length) {
+                    App.decode(URL.createObjectURL(e.target.files[0]));
+                }
+            });
+            
+            $(".controls .reader-group").on("change", "input", function(e) {
+                e.preventDefault();
+                App.detachListeners();
+                App.config.reader = e.target.value;
+                App.init();
+            });
+        },
+        detachListeners: function() {
+            $(".controls input[type=file]").off("change");
+            $(".controls .reader-group").off("change", "input");
+        },
+        decode: function(src) {
+            Quagga.decodeSingle({
+                readers : [App.config.reader + '_reader'],
+                locate : true,
+                src : src
+            }, function(result) {});
+        }
+    };
+    
+    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);
+    });
+}); 

examples/index.md

@@ -1,9 +1,32 @@
 ---
 layout: default
 title: Examples
+showInMenu: true
 ---
 
-# 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`
+The following examples showcase some of features offered by QuaggaJS.
+
+## Using static image files
+
+[This example]({{ site.baseurl }}/examples/static_images.html) shows the capabilities of QuaggaJS using images taken under various conditions.
+
+[![Image 1]({{ site.baseurl }}/assets/example_static_01.jpg)]({{ site.baseurl }}/examples/static_images.html)
+[![Image 2]({{ site.baseurl }}/assets/example_static_02.jpg)]({{ site.baseurl }}/examples/static_images.html)
+[![Image 3]({{ site.baseurl }}/assets/example_static_03.jpg)]({{ site.baseurl }}/examples/static_images.html)
+[![Image 4]({{ site.baseurl }}/assets/example_static_04.jpg)]({{ site.baseurl }}/examples/static_images.html)
+
+## Using the live-stream from your webcam
+
+This is the preferred mode of using QuaggaJS. [This example]({{ site.baseurl }}/examples/live_w_locator.html)  demonstrates the real-time decoding capabilities of QuaggaJS by using your
+webcam as a barcode-scanner.
+
+[![Live 1]({{ site.baseurl }}/assets/example_live_01.jpg)]({{ site.baseurl }}/examples/live_w_locator.html)
+
+## Using the File API
+
+Instead of directly accessing the user's webcam, [this example]({{ site.baseurl }}/examples/file_input.html)  shows you how to use QuaggaJS with the HTML5 File API to decode a pre-taken image.
+
+[![File Input 1]({{ site.baseurl }}/assets/example_file_input_01.jpg)]({{ site.baseurl }}/examples/file_input.html)

examples/live_w_locator.html

@@ -1,6 +1,7 @@
 ---
-layout: default
-title: Examples
+layout: examples
+title: Demo with live-stream
+showInMenu: false
 ---
 
 <section id="container" class="container">

examples/static_images.html

@@ -1,6 +1,7 @@
 ---
-layout: default
-title: Examples
+layout: examples
+title: Demo with sample images
+showInMenu: false
 ---
 
 
@@ -26,11 +27,6 @@ title: Examples
   </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="js/quagga.js" type="text/javascript"></script>
 <script src="static_images.js" type="text/javascript"></script>