Merged master

README.md

@@ -1,7 +1,7 @@
 quaggaJS
 ========
 
-- [Changelog](#changelog) (2015-05-20)
+- [Changelog](#changelog) (2015-06-13)
 
 ## What is QuaggaJS?
 
@@ -217,6 +217,12 @@ The default `config` object is set as followed:
           width: 640,
           height: 480,
           facing: "environment"
+      },
+      area: { // defines rectangle of the detection/localization area
+          top: "0%",    // top offset
+          right: "0%",  // right offset
+          left: "0%",   // left offset
+          bottom: "0%"  // bottom offset
       }
   },
   tracking: false,
@@ -293,6 +299,15 @@ work.
 
 ## <a name="changelog">Changelog</a>
 
+### 2015-06-13
+- Improvements
+  - Added fixes for ``Code39Reader`` (trailing whitespace was missing)
+
+### 2015-06-09
+- Features
+  - Introduced the ``area`` property
+  - Ability to define a rectangle where localization/decoding should be applied
+
 ### 2015-05-20
 - Improvements
   - Making EAN and UPC readers even more restrictive

dist/quagga.js

@@ -1489,7 +1489,9 @@ define('input_stream',["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,
@@ -1497,6 +1499,9 @@ define('input_stream',["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() {
@@ -1589,6 +1594,24 @@ define('input_stream',["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;
         };
@@ -1624,7 +1647,9 @@ define('input_stream',["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;
@@ -1634,6 +1659,8 @@ define('input_stream',["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() {
@@ -1723,6 +1750,24 @@ define('input_stream',["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;
             
@@ -6557,21 +6602,64 @@ define('cv_utils',['cluster', "array_helper", "gl-matrix"], function(Cluster2, A
         optimalPatchSize = findPatchSizeForDivisors(common);
         if (!optimalPatchSize) {
             optimalPatchSize = findPatchSizeForDivisors(this._computeDivisors(wideSide));
-            throw new AdjustToSizeError("", optimalPatchSize);
+            if (!optimalPatchSize) {
+                optimalPatchSize = findPatchSizeForDivisors((this._computeDivisors(desiredPatchSize * nrOfPatches)));
+            }
         }
         return optimalPatchSize;
     };
 
-    function AdjustToSizeError(message, desiredPatchSize) {
+    CVUtils._parseCSSDimensionValues = function(value) {
-        this.name = 'AdjustToSizeError';
+        var dimension = {
-        this.message = message || 'AdjustToSizeError';
+                value: parseFloat(value),
-        this.patchSize = desiredPatchSize;
+                unit: value.indexOf("%") === value.length-1 ? "%" : "%"
+            };
+
+        return dimension;
+    };
+
+    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));
+            }
+        }
+    };
 
-    AdjustToSizeError.prototype = Object.create(RangeError.prototype);
+    CVUtils.computeImageArea = function(inputWidth, inputHeight, area) {
-    AdjustToSizeError.prototype.constructor = AdjustToSizeError;
+        var context = {width: inputWidth, height: inputHeight};
 
-    CVUtils.AdjustToSizeError = AdjustToSizeError;
+        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);
 });
@@ -8046,10 +8134,11 @@ function(ImageWrapper, CVUtils, Rasterizer, Tracer, skeletonizer, ArrayHelper, I
             initBuffers();
             initCanvas();
         },
+
         locate : function() {
             var patchesFound,
-            topLabels = [],
+            topLabels,
-            boxes = [];
+            boxes;
 
             if (_config.halfSample) {
                 CVUtils.halfSample(_inputImageWrapper, _currentImageWrapper);
@@ -8076,6 +8165,43 @@ function(ImageWrapper, CVUtils, Rasterizer, Tracer, skeletonizer, ArrayHelper, I
 
             boxes = findBoxes(topLabels, maxLabel);
             return boxes;
+        },
+
+        checkImageConstraints: function(inputStream, config) {
+            var patchSize,
+                width = inputStream.getWidth(),
+                height = inputStream.getHeight(),
+                halfSample = config.halfSample ? 0.5 : 1,
+                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));
+
+            if ((inputStream.getWidth() % patchSize.x) === 0 && (inputStream.getHeight() % patchSize.y) === 0) {
+                return true;
+            }
+
+            throw new Error("Image dimensions do not comply with the current settings: Width (" +
+                width + " )and height (" + height +
+                ") must a multiple of " + patchSize.x);
         }
     };
 });
@@ -8380,7 +8506,13 @@ define(
             } while(decodedChar !== '*');
             result.pop();
 
+            if (!result.length) {
+                return null;
+            }
 
+            if(!self._verifyTrailingWhitespace(lastStart, nextStart, counters)) {
+                return null;
+            }
 
             return {
                 code : result.join(""),
@@ -8391,6 +8523,17 @@ define(
             };
         };
 
+        Code39Reader.prototype._verifyTrailingWhitespace = function(lastStart, nextStart, counters) {
+            var trailingWhitespaceEnd,
+                patternSize = ArrayHelper.sum(counters);
+
+            trailingWhitespaceEnd = nextStart - lastStart - patternSize;
+            if ((trailingWhitespaceEnd * 3) >= patternSize) {
+                return true;
+            }
+            return false;
+        };
+
         Code39Reader.prototype._patternToChar = function(pattern) {
             var i,
                 self = this;
@@ -9378,29 +9521,26 @@ define('frame_grabber',["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,
+            _canvasSize = inputStream.getCanvasSize(),
-            _sx = 0,
+            _size = CVUtils.imageRef(inputStream.getWidth(), inputStream.getHeight()),
-            _sy = 0,
+            topRight = inputStream.getTopRight(),
-            _dx = 0,
+            _sx = topRight.x,
-            _dy = 0,
+            _sy = topRight.y,
-            _sWidth,
+            _canvas,
-            _dWidth,
-            _sHeight,
-            _dHeight,
-            _canvas = null,
             _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.width = _canvasSize.x;
-        _canvas.height = _size.y;
+        _canvas.height = _canvasSize.y;
         _ctx = _canvas.getContext("2d");
         _data = new Uint8Array(_size.x * _size.y);
+        console.log("FrameGrabber", JSON.stringify({
+            size: _size,
+            topRight: topRight,
+            videoSize: _video_size,
+            canvasSize: _canvasSize
+        }));
 
         /**
          * Uses the given array as frame-buffer 
@@ -9425,8 +9565,8 @@ define('frame_grabber',["cv_utils"], function(CVUtils) {
                 frame = inputStream.getFrame(),
                 ctxData;
             if (frame) {
-                _ctx.drawImage(frame, _sx, _sy, _sWidth, _sHeight, _dx, _dy, _dWidth, _dHeight);
+                _ctx.drawImage(frame, 0, 0, _canvasSize.x, _canvasSize.y);
-                ctxData = _ctx.getImageData(0, 0, _size.x, _size.y).data;
+                ctxData = _ctx.getImageData(_sx, _sy, _size.x, _size.y).data;
                 if(doHalfSample){
                     CVUtils.grayAndHalfSampleFromCanvasData(ctxData, _size, _data);
                 } else {
@@ -9502,6 +9642,12 @@ define('config',[],function(){
               minAspectRatio: 0,
               maxAspectRatio: 100,
               facing: "environment" // or user
+          },
+          area: {
+              top: "0%",
+              right: "0%",
+              left: "0%",
+              bottom: "0%"
           }
       },
       tracking: false,
@@ -9790,7 +9936,6 @@ define('quagga',[
         "events",
         "camera_access",
         "image_debug",
-        "cv_utils",
         "gl-matrix"],
 function(Code128Reader,
          EANReader,
@@ -9804,7 +9949,6 @@ function(Code128Reader,
          Events,
          CameraAccess,
          ImageDebug,
-         CVUtils,
          glMatrix) {
     
     
@@ -9887,39 +10031,10 @@ function(Code128Reader,
         _inputStream.addEventListener("canrecord", canRecord.bind(undefined, cb));
     }
 
-    function checkImageConstraints() {
-        var patchSize,
-            width = _inputStream.getWidth(),
-            height = _inputStream.getHeight(),
-            halfSample = _config.locator.halfSample ? 0.5 : 1,
-            size = {
-                x: Math.floor(width * halfSample),
-                y: Math.floor(height * halfSample)
-            };
-
-        if (_config.locate) {
-            try {
-                console.log(size);
-                patchSize = CVUtils.calculatePatchSize(_config.locator.patchSize, size);
-            } catch (error) {
-                if (error instanceof CVUtils.AdjustToSizeError) {
-                    _inputStream.setWidth(Math.floor(Math.floor(size.x/error.patchSize.x)*(1/halfSample)*error.patchSize.x));
-                    _inputStream.setHeight(Math.floor(Math.floor(size.y/error.patchSize.y)*(1/halfSample)*error.patchSize.y));
-                    patchSize = error.patchSize;
-                }
-            }
-            console.log("Patch-Size: " + JSON.stringify(patchSize));
-            if ((_inputStream.getWidth() % patchSize.x) === 0 && (_inputStream.getHeight() % patchSize.y) === 0) {
-                return true;
-            }
-        }
-        throw new Error("Image dimensions do not comply with the current settings: Width (" +
-                            width + " )and height (" + height +
-                            ") must a multiple of " + patchSize.x);
-    }
-
     function canRecord(cb) {
-        checkImageConstraints();
+        if (_config.locate) {
+            BarcodeLocator.checkImageConstraints(_inputStream, _config.locator);
+        }
         initCanvas();
         _framegrabber = FrameGrabber.create(_inputStream, _canvasContainer.dom.image);
         initConfig();
@@ -9952,8 +10067,8 @@ function(Code128Reader,
                 }
             }
             _canvasContainer.ctx.image = _canvasContainer.dom.image.getContext("2d");
-            _canvasContainer.dom.image.width = _inputStream.getWidth();
+            _canvasContainer.dom.image.width = _inputStream.getCanvasSize().x;
-            _canvasContainer.dom.image.height = _inputStream.getHeight();
+            _canvasContainer.dom.image.height = _inputStream.getCanvasSize().y;
 
             _canvasContainer.dom.overlay = document.querySelector("canvas.drawingBuffer");
             if (!_canvasContainer.dom.overlay) {
@@ -9969,8 +10084,8 @@ function(Code128Reader,
                 }
             }
             _canvasContainer.ctx.overlay = _canvasContainer.dom.overlay.getContext("2d");
-            _canvasContainer.dom.overlay.width = _inputStream.getWidth();
+            _canvasContainer.dom.overlay.width = _inputStream.getCanvasSize().x;
-            _canvasContainer.dom.overlay.height = _inputStream.getHeight();
+            _canvasContainer.dom.overlay.height = _inputStream.getCanvasSize().y;
         }
     }
 
@@ -10002,6 +10117,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;
@@ -10011,14 +10173,10 @@ function(Code128Reader,
             result = _decoder.decodeFromBoundingBoxes(boxes);
             result = result || {};
             result.boxes = boxes;
-            Events.publish("processed", result);
+            publishResult(result);
-            if (result && result.codeResult) {
-                Events.publish("detected", result);
-            }
         } else {
-            Events.publish("processed");
+            publishResult();
         }
-
     }
 
     function update() {
@@ -10102,10 +10260,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);
+                publishResult(e.data.result);
-                if (e.data.result && e.data.result.codeResult) {
-                    Events.publish("detected", e.data.result);
-                }
             }
         };
 

example/file_input.js

@@ -107,9 +107,31 @@ $(function() {
     
     App.init();
 
+    function calculateRectFromArea(canvas, area) {
+        var canvasWidth = canvas.width,
+            canvasHeight = canvas.height,
+            top = parseInt(area.top)/100,
+            right = parseInt(area.right)/100,
+            bottom = parseInt(area.bottom)/100,
+            left = parseInt(area.left)/100;
+
+        top *= canvasHeight;
+        right = canvasWidth - canvasWidth*right;
+        bottom = canvasHeight - canvasHeight*bottom;
+        left *= canvasWidth;
+
+        return {
+            x: left,
+            y: top,
+            width: right - left,
+            height: bottom - top
+        };
+    }
+
     Quagga.onProcessed(function(result) {
         var drawingCtx = Quagga.canvas.ctx.overlay,
-            drawingCanvas = Quagga.canvas.dom.overlay;
+            drawingCanvas = Quagga.canvas.dom.overlay,
+            area;
 
         if (result) {
             if (result.boxes) {
@@ -128,6 +150,12 @@ $(function() {
             if (result.codeResult && result.codeResult.code) {
                 Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, drawingCtx, {color: 'red', lineWidth: 3});
             }
+
+            if (App.state.inputStream.area) {
+                area = calculateRectFromArea(drawingCanvas, App.state.inputStream.area);
+                drawingCtx.strokeStyle = "#0F0";
+                drawingCtx.strokeRect(area.x, area.y, area.width, area.height);
+            }
     }
     });
 

karma-integration.conf.js

@@ -4,9 +4,9 @@ module.exports = function(config) {
     frameworks: ['mocha', 'requirejs', 'chai', 'sinon', 'sinon-chai'],
     files: [
       'test-main.js',
-      'src/vendor/glMatrix.js',
       'src/typedefs.js',
       {pattern: 'node_modules/async/lib/async.js', included: false},
+      {pattern: 'node_modules/gl-matrix/dist/gl-matrix.js', included: false},
       {pattern: 'src/*.js', included: false},
       {pattern: 'spec/**/*integration.spec.js', included: false},
       {pattern: 'test/**/*.*', included: false}

karma.conf.js

@@ -4,9 +4,9 @@ module.exports = function(config) {
     frameworks: ['mocha', 'requirejs', 'chai', 'sinon', 'sinon-chai'],
     files: [
       'test-main.js',
-      'src/vendor/glMatrix.js',
       'src/typedefs.js',
       {pattern: 'node_modules/async/lib/async.js', included: false},
+      {pattern: 'node_modules/gl-matrix/dist/gl-matrix.js', included: false},
       {pattern: 'src/*.js', included: false},
       {pattern: 'spec/**/*.js', included: false},
       {pattern: 'test/**/*.*', included: false}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "quagga",
-  "version": "0.6.6",
+  "version": "0.6.8",
   "description": "An advanced barcode-scanner written in JavaScript",
   "main": "lib/quagga.js",
   "browser": "dist/quagga.js",

spec/barcode_locator.spec.js

@@ -0,0 +1,131 @@
+
+define(['barcode_locator', 'config', 'html_utils'],
+    function(BarcodeLocator, Config, HtmlUtils){
+
+    describe('checkImageConstraints', function() {
+        var config,
+            inputStream,
+            imageSize,
+            streamConfig = {};
+
+        beforeEach(function() {
+            imageSize = {
+                x: 640, y: 480
+            };
+            config = HtmlUtils.mergeObjects({}, Config);
+            inputStream = {
+                getWidth: function() {
+                    return imageSize.x;
+                },
+                getHeight: function() {
+                    return imageSize.y;
+                },
+                setWidth: function() {},
+                setHeight: function() {},
+                setTopRight: function() {},
+                setCanvasSize: function() {},
+                getConfig: function() {
+                    return streamConfig;
+                }
+            };
+            sinon.stub(inputStream, "setWidth", function(width) {
+                imageSize.x = width;
+            });
+            sinon.stub(inputStream, "setHeight", function(height) {
+                imageSize.y = height;
+            });
+            sinon.stub(inputStream, "setTopRight");
+            sinon.stub(inputStream, "setCanvasSize");
+        });
+
+        afterEach(function() {
+            inputStream.setWidth.restore();
+            inputStream.setHeight.restore();
+        });
+
+        it('should not adjust the image-size if not needed', function() {
+            var expected = {x: imageSize.x, y: imageSize.y};
+            BarcodeLocator.checkImageConstraints(inputStream, config.locator);
+            expect(inputStream.getWidth()).to.be.equal(expected.x);
+            expect(inputStream.getHeight()).to.be.equal(expected.y);
+        });
+
+        it('should adjust the image-size', function() {
+            var expected = {x: imageSize.x, y: imageSize.y};
+
+            config.locator.halfSample = true;
+            imageSize.y += 1;
+            BarcodeLocator.checkImageConstraints(inputStream, config.locator);
+            expect(inputStream.getWidth()).to.be.equal(expected.x);
+            expect(inputStream.getHeight()).to.be.equal(expected.y);
+        });
+
+        it('should adjust the image-size', function() {
+            var expected = {x: imageSize.x, y: imageSize.y};
+
+            imageSize.y += 1;
+            config.locator.halfSample = false;
+            BarcodeLocator.checkImageConstraints(inputStream, config.locator);
+            expect(inputStream.getHeight()).to.be.equal(expected.y);
+            expect(inputStream.getWidth()).to.be.equal(expected.x);
+        });
+
+        it("should take the defined area into account", function() {
+            var expectedSize = {
+                    x: 420,
+                    y: 315
+                },
+                expectedTopRight = {
+                    x: 115,
+                    y: 52
+                },
+                expectedCanvasSize = {
+                    x: 640,
+                    y: 480
+                };
+
+            streamConfig.area = {
+                top: "11%",
+                right: "15%",
+                bottom: "20%",
+                left: "18%"
+            };
+
+            config.locator.halfSample = false;
+            BarcodeLocator.checkImageConstraints(inputStream, config.locator);
+            expect(inputStream.getHeight()).to.be.equal(expectedSize.y);
+            expect(inputStream.getWidth()).to.be.equal(expectedSize.x);
+            expect(inputStream.setTopRight.getCall(0).args[0]).to.deep.equal(expectedTopRight);
+            expect(inputStream.setCanvasSize.getCall(0).args[0]).to.deep.equal(expectedCanvasSize);
+        });
+
+        it("should return the original size if set to full image", function() {
+            var expectedSize = {
+                    x: 640,
+                    y: 480
+                },
+                expectedTopRight = {
+                    x: 0,
+                    y: 0
+                },
+                expectedCanvasSize = {
+                    x: 640,
+                    y: 480
+                };
+
+            streamConfig.area = {
+                top: "0%",
+                right: "0%",
+                bottom: "0%",
+                left: "0%"
+            };
+
+            config.locator.halfSample = false;
+            BarcodeLocator.checkImageConstraints(inputStream, config.locator);
+            expect(inputStream.getHeight()).to.be.equal(expectedSize.y);
+            expect(inputStream.getWidth()).to.be.equal(expectedSize.x);
+            expect(inputStream.setTopRight.getCall(0).args[0]).to.deep.equal(expectedTopRight);
+            expect(inputStream.setCanvasSize.getCall(0).args[0]).to.deep.equal(expectedCanvasSize);
+        });
+    });
+});

spec/cv_utils.spec.js

@@ -8,4 +8,138 @@ define(['cv_utils'], function(CVUtils){
             expect(res.toVec2()[0]).to.equal(1);
         });
     });
+
+    describe('calculatePatchSize', function() {
+        it('should not throw an error in case of valid image size', function() {
+            var expected = {x: 32, y: 32},
+                patchSize = CVUtils.calculatePatchSize("medium", {x: 640, y: 480});
+
+            expect(patchSize).to.be.deep.equal(expected);
+        });
+
+        it('should thow an error if image size it not valid', function() {
+            var expected = {x: 32, y: 32},
+                patchSize = CVUtils.calculatePatchSize("medium", {x: 640, y: 480});
+
+            expect(patchSize).to.be.deep.equal(expected);
+        });
+    });
+
+    describe('_parseCSSDimensionValues', function() {
+        it("should convert a percentual value correctly", function() {
+            var expected = {
+                    value: 10,
+                    unit: "%"
+                },
+                result = CVUtils._parseCSSDimensionValues("10%");
+
+            expect(result).to.be.deep.equal(expected);
+        });
+
+        it("should convert a 0% value correctly", function() {
+            var expected = {
+                    value: 100,
+                    unit: "%"
+                },
+                result = CVUtils._parseCSSDimensionValues("100%");
+
+            expect(result).to.be.deep.equal(expected);
+        });
+
+        it("should convert a 100% value correctly", function() {
+            var expected = {
+                    value: 0,
+                    unit: "%"
+                },
+                result = CVUtils._parseCSSDimensionValues("0%");
+
+            expect(result).to.be.deep.equal(expected);
+        });
+
+        it("should convert a pixel value to percentage", function() {
+            var expected = {
+                    value: 26.3,
+                    unit: "%"
+                },
+                result = CVUtils._parseCSSDimensionValues("26.3px");
+
+            console.log(result);
+            expect(result).to.be.deep.equal(expected);
+        });
+    });
+
+    describe("_dimensionsConverters", function(){
+        var context;
+
+        beforeEach(function() {
+            context = {
+                width: 640,
+                height: 480
+            };
+        });
+
+        it("should convert a top-value correclty", function() {
+            var expected = 48,
+                result = CVUtils._dimensionsConverters.top({value: 10, unit: "%"}, context);
+
+            expect(result).to.be.equal(expected);
+        });
+
+        it("should convert a right-value correclty", function() {
+            var expected = 640 - 128,
+                result = CVUtils._dimensionsConverters.right({value: 20, unit: "%"}, context);
+
+            expect(result).to.be.equal(expected);
+        });
+
+        it("should convert a bottom-value correclty", function() {
+            var expected = 480 - 77,
+                result = CVUtils._dimensionsConverters.bottom({value: 16, unit: "%"}, context);
+
+            expect(result).to.be.equal(expected);
+        });
+
+        it("should convert a left-value correclty", function() {
+            var expected = 57,
+                result = CVUtils._dimensionsConverters.left({value: 9, unit: "%"}, context);
+
+            expect(result).to.be.equal(expected);
+        });
+    });
+
+    describe("computeImageArea", function() {
+        it("should calculate an image-area", function() {
+            var expected = {
+                    sx: 115,
+                    sy: 48,
+                    sw: 429,
+                    sh: 336
+                },
+                result = CVUtils.computeImageArea(640, 480, {
+                    top: "10%",
+                    right: "15%",
+                    bottom: "20%",
+                    left: "18%"
+                });
+
+            expect(result).to.be.deep.equal(expected);
+        });
+
+        it("should calculate full image-area", function() {
+            var expected = {
+                    sx: 0,
+                    sy: 0,
+                    sw: 640,
+                    sh: 480
+                },
+                result = CVUtils.computeImageArea(640, 480, {
+                    top: "0%",
+                    right: "0%",
+                    bottom: "0%",
+                    left: "0%"
+                });
+
+            expect(result).to.be.deep.equal(expected);
+        });
+    });
 });

src/barcode_locator.js

@@ -487,10 +487,11 @@ function(ImageWrapper, CVUtils, Rasterizer, Tracer, skeletonizer, ArrayHelper, I
             initBuffers();
             initCanvas();
         },
+
         locate : function() {
             var patchesFound,
-            topLabels = [],
+            topLabels,
-            boxes = [];
+            boxes;
 
             if (_config.halfSample) {
                 CVUtils.halfSample(_inputImageWrapper, _currentImageWrapper);
@@ -517,6 +518,43 @@ function(ImageWrapper, CVUtils, Rasterizer, Tracer, skeletonizer, ArrayHelper, I
 
             boxes = findBoxes(topLabels, maxLabel);
             return boxes;
+        },
+
+        checkImageConstraints: function(inputStream, config) {
+            var patchSize,
+                width = inputStream.getWidth(),
+                height = inputStream.getHeight(),
+                halfSample = config.halfSample ? 0.5 : 1,
+                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));
+
+            if ((inputStream.getWidth() % patchSize.x) === 0 && (inputStream.getHeight() % patchSize.y) === 0) {
+                return true;
+            }
+
+            throw new Error("Image dimensions do not comply with the current settings: Width (" +
+                width + " )and height (" + height +
+                ") must a multiple of " + patchSize.x);
         }
     };
 });

src/code_39_reader.js

@@ -82,7 +82,13 @@ define(
             } while(decodedChar !== '*');
             result.pop();
 
+            if (!result.length) {
+                return null;
+            }
 
+            if(!self._verifyTrailingWhitespace(lastStart, nextStart, counters)) {
+                return null;
+            }
 
             return {
                 code : result.join(""),
@@ -93,6 +99,17 @@ define(
             };
         };
 
+        Code39Reader.prototype._verifyTrailingWhitespace = function(lastStart, nextStart, counters) {
+            var trailingWhitespaceEnd,
+                patternSize = ArrayHelper.sum(counters);
+
+            trailingWhitespaceEnd = nextStart - lastStart - patternSize;
+            if ((trailingWhitespaceEnd * 3) >= patternSize) {
+                return true;
+            }
+            return false;
+        };
+
         Code39Reader.prototype._patternToChar = function(pattern) {
             var i,
                 self = this;

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

@@ -649,21 +649,64 @@ define(['cluster', "array_helper", "gl-matrix"], function(Cluster2, ArrayHelper,
         optimalPatchSize = findPatchSizeForDivisors(common);
         if (!optimalPatchSize) {
             optimalPatchSize = findPatchSizeForDivisors(this._computeDivisors(wideSide));
-            throw new AdjustToSizeError("", optimalPatchSize);
+            if (!optimalPatchSize) {
+                optimalPatchSize = findPatchSizeForDivisors((this._computeDivisors(desiredPatchSize * nrOfPatches)));
+            }
         }
         return optimalPatchSize;
     };
 
-    function AdjustToSizeError(message, desiredPatchSize) {
+    CVUtils._parseCSSDimensionValues = function(value) {
-        this.name = 'AdjustToSizeError';
+        var dimension = {
-        this.message = message || 'AdjustToSizeError';
+                value: parseFloat(value),
-        this.patchSize = desiredPatchSize;
+                unit: value.indexOf("%") === value.length-1 ? "%" : "%"
+            };
+
+        return dimension;
+    };
+
+    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));
+            }
+        }
+    };
 
-    AdjustToSizeError.prototype = Object.create(RangeError.prototype);
+    CVUtils.computeImageArea = function(inputWidth, inputHeight, area) {
-    AdjustToSizeError.prototype.constructor = AdjustToSizeError;
+        var context = {width: inputWidth, height: inputHeight};
 
-    CVUtils.AdjustToSizeError = AdjustToSizeError;
+        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,
+            _canvasSize = inputStream.getCanvasSize(),
-            _sx = 0,
+            _size = CVUtils.imageRef(inputStream.getWidth(), inputStream.getHeight()),
-            _sy = 0,
+            topRight = inputStream.getTopRight(),
-            _dx = 0,
+            _sx = topRight.x,
-            _dy = 0,
+            _sy = topRight.y,
-            _sWidth,
+            _canvas,
-            _dWidth,
-            _sHeight,
-            _dHeight,
-            _canvas = null,
             _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.width = _canvasSize.x;
-        _canvas.height = _size.y;
+        _canvas.height = _canvasSize.y;
         _ctx = _canvas.getContext("2d");
         _data = new Uint8Array(_size.x * _size.y);
+        console.log("FrameGrabber", JSON.stringify({
+            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);
+                _ctx.drawImage(frame, 0, 0, _canvasSize.x, _canvasSize.y);
-                ctxData = _ctx.getImageData(0, 0, _size.x, _size.y).data;
+                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

@@ -15,7 +15,6 @@ define([
         "events",
         "camera_access",
         "image_debug",
-        "cv_utils",
         "gl-matrix"],
 function(Code128Reader,
          EANReader,
@@ -29,7 +28,6 @@ function(Code128Reader,
          Events,
          CameraAccess,
          ImageDebug,
-         CVUtils,
          glMatrix) {
     "use strict";
     
@@ -112,39 +110,10 @@ function(Code128Reader,
         _inputStream.addEventListener("canrecord", canRecord.bind(undefined, cb));
     }
 
-    function checkImageConstraints() {
-        var patchSize,
-            width = _inputStream.getWidth(),
-            height = _inputStream.getHeight(),
-            halfSample = _config.locator.halfSample ? 0.5 : 1,
-            size = {
-                x: Math.floor(width * halfSample),
-                y: Math.floor(height * halfSample)
-            };
-
-        if (_config.locate) {
-            try {
-                console.log(size);
-                patchSize = CVUtils.calculatePatchSize(_config.locator.patchSize, size);
-            } catch (error) {
-                if (error instanceof CVUtils.AdjustToSizeError) {
-                    _inputStream.setWidth(Math.floor(Math.floor(size.x/error.patchSize.x)*(1/halfSample)*error.patchSize.x));
-                    _inputStream.setHeight(Math.floor(Math.floor(size.y/error.patchSize.y)*(1/halfSample)*error.patchSize.y));
-                    patchSize = error.patchSize;
-                }
-            }
-            console.log("Patch-Size: " + JSON.stringify(patchSize));
-            if ((_inputStream.getWidth() % patchSize.x) === 0 && (_inputStream.getHeight() % patchSize.y) === 0) {
-                return true;
-            }
-        }
-        throw new Error("Image dimensions do not comply with the current settings: Width (" +
-                            width + " )and height (" + height +
-                            ") must a multiple of " + patchSize.x);
-    }
-
     function canRecord(cb) {
-        checkImageConstraints();
+        if (_config.locate) {
+            BarcodeLocator.checkImageConstraints(_inputStream, _config.locator);
+        }
         initCanvas();
         _framegrabber = FrameGrabber.create(_inputStream, _canvasContainer.dom.image);
         initConfig();
@@ -177,8 +146,8 @@ function(Code128Reader,
                 }
             }
             _canvasContainer.ctx.image = _canvasContainer.dom.image.getContext("2d");
-            _canvasContainer.dom.image.width = _inputStream.getWidth();
+            _canvasContainer.dom.image.width = _inputStream.getCanvasSize().x;
-            _canvasContainer.dom.image.height = _inputStream.getHeight();
+            _canvasContainer.dom.image.height = _inputStream.getCanvasSize().y;
 
             _canvasContainer.dom.overlay = document.querySelector("canvas.drawingBuffer");
             if (!_canvasContainer.dom.overlay) {
@@ -194,8 +163,8 @@ function(Code128Reader,
                 }
             }
             _canvasContainer.ctx.overlay = _canvasContainer.dom.overlay.getContext("2d");
-            _canvasContainer.dom.overlay.width = _inputStream.getWidth();
+            _canvasContainer.dom.overlay.width = _inputStream.getCanvasSize().x;
-            _canvasContainer.dom.overlay.height = _inputStream.getHeight();
+            _canvasContainer.dom.overlay.height = _inputStream.getCanvasSize().y;
         }
     }
 
@@ -227,6 +196,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;
@@ -236,14 +252,10 @@ function(Code128Reader,
             result = _decoder.decodeFromBoundingBoxes(boxes);
             result = result || {};
             result.boxes = boxes;
-            Events.publish("processed", result);
+            publishResult(result);
-            if (result && result.codeResult) {
-                Events.publish("detected", result);
-            }
         } else {
-            Events.publish("processed");
+            publishResult();
         }
-
     }
 
     function update() {
@@ -327,10 +339,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);
+                publishResult(e.data.result);
-                if (e.data.result && e.data.result.codeResult) {
-                    Events.publish("detected", e.data.result);
-                }
             }
         };
 

test-main.js

@@ -18,7 +18,6 @@ require.config({
     'array_helper': 'src/array_helper',
     'cv_utils': 'src/cv_utils',
     'typedefs': 'src/typedefs',
-    'glMatrixAddon': 'src/glMatrixAddon',
     'cluster': 'src/cluster',
     'camera_access': 'src/camera_access',
     'events': 'src/events',
@@ -46,7 +45,8 @@ require.config({
     'tracer': 'src/tracer',
     'upc_e_reader': 'src/upc_e_reader',
     'upc_reader': 'src/upc_reader',
-    'async': 'node_modules/async/lib/async'
+    'async': 'node_modules/async/lib/async',
+    'gl-matrix': 'node_modules/gl-matrix/dist/gl-matrix'
   },
   deps: allTestFiles,
   callback: window.__karma__.start