issue-43: Added configurable area for decoding

src/barcode_locator.js

@@ -489,8 +489,8 @@ function(ImageWrapper, CVUtils, Rasterizer, Tracer, skeletonizer, ArrayHelper, I
 
         locate : function() {
             var patchesFound,
-            topLabels = [],
-            boxes = [];
+            topLabels,
+            boxes;
 
             if (_config.halfSample) {
                 CVUtils.halfSample(_inputImageWrapper, _currentImageWrapper);
@@ -524,16 +524,29 @@ function(ImageWrapper, CVUtils, Rasterizer, Tracer, skeletonizer, ArrayHelper, I
                 width = inputStream.getWidth(),
                 height = inputStream.getHeight(),
                 halfSample = config.halfSample ? 0.5 : 1,
-                size = {
-                    x: Math.floor(width * halfSample),
-                    y: Math.floor(height * halfSample)
-                };
+                size,
+                area;
+
+            // calculate width and height based on area
+            if (inputStream.getConfig().area) {
+                area = CVUtils.computeImageArea(width, height, inputStream.getConfig().area);
+                inputStream.setTopRight({x: area.sx, y: area.sy});
+                inputStream.setCanvasSize({x: width, y: height});
+                width = area.sw;
+                height = area.sh;
+            }
+
+            size = {
+                x: Math.floor(width * halfSample),
+                y: Math.floor(height * halfSample)
+            };
 
             patchSize = CVUtils.calculatePatchSize(config.patchSize, size);
+            console.log("Patch-Size: " + JSON.stringify(patchSize));
+
             inputStream.setWidth(Math.floor(Math.floor(size.x/patchSize.x)*(1/halfSample)*patchSize.x));
             inputStream.setHeight(Math.floor(Math.floor(size.y/patchSize.y)*(1/halfSample)*patchSize.y));
 
-            console.log("Patch-Size: " + JSON.stringify(patchSize));
             if ((inputStream.getWidth() % patchSize.x) === 0 && (inputStream.getHeight() % patchSize.y) === 0) {
                 return true;
             }

src/config.js

@@ -12,6 +12,12 @@ define(function(){
               minAspectRatio: 0,
               maxAspectRatio: 100,
               facing: "environment" // or user
+          },
+          area: {
+              top: "0%",
+              right: "0%",
+              left: "0%",
+              bottom: "0%"
           }
       },
       tracking: false,

src/cv_utils.js

@@ -647,20 +647,64 @@ define(['cluster', 'glMatrixAddon', "array_helper"], function(Cluster2, glMatrix
         optimalPatchSize = findPatchSizeForDivisors(common);
         if (!optimalPatchSize) {
             optimalPatchSize = findPatchSizeForDivisors(this._computeDivisors(wideSide));
+            if (!optimalPatchSize) {
+                optimalPatchSize = findPatchSizeForDivisors((this._computeDivisors(desiredPatchSize * nrOfPatches)));
+            }
         }
         return optimalPatchSize;
     };
 
-    function AdjustToSizeError(message, desiredPatchSize) {
-        this.name = 'AdjustToSizeError';
-        this.message = message || 'AdjustToSizeError';
-        this.patchSize = desiredPatchSize;
-    }
+    CVUtils._parseCSSDimensionValues = function(value) {
+        var dimension = {
+                value: parseFloat(value),
+                unit: value.indexOf("%") === value.length-1 ? "%" : "%"
+            };
 
-    AdjustToSizeError.prototype = Object.create(RangeError.prototype);
-    AdjustToSizeError.prototype.constructor = AdjustToSizeError;
+        return dimension;
+    };
 
-    CVUtils.AdjustToSizeError = AdjustToSizeError;
+    CVUtils._dimensionsConverters = {
+        top: function(dimension, context) {
+            if (dimension.unit === "%") {
+                return Math.floor(context.height * (dimension.value / 100));
+            }
+        },
+        right: function(dimension, context) {
+            if (dimension.unit === "%") {
+                return Math.floor(context.width - (context.width * (dimension.value / 100)));
+            }
+        },
+        bottom: function(dimension, context) {
+            if (dimension.unit === "%") {
+                return Math.floor(context.height - (context.height * (dimension.value / 100)));
+            }
+        },
+        left: function(dimension, context) {
+            if (dimension.unit === "%") {
+                return Math.floor(context.width * (dimension.value / 100));
+            }
+        }
+    };
+
+    CVUtils.computeImageArea = function(inputWidth, inputHeight, area) {
+        var context = {width: inputWidth, height: inputHeight};
+
+        var parsedArea = Object.keys(area).reduce(function(result, key) {
+            var value = area[key],
+                parsed = CVUtils._parseCSSDimensionValues(value),
+                calculated = CVUtils._dimensionsConverters[key](parsed, context);
+
+            result[key] = calculated;
+            return result;
+        }, {});
+
+        return {
+            sx: parsedArea.left,
+            sy: parsedArea.top,
+            sw: parsedArea.right - parsedArea.left,
+            sh: parsedArea.bottom - parsedArea.top
+        };
+    };
 
     return (CVUtils);
 });

src/frame_grabber.js

@@ -10,29 +10,26 @@ define(["cv_utils"], function(CVUtils) {
         var _that = {},
             _streamConfig = inputStream.getConfig(),
             _video_size = CVUtils.imageRef(inputStream.getRealWidth(), inputStream.getRealHeight()),
-            _size =_streamConfig.size ? CVUtils.imageRef(inputStream.getWidth(), inputStream.getHeight()) : _video_size,
-            _sx = 0,
-            _sy = 0,
-            _dx = 0,
-            _dy = 0,
-            _sWidth,
-            _dWidth,
-            _sHeight,
-            _dHeight,
-            _canvas = null,
+            _canvasSize = inputStream.getCanvasSize(),
+            _size = CVUtils.imageRef(inputStream.getWidth(), inputStream.getHeight()),
+            topRight = inputStream.getTopRight(),
+            _sx = topRight.x,
+            _sy = topRight.y,
+            _canvas,
             _ctx = null,
             _data = null;
 
-        _sWidth = _video_size.x;
-        _dWidth = _size.x;
-        _sHeight = _video_size.y;
-        _dHeight = _size.y;
-
         _canvas = canvas ? canvas : document.createElement("canvas");
-        _canvas.width = _size.x;
-        _canvas.height = _size.y;
+        _canvas.width = _canvasSize.x;
+        _canvas.height = _canvasSize.y;
         _ctx = _canvas.getContext("2d");
         _data = new Uint8Array(_size.x * _size.y);
+        console.log("FrameGrabber", {
+            size: _size,
+            topRight: topRight,
+            videoSize: _video_size,
+            canvasSize: _canvasSize
+        });
 
         /**
          * Uses the given array as frame-buffer 
@@ -57,8 +54,8 @@ define(["cv_utils"], function(CVUtils) {
                 frame = inputStream.getFrame(),
                 ctxData;
             if (frame) {
-                _ctx.drawImage(frame, _sx, _sy, _sWidth, _sHeight, _dx, _dy, _dWidth, _dHeight);
-                ctxData = _ctx.getImageData(0, 0, _size.x, _size.y).data;
+                _ctx.drawImage(frame, 0, 0, _canvasSize.x, _canvasSize.y);
+                ctxData = _ctx.getImageData(_sx, _sy, _size.x, _size.y).data;
                 if(doHalfSample){
                     CVUtils.grayAndHalfSampleFromCanvasData(ctxData, _size, _data);
                 } else {

src/input_stream.js

@@ -11,7 +11,9 @@ define(["image_loader"], function(ImageLoader) {
             _eventNames = ['canrecord', 'ended'],
             _eventHandlers = {},
             _calculatedWidth,
-            _calculatedHeight;
+            _calculatedHeight,
+            _topRight = {x: 0, y: 0},
+            _canvasSize = {x: 0, y: 0};
 
         function initSize() {
             var width = video.videoWidth,
@@ -19,6 +21,9 @@ define(["image_loader"], function(ImageLoader) {
 
             _calculatedWidth = _config.size ? width/height > 1 ? _config.size : Math.floor((width/height) * _config.size) : width;
             _calculatedHeight = _config.size ? width/height > 1 ? Math.floor((height/width) * _config.size) : _config.size : height;
+
+            _canvasSize.x = _calculatedWidth;
+            _canvasSize.y = _calculatedHeight;
         }
 
         that.getRealWidth = function() {
@@ -111,6 +116,24 @@ define(["image_loader"], function(ImageLoader) {
             }
         };
 
+        that.setTopRight = function(topRight) {
+            _topRight.x = topRight.x;
+            _topRight.y = topRight.y;
+        };
+
+        that.getTopRight = function() {
+            return _topRight;
+        };
+
+        that.setCanvasSize = function(size) {
+            _canvasSize.x = size.x;
+            _canvasSize.y = size.y;
+        };
+
+        that.getCanvasSize = function() {
+            return _canvasSize;
+        };
+
         that.getFrame = function() {
             return video;
         };
@@ -146,7 +169,9 @@ define(["image_loader"], function(ImageLoader) {
             calculatedWidth,
             calculatedHeight,
             _eventNames = ['canrecord', 'ended'],
-            _eventHandlers = {};
+            _eventHandlers = {},
+            _topRight = {x: 0, y: 0},
+            _canvasSize = {x: 0, y: 0};
 
         function loadImages() {
             loaded = false;
@@ -156,6 +181,8 @@ define(["image_loader"], function(ImageLoader) {
                 height = imgs[0].height;
                 calculatedWidth = _config.size ? width/height > 1 ? _config.size : Math.floor((width/height) * _config.size) : width;
                 calculatedHeight = _config.size ? width/height > 1 ? Math.floor((height/width) * _config.size) : _config.size : height;
+                _canvasSize.x = calculatedWidth;
+                _canvasSize.y = calculatedHeight;
                 loaded = true;
                 frameIdx = 0;
                 setTimeout(function() {
@@ -245,6 +272,24 @@ define(["image_loader"], function(ImageLoader) {
             }
         };
 
+        that.setTopRight = function(topRight) {
+            _topRight.x = topRight.x;
+            _topRight.y = topRight.y;
+        };
+
+        that.getTopRight = function() {
+            return _topRight;
+        };
+
+        that.setCanvasSize = function(size) {
+            _canvasSize.x = size.x;
+            _canvasSize.y = size.y;
+        };
+
+        that.getCanvasSize = function() {
+            return _canvasSize;
+        };
+
         that.getFrame = function() {
             var frame;
             

src/quagga.js

@@ -140,8 +140,8 @@ function(Code128Reader,
             }
         }
         _canvasContainer.ctx.image = _canvasContainer.dom.image.getContext("2d");
-        _canvasContainer.dom.image.width = _inputStream.getWidth();
-        _canvasContainer.dom.image.height = _inputStream.getHeight();
+        _canvasContainer.dom.image.width = _inputStream.getCanvasSize().x;
+        _canvasContainer.dom.image.height = _inputStream.getCanvasSize().y;
 
         _canvasContainer.dom.overlay = document.querySelector("canvas.drawingBuffer");
         if (!_canvasContainer.dom.overlay) {
@@ -157,8 +157,8 @@ function(Code128Reader,
             }
         }
         _canvasContainer.ctx.overlay = _canvasContainer.dom.overlay.getContext("2d");
-        _canvasContainer.dom.overlay.width = _inputStream.getWidth();
-        _canvasContainer.dom.overlay.height = _inputStream.getHeight();
+        _canvasContainer.dom.overlay.width = _inputStream.getCanvasSize().x;
+        _canvasContainer.dom.overlay.height = _inputStream.getCanvasSize().y;
     }
 
     function initBuffers(imageWrapper) {
@@ -189,6 +189,53 @@ function(Code128Reader,
         }
     }
 
+    function transformResult(result) {
+        var topRight = _inputStream.getTopRight(),
+            xOffset = topRight.x,
+            yOffset = topRight.y,
+            i;
+
+        if (!result || (xOffset === 0 && yOffset === 0)) {
+            return;
+        }
+
+
+        if (result.line && result.line.length === 2) {
+            moveLine(result.line);
+        }
+        if (result.boxes && result.boxes.length > 0) {
+            for (i = 0; i < result.boxes.length; i++) {
+                moveBox(result.boxes[i]);
+            }
+        }
+
+        function moveBox(box) {
+            var corner = box.length;
+
+            while(corner--) {
+                box[corner][0] += xOffset;
+                box[corner][1] += yOffset;
+            }
+        }
+
+        function moveLine(line) {
+            line[0].x += xOffset;
+            line[0].y += yOffset;
+            line[1].x += xOffset;
+            line[1].y += yOffset;
+        }
+    }
+
+    function publishResult(result) {
+        if (_onUIThread) {
+            transformResult(result);
+        }
+        Events.publish("processed", result);
+        if (result && result.codeResult) {
+            Events.publish("detected", result);
+        }
+    }
+
     function locateAndDecode() {
         var result,
             boxes;
@@ -198,14 +245,10 @@ function(Code128Reader,
             result = _decoder.decodeFromBoundingBoxes(boxes);
             result = result || {};
             result.boxes = boxes;
-            Events.publish("processed", result);
-            if (result && result.codeResult) {
-                Events.publish("detected", result);
-            }
+            publishResult(result);
         } else {
-            Events.publish("processed");
+            publishResult();
         }
-
     }
 
     function update() {
@@ -289,10 +332,7 @@ function(Code128Reader,
             } else if (e.data.event === 'processed') {
                 workerThread.imageData = new Uint8Array(e.data.imageData);
                 workerThread.busy = false;
-                Events.publish("processed", e.data.result);
-                if (e.data.result && e.data.result.codeResult) {
-                    Events.publish("detected", e.data.result);
-                }
+                publishResult(e.data.result);
             }
         };