Added sandbox; Added example overview-page

Gemfile

@@ -1,2 +1,3 @@
 source 'https://rubygems.org'
-gem 'github-pages'
+gem 'github-pages'
+gem 'wdm','>=0.1.0' if Gem.win_platform?

Gemfile.lock

@@ -134,6 +134,7 @@ GEM
       ethon (>= 0.7.4)
     tzinfo (1.2.2)
       thread_safe (~> 0.1)
+    wdm (0.1.1)
     yajl-ruby (1.2.1)
 
 PLATFORMS
@@ -143,6 +144,7 @@ PLATFORMS
 
 DEPENDENCIES
   github-pages
+  wdm (>= 0.1.0)
 
 BUNDLED WITH
    1.12.5

_layouts/default.html

@@ -46,6 +46,7 @@
             <ul class="pages">
                 <li><a href="{{ site.baseurl }}/">Project Home</a></li>
                 <li><a href="{{ site.baseurl }}/examples">Examples</a></li>
+                <li><a href="{{ site.baseurl }}/v1.0.0-beta.1/examples">Examples (v1.0.0-beta.1)</a></li>
             </ul>
         </nav>
 

_layouts/examples.v1.0.0-beta.1.html

@@ -5,6 +5,7 @@ layout: default
 <h1>Examples</h1>
 
 <ul>
+    <li><a href="../sandbox/">Mobile Sandbox</a> for playing around with all the various settings</li>
     <li><a href="../scan-to-input/">Video-based Example</a> showcasing an input field for barcodes</li>
     <li><a href="../file-input/">File-based Example</a> showcasing an input field for barcodes</li>
     <li><a href="../multiple/">Video-based Example</a> showcasing the use of multiple readers</li>

stylesheets/styles.css

@@ -73,7 +73,7 @@ code, pre {
 
 pre {
   padding:8px 15px;
-  background: #f8f8f8;  
+  background: #f8f8f8;
   border-radius:5px;
   border:1px solid #e5e5e5;
   overflow-x: auto;
@@ -112,9 +112,9 @@ header {
 header ul.github {
   list-style:none;
   height:40px;
-  
+
   padding:0;
-  
+
   background: #eee;
   background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
@@ -122,7 +122,7 @@ header ul.github {
   background: -o-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
   background: -ms-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
   background: linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
-  
+
   border-radius:5px;
   border:1px solid #d2d2d2;
   box-shadow:inset #fff 0 1px 0, inset rgba(0,0,0,0.03) 0 -1px 0;
@@ -216,33 +216,33 @@ footer {
 }
 
 @media print, screen and (max-width: 960px) {
-  
+
   div.wrapper {
     width:auto;
     margin:0;
   }
-  
+
   header, section, footer {
     float:none;
     position:static;
     width:auto;
   }
-  
+
   header {
     padding-right:320px;
   }
-  
+
   section {
     border:1px solid #e5e5e5;
     border-width:1px 0;
     padding:20px 0;
     margin:0 0 20px;
   }
-  
+
   header a small {
     display:inline;
   }
-  
+
   header ul.github {
     position:absolute;
     right:50px;
@@ -254,15 +254,15 @@ footer {
   body {
     word-wrap:break-word;
   }
-  
+
   header {
     padding:0;
   }
-  
+
   header ul.github, header p.view {
     position:static;
   }
-  
+
   pre, code {
     word-wrap:normal;
   }
@@ -272,15 +272,15 @@ footer {
   body {
     padding:15px;
   }
-  
+
   header ul.github {
     display:none;
   }
-  
+
   a > img:first-child:last-child {
       width: 100%;
   }
-  
+
   a > img {
       width: 49%;
   }
@@ -293,3 +293,62 @@ footer {
     color:#444;
   }
 }
+
+.columns {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+    -webkit-box-align: start;
+        -ms-flex-align: start;
+            align-items: flex-start;
+}
+
+.columns > * {
+    box-sizing: border-box;
+    padding: 2px;
+}
+
+.columns.large-thirds > * {
+    max-width: 33.3333%;
+    width: 33.3333%;
+}
+
+.columns.large-quater > * {
+    max-width: 25%;
+    width: 25%;
+}
+
+i[class^="icon-"], i[class*=" icon-"] {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    background-size: cover;
+    vertical-align: bottom;
+}
+
+.icon-camera {
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTkuNSAxOWMwIDMuNTkgMi45MSA2LjUgNi41IDYuNXM2LjUtMi45MSA2LjUtNi41LTIuOTEtNi41LTYuNS02LjUtNi41IDIuOTEtNi41IDYuNXpNMzAgOGgtN2MtMC41LTItMS00LTMtNGgtOGMtMiAwLTIuNSAyLTMgNGgtN2MtMS4xIDAtMiAwLjktMiAydjE4YzAgMS4xIDAuOSAyIDIgMmgyOGMxLjEgMCAyLTAuOSAyLTJ2LTE4YzAtMS4xLTAuOS0yLTItMnpNMTYgMjcuODc1Yy00LjkwMiAwLTguODc1LTMuOTczLTguODc1LTguODc1czMuOTczLTguODc1IDguODc1LTguODc1YzQuOTAyIDAgOC44NzUgMy45NzMgOC44NzUgOC44NzVzLTMuOTczIDguODc1LTguODc1IDguODc1ek0zMCAxNGgtNHYtMmg0djJ6Ij48L3BhdGg+PC9zdmc+);
+}
+
+.icon-image {
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTI5Ljk5NiA0YzAuMDAxIDAuMDAxIDAuMDAzIDAuMDAyIDAuMDA0IDAuMDA0djIzLjk5M2MtMC4wMDEgMC4wMDEtMC4wMDIgMC4wMDMtMC4wMDQgMC4wMDRoLTI3Ljk5M2MtMC4wMDEtMC4wMDEtMC4wMDMtMC4wMDItMC4wMDQtMC4wMDR2LTIzLjk5M2MwLjAwMS0wLjAwMSAwLjAwMi0wLjAwMyAwLjAwNC0wLjAwNGgyNy45OTN6TTMwIDJoLTI4Yy0xLjEgMC0yIDAuOS0yIDJ2MjRjMCAxLjEgMC45IDIgMiAyaDI4YzEuMSAwIDItMC45IDItMnYtMjRjMC0xLjEtMC45LTItMi0ydjB6Ij48L3BhdGg+PHBhdGggZD0iTTI2IDljMCAxLjY1Ny0xLjM0MyAzLTMgM3MtMy0xLjM0My0zLTMgMS4zNDMtMyAzLTMgMyAxLjM0MyAzIDN6Ij48L3BhdGg+PHBhdGggZD0iTTI4IDI2aC0yNHYtNGw3LTEyIDggMTBoMmw3LTZ6Ij48L3BhdGg+PC9zdmc+);
+}
+
+.icon-video-camera {
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTEyIDljMC0yLjc2MSAyLjIzOS01IDUtNXM1IDIuMjM5IDUgNWMwIDIuNzYxLTIuMjM5IDUtNSA1cy01LTIuMjM5LTUtNXpNMCA5YzAtMi43NjEgMi4yMzktNSA1LTVzNSAyLjIzOSA1IDVjMCAyLjc2MS0yLjIzOSA1LTUgNXMtNS0yLjIzOS01LTV6TTI0IDE5di0zYzAtMS4xLTAuOS0yLTItMmgtMjBjLTEuMSAwLTIgMC45LTIgMnYxMGMwIDEuMSAwLjkgMiAyIDJoMjBjMS4xIDAgMi0wLjkgMi0ydi0zbDggNXYtMTRsLTggNXpNMjAgMjRoLTE2di02aDE2djZ6Ij48L3BhdGg+PC9zdmc+);
+}
+
+@media print, screen and (max-width: 480px) {
+    .columns {
+        -ms-flex-wrap: wrap;
+            flex-wrap: wrap;
+    }
+    .columns.small-half > * {
+        max-width: 50%;
+        width: 50%;
+    }
+}

v1.0.0-beta.1/examples/file-input/index.html

@@ -1,5 +1,5 @@
 ---
-layout: v1.0.0-beta.1/examples
+layout: examples.v1.0.0-beta.1
 title: Demo with live-stream
 showInMenu: false
 ---

v1.0.0-beta.1/examples/file_input/index.html

@@ -1,5 +1,5 @@
 ---
-layout: v1.0.0-beta.1/examples
+layout: examples.v1.0.0-beta.1
 title: Demo with file-input
 showInMenu: false
 ---

v1.0.0-beta.1/examples/index.md

@@ -9,20 +9,64 @@ Examples
 
 The following examples showcase some of the features offered by QuaggaJS.
 
-## Using static image files
+## Sandbox for mobile (Android only) <i class="icon-video-camera"/>
 
-[This example](static_images.html) shows the capabilities of QuaggaJS using images taken under various conditions.
+A minimal mobile-app like [example](sandbox/) with lot's of configuration
+options.
 
-[![Image 1]({{ site.baseurl }}/assets/example_static_01.jpg) ![Image 2]({{ site.baseurl }}/assets/example_static_02.jpg) ![Image 3]({{ site.baseurl }}/assets/example_static_03.jpg) ![Image 4]({{ site.baseurl }}/assets/example_static_04.jpg)](static_images.html)
+<a href="sandbox/" class="columns large-thirds small-half">
+    <img src="{{ site.baseurl }}/assets/sandbox-01.png" />
+    <img src="{{ site.baseurl }}/assets/sandbox-02.png" />
+    <img src="{{ site.baseurl }}/assets/sandbox-03.png" />
+</a>
 
-## Using the live-stream from your webcam
+## Scanning multiple types of codes simultaneously <i class="icon-video-camera"/>
+
+<a href="multiple/">Video-based Example</a> showcasing the use of multiple
+readers
+
+<a href="multiple/">
+    <img src="{{ site.baseurl }}/assets/scan-multiple-01.png" />
+</a>
+
+## Scanning to input-field <i class="icon-video-camera"/>
+
+<a href="scan-to-input/">Video-based Example</a> showcasing an input-field for
+barcodes
+
+<a href="scan-to-input/">
+    <img src="{{ site.baseurl }}/assets/scan-to-input-01.png" />
+</a>
+
+## File-based barcode-input <i class="icon-camera"/> <i class="icon-image"/>
+
+<a href="file-input/">File-based Example</a> showcasing an input field for
+barcodes
+
+<a href="file-input/">
+    <img src="{{ site.baseurl }}/assets/scan-to-input-01.png" />
+</a>
+
+## Using static image files <i class="icon-image"/>
+
+[This example](static_images.html) shows the capabilities of QuaggaJS using
+images taken under various conditions.
+
+<a href="static_images" class="columns large-quater small-half">
+    <img src="{{ site.baseurl }}/assets/example_static_01.jpg" />
+    <img src="{{ site.baseurl }}/assets/example_static_02.jpg" />
+    <img src="{{ site.baseurl }}/assets/example_static_03.jpg" />
+    <img src="{{ site.baseurl }}/assets/example_static_04.jpg" />
+</a>
+
+## Using the live-stream from your webcam <i class="icon-video-camera"/>
 
 This is the preferred mode of using QuaggaJS. [This example](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)](live_w_locator.html)
 
-## Using the File API
+## Using the File API <i class="icon-camera"/> <i class="icon-image"/>
 
 Instead of directly accessing the user's webcam, [this example](file_input.html)  shows you how to use QuaggaJS with the HTML5 File API to decode a pre-taken image.
 

v1.0.0-beta.1/examples/live_w_locator/index.html

@@ -1,5 +1,5 @@
 ---
-layout: v1.0.0-beta.1/examples
+layout: examples.v1.0.0-beta.1
 title: Demo with live-stream
 showInMenu: false
 ---

v1.0.0-beta.1/examples/multiple/index.html

@@ -1,5 +1,5 @@
 ---
-layout: v1.0.0-beta.1/examples
+layout: examples.v1.0.0-beta.1
 title: Demo with live-stream
 showInMenu: false
 ---

v1.0.0-beta.1/examples/sandbox/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+
+    <title>Quagga Sandbox</title>
+    <link rel="manifest" href="manifest.json">
+    <meta name="description" content="" />
+    <meta name="author" content="Christoph Oberhofer" />
+
+    <link rel="stylesheet" type="text/css" href="static/style.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
+    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
+
+  </head>
+
+  <body style="margin: 0">
+    <div id="react"></div>
+    <script src="static/bundle.min.js" type="text/javascript"></script>
+  </body>
+</html>

v1.0.0-beta.1/examples/sandbox/static/style.css

@@ -0,0 +1,20 @@
+html {
+    font-family: 'Roboto', sans-serif;
+}
+
+.overlay__content {
+    position: relative;
+}
+
+.overlay__content video, .overlay__content canvas {
+    max-width: 100%;
+}
+
+.overlay__content canvas {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    max-width: 100%;
+}

v1.0.0-beta.1/examples/scan-to-input/index.html

@@ -1,5 +1,5 @@
 ---
-layout: v1.0.0-beta.1/examples
+layout: examples.v1.0.0-beta.1
 title: Demo with live-stream
 showInMenu: false
 ---

v1.0.0-beta.1/examples/static_images/index.html

@@ -1,5 +1,5 @@
 ---
-layout: v1.0.0-beta.1/examples
+layout: examples.v1.0.0-beta.1
 title: Demo with sample images
 showInMenu: false
 ---