Added file-input example & updated static images

2026-08-12 21:21:42 +08:00 · 2014-11-08 20:14:36 +01:00
parent 607d5e1f51
commit aaf05e8d6d
39 changed files with 149 additions and 36 deletions
@@ -1,5 +1,5 @@
 name: QuaggaJS
 markdown: redcarpet
-
+baseurl: /quaggaJS

 exclude: [node_modules]
@@ -16,22 +16,24 @@
  <body>
    <div class="wrapper">
      <header>
-        <h1><img src="{{ site.url }}/assets/code128.png" alt="QuaggaJS" /></h1>
+        <h1><img src="{{ site.baseurl }}/assets/code128.png" alt="QuaggaJS" /></h1>
        <p>An advanced barcode-reader written in JavaScript</p>

+        <nav class="side-nav">
+            <ul class="pages">
+                <li><a href="{{ site.baseurl }}/">Project Home</a></li>
+                <li><a href="{{ site.baseurl }}/examples">Examples</a></li>
+            </ul>
+        </nav>
+
        <p class="view"><a href="https://github.com/serratus/quaggaJS">View the Project on GitHub <small>serratus/quaggaJS</small></a></p>
-        <ul>
+        <ul class="github">
          <li><a href="https://github.com/serratus/quaggaJS/zipball/master">Download <strong>ZIP File</strong></a></li>
          <li><a href="https://github.com/serratus/quaggaJS/tarball/master">Download <strong>TAR Ball</strong></a></li>
          <li><a href="https://github.com/serratus/quaggaJS">Fork On <strong>GitHub</strong></a></li>
        </ul>
      </header>
      <section>
-		<ul class="pages">
-			{% for subpage in site.pages %}
-				<li><a href="{{ subpage.url }}">{{ subpage.title }}</a></li>
-			{% endfor %}
-		</ul>
        {{ content }}
      </section>
      <footer>
@@ -0,0 +1,13 @@
+---
+layout: default
+---
+
+<h1>Examples</h1>
+
+<ul>
+    <li><a href="{{ site.baseurl }}/examples/static_images.html">Demo with sample images</a></li>
+    <li><a href="{{ site.baseurl }}/examples/live_w_locator.html">Demo with live-stream</a> using <code>getUserMedia</code></li>
+    <li><a href="{{ site.baseurl }}/examples/file_input.html">Demo with file-input</a> showcasing a use for mobile</li>
+</ul>
+
+{{ content }}
@@ -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>
@@ -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);
+    });
+}); 
@@ -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)
@@ -1,6 +1,7 @@
 ---
-layout: default
-title: Examples
+layout: examples
+title: Demo with live-stream
+showInMenu: false
 ---

 <section id="container" class="container">
@@ -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>
@@ -1,6 +1,7 @@
 ---
 layout: default
 title: Home
+showInMenu: true
 ---

 quaggaJS
@@ -65,7 +66,7 @@ quagga.decodeSingle({
 ```

 [zxing_github]: https://github.com/zxing/zxing
-[teaser_left]: https://github.com/serratus/quaggaJS/blob/master/doc/img/mobile-located.png
-[teaser_right]: https://github.com/serratus/quaggaJS/blob/master/doc/img/mobile-detected.png
+[teaser_left]: {{ site.baseurl }}/assets/mobile-located.jpg
+[teaser_right]: {{ site.baseurl }}/assets/mobile-detected.jpg
 [caniuse_getusermedia]: http://caniuse.com/#feat=stream
 [requirejs]: http://requirejs.org/
@@ -109,7 +109,7 @@ header {
  position:fixed;
 }

-header ul {
+header ul.github {
  list-style:none;
  height:40px;
  
@@ -129,22 +129,22 @@ header ul {
  width:270px;
 }

-header li {
+header ul.github li {
  width:89px;
  float:left;
  border-right:1px solid #d2d2d2;
  height:40px;
 }

-header li:first-child a {
+header ul.github li:first-child a {
  border-radius:5px 0 0 5px;
 }

-header li:last-child a {
+header ul.github li:last-child a {
  border-radius:0 5px 5px 0;
 }

-header ul a {
+header ul.github a {
  line-height:1;
  font-size:11px;
  color:#999;
@@ -154,7 +154,7 @@ header ul a {
  height:34px;
 }

-header ul a:hover {
+header ul.github a:hover {
  color:#999;
  background: -moz-linear-gradient(top, #fff 0%, #ddd 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#ddd));
@@ -164,7 +164,7 @@ header ul a:hover {
  background: linear-gradient(top, #fff 0%,#ddd 100%);
 }

-header ul a:active {
+header ul.github a:active {
  -webkit-box-shadow: inset 0px 2px 2px 0px #ddd;
  -moz-box-shadow: inset 0px 2px 2px 0px #ddd;
  box-shadow: inset 0px 2px 2px 0px #ddd;
@@ -175,17 +175,17 @@ strong {
  font-weight:700;
 }

-header ul li + li {
+header ul.github li + li {
  width:88px;
  border-left:1px solid #fff;
 }

-header ul li + li + li {
+header ul.github li + li + li {
  border-right:none;
  width:89px;
 }

-header ul a strong {
+header ul.github a strong {
  font-size:14px;
  display:block;
  color:#222;
@@ -243,7 +243,7 @@ footer {
    display:inline;
  }
  
-  header ul {
+  header ul.github {
    position:absolute;
    right:50px;
    top:52px;
@@ -259,7 +259,7 @@ footer {
    padding:0;
  }
  
-  header ul, header p.view {
+  header ul.github, header p.view {
    position:static;
  }
  
@@ -273,7 +273,7 @@ footer {
    padding:15px;
  }
  
-  header ul {
+  header ul.github {
    display:none;
  }
 }