From 8e9cdc11b79b2ccc5e8598a393f1d98c4b089dba Mon Sep 17 00:00:00 2001
From: Christoph Oberhofer <ch.oberhofer@gmail.com>
Date: Sat, 8 Nov 2014 22:09:18 +0100
Subject: [PATCH] Updated documentation

---
 _layouts/default.html        |   2 +-
 examples/file_input.html     |   2 +-
 examples/file_input.js       |   4 +-
 examples/index.md            |   7 +--
 examples/live_w_locator.html |   2 +-
 examples/static_images.html  |   2 +-
 index.md                     | 107 ++++++++++++++++++++++++++++-------
 stylesheets/example.css      |  15 +++--
 stylesheets/styles.css       |   8 +++
 9 files changed, 114 insertions(+), 35 deletions(-)
diff --git a/_layouts/default.html b/_layouts/default.html
index d1fc44e..d7329ea 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -16,7 +16,7 @@
   <body>
     <div class="wrapper">
       <header>
-        <h1><img src="{{ site.baseurl }}/assets/code128.png" alt="QuaggaJS" /></h1>
+        <h1><a href="{{ site.baseurl }}/"><img src="{{ site.baseurl }}/assets/code128.png" alt="QuaggaJS" /></a></h1>
         <p>An advanced barcode-reader written in JavaScript</p>
 
         <nav class="side-nav">
diff --git a/examples/file_input.html b/examples/file_input.html
index bbae8d5..ae12b5b 100644
--- a/examples/file_input.html
+++ b/examples/file_input.html
@@ -26,5 +26,5 @@ showInMenu: false
   <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="http://raw.githubusercontent.com/serratus/quaggaJS/master/dist/quagga.js" type="text/javascript"></script>
 <script src="file_input.js" type="text/javascript"></script>
\ No newline at end of file
diff --git a/examples/file_input.js b/examples/file_input.js
index 94a8f4c..837922b 100644
--- a/examples/file_input.js
+++ b/examples/file_input.js
@@ -27,7 +27,9 @@ $(function() {
         },
         decode: function(src) {
             Quagga.decodeSingle({
-                readers : [App.config.reader + '_reader'],
+                decoder: {
+                    readers : [App.config.reader + '_reader']
+                },
                 locate : true,
                 src : src
             }, function(result) {});
diff --git a/examples/index.md b/examples/index.md
index 0ca22c8..12642c2 100644
--- a/examples/index.md
+++ b/examples/index.md
@@ -7,16 +7,13 @@ showInMenu: true
 Examples
 ========
 
-The following examples showcase some of features offered by QuaggaJS.
+The following examples showcase some of the 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)
+[![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)]({{ site.baseurl }}/examples/static_images.html)
 
 ## Using the live-stream from your webcam
 
diff --git a/examples/live_w_locator.html b/examples/live_w_locator.html
index b92ce0e..eb0aac9 100644
--- a/examples/live_w_locator.html
+++ b/examples/live_w_locator.html
@@ -27,5 +27,5 @@ showInMenu: false
 </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="http://raw.githubusercontent.com/serratus/quaggaJS/master/dist/quagga.js" type="text/javascript"></script>
 <script src="live_w_locator.js" type="text/javascript"></script>
diff --git a/examples/static_images.html b/examples/static_images.html
index 041e5b4..4d9014f 100644
--- a/examples/static_images.html
+++ b/examples/static_images.html
@@ -28,5 +28,5 @@ showInMenu: false
   <div id="interactive" class="viewport"></div>
 </section>
 <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
-<script src="js/quagga.js" type="text/javascript"></script>
+<script src="http://raw.githubusercontent.com/serratus/quaggaJS/master/dist/quagga.js" type="text/javascript"></script>
 <script src="static_images.js" type="text/javascript"></script>
\ No newline at end of file
diff --git a/index.md b/index.md
index 87bdaa5..d9a200c 100644
--- a/index.md
+++ b/index.md
@@ -7,59 +7,127 @@ showInMenu: true
 quaggaJS
 ========
 
-QuaggaJS is a barcode-scanner entirely written in JavaScript supporting real-time localization and decoding of various types of barcodes such as EAN and CODE128. The library is also configured to use `getUserMedia` to get direct access to the user's camera stream. Although the code contains some heavy image-processing parts even recent smartphones are capable of locating and decoding  barcodes in real-time.
+QuaggaJS is a barcode-scanner entirely written in JavaScript supporting real-time localization and decoding of 
+various types of barcodes such as __EAN__ and __CODE128__. The library is also capable of using `getUserMedia` to get direct 
+access to the user's camera stream. Although the code relies on heavy image-processing even recent smartphones are 
+capable of locating and decoding barcodes in real-time.
+
+Try some [examples]({{ site.baseurl }}/examples)
 
 ![teaser][teaser_left]![teaser][teaser_right]
 
 
 ## Yet another barcode library?
 
-This is not yet another port of the great [zxing][zxing_github] library, but more of an extension to it. This implementation features a barcode locator which is capable of finding a barcode-like pattern in an image resulting in an estimated bounding box including rotation. Simply speaking, this reader is invariant in scale and rotation, whereas other libraries require the barcode to be aligned with the viewport.
+This is not yet another port of the great [zxing][zxing_github] library, but more of an extension to it. 
+This implementation features a barcode locator which is capable of finding a barcode-like pattern in an 
+image resulting in an estimated bounding box including the rotation. Simply speaking, this reader is invariant 
+to scale and rotation, whereas other libraries require the barcode to be aligned with the viewport.
 
 
 ## Requirements
 
-In order to take full advantage of quaggaJS, the browser needs to support the `getUserMedia` API which is already implemented by the recent versions of Firefox, Chrome and Opera. The API is also available on their mobile counterparts installed on Android. Safari and IE do not allow the access to the camera yet, neither on desktop, nor on mobile. You can check [caniuse][caniuse_getusermedia] for updates.
+In order to take full advantage of quaggaJS, the browser needs to support the `getUserMedia` API which is 
+already implemented in recent versions of Firefox, Chrome and Opera. The API is also available on their 
+mobile counterparts installed on Android. Safari and IE do not allow the access to the camera yet, neither 
+on desktop, nor on mobile. You can check [caniuse][caniuse_getusermedia] for updates.
 
-In cases where real-time decoding is not needed, or the platform does not support `getUserMedia` QuaggaJS is also capable of decoding image-files.
+In cases where real-time decoding is not needed, or the platform does not support `getUserMedia` QuaggaJS is 
+also capable of decoding image-files using the File API or other URL sources.
 
 ## Installation
 
-Just clone the repository and include `quagga.min.js` in your project. The code uses [requirejs][requirejs] for dependency management.
+Just clone the repository and include `dist/quagga.js` in your project. You can also build the library yourself 
+by simply typing:
+
+```console
+> npm install
+> grunt
+```
 
 ## Usage
 
-The library exposes the following API
+You can check out the [examples]({{ site.baseurl }}/examples) to get an idea of how to use QuaggaJS.
+Basically the library exposes the following API:
 
-### quagga.init(config, callback)
+### Quagga.init(config, callback)
 
-This method initializes the library for a given configuration and a function which is called when the loading-process has finished. The initialization process also requests for camera access if real-time detection is configured.
+This method initializes the library for a given configuration (see below) and a function which is called
+when the loading-process has finished. The initialization process also requests for camera access if real-time
+detection is configured.
 
-### quagga.start()
+### Quagga.start()
 
-When the library is initialized, the `start()` method starts the video-stream and begins locating and decoding the images.
+When the library is initialized, the `start()` method starts the video-stream and begins locating and decoding
+the images.
 
-### quagga.stop()
+### Quagga.stop()
 
 If the decoder is currently running, after calling `stop()` the decoder does not process any more images.
 
-### onDetected(callback)
+### Quagga.onDetected(callback)
+
+Registeres a callback function which is triggered whenever a barcode-pattern has been located and decoded
+successfully. The callback function is called with the decoded data as the first parameter.
 
-Registeres a callback function which is triggered whenever a barcode-pattern has been located and decoded successfully. The callback function is called with the decoded data as the first parameter.
+### Quagga.decodeSingle(config, callback)
 
-### decodeSingle(config, callback)
+In contrast to the calls described above, this method does not rely on `getUserMedia` and operates on a
+single image instead. The provided callback is the same as in `onDetected` and contains the decoded data
+as first parameter.
 
-In contrast to the calls described above, this method does not rely on `getUserMedia` and operates on a single image instead. The provided callback is the same as in `onDetected` and contains the decoded data as first parameter.
+## Config
+
+The default `config` object is set as followed:
+
+```javascript
+{
+  inputStream: { name: "Live",
+       type: "LiveStream"
+  },
+  tracking: false,
+  debug: false,
+  controls: false,
+  locate: true,
+  visual: {
+    show: true
+  },
+  decoder:{
+    drawBoundingBox: true,
+    showFrequency: false,
+    drawScanline: true,
+    showPattern: false,
+    readers: [
+      'code_128_reader'
+    ]
+  },
+  locator: {
+    showCanvas: false,
+    showPatches: false,
+    showFoundPatches: false,
+    showSkeleton: false,
+    showLabels: false,
+    showPatchLabels: false,
+    showRemainingPatchLabels: false,
+    boxFromPatches: {
+      showTransformed: false,
+      showTransformedBox: false,
+      showBB: false
+    }
+  }
+}
+```
 
 ## Examples
 
-The following example takes an image `src` as input and prints the result on the console. The decoder is configured to detect _Code128_ barcodes and enables the locating-mechanism for more robust results.
+The following example takes an image `src` as input and prints the result on the console. 
+The decoder is configured to detect _Code128_ barcodes and enables the locating-mechanism for more robust results.
 
 ```javascript
-quagga.decodeSingle({
-  readers: [quagga.Reader.Code128Reader],
+Quagga.decodeSingle({
+  readers: ['code_128_reader'],
   locate: true, // try to locate the barcode in the image
-  src: src //'data:image/jpg;base64,' + data
+  src: '/test/fixtures/code_128/image-001.jpg' // or 'data:image/jpg;base64,' + data
 }, function(result){
   console.log(result);
 });
@@ -69,4 +137,3 @@ quagga.decodeSingle({
 [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/
diff --git a/stylesheets/example.css b/stylesheets/example.css
index ecc5ab9..1d5f424 100644
--- a/stylesheets/example.css
+++ b/stylesheets/example.css
@@ -109,16 +109,15 @@
 @media (max-width: 603px) {
   /* line 5, ../sass/phone/_viewport.scss */
   #interactive.viewport {
-    width: 300px;
-    height: 300px;
+    width: 100%;
+    height: auto;
     overflow: hidden;
   }
 
   /* line 11, ../sass/phone/_viewport.scss */
   #interactive.viewport canvas, video {
-    margin-top: -50px;
-    width: 300px;
-    height: 400px;
+    width: 100%;
+    height: auto;
   }
   /* line 15, ../sass/phone/_viewport.scss */
   #interactive.viewport canvas.drawingBuffer, video.drawingBuffer {
@@ -130,6 +129,12 @@
     margin-top: 5px;
     padding-top: 5px;
   }
+  
+  #result_strip ul.thumbnails {
+    width: 100%;
+    height: auto;
+  }
+  
   /* line 24, ../sass/phone/_viewport.scss */
   #result_strip ul.thumbnails > li {
     width: 150px;
diff --git a/stylesheets/styles.css b/stylesheets/styles.css
index e43031e..89e2319 100644
--- a/stylesheets/styles.css
+++ b/stylesheets/styles.css
@@ -276,6 +276,14 @@ footer {
   header ul.github {
     display:none;
   }
+  
+  a > img:first-child:last-child {
+      width: 100%;
+  }
+  
+  a > img {
+      width: 49%;
+  }
 }
 
 @media print {
