diff options
Diffstat (limited to 'www')
| -rw-r--r-- | www/css/style.css | 24 | ||||
| -rw-r--r-- | www/index.html | 2 | ||||
| -rw-r--r-- | www/js/DataModel.js | 17 | ||||
| -rw-r--r-- | www/js/EventCtrl.js | 87 | ||||
| -rw-r--r-- | www/js/EventsGraphsCtrl.js | 7 | ||||
| -rw-r--r-- | www/js/MonitorCtrl.js | 106 | ||||
| -rw-r--r-- | www/js/MontageCtrl.js | 56 | ||||
| -rw-r--r-- | www/js/app.js | 131 | ||||
| -rw-r--r-- | www/js/controllers.js | 1 | ||||
| -rw-r--r-- | www/templates/events.html | 84 | ||||
| -rw-r--r-- | www/templates/monitors-modal.html | 2 | ||||
| -rw-r--r-- | www/templates/montage.html | 9 |
12 files changed, 284 insertions, 242 deletions
diff --git a/www/css/style.css b/www/css/style.css index 3c0e8339..1aadaba5 100644 --- a/www/css/style.css +++ b/www/css/style.css @@ -1,7 +1,16 @@ -/* Empty. Add your own CSS if you like */ - - +/* Using this for full screen modals for event and monitor mode */ +.modal{ + top: 0 ; + bottom: 0 ; + left: 0 ; + right: 0 ; + width: 100% ; +} +/* I am using flexboxes to dynamicall adapt content +in montage view. +Credit: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ +*/ .wrapper { display: -webkit-box; display: -moz-box; @@ -58,6 +67,7 @@ .footer { order: 4; } } +/* Not using this -eventually. Think notification badges on buttons */ .notification-badge{ position: absolute; top: 3px; @@ -65,10 +75,4 @@ font-size: 8px; } -.modal{ - top: 0 ; - bottom: 0 ; - left: 0 ; - right: 0 ; - width: 100% ; -} + diff --git a/www/index.html b/www/index.html index 607ec11a..3b2e2e12 100644 --- a/www/index.html +++ b/www/index.html @@ -4,7 +4,7 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> - + <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' https://www.google.com 'unsafe-inline' 'unsafe-eval'"> <title></title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> diff --git a/www/js/DataModel.js b/www/js/DataModel.js index b0ae8ca3..e44fedb6 100644 --- a/www/js/DataModel.js +++ b/www/js/DataModel.js @@ -47,7 +47,6 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion }); } - // console.log ("Simulated: "+JSON.stringify(simmonitors)); return simmonitors; }, @@ -187,7 +186,7 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion template: 'Loading Monitors...', animation: 'fade-in', showBackdrop: true, - duration:10000, + duration:15000, maxWidth: 200, showDelay: 0 }); @@ -197,7 +196,7 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion console.log("ZMDataModel: Invoking HTTP get to load monitors"); var apiurl = loginData.apiurl; var myurl = apiurl + "/monitors.json"; - $http.get(myurl, {timeout:10000}) + $http.get(myurl /*,{timeout:15000}*/) .success(function (data) { //console.log("HTTP success got " + JSON.stringify(data.monitors)); monitors = data.monitors; @@ -256,7 +255,7 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion showBackdrop: true, maxWidth: 200, showDelay: 0, - duration:10000, //specifically for Android - http seems to get stuck at times + duration:15000, //specifically for Android - http seems to get stuck at times }); var d = $q.defer(); @@ -280,7 +279,7 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion return d.promise; } else { // not simulated - $http.get(myurl, {timeout:10000}) + $http.get(myurl /*,{timeout:15000}*/) .success(function (data) { $ionicLoading.hide(); myevents = data.events.reverse(); @@ -342,13 +341,5 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion return "(Unknown)"; }, - getMontageImagePath: function () { - - var path = "{{LoginData.url}}/cgi-bin/nph-zms?mode=jpeg&monitor={{monitor.Monitor.Id}}&scale=100&maxfps=3&buffer=1000&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{rand}}"; - - return (path); - } - - }; }]); diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js index 963ef3d3..e4d70eea 100644 --- a/www/js/EventCtrl.js +++ b/www/js/EventCtrl.js @@ -12,6 +12,10 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', function ($ion } $scope.reloadView = function () { + // All we really need to do here is change the random token + // in the image src and it will refresh. No need to reload the view + // and if you did reload the view, it would go back to events list + // which is the view - and when you are in the modal it will go away console.log("*** Refreshing Modal view ***"); //$state.go($state.current, {}, {reload: true}); $scope.rand = Math.floor(Math.random() * (999999 - 111111 + 1)) + 111111; @@ -43,9 +47,8 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', function ($ion }); - // This is a modal to show the event footage - - + // These are the commands ZM uses to move around + // in ZMS var eventCommands = { next: "13", previous: "12", @@ -56,14 +59,15 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', function ($ion play: "2" } - - + // When loading images, it sometimes takes time - the images can be quite + // large. What practically was happening was you'd see a blank screen for a few + // seconds. Not a good UX. So what I am doing is when the events modal or + // monitor modal is loaded, I show an ionic loading. And then when the first frame + // finishes loading, I take it away - $scope.finishedLoadingImage = function() - { - console.log ("*** Events image FINISHED loading ***"); - $ionicLoading.hide(); - // alert ("IMAGE LOADED"); + $scope.finishedLoadingImage = function () { + console.log("*** Events image FINISHED loading ***"); + $ionicLoading.hide(); } $scope.eventCommands = eventCommands; @@ -84,11 +88,11 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', function ($ion } $ionicLoading.hide(); - $ionicLoading.show({ - template: "please wait...", - noBackdrop: true, - duration: 10000, - }); + $ionicLoading.show({ + template: "please wait...", + noBackdrop: true, + duration: 15000, + }); var loginData = ZMDataModel.getLogin(); @@ -117,10 +121,15 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', function ($ion break; }; - console.log ("** POST URL " +loginData.url+ 'zm/index.php'); + console.log("** POST URL " + loginData.url + 'zm/index.php'); + // You need to POST commands to control zms + // Note that I am url encoding the parameters into the URL + // If I leave it as JSON, it gets converted to OPTONS due + // to CORS behaviour and ZM/Apache don't seem to handle it + var req = $http({ method: 'POST', - timeout: 10000, + /*timeout: 15000,*/ url: loginData.url + '/zm/index.php', headers: { 'Content-Type': 'application/x-www-form-urlencoded', @@ -163,6 +172,11 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', function ($ion }); } + // This is called when we first tap on an event to see + // the feed. It's important to instantiate ionicModal here + // as otherwise you'd instantiate it when the view loads + // and our "Please wait loading" technique I explained + //earlier won't work $scope.openModal = function (eid, ename, edur) { console.log("Open Modal"); @@ -173,29 +187,31 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', function ($ion $scope.rand = Math.floor(Math.random() * (999999 - 111111 + 1)) + 111111; $ionicModal.fromTemplateUrl('templates/events-modal.html', { - scope: $scope, - animation: 'slide-in-up' - }) - .then(function (modal) { - $scope.modal = modal; - - $ionicLoading.show({ - template: "please wait...", - noBackdrop: true, - duration:10000 - }) - $scope.modal.show(); - - }) + scope: $scope, + animation: 'slide-in-up' + }) + .then(function (modal) { + $scope.modal = modal; + + $ionicLoading.show({ + template: "please wait...", + noBackdrop: true, + duration: 10000 + }) + $scope.modal.show(); + + }) } - + // We need to destroy because we are instantiating + // it on open $scope.closeModal = function () { console.log("Close & Destroy Modal"); $scope.modal.remove(); }; - //Cleanup the modal when we're done with it! + //Cleanup the modal when we're done with it + // I Don't think it ever comes here $scope.$on('$destroy', function () { console.log("Destroy Modal"); $scope.modal.remove(); @@ -203,8 +219,11 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', function ($ion console.log("***CALLING EVENTS FACTORY"); var lData = ZMDataModel.getLogin(); - console.log("ZM Service Username = " + lData.username); $scope.monitors = message; + + // I am converting monitor ID to monitor Name + // so I can display it along with Events + // Is there a better way? $scope.events = ZMDataModel.getEvents($scope.id) .then(function (data) { console.log("EventCtrl Got events"); diff --git a/www/js/EventsGraphsCtrl.js b/www/js/EventsGraphsCtrl.js index 5cd5e71a..63ec3b56 100644 --- a/www/js/EventsGraphsCtrl.js +++ b/www/js/EventsGraphsCtrl.js @@ -2,6 +2,9 @@ // the main function is generateChart. I call generate chart with required parameters // from the template file +// FIXME: I need to clean this up, the animation is stupid because the data loads +// dynamically + angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', function ($ionicPlatform, $scope, ZMDataModel, $ionicSideMenuDelegate, $rootScope, $http) { console.log("Inside Graphs controller"); $scope.openMenu = function () { @@ -87,7 +90,7 @@ angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', functio console.log("Monitor event URL:" + url); if (!ZMDataModel.isSimulated()) { - $http.get(url, {timeout:10000}) + $http.get(url /*,{timeout:15000}*/) .success(function (data) { console.log("**** EVENT COUNT FOR MONITOR " + monitors[j].Monitor.Id + " IS " + data.pagination.count); @@ -110,7 +113,7 @@ angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', functio }); } // is not simulated - else // grab a random event count + else // simulated: grab a random event count { var rndEventCount = Math.floor(Math.random() * (100 - 20 + 1)) + 20; $scope.chartObject.data.push([monitors[j].Monitor.Name, rndEventCount, diff --git a/www/js/MonitorCtrl.js b/www/js/MonitorCtrl.js index 4e217464..80758cdd 100644 --- a/www/js/MonitorCtrl.js +++ b/www/js/MonitorCtrl.js @@ -1,80 +1,79 @@ // controller for Monitor View +// refer to comments in EventCtrl for the modal stuff. They are almost the same -angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', function ($scope, ZMDataModel, message,$ionicSideMenuDelegate, $ionicLoading, $ionicModal, $state, $ionicLoading) { +angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', function ($scope, ZMDataModel, message, $ionicSideMenuDelegate, $ionicLoading, $ionicModal, $state, $ionicLoading) { $scope.monitors = []; -$scope.openMenu = function () { - $ionicSideMenuDelegate.toggleLeft(); - } + $scope.openMenu = function () { + $ionicSideMenuDelegate.toggleLeft(); + } -$scope.reloadView = function () -{ - console.log ("*** Refreshing Modal view ***"); - $scope.rand = Math.floor(Math.random() * (999999 - 111111 + 1)) + 111111; - $ionicLoading.show({ - template: "refreshed view", - noBackdrop: true, - duration: 2000 - }); -} + $scope.reloadView = function () { + console.log("*** Refreshing Modal view ***"); + $scope.rand = Math.floor(Math.random() * (999999 - 111111 + 1)) + 111111; + $ionicLoading.show({ + template: "refreshed view", + noBackdrop: true, + duration: 2000 + }); + } -$scope.isSimulated = function () { + $scope.isSimulated = function () { return ZMDataModel.isSimulated(); }; - -$scope.finishedLoadingImage = function() - { - console.log ("***Monitor image FINISHED Loading***"); + // same logic as EventCtrl.js + $scope.finishedLoadingImage = function () { + console.log("***Monitor image FINISHED Loading***"); $ionicLoading.hide(); - /* $ionicLoading.show({ - template: "loading, please wait...", - noBackdrop: true, - });*/ + /* $ionicLoading.show({ + template: "loading, please wait...", + noBackdrop: true, + });*/ } - - $scope.$on('$ionicView.loaded', function(){ - console.log("**VIEW ** Monitor Ctrl Loaded"); - }); - $scope.$on('$ionicView.enter', function(){ - console.log("**VIEW ** Monitor Ctrl Entered"); - }); + $scope.$on('$ionicView.loaded', function () { + console.log("**VIEW ** Monitor Ctrl Loaded"); + }); + + $scope.$on('$ionicView.enter', function () { + console.log("**VIEW ** Monitor Ctrl Entered"); + }); - $scope.$on('$ionicView.leave', function(){ - console.log("**VIEW ** Monitor Ctrl Left"); - }); + $scope.$on('$ionicView.leave', function () { + console.log("**VIEW ** Monitor Ctrl Left"); + }); - $scope.$on('$ionicView.unloaded', function(){ - console.log("**VIEW ** Monitor Ctrl Unloaded"); - }); + $scope.$on('$ionicView.unloaded', function () { + console.log("**VIEW ** Monitor Ctrl Unloaded"); + }); - $scope.openModal = function (mid) { + $scope.openModal = function (mid) { console.log("Open Monitor Modal"); $scope.monitorId = mid; $scope.LoginData = ZMDataModel.getLogin(); $scope.rand = Math.floor(Math.random() * (999999 - 111111 + 1)) + 111111; - // This is a modal to show the monitor footage - $ionicModal.fromTemplateUrl('templates/monitors-modal.html', { - scope: $scope, - animation: 'slide-in-up' - }) - .then(function (modal) { - $scope.modal = modal; - - $ionicLoading.show({ - template: "please wait...", - noBackdrop: true, - duration:10000 - }) - $scope.modal.show(); - }); + // This is a modal to show the monitor footage + $ionicModal.fromTemplateUrl('templates/monitors-modal.html', { + scope: $scope, + animation: 'slide-in-up' + }) + .then(function (modal) { + $scope.modal = modal; + + $ionicLoading.show({ + template: "please wait...", + noBackdrop: true, + duration: 15000 + }) + $scope.modal.show(); + }); }; $scope.closeModal = function () { @@ -93,9 +92,6 @@ $scope.finishedLoadingImage = function() console.log("***EVENTS: Waiting for Monitors to load before I proceed"); $scope.monitors = message; - // console.log("I GOT " + $scope.monitors); - - console.log("HERE"); $scope.doRefresh = function () { console.log("***Pull to Refresh"); diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js index 698c586b..57573c5e 100644 --- a/www/js/MontageCtrl.js +++ b/www/js/MontageCtrl.js @@ -1,12 +1,54 @@ // Controller for the montage view -angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', function ($scope, $rootScope, ZMDataModel, message,$ionicSideMenuDelegate) { +angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', function ($scope, $rootScope, ZMDataModel, message,$ionicSideMenuDelegate, $timeout, $interval) { + var timestamp = new Date().getUTCMilliseconds(); + + +// In Android, the app runs full steam while in background mode +// while in iOS it gets suspended unless you ask for specific resources +// So while this view, we DON'T want Android to keep sending 1 second +// refreshes to the server for images we are not seeing! + +function onPause() { + console.log ("*** Moving to Background ***"); // Handle the pause event + console.log ("*** CANCELLING INTERVAL ****"); + $interval.cancel(intervalHandle); +} + + document.addEventListener("pause", onPause, false); + + // I was facing a lot of problems with Chrome/crosswalk getting stuck with + // pending HTTP requests after a while. There is a problem with chrome handling + // multiple streams of always open HTTP get's (image streaming). This problem + // does not arise when the image is streamed for a single monitor - just multiple + + // To work around this I am taking a single snapshot of ZMS and have implemented a timer + // to reload the snapshot every 1 second. Seems to work reliably even thought its a higer + // load. Will it bonk with many monitors? Who knows. I have tried with 5 and 1280x960@32bpp + + + this.loadNotifications = function (){ + // randomval is appended to img src, so after each interval the image reloads + $scope.randomval = (new Date()).getTime(); + //console.log ("**** NOTIFICATION with rand="+$scope.randomval+"*****"); + }; + + var intervalHandle = $interval(function(){ + this.loadNotifications(); + }.bind(this), 1000); + + this.loadNotifications(); $scope.openMenu = function () { $ionicSideMenuDelegate.toggleLeft(); } + $scope.$on('$destroy', function () { + console.log ("*** CANCELLING INTERVAL ****"); + $interval.cancel(intervalHandle); + }); + $scope.$on('$ionicView.loaded', function(){ console.log("**VIEW ** Montage Ctrl Loaded"); @@ -25,19 +67,12 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', function ($s }); - - $scope.getMontageImagePath = function () - { - return ZMDataModel.getMontageImagePath(); - } - $scope.isSimulated = function () { return ZMDataModel.isSimulated(); } - //var monsize =3; console.log("********* Inside Montage Ctrl"); $scope.LoginData = ZMDataModel.getLogin(); @@ -50,11 +85,12 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', function ($s $scope.$on('$ionicView.afterEnter', function () { // This rand is really used to reload the monitor image in img-src so it is not cached // I am making sure the image in montage view is always fresh + // I don't think I am using this anymore FIXME: check and delete if needed $rootScope.rand = Math.floor((Math.random() * 100000) + 1); - console.log("Rootscoxxpe Montage is " + ZMDataModel.getMontageSize() + " and slider montage is " + $scope.slider.monsize); }); - + // we are monitoring the slider for movement here + // make sure this is an object - so its passed by reference from the template to the controller! $scope.$watch('slider.monsize', function () { console.log('Slider has changed'); ZMDataModel.setMontageSize($scope.slider.monsize); diff --git a/www/js/app.js b/www/js/app.js index be83cd23..93c1871b 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -6,46 +6,45 @@ angular.module('zmApp', [ ]) + + // this directive will be load any time an image completes loading // via img tags where this directive is added (I am using this in // events and mionitor view to show a loader while the image is // downloading from ZM -.directive('imageonload', function() { - return { - restrict: 'A', - link: function(scope, element, attrs) { - element.bind('load', function() { - //call the function that was passed - scope.$apply(attrs.imageonload); - }); - }, - - - }; - }) +.directive('imageonload', function () { + return { + restrict: 'A', + link: function (scope, element, attrs) { + element.bind('load', function () { + //call the function that was passed + scope.$apply(attrs.imageonload); + }); + }, + + + }; +}) -/* - .directive('img', function () { - // element[0].src = 'img/demo.gif'; +// In Android, HTTP requests seem to get stuck once in a while +// It may be a crosswalk issue. +// To tackle this gracefully, I've set up a global interceptor +// If the HTTP request does not complete in 15 seconds, it cancels +// That way the user can try again, and won't get stuck +// Also remember you need to add it to .config +.factory('timeoutHttpIntercept', function ($rootScope, $q) { + console.log("*** HTTP INTERCEPTOR CALLED ***"); return { - restrict: 'E', - link: function (scope, element, attrs) { - console.log ("********** IMG DIRECTIVE "); - //console.log ("Attr ng-src="+attr.ngSrc); - // if (!attr.ngSrc) - // element[0].src = 'img/demo.gif'; - // show an image-missing image - // element.error(function () { - - // }); + 'request': function (config) { + config.timeout = 15000; + console.log("*** HTTP INTERCEPTOR CALLED ***"); + return config; } - } -})*/ - -.run(function ($ionicPlatform, $ionicPopup, $rootScope, $state, ZMDataModel,$cordovaSplashscreen) { + }; +}) - +.run(function ($ionicPlatform, $ionicPopup, $rootScope, $state, ZMDataModel, $cordovaSplashscreen) { ZMDataModel.init(); var loginData = ZMDataModel.getLogin(); @@ -56,36 +55,35 @@ angular.module('zmApp', [ } - // This routine is called whenever the orientation changes - // so I can recompute my width and height. I use them - // for scoping graphs as well as figuring out how many thumbnails - // to show for montages - window.onorientationchange = function () { - console.log("**ORIENTATION CHANGE**"); + + // this works reliably on both Android and iOS. The "onorientation" seems to reverse w/h in Android. Go figure. + // http://stackoverflow.com/questions/1649086/detect-rotation-of-android-phone-in-the-browser-with-javascript + + var checkOrientation = function () { var pixelRatio = window.devicePixelRatio || 1; $rootScope.devWidth = ((window.innerWidth > 0) ? window.innerWidth : screen.width); $rootScope.devHeight = ((window.innerHeight > 0) ? window.innerHeight : screen.height); - console.log("********Computed Dev Width & Height as" + $rootScope.devWidth + "*" + $rootScope.devHeight); - } + console.log("********NEW Computed Dev Width & Height as" + $rootScope.devWidth + "*" + $rootScope.devHeight); + }; + window.addEventListener("resize", checkOrientation, false); $rootScope.$on('$stateChangeStart', function (event, toState, toParams) { - // console.log ("***** STATE CHANGE CHECK ****"); var requireLogin = toState.data.requireLogin; - if (ZMDataModel.isLoggedIn() || ZMDataModel.isSimulated()) - { - console.log ("State transition is authorized"); + if (ZMDataModel.isLoggedIn() || ZMDataModel.isSimulated()) { + console.log("State transition is authorized"); return; } if (requireLogin) { - // alert ("Not logged in"); - console.log ("**** STATE from "+ "**** STATE TO " + toState.name); + console.log("**** STATE from " + "**** STATE TO " + toState.name); - $ionicPopup.alert ({title: "Credentials Required", - template:"Please provide your ZoneMinder credentials or switch to simulation mode"}); + $ionicPopup.alert({ + title: "Credentials Required", + template: "Please provide your ZoneMinder credentials or switch to simulation mode" + }); // for whatever reason, .go was resulting in digest loops. // if you don't prevent, states will stack event.preventDefault(); @@ -96,13 +94,13 @@ angular.module('zmApp', [ $ionicPlatform.ready(function () { - - // generates and error in desktops but works fine - console.log ("**** DEVICE READY ***"); - setTimeout(function() { - $cordovaSplashscreen.hide() - }, 3000) - + + // generates and error in desktops but works fine + console.log("**** DEVICE READY ***"); + setTimeout(function () { + $cordovaSplashscreen.hide() + }, 3000) + var pixelRatio = window.devicePixelRatio || 1; $rootScope.devWidth = ((window.innerWidth > 0) ? window.innerWidth : screen.width); $rootScope.devHeight = ((window.innerHeight > 0) ? window.innerHeight : screen.height); @@ -137,20 +135,21 @@ angular.module('zmApp', [ }) // My route map connecting menu options to their respective templates and controllers -.config(function ($stateProvider, $urlRouterProvider) { +.config(function ($stateProvider, $urlRouterProvider, $httpProvider) { + $httpProvider.interceptors.push('timeoutHttpIntercept'); $stateProvider .state('login', { - data: { - requireLogin: false - }, - url: "/login", - templateUrl: "templates/login.html", - controller: 'zmApp.LoginCtrl', + data: { + requireLogin: false + }, + url: "/login", + templateUrl: "templates/login.html", + controller: 'zmApp.LoginCtrl', - }) + }) .state('monitors', { data: { @@ -227,9 +226,9 @@ angular.module('zmApp', [ // If I start using the urlRouterProvider above and the // first state is monitors it goes into a digest loop. - $urlRouterProvider.otherwise( function($injector, $location) { - var $state = $injector.get("$state"); - $state.go("monitors"); - }); + $urlRouterProvider.otherwise(function ($injector, $location) { + var $state = $injector.get("$state"); + $state.go("monitors"); + }); }); diff --git a/www/js/controllers.js b/www/js/controllers.js index 75875f60..bb0e3208 100644 --- a/www/js/controllers.js +++ b/www/js/controllers.js @@ -1,6 +1,7 @@ angular.module('zmApp.controllers', ['ionic', 'googlechart', 'ngCordova', 'ng-mfb' ]) + .controller('zmApp.AppCtrl', function($scope, $ionicSideMenuDelegate) { $scope.openMenu = function () { $ionicSideMenuDelegate.toggleLeft(); diff --git a/www/templates/events.html b/www/templates/events.html index e33a3568..f4cb2571 100644 --- a/www/templates/events.html +++ b/www/templates/events.html @@ -13,64 +13,64 @@ <ion-refresher pulling-text="Pull to reload Events..." spinner="bubbles" on-refresh="doRefresh()"></ion-refresher> <!--<ion-list>--> - <!-- <div ng-repeat="event in events">--> + <!-- <div ng-repeat="event in events">--> - <ion-item collection-repeat="event in events" > + <ion-item collection-repeat="event in events"> - <div class="row" > - <div class="col col-left"> - <!-- this ngswitch displays different icons + <div class="row"> + <div class="col col-left"> + <!-- this ngswitch displays different icons depending on the cause of the event --> - <div ng-switch on="event.Event.Cause"> - <div ng-switch-when="Motion"> - <i class="ion-android-walk" style="float:left; font-size:200%;"></i> - <br/> - </div> - <div ng-switch-when="Signal"> - <i class="ion-wifi" style="float:left; font-size:200%;"></i> - <br/> - </div> - <div ng-switch-default> - <i class="ion-ionic" style="float:left; font-size:200%;"></i> - <br/> - </div> - </div> - <!-- ng switch --> - <!-- {{event.Event.Cause}} --> - - <br/> <span style="font-size:80%; color:rgb(110,110,110)">{{event.Event.Length}}s</span> + <div ng-switch on="event.Event.Cause"> + <div ng-switch-when="Motion"> + <i class="ion-android-walk" style="float:left; font-size:200%;"></i> + <br/> + </div> + <div ng-switch-when="Signal"> + <i class="ion-wifi" style="float:left; font-size:200%;"></i> + <br/> </div> - <!-- col col left--> + <div ng-switch-default> + <i class="ion-ionic" style="float:left; font-size:200%;"></i> + <br/> + </div> + </div> + <!-- ng switch --> + <!-- {{event.Event.Cause}} --> + + <br/> <span style="font-size:80%; color:rgb(110,110,110)">{{event.Event.Length}}s</span> + </div> + <!-- col col left--> - <div class="col col-80"> - <div class="item-text-wrap"><i class="ion-monitor"></i> <b>{{event.Event.MonitorName}}</b> ({{event.Event.Name}})</div> + <div class="col col-80"> + <div class="item-text-wrap"><i class="ion-monitor"></i> <b>{{event.Event.MonitorName}}</b> ({{event.Event.Name}})</div> - <i class="ion-images"></i> {{event.Event.Frames}} - <i class="ion-ios-bell-outline"></i> {{event.Event.AlarmFrames}} - <i class="ion-arrow-graph-up-right"></i> {{event.Event.TotScore}} + <i class="ion-images"></i> {{event.Event.Frames}} + <i class="ion-ios-bell-outline"></i> {{event.Event.AlarmFrames}} + <i class="ion-arrow-graph-up-right"></i> {{event.Event.TotScore}} - <span style="float:right"> + <span style="float:right"> <button class="button button-small icon icon-left ion-ios-eye" ng-click="openModal(event.Event.Id, event.Event.Name, event.Event.Length)" >View Footage</button></span> - </div> + </div> - <!--<div class="col"> + <!--<div class="col"> <img ng-src="{{event.image}}" style="float:right; height:40px;" /> </div> --> - </div> + </div> - <div class="row" style="font-size:80%; color:rgb(110,110,110)"> - <div class="item-text-wrap"><i class="ion-calendar"></i> {{event.Event.StartTime}} - <br/> - <i class="ion-clipboard"></i> {{event.Event.Notes}} - <br/> - </div> - </div> + <div class="row" style="font-size:80%; color:rgb(110,110,110)"> + <div class="item-text-wrap"><i class="ion-calendar"></i> {{event.Event.StartTime}} + <br/> + <i class="ion-clipboard"></i> {{event.Event.Notes}} + <br/> + </div> + </div> - </ion-item> + </ion-item> - <!--</div> --> + <!--</div> --> <!--</ion-list>--> </ion-content> diff --git a/www/templates/monitors-modal.html b/www/templates/monitors-modal.html index 47da2917..c974ec25 100644 --- a/www/templates/monitors-modal.html +++ b/www/templates/monitors-modal.html @@ -16,7 +16,7 @@ <div ng-if="!isSimulated()"> <ion-scroll has-bouncing=false min-zoom=1 zooming="true" direction="xy" style="width: 100%; "> - <img imageonload="finishedLoadingImage()" ng-src="{{LoginData.url}}/cgi-bin/zms?mode=jpeg&monitor={{monitorId}}&maxfps=3&buffer=1000&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{rand}}" width="100%" /> + <img imageonload="finishedLoadingImage()" ng-src="{{LoginData.url}}/cgi-bin/zms?mode=jpeg&monitor={{monitorId}}&maxfps=3&buffer=1000&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{rand}}" width="100%" /> </ion-scroll> </div> diff --git a/www/templates/montage.html b/www/templates/montage.html index f2ba8c78..d8c6ac53 100644 --- a/www/templates/montage.html +++ b/www/templates/montage.html @@ -26,9 +26,7 @@ FIXME: I should probably not pass username and password here - instead go the http interceptor and auth token mode --> <div ng-if="!isSimulated()"> - - <img ng-src="{{LoginData.url}}/cgi-bin/nph-zms?mode=jpeg&monitor={{monitor.Monitor.Id}}&maxfps=3&buffer=1000&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{rand}}" width="{{((devWidth-30)/(7-slider.monsize))}}px;" /> - + <img ng-src="{{LoginData.url}}/cgi-bin/zms?mode=single&monitor={{monitor.Monitor.Id}}&maxfps=3&scale=50&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{randomval}}" width="{{((devWidth-30)/(7-slider.monsize))}}px;" /> </div> @@ -37,11 +35,6 @@ <img ng-src="img/demo.gif?rand={{rand}}" width="{{((devWidth-30)/(7-slider.monsize))}}px;"> </div> - - <!-- <img ng-src="img/demo.gif?rand={{rand}}" width="{{((devWidth-30)/(7-slider.monsize))}}px;" />--> - - <!-- <br/><i class="ion-monitor"></i> Hello --> - </article> <span style="font-size:10px;"> <footer class="footer"> |