diff options
| -rw-r--r-- | www/js/MontageCtrl.js | 1 | ||||
| -rw-r--r-- | www/js/app.js | 121 | ||||
| -rw-r--r-- | www/templates/events-modal.html | 4 | ||||
| -rw-r--r-- | www/templates/events.html | 4 | ||||
| -rw-r--r-- | www/templates/montage.html | 6 |
5 files changed, 100 insertions, 36 deletions
diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js index 93d771a7..cd39a1c7 100644 --- a/www/js/MontageCtrl.js +++ b/www/js/MontageCtrl.js @@ -222,6 +222,7 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', ' function loadNotifications() { $rootScope.rand = Math.floor((Math.random() * 100000) + 1); + //console.log ("Inside Montage timer..."); } diff --git a/www/js/app.js b/www/js/app.js index d0e96838..619ae051 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -69,9 +69,64 @@ angular.module('zmApp', [ }) -//credit http://stackoverflow.com/questions/20997406/force-http-interceptor-in-dynamic-ngsrc-request + +//credit: http://stackoverflow.com/questions/34958575/intercepting-img-src-via-http-interceptor-as-well-as-not-lose-the-ability-to-kee .directive('httpSrc', [ - '$http', 'imageLoadingDataShare', function ($http, imageLoadingDataShare) { + '$http', 'imageLoadingDataShare', 'ZMDataModel', + function ($http, imageLoadingDataShare, ZMDataModel) { + var directive = { + link: postLink, + restrict: 'A' + }; + return directive; + + function postLink(scope, element, attrs) { + console.log ("HELLO NEW"); + var requestConfig = { + method: 'GET', + //url: attrs.httpSrc, + responseType: 'arraybuffer', + cache: 'true' + }; + + function base64Img(data) { + var arr = new Uint8Array(data); + var raw = ''; + var i, j, subArray, chunk = 5000; + for (i = 0, j = arr.length; i < j; i += chunk) { + subArray = arr.subarray(i, i + chunk); + raw += String.fromCharCode.apply(null, subArray); + } + return btoa(raw); + } + attrs.$observe('httpSrc', function (newValue) { + requestConfig.url = newValue; + console.log ("requestConfig is " + JSON.stringify(requestConfig)); + imageLoadingDataShare.set(1); + $http(requestConfig) + .success(function (data) { + console.log ("Inside HTTP after Calling " + requestConfig.url); + //console.log ("data got " + JSON.stringify(data)); + + + var b64 = base64Img(data); + attrs.$set('src', "data:image/jpeg;base64," + b64); + imageLoadingDataShare.set(0); + }); + }); + + } + } +]) + + + + + + +//credit http://stackoverflow.com/questions/20997406/force-http-interceptor-in-dynamic-ngsrc-request +.directive('httpSrcOld', [ + '$http', 'imageLoadingDataShare', 'ZMDataModel', function ($http, imageLoadingDataShare, ZMDataModel) { var directive = { link: link, restrict: 'A' @@ -79,34 +134,42 @@ angular.module('zmApp', [ return directive; function link(scope, element, attrs) { - var requestConfig = { - method: 'Get', - url: attrs.httpSrc, - responseType: 'arraybuffer', - cache: 'true' - }; - - imageLoadingDataShare.set(1); - $http(requestConfig) - .success(function(data) { - var arr = new Uint8Array(data); - - var raw = ''; - var i, j, subArray, chunk = 5000; - for (i = 0, j = arr.length; i < j; i += chunk) { - subArray = arr.subarray(i, i + chunk); - raw += String.fromCharCode.apply(null, subArray); - } + + console.log ("HELLO OLD"); + + var requestConfig = { + method: 'Get', + url: attrs.httpSrcOld, + responseType: 'arraybuffer', + cache: 'true' + }; + + console.log ("Calling " + requestConfig.url); + imageLoadingDataShare.set(1); + $http(requestConfig) + .success(function(data) { + + console.log ("data got " + JSON.stringify(data)); + var arr = new Uint8Array(data); + + var raw = ''; + var i, j, subArray, chunk = 5000; + for (i = 0, j = arr.length; i < j; i += chunk) { + subArray = arr.subarray(i, i + chunk); + raw += String.fromCharCode.apply(null, subArray); + } - var b64 = btoa(raw); + var b64 = btoa(raw); - attrs.$set('src', "data:image/jpeg;base64," + b64); - imageLoadingDataShare.set(0); - }) - .error (function(data) { - attrs.$set('src', 'img/novideo.png'); - imageLoadingDataShare.set(0); - }); + attrs.$set('src', "data:image/jpeg;base64," + b64); + imageLoadingDataShare.set(0); + }) + .error (function(data) { + attrs.$set('src', 'img/novideo.png'); + imageLoadingDataShare.set(0); + ZMDataModel.zmDebug ("Inside http-src err"); + }); + } } @@ -308,7 +371,7 @@ angular.module('zmApp', [ // console.log ("Parsed data is " + JSON.stringify(components)); var credentials = btoa(components.userinfo); //var authorization = {'Authorization': 'Basic ' + credentials}; - config.headers.Authorization = 'Basic ' + credentials; + //config.headers.Authorization = 'Basic ' + credentials; // console.log ("Full headers: " + JSON.stringify(config.headers)); diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html index da27116e..675a812d 100644 --- a/www/templates/events-modal.html +++ b/www/templates/events-modal.html @@ -20,7 +20,7 @@ <li ng-repeat="slide in slides"> <div ng-if="!animationInProgress"> <img style="width:100vw; height:100vh" imageonload="finishedLoadingImage($index)" - http-src="{{playbackURL}}/index.php?view=image&rand={{$root.rand}}&path={{relativePath}}{{slide.img}}&scale={{loginData.singleImageQuality}}" + image-spinner-src="{{playbackURL}}/index.php?view=image&rand={{$root.rand}}&path={{relativePath}}{{slide.img}}&scale={{loginData.singleImageQuality}}" image-spinner-loader="lines" ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" @@ -28,7 +28,7 @@ </div> <div ng-if="animationInProgress"> <img style="width:100vw; height:100vh" imageonload="finishedLoadingImage($index)" - http-src="img/pausevideo.png" + image-spinner-src="img/pausevideo.png" image-spinner-loader="lines" class="object-fit_contain" /> </div> diff --git a/www/templates/events.html b/www/templates/events.html index e3332960..02254bce 100644 --- a/www/templates/events.html +++ b/www/templates/events.html @@ -144,7 +144,7 @@ <figure style="display:inline-block"> <figcaption><p>frame:{{alarm.id}} score:{{alarm.score}}</p></figcaption> - <img http-src="{{playbackURL}}/index.php?view=image&path={{event.Event.relativePath}}{{alarm.fname}}&height=380" height="170px" /> + <img image-spinner-src="{{playbackURL}}/index.php?view=image&path={{event.Event.relativePath}}{{alarm.fname}}&height=380" height="170px" /> </figure> @@ -182,7 +182,7 @@ <!-- <img imageonload="finishedLoadingImage($index)" image-spinner-src="{{playbackURL}}/index.php?view=image&path={{event.Event.relativePath}}{{slide.img}}&height=380" image-spinner-loader="lines" height="190px" ;/> --> - <img imageonload="finishedLoadingImage($index)" http-src="{{playbackURL}}/index.php?view=image&path={{event.Event.relativePath}}{{slide.img}}&height=380" image-spinner-loader="lines" height="190px" ;/> + <img imageonload="finishedLoadingImage($index)" image-spinner-src="{{playbackURL}}/index.php?view=image&path={{event.Event.relativePath}}{{slide.img}}&height=380" image-spinner-loader="lines" height="190px" ;/> <br/> diff --git a/www/templates/montage.html b/www/templates/montage.html index 06b9ba65..e182d001 100644 --- a/www/templates/montage.html +++ b/www/templates/montage.html @@ -63,7 +63,7 @@ </div> <div ng-if = "minimal"> - <img id="img-$index" image-spinner-src="{{LoginData.streamingurl}}/nph-zms?mode=single&monitor={{monitor.Monitor.Id}}&scale={{LoginData.montageQuality}}{{$root.authSession}}&rand={{$root.rand}}" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId)" image-spinner-loader="lines" style="margin-top:0px; + <img id="img-$index" image-spinner-src="{{LoginData.streamingurl}}/nph-zms?mode=single&monitor={{monitor.Monitor.Id}}&scale={{LoginData.montageQuality}}{{$root.authSession}}&rand={{$root.rand}}" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId)" image-spinner-loader="lines" style="margin-top:0px; width: 100% !important; height: auto !important;" /> </div> @@ -72,7 +72,7 @@ </div> <div ng-if="!$root.authSession=='undefined' || isBackground()"> - <img id="img-$index" ng-src="img/pausevideo.png" style="width: 100% !important; + <img id="img-$index" image-spinner-src="img/pausevideo.png" style="width: 100% !important; height: auto !important;" /> </div> @@ -93,7 +93,7 @@ <div ng-if="isModalActive"> - <img id="img-$index" ng-src="img/pausevideo.png" style="margin-top:0px; + <img id="img-$index" image-spinner-src="img/pausevideo.png" style="margin-top:0px; width: 100% !important; height: auto !important;" /> </div> |
