From 31d2a086cda15feb33f769c1e892b4caf064252d Mon Sep 17 00:00:00 2001
From: Christoph Oberhofer <ch.oberhofer@gmail.com>
Date: Sat, 30 Jul 2016 11:43:18 +0200
Subject: [PATCH] Fixed live-view example

---
 example/live_w_locator.html |   8 ++-
 example/live_w_locator.js   | 106 ++++++++++++++++--------------------
 example/static_images.js    |   4 +-
 3 files changed, 53 insertions(+), 65 deletions(-)

diff --git a/example/live_w_locator.html b/example/live_w_locator.html
index a8a3787..08894a2 100644
--- a/example/live_w_locator.html
+++ b/example/live_w_locator.html
@@ -76,8 +76,8 @@
                     <select name="numOfWorkers">
                         <option value="0">0</option>
                         <option value="1">1</option>
-                        <option value="2">2</option>
-                        <option selected="selected" value="4">4</option>
+                        <option selected="selected" value="2">2</option>
+                        <option value="4">4</option>
                         <option value="8">8</option>
                     </select>
                 </label>
@@ -87,7 +87,9 @@
         <ul class="thumbnails"></ul>
         <ul class="collector"></ul>
       </div>
-      <div id="interactive" class="viewport"></div>
+      <div id="interactive" class="viewport">
+          <canvas class="drawing" />
+      </div>
     </section>
           <footer>
         <p>
diff --git a/example/live_w_locator.js b/example/live_w_locator.js
index c058bd2..f023b21 100644
--- a/example/live_w_locator.js
+++ b/example/live_w_locator.js
@@ -1,38 +1,33 @@
 $(function() {
-    var resultCollector = Quagga.ResultCollector.create({
-        capture: true,
-        capacity: 20,
-        blacklist: [{code: "2167361334", format: "i2of5"}],
-        filter: function(codeResult) {
-            // only store results which match this constraint
-            // e.g.: codeResult
-            return true;
-        }
-    });
     var App = {
         init : function() {
-            var self = this;
-
-            Quagga.init(this.state, function(err) {
-                if (err) {
-                    return self.handleError(err);
-                }
-                Quagga.registerResultCollector(resultCollector);
-                App.attachListeners();
-                Quagga.start();
+            this.overlay = document.querySelector('#interactive canvas.drawing');
+
+            this.scanner = Quagga
+                .fromConfig(this.state);
+
+            this.scanner
+                .addEventListener("processed", drawResult.bind(this, this.scanner))
+                .addEventListener("detected", addToResults.bind(this, this.scanner));
+
+            this.scanner.start()
+            .then(function (){
+                console.log("started");
+                this.attachListeners();
+            }.bind(this))
+            .catch(function(err) {
+                console.log("Error: " + err);
             });
         },
-        handleError: function(err) {
-            console.log(err);
-        },
         attachListeners: function() {
             var self = this;
 
             $(".controls").on("click", "button.stop", function(e) {
                 e.preventDefault();
-                Quagga.stop();
-                self._printCollectedResults();
-            });
+                this.detachListeners();
+                this.scanner.stop();
+                this.scanner.removeEventListener();
+            }.bind(this));
 
             $(".controls .reader-config-group").on("change", "input, select", function(e) {
                 e.preventDefault();
@@ -45,18 +40,6 @@ $(function() {
                 self.setState(state, value);
             });
         },
-        _printCollectedResults: function() {
-            var results = resultCollector.getResults(),
-                $ul = $("#result_strip ul.collector");
-
-            results.forEach(function(result) {
-                var $li = $('<li><div class="thumbnail"><div class="imgWrapper"><img /></div><div class="caption"><h4 class="code"></h4></div></div></li>');
-
-                $li.find("img").attr("src", result.frame);
-                $li.find("h4.code").html(result.codeResult.code + " (" + result.codeResult.format + ")");
-                $ul.prepend($li);
-            });
-        },
         _accessByPath: function(obj, path, val) {
             var parts = path.split('.'),
                 depth = parts.length,
@@ -79,17 +62,16 @@ $(function() {
             $(".controls .reader-config-group").off("change", "input, select");
         },
         setState: function(path, value) {
-            var self = this;
-
-            if (typeof self._accessByPath(self.inputMapper, path) === "function") {
-                value = self._accessByPath(self.inputMapper, path)(value);
+            if (typeof this._accessByPath(this.inputMapper, path) === "function") {
+                value = this._accessByPath(this.inputMapper, path)(value);
             }
 
-            self._accessByPath(self.state, path, value);
+            this._accessByPath(this.state, path, value);
 
-            console.log(JSON.stringify(self.state));
-            App.detachListeners();
-            Quagga.stop();
+            console.log(JSON.stringify(this.state));
+            this.detachListeners();
+            this.scanner.stop();
+            this.scanner.removeEventListener();
             App.init();
         },
         inputMapper: {
@@ -137,7 +119,8 @@ $(function() {
                 patchSize: "medium",
                 halfSample: true
             },
-            numOfWorkers: 4,
+            numOfWorkers: 2,
+            frequency: 10,
             decoder: {
                 readers : [{
                     format: "code_128_reader",
@@ -151,42 +134,45 @@ $(function() {
 
     App.init();
 
-    Quagga.onProcessed(function(result) {
-        var drawingCtx = Quagga.canvas.ctx.overlay,
-            drawingCanvas = Quagga.canvas.dom.overlay;
+    function drawResult(scanner, result) {
+        var processingCanvas = scanner.getCanvas(),
+            canvas = App.overlay,
+            ctx = canvas.getContext("2d");
+
+        canvas.setAttribute('width', processingCanvas.getAttribute('width'));
+        canvas.setAttribute('height', processingCanvas.getAttribute('height'));
 
         if (result) {
             if (result.boxes) {
-                drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
+                ctx.clearRect(0, 0, parseInt(canvas.getAttribute("width")), parseInt(canvas.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});
+                    Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, ctx, {color: "green", lineWidth: 2});
                 });
             }
 
             if (result.box) {
-                Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, drawingCtx, {color: "#00F", lineWidth: 2});
+                Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, ctx, {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.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, ctx, {color: 'red', lineWidth: 3});
             }
         }
-    });
+    };
 
-    Quagga.onDetected(function(result) {
-        var code = result.codeResult.code;
+    function addToResults(scanner, result) {
+        var code = result.codeResult.code,
+            $node,
+            canvas = scanner.getCanvas();
 
         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(code);
             $("#result_strip ul.thumbnails").prepend($node);
         }
-    });
-
+    };
 });
diff --git a/example/static_images.js b/example/static_images.js
index 1e93fa3..2327a01 100644
--- a/example/static_images.js
+++ b/example/static_images.js
@@ -12,10 +12,10 @@ $(function() {
                 .addEventListener("processed", drawResult.bind(this, this.scanner))
                 .addEventListener("detected", addToResults.bind(this, this.scanner));
 
-            this.scanner.start().then(() => {
+            this.scanner.start().then(function() {
                 console.log("Started");
                 this.attachListeners();
-            });
+            }.bind(this));
         },
         config: {
             "default": {