Updated quagga and readme to the newest version

examples/file_input.js

@@ -38,12 +38,38 @@ $(function() {
     
     App.init();
 
+    Quagga.onProcessed(function(result) {
+        var drawingCtx = Quagga.canvas.ctx.overlay,
+            drawingCanvas = Quagga.canvas.dom.overlay;
+
+        if (result) {
+            if (result.boxes) {
+                drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
+                result.boxes.filter(function (box) {
+                    return box !== result.box;
+                }).forEach(function (box) {
+                    Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, drawingCtx, {color: "green", lineWidth: 2});
+                });
+            }
+
+            if (result.box) {
+                Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, drawingCtx, {color: "#00F", lineWidth: 2});
+            }
+
+            if (result.codeResult && result.codeResult.code) {
+                Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, drawingCtx, {color: 'red', lineWidth: 3});
+            }
+        }
+    });
+
     Quagga.onDetected(function(result) {
-        var $node = null, canvas = Quagga.canvas.dom.image;
+        var code = result.codeResult.code,
+            $node,
+            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);
+        $node.find("h4.code").html(code);
         $("#result_strip ul.thumbnails").prepend($node);
     });
 }); 

examples/live_w_locator.js

@@ -8,11 +8,10 @@ $(function() {
                 },
                 decoder : {
                     readers : ["code_128_reader"]
-                },
+                }
-                readyFunc : function() {
+            }, function() {
                 App.attachListeners();
                 Quagga.start();
-                }
             });
         },
         attachListeners : function() {
@@ -29,16 +28,41 @@ $(function() {
 
     App.init();
 
+    Quagga.onProcessed(function(result) {
+        var drawingCtx = Quagga.canvas.ctx.overlay,
+            drawingCanvas = Quagga.canvas.dom.overlay;
+
+        if (result) {
+            if (result.boxes) {
+                drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
+                result.boxes.filter(function (box) {
+                    return box !== result.box;
+                }).forEach(function (box) {
+                    Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, drawingCtx, {color: "green", lineWidth: 2});
+                });
+            }
+
+            if (result.box) {
+                Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, drawingCtx, {color: "#00F", lineWidth: 2});
+            }
+
+            if (result.codeResult && result.codeResult.code) {
+                Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, drawingCtx, {color: 'red', lineWidth: 3});
+            }
+        }
+    });
+
     Quagga.onDetected(function(result) {
-        if (App.lastResult !== result) {
+        var code = result.codeResult.code;
-            App.lastResult = result;
+
+        if (App.lastResult !== code) {
+            App.lastResult = code;
             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);
+            $node.find("h4.code").html(code);
             $("#result_strip ul.thumbnails").prepend($node);
         }
     });
-
 });

examples/static_images.js

@@ -9,11 +9,10 @@ $(function() {
                 },
                 decoder : {
                     readers : [App.config.reader + "_reader"]
-                },
+                }
-                readyFunc : function() {
+            }, function() {
                 App.attachListeners();
                 Quagga.start();
-                }
             });
         },
         config: {
@@ -42,12 +41,38 @@ $(function() {
     
     App.init();
 
+    Quagga.onProcessed(function(result) {
+        var drawingCtx = Quagga.canvas.ctx.overlay,
+            drawingCanvas = Quagga.canvas.dom.overlay;
+
+        if (result) {
+            if (result.boxes) {
+                drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
+                result.boxes.filter(function (box) {
+                    return box !== result.box;
+                }).forEach(function (box) {
+                    Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, drawingCtx, {color: "green", lineWidth: 2});
+                });
+            }
+
+            if (result.box) {
+                Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, drawingCtx, {color: "#00F", lineWidth: 2});
+            }
+
+            if (result.codeResult && result.codeResult.code) {
+                Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, drawingCtx, {color: 'red', lineWidth: 3});
+            }
+        }
+    });
+
     Quagga.onDetected(function(result) {
-        var $node = null, canvas = Quagga.canvas.dom.image;
+        var $node,
+            canvas = Quagga.canvas.dom.image,
+            detectedCode = result.codeResult.code;
 
         $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);
+        $node.find("h4.code").html(detectedCode);
         $("#result_strip ul.thumbnails").prepend($node);
     });
 }); 

index.md

@@ -7,6 +7,8 @@ showInMenu: true
 quaggaJS
 ========
 
+- [Changelog](#changelog) (2015-01-21)
+
 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
@@ -54,9 +56,22 @@ Basically the library exposes the following API:
 
 ### Quagga.init(config, callback)
 
-This method initializes the library for a given configuration (see below) and a function which is called
+This method initializes the library for a given configuration `config` (see below) and invokes the `callback` when Quagga is ready to start. The initialization process also requests for camera access if real-time detection is configured.
-when the loading-process has finished. The initialization process also requests for camera access if real-time
+
-detection is configured.
+```javascript
+Quagga.init({
+    inputStream : {
+      name : "Live",
+      type : "LiveStream"
+    },
+    decoder : {
+      readers : ["code_128_reader"]
+    }
+  }, function() {
+      console.log("Initialization finished. Ready to start");
+      Quagga.start();
+  });
+```
 
 ### Quagga.start()
 
@@ -65,18 +80,91 @@ the images.
 
 ### Quagga.stop()
 
-If the decoder is currently running, after calling `stop()` the decoder does not process any more images.
+If the decoder is currently running, after calling `stop()` the decoder does not process any more images. Additionally, if a camera-stream was requested upon initialization, this operation also disconnects the camera.
+
+### Quagga.onProcessed(callback)
+
+This method registers a `callback(data)` function that is called for each frame after the processing is done. The `data` object contains detailed information about the success/failure of the operation. The output varies, depending whether the detection and/or decoding were successful or not.
 
 ### Quagga.onDetected(callback)
 
-Registeres a callback function which is triggered whenever a barcode-pattern has been located and decoded
+Registers a `callback(data)` 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.
+successfully. The passed `data` object contains information about the decoding process including the detected code which can be obtained by calling `data.codeResult.code`.
 
 ### Quagga.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
+single image instead. The provided callback is the same as in `onDetected` and contains the result `data`
-as first parameter.
+object.
+
+## <a name="resultobject">The result object</a>
+
+The callbacks passed into `onProcessed`, `onDetected` and `decodeSingle` receive a `data` object upon execution. The `data` object contains the following information. Depending on the success, some fields may be `undefined` or just empty.
+
+```javascript
+{
+  "codeResult": {
+    "code": "FANAVF1461710",
+    "start": 355,
+    "end": 26,
+    "codeset": 100,
+    "startInfo": {
+      "error": 1.0000000000000002,
+      "code": 104,
+      "start": 21,
+      "end": 41
+    },
+    "decodedCodes": [{
+      "code": 104,
+      "start": 21,
+      "end": 41
+    },
+    // stripped for brevity
+    {
+      "error": 0.8888888888888893,
+      "code": 106,
+      "start": 328,
+      "end": 350
+    }],
+    "endInfo": {
+      "error": 0.8888888888888893,
+      "code": 106,
+      "start": 328,
+      "end": 350
+    },
+    "direction": -1
+  },
+  "line": [{
+    "x": 25.97278706156836,
+    "y": 360.5616435369468
+  }, {
+    "x": 401.9220519377024,
+    "y": 70.87524989906444
+  }],
+  "angle": -0.6565217179979483,
+  "pattern": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, /* ... */ 1],
+  "box": [
+    [77.4074243622672, 410.9288668804402],
+    [0.050203235235130705, 310.53619724086366],
+    [360.15706727788256, 33.05711026051813],
+    [437.5142884049146, 133.44977990009465]
+  ],
+  "boxes": [
+    [
+      [77.4074243622672, 410.9288668804402],
+      [0.050203235235130705, 310.53619724086366],
+      [360.15706727788256, 33.05711026051813],
+      [437.5142884049146, 133.44977990009465]
+    ],
+    [
+      [248.90769330706507, 415.2041489551161],
+      [198.9532321622869, 352.62160512937635],
+      [339.546160777576, 240.3979259789976],
+      [389.5006219223542, 302.98046980473737]
+    ]
+  ]
+}
+```
 
 ## Config
 
@@ -91,11 +179,13 @@ The default `config` object is set as followed:
   debug: false,
   controls: false,
   locate: true,
+  numOfWorkers: 4,
+  scriptName: 'quagga.js',
   visual: {
     show: true
   },
   decoder:{
-    drawBoundingBox: true,
+    drawBoundingBox: false,
     showFrequency: false,
     drawScanline: true,
     showPattern: false,
@@ -104,6 +194,7 @@ The default `config` object is set as followed:
     ]
   },
   locator: {
+    halfSample: true,
     showCanvas: false,
     showPatches: false,
     showFoundPatches: false,
@@ -135,7 +226,35 @@ Quagga.decodeSingle({
 });
 ```
 
+## Tests
+
+Unit Tests can be run with [Karma][karmaUrl] and written using [Mocha][mochaUrl], [Chai][chaiUrl] and [SinonJS][sinonUrl]. Coverage reports are automatically generated in the coverage/ folder.
+
+```console
+> npm install
+> grunt test
+```
+## Image Debugging
+
+In case you want to take a deeper dive into the inner workings of Quagga, get to know the _debugging_ capabilities of the current implementation. The various flags exposed through the `config` object give you the abilily to visualize almost every step in the processing. Because of the introduction of the web-workers, and their restriction not to have access to the DOM, the configuration must be explicitly set to `config.numOfWorkers = 0` in order to work.
+
+## <a name="changelog">Changelog</a>
+
+### 2015-01-21
+- Features
+  - Added support for web-worker (using 4 workers as default, can be changed through `config.numOfWorkers`)
+  - Due to the way how web-workers are created, the name of the script file (`config.scriptName`) should be kept in sync with your actual filename
+  - Removed canvas-overlay for decoding (boxes & scanline) which can now be easily implemented using the existing API (see example)
+- API Changes
+In the course of implementing web-workers some breaking changes were introduced to the API.
+  - The `Quagga.init` function no longer receives the callback as part of the config but rather as a second argument: `Quagga.init(config, cb)`
+  - The callback to `Quagga.onDetected` now receives an object containing much more information in addition to the decoded code. (see [data](#resultobject))
+
 [zxing_github]: https://github.com/zxing/zxing
 [teaser_left]: {{ site.baseurl }}/assets/mobile-located.jpg
 [teaser_right]: {{ site.baseurl }}/assets/mobile-detected.jpg
 [caniuse_getusermedia]: http://caniuse.com/#feat=stream
+[sinonUrl]: http://sinonjs.org/
+[chaiUrl]: http://chaijs.com/
+[mochaUrl]: https://github.com/mochajs/mocha
+[karmaUrl]: http://karma-runner.github.io/