From b67354063857eea844a129cb87a33998866339e6 Mon Sep 17 00:00:00 2001 From: Kosta Korenkov <7r0ggy@gmail.com> Date: Thu, 23 Jul 2015 11:48:28 +0300 Subject: [PATCH 1/4] Create qrScanner directive --- public/views/includes/topbar.html | 3 +- src/js/controllers/topbar.js | 128 -------------------------- src/js/directives/qrScanner.js | 145 ++++++++++++++++++++++++++++++ 3 files changed, 146 insertions(+), 130 deletions(-) create mode 100644 src/js/directives/qrScanner.js diff --git a/public/views/includes/topbar.html b/public/views/includes/topbar.html index d655c0008..6fc69dac5 100644 --- a/public/views/includes/topbar.html +++ b/public/views/includes/topbar.html @@ -15,8 +15,7 @@
- +
diff --git a/src/js/controllers/topbar.js b/src/js/controllers/topbar.js index deb1a8262..1a15a91c0 100644 --- a/src/js/controllers/topbar.js +++ b/src/js/controllers/topbar.js @@ -1,134 +1,6 @@ 'use strict'; angular.module('copayApp.controllers').controller('topbarController', function($rootScope, $scope, $timeout, $modal, isCordova, isMobile, go) { - var cordovaOpenScanner = function() { - window.ignoreMobilePause = true; - window.plugins.spinnerDialog.show(null, 'Preparing camera...', true); - $timeout(function() { - cordova.plugins.barcodeScanner.scan( - function onSuccess(result) { - $timeout(function() { - window.plugins.spinnerDialog.hide(); - window.ignoreMobilePause = false; - }, 100); - if (result.cancelled) return; - - $timeout(function() { - var data = result.text; - $rootScope.$emit('dataScanned', data); - }, 1000); - }, - function onError(error) { - $timeout(function() { - window.ignoreMobilePause = false; - window.plugins.spinnerDialog.hide(); - }, 100); - alert('Scanning error'); - } - ); - go.send(); - }, 100); - }; - - var modalOpenScanner = function() { - var _scope = $scope; - var ModalInstanceCtrl = function($scope, $rootScope, $modalInstance) { - // QR code Scanner - var video; - var canvas; - var $video; - var context; - var localMediaStream; - - var _scan = function(evt) { - if (localMediaStream) { - context.drawImage(video, 0, 0, 300, 225); - try { - qrcode.decode(); - } catch (e) { - //qrcodeError(e); - } - } - $timeout(_scan, 500); - }; - - var _scanStop = function() { - if (localMediaStream && localMediaStream.stop) localMediaStream.stop(); - localMediaStream = null; - video.src = ''; - }; - - qrcode.callback = function(data) { - _scanStop(); - $modalInstance.close(data); - }; - - var _successCallback = function(stream) { - video.src = (window.URL && window.URL.createObjectURL(stream)) || stream; - localMediaStream = stream; - video.play(); - $timeout(_scan, 1000); - }; - - var _videoError = function(err) { - $scope.cancel(); - }; - - var setScanner = function() { - navigator.getUserMedia = navigator.getUserMedia || - navigator.webkitGetUserMedia || navigator.mozGetUserMedia || - navigator.msGetUserMedia; - window.URL = window.URL || window.webkitURL || - window.mozURL || window.msURL; - }; - - $scope.init = function() { - setScanner(); - $timeout(function() { - go.send(); - canvas = document.getElementById('qr-canvas'); - context = canvas.getContext('2d'); - - - video = document.getElementById('qrcode-scanner-video'); - $video = angular.element(video); - canvas.width = 300; - canvas.height = 225; - context.clearRect(0, 0, 300, 225); - - navigator.getUserMedia({ - video: true - }, _successCallback, _videoError); - }, 500); - }; - - $scope.cancel = function() { - _scanStop(); - $modalInstance.dismiss('cancel'); - }; - }; - - var modalInstance = $modal.open({ - templateUrl: 'views/modals/scanner.html', - windowClass: 'full', - controller: ModalInstanceCtrl, - backdrop : 'static', - keyboard: false - }); - modalInstance.result.then(function(data) { - $rootScope.$emit('dataScanned', data); - }); - - }; - - this.openScanner = function() { - if (isCordova) { - cordovaOpenScanner(); - } - else { - modalOpenScanner(); - } - }; this.goHome = function() { go.walletHome(); diff --git a/src/js/directives/qrScanner.js b/src/js/directives/qrScanner.js new file mode 100644 index 000000000..52feeef15 --- /dev/null +++ b/src/js/directives/qrScanner.js @@ -0,0 +1,145 @@ +'use strict'; + +angular.module('copayApp.directives') + .directive('qrScanner', ['$rootScope', '$timeout', '$modal', 'isCordova', 'isMobile', 'go', + function($rootScope, $timeout, $modal, isCordova, isMobile, go) { + + var controller = function($scope) { + + $scope.cordovaOpenScanner = function() { + window.ignoreMobilePause = true; + window.plugins.spinnerDialog.show(null, 'Preparing camera...', true); + $timeout(function() { + cordova.plugins.barcodeScanner.scan( + function onSuccess(result) { + $timeout(function() { + window.plugins.spinnerDialog.hide(); + window.ignoreMobilePause = false; + }, 100); + if (result.cancelled) return; + + $timeout(function() { + var data = result.text; + $rootScope.$emit('dataScanned', data); + }, 1000); + }, + function onError(error) { + $timeout(function() { + window.ignoreMobilePause = false; + window.plugins.spinnerDialog.hide(); + }, 100); + alert('Scanning error'); + } + ); + go.send(); + }, 100); + }; + + $scope.modalOpenScanner = function() { + var ModalInstanceCtrl = function($scope, $rootScope, $modalInstance) { + // QR code Scanner + var video; + var canvas; + var $video; + var context; + var localMediaStream; + + var _scan = function(evt) { + if (localMediaStream) { + context.drawImage(video, 0, 0, 300, 225); + try { + qrcode.decode(); + } catch (e) { + //qrcodeError(e); + } + } + $timeout(_scan, 500); + }; + + var _scanStop = function() { + if (localMediaStream && localMediaStream.stop) localMediaStream.stop(); + localMediaStream = null; + video.src = ''; + }; + + qrcode.callback = function(data) { + _scanStop(); + $modalInstance.close(data); + }; + + var _successCallback = function(stream) { + video.src = (window.URL && window.URL.createObjectURL(stream)) || stream; + localMediaStream = stream; + video.play(); + $timeout(_scan, 1000); + }; + + var _videoError = function(err) { + $scope.cancel(); + }; + + var setScanner = function() { + navigator.getUserMedia = navigator.getUserMedia || + navigator.webkitGetUserMedia || navigator.mozGetUserMedia || + navigator.msGetUserMedia; + window.URL = window.URL || window.webkitURL || + window.mozURL || window.msURL; + }; + + $scope.init = function() { + setScanner(); + $timeout(function() { + go.send(); + canvas = document.getElementById('qr-canvas'); + context = canvas.getContext('2d'); + + + video = document.getElementById('qrcode-scanner-video'); + $video = angular.element(video); + canvas.width = 300; + canvas.height = 225; + context.clearRect(0, 0, 300, 225); + + navigator.getUserMedia({ + video: true + }, _successCallback, _videoError); + }, 500); + }; + + $scope.cancel = function() { + _scanStop(); + $modalInstance.dismiss('cancel'); + }; + }; + + var modalInstance = $modal.open({ + templateUrl: 'views/modals/scanner.html', + windowClass: 'full', + controller: ModalInstanceCtrl, + backdrop : 'static', + keyboard: false + }); + modalInstance.result.then(function(data) { + $rootScope.$emit('dataScanned', data); + }); + + }; + + $scope.openScanner = function() { + if (isCordova) { + $scope.cordovaOpenScanner(); + } + else { + $scope.modalOpenScanner(); + } + }; + }; + + return { + restrict: 'E', + controller: controller, + replace: true, + template: '' + } + } + ]); \ No newline at end of file From 1f4f78bec009b39e3955b1408165a7fc19d6a217 Mon Sep 17 00:00:00 2001 From: Kosta Korenkov <7r0ggy@gmail.com> Date: Thu, 23 Jul 2015 13:21:31 +0300 Subject: [PATCH 2/4] Make directive to accept onScan and beforeScan callbacks instead of broadcasting 'dataScanned' event. This will allow to reuse directive for screens different from 'send' --- public/views/includes/topbar.html | 2 +- src/js/controllers/topbar.js | 10 +++++++++- src/js/directives/qrScanner.js | 17 +++++++++++------ 3 files changed, 21 insertions(+), 8 deletions(-) diff --git a/public/views/includes/topbar.html b/public/views/includes/topbar.html index 6fc69dac5..b47a18b04 100644 --- a/public/views/includes/topbar.html +++ b/public/views/includes/topbar.html @@ -15,7 +15,7 @@
- +
diff --git a/src/js/controllers/topbar.js b/src/js/controllers/topbar.js index 1a15a91c0..74da473e5 100644 --- a/src/js/controllers/topbar.js +++ b/src/js/controllers/topbar.js @@ -1,6 +1,14 @@ 'use strict'; -angular.module('copayApp.controllers').controller('topbarController', function($rootScope, $scope, $timeout, $modal, isCordova, isMobile, go) { +angular.module('copayApp.controllers').controller('topbarController', function($rootScope, go) { + + this.onQrCodeScanned = function(data) { + $rootScope.$emit('dataScanned', data); + }; + + this.openSendScreen = function() { + go.send(); + }; this.goHome = function() { go.walletHome(); diff --git a/src/js/directives/qrScanner.js b/src/js/directives/qrScanner.js index 52feeef15..ac569eaa1 100644 --- a/src/js/directives/qrScanner.js +++ b/src/js/directives/qrScanner.js @@ -1,8 +1,8 @@ 'use strict'; angular.module('copayApp.directives') - .directive('qrScanner', ['$rootScope', '$timeout', '$modal', 'isCordova', 'isMobile', 'go', - function($rootScope, $timeout, $modal, isCordova, isMobile, go) { + .directive('qrScanner', ['$rootScope', '$timeout', '$modal', 'isCordova', + function($rootScope, $timeout, $modal, isCordova) { var controller = function($scope) { @@ -20,7 +20,7 @@ angular.module('copayApp.directives') $timeout(function() { var data = result.text; - $rootScope.$emit('dataScanned', data); + $scope.onScan({ data: data }); }, 1000); }, function onError(error) { @@ -31,11 +31,12 @@ angular.module('copayApp.directives') alert('Scanning error'); } ); - go.send(); + $scope.beforeScan(); }, 100); }; $scope.modalOpenScanner = function() { + var parentScope = $scope; var ModalInstanceCtrl = function($scope, $rootScope, $modalInstance) { // QR code Scanner var video; @@ -89,7 +90,7 @@ angular.module('copayApp.directives') $scope.init = function() { setScanner(); $timeout(function() { - go.send(); + parentScope.beforeScan(); canvas = document.getElementById('qr-canvas'); context = canvas.getContext('2d'); @@ -120,7 +121,7 @@ angular.module('copayApp.directives') keyboard: false }); modalInstance.result.then(function(data) { - $rootScope.$emit('dataScanned', data); + parentScope.onScan({ data: data }); }); }; @@ -137,6 +138,10 @@ angular.module('copayApp.directives') return { restrict: 'E', + scope: { + onScan: "&", + beforeScan: "&" + }, controller: controller, replace: true, template: '' From 496b88cc0ef45db8cef068f1faea47c0a4b92e6f Mon Sep 17 00:00:00 2001 From: Kosta Korenkov <7r0ggy@gmail.com> Date: Thu, 23 Jul 2015 13:52:00 +0300 Subject: [PATCH 3/4] Make beforeScan optional --- src/js/directives/qrScanner.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/js/directives/qrScanner.js b/src/js/directives/qrScanner.js index ac569eaa1..dfb840435 100644 --- a/src/js/directives/qrScanner.js +++ b/src/js/directives/qrScanner.js @@ -31,7 +31,9 @@ angular.module('copayApp.directives') alert('Scanning error'); } ); - $scope.beforeScan(); + if ($scope.beforeScan) { + $scope.beforeScan(); + } }, 100); }; @@ -90,7 +92,9 @@ angular.module('copayApp.directives') $scope.init = function() { setScanner(); $timeout(function() { - parentScope.beforeScan(); + if (parentScope.beforeScan) { + parentScope.beforeScan(); + } canvas = document.getElementById('qr-canvas'); context = canvas.getContext('2d'); From 53f114c74760dfb1ba840347b063ccc2f0df81d5 Mon Sep 17 00:00:00 2001 From: Kosta Korenkov <7r0ggy@gmail.com> Date: Mon, 31 Aug 2015 08:55:30 +0300 Subject: [PATCH 4/4] Double check for QR scanner Now QR scanner returns only if two consecutive scans return the same result. --- src/js/directives/qrScanner.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/js/directives/qrScanner.js b/src/js/directives/qrScanner.js index dfb840435..ac4ed7b80 100644 --- a/src/js/directives/qrScanner.js +++ b/src/js/directives/qrScanner.js @@ -46,6 +46,7 @@ angular.module('copayApp.directives') var $video; var context; var localMediaStream; + var prevResult; var _scan = function(evt) { if (localMediaStream) { @@ -56,7 +57,7 @@ angular.module('copayApp.directives') //qrcodeError(e); } } - $timeout(_scan, 500); + $timeout(_scan, 800); }; var _scanStop = function() { @@ -66,6 +67,10 @@ angular.module('copayApp.directives') }; qrcode.callback = function(data) { + if (prevResult != data) { + prevResult = data; + return; + } _scanStop(); $modalInstance.close(data); };