diff options
Diffstat (limited to 'www')
| -rw-r--r-- | www/js/DataModel.js | 211 | ||||
| -rw-r--r-- | www/js/DevOptionsCtrl.js | 2 | ||||
| -rw-r--r-- | www/js/EventCtrl.js | 13 | ||||
| -rw-r--r-- | www/js/EventsGraphsCtrl.js | 149 | ||||
| -rw-r--r-- | www/js/LoginCtrl.js | 44 | ||||
| -rw-r--r-- | www/js/ModalCtrl.js | 67 | ||||
| -rw-r--r-- | www/js/MonitorCtrl.js | 54 | ||||
| -rw-r--r-- | www/js/StateCtrl.js | 247 | ||||
| -rw-r--r-- | www/js/app.js | 31 | ||||
| -rw-r--r-- | www/templates/devoptions.html | 9 | ||||
| -rw-r--r-- | www/templates/events-graphs.html | 18 | ||||
| -rw-r--r-- | www/templates/events-modal.html | 38 | ||||
| -rw-r--r-- | www/templates/events.html | 60 | ||||
| -rw-r--r-- | www/templates/help.html | 80 | ||||
| -rw-r--r-- | www/templates/login.html | 2 | ||||
| -rw-r--r-- | www/templates/monitors-modal.html | 43 | ||||
| -rw-r--r-- | www/templates/monitors.html | 24 | ||||
| -rw-r--r-- | www/templates/montage.html | 92 | ||||
| -rw-r--r-- | www/templates/state.html | 2 |
19 files changed, 402 insertions, 784 deletions
diff --git a/www/js/DataModel.js b/www/js/DataModel.js index 72dfc747..ec2deeb3 100644 --- a/www/js/DataModel.js +++ b/www/js/DataModel.js @@ -10,8 +10,6 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ionicLoading', '$ionicBackdrop', function ($http, $q, $ionicLoading, $ionicBackdrop) { // var deferred=''; var monitorsLoaded = 0; - var simSize = 30; // how many monitors to simulate - var eventSimSize = 40; // events to simulare per monitor var montageSize = 3; var monitors = []; var oldevents = []; @@ -20,83 +18,10 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion 'password': '', 'url': '', // This is the ZM portal path 'apiurl': '', // This is the API path - 'simulationMode': false, // if true, data will be simulated. Not using this now 'maxMontage': "10", //total # of monitors to display in montage 'streamingurl': "", - 'maxFPS':"3", // image streaming FPS - 'montageQuality':"50", // montage streaming quality in % - }; - - // This is really a test mode. This is how I am validating - // how my app behaves if you have many monitors. If you set simulationMode to true - // then this is the function that getMonitors and getEvents calls - - var simulation = { - fillSimulatedMonitors: function (cnt) { - var simmonitors = []; - console.log("*** SIM MONITORS: Returning " + cnt + " simulated monitors"); - for (var i = 0; i < cnt; i++) { - - - simmonitors.push({ - "Monitor": { - // Obviously this is dummy data - "Id": i.toString(), - "Name": "Sim-Monitor" + i.toString(), - "Type": "Remote", - "Function": "Modect", - "Enabled": "1", - "Width": "1280", - "Height": "960", - "Colours": "4", - "MaxFPS": "10.00", - "AlarmMaxFPS": "10.00", - "AlarmFrameCount": "10.00" - } - }); - - } - return simmonitors; - }, - - fillSimulatedEvents: function (cnt) { - var simevents = []; - if (monitors.length == 0) // we have arrived at events before simulating monitors - { // not sure if it will ever happen as I have a route resolve - console.log("Monitors have not been simulated yet. Filling them in"); - monitors = simulation.fillSimulatedMonitors(simSize); - } - console.log("*** Returning " + cnt + " simulated events Per " + monitors.length + "Monitors"); - var causes = ["Motion", "Signal", "Something else"]; - for (var mon = 0; mon < monitors.length; mon++) { - console.log("Simulating " + cnt + "events for Monitor " + mon); - for (var i = 0; i < cnt; i++) { - - - simevents.push({ - "Event": { - // Obviously this is dummy data - "Id": Math.floor(Math.random() * (5000 - 100 + 1)) + 1000, - "MonitorId": mon.toString(), - "Cause": causes[Math.floor(Math.random() * (2 - 0 + 1)) + 0], - "Length": Math.floor(Math.random() * (700 - 20 + 1)) + 20, - "Name": "Event Simulation " + i.toString(), - "Frames": Math.floor(Math.random() * (700 - 20 + 1)) + 20, - "AlarmFrames": Math.floor(Math.random() * (700 - 20 + 1)) + 20, - "TotScore": Math.floor(Math.random() * (100 - 2 + 1)) + 2, - "StartTime": "2015-04-24 09:00:00", - "Notes": "This is simulated", - - } - }); - - } // for i - } // for mon - // console.log ("Simulated: "+JSON.stringify(simmonitors)); - return simevents; - }, - - + 'maxFPS': "3", // image streaming FPS + 'montageQuality': "50", // montage streaming quality in % }; return { @@ -121,7 +46,7 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion } - if (window.localStorage.getItem("montageQuality") != undefined) { + if (window.localStorage.getItem("montageQuality") != undefined) { loginData.montageQuality = window.localStorage.getItem("montageQuality"); @@ -145,14 +70,6 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion } - if (window.localStorage.getItem("simulationMode") != undefined) { - // Remember to convert back to Boolean! - var tvar = window.localStorage.getItem("simulationMode"); - loginData.simulationMode = (tvar === "true"); - console.log("***** STORED SIMULATION IS " + tvar); - console.log("******* BOOLEAN VALUE IS " + loginData.simulationMode); - - } if (window.localStorage.getItem("maxMontage") != undefined) { loginData.maxMontage = @@ -173,7 +90,7 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion console.log("maxFPS " + loginData.maxFPS); } - if (window.localStorage.getItem("montageQuality") != undefined) { + if (window.localStorage.getItem("montageQuality") != undefined) { loginData.montageQuality = window.localStorage.getItem("montageQuality"); console.log("montageQuality " + loginData.montageQuality); @@ -194,14 +111,6 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion return 0; {} }, - isSimulated: function () { - return loginData.simulationMode; - }, - - setSimulated: function (mode) { - loginData.simulationMode = mode; - }, - getLogin: function () { return loginData; }, @@ -212,12 +121,10 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion window.localStorage.setItem("password", loginData.password); window.localStorage.setItem("url", loginData.url); window.localStorage.setItem("apiurl", loginData.apiurl); - window.localStorage.setItem("simulationMode", loginData.simulationMode); window.localStorage.setItem("streamingurl", loginData.streamingurl); - if (loginData.maxFPS >30) - { - console.log ("MAXFPS Too high, maxing to 30"); + if (loginData.maxFPS > 30) { + console.log("MAXFPS Too high, maxing to 30"); loginData.maxFPS = "30"; } window.localStorage.setItem("maxFPS", loginData.maxFPS); @@ -237,7 +144,7 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion window.localStorage.setItem("maxMontage", loginData.maxMontage); - window.localStorage.setItem("montageQuality", loginData.montageQuality); + window.localStorage.setItem("montageQuality", loginData.montageQuality); }, @@ -247,9 +154,7 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion // if 0. then it will return back the previously loaded monitor list if one exists, else // will issue a new HTTP API to get it - // I've wrapped this function in my own promise even though http returns a promise. This is because - // depending on forceReload and simulation mode, http may or may not be called. So I'm promisifying - // the non http stuff too to keep it consistent to the calling function. + // I've wrapped this function in my own promise even though http returns a promise. getMonitors: function (forceReload) { console.log("** Inside ZMData getMonitors with forceReload=" + forceReload); @@ -262,7 +167,7 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion showDelay: 0 }); var d = $q.defer(); - if (((monitorsLoaded == 0) || (forceReload == 1)) && (loginData.simulationMode != true)) // monitors are empty or force reload + if ((monitorsLoaded == 0) || (forceReload == 1)) // monitors are empty or force reload { console.log("ZMDataModel: Invoking HTTP get to load monitors"); var apiurl = loginData.apiurl; @@ -289,10 +194,6 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion } else // monitors are loaded { - if (loginData.simulationMode == true) { - monitors = simulation.fillSimulatedMonitors(simSize); - //fillSimulatedMonitors - } console.log("Returning pre-loaded list of " + monitors.length + " monitors"); d.resolve(monitors); $ionicLoading.hide(); @@ -347,22 +248,20 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion console.log("ZMData getEvents called with ID=" + monitorId + "and Page=" + pageId); - if (!loadingStr) - { - loadingStr = "Loading Events..."; - } + if (!loadingStr) { + loadingStr = "Loading Events..."; + } //if (loadingStr) loa - if (loadingStr != 'none') - { - $ionicLoading.show({ - template: loadingStr, - animation: 'fade-in', - showBackdrop: true, - maxWidth: 200, - showDelay: 0, - duration: 15000, //specifically for Android - http seems to get stuck at times - }); + if (loadingStr != 'none') { + $ionicLoading.show({ + template: loadingStr, + animation: 'fade-in', + showBackdrop: true, + maxWidth: 200, + showDelay: 0, + duration: 15000, //specifically for Android - http seems to get stuck at times + }); } //$ionicBackdrop.retain(); @@ -378,46 +277,38 @@ angular.module('zmApp.controllers').service('ZMDataModel', ['$http', '$q', '$ion } console.log("Constructed URL is " + myurl); - if (loginData.simulationMode == true) { - console.log("Events will be simulated"); - myevents = simulation.fillSimulatedEvents(eventSimSize); - d.resolve(myevents); - if (loadingStr != 'none') $ionicLoading.hide(); - return d.promise; - } else { // not simulated - $http.get(myurl /*,{timeout:15000}*/ ) - .success(function (data) { - if (loadingStr != 'none') $ionicLoading.hide(); - //myevents = data.events; - myevents = data.events.reverse(); - if (monitorId == 0) { - oldevents = myevents; - } - //console.log (JSON.stringify(data)); - console.log("DataModel Returning " + myevents.length + "events for page"+pageId); - d.resolve(myevents); - return d.promise; + $http.get(myurl /*,{timeout:15000}*/ ) + .success(function (data) { + if (loadingStr != 'none') $ionicLoading.hide(); + //myevents = data.events; + myevents = data.events.reverse(); + if (monitorId == 0) { + oldevents = myevents; + } + //console.log (JSON.stringify(data)); + console.log("DataModel Returning " + myevents.length + "events for page" + pageId); + d.resolve(myevents); + return d.promise; - }) - .error(function (err) { - if (loadingStr != 'none') $ionicLoading.hide(); - console.log("HTTP Events error " + err); - // I need to reject this as I have infinite scrolling - // implemented in EventCtrl.js --> and if it does not know - // it got an error going to the next page, it will get into - // an infinite loop as we are at the bottom of the list always - - d.reject(myevents); - - // FIXME: Check what pagination does to this logic - if (monitorId == 0) { - oldevents = []; - } - return d.promise; - }); - return d.promise; - } // not simulated + }) + .error(function (err) { + if (loadingStr != 'none') $ionicLoading.hide(); + console.log("HTTP Events error " + err); + // I need to reject this as I have infinite scrolling + // implemented in EventCtrl.js --> and if it does not know + // it got an error going to the next page, it will get into + // an infinite loop as we are at the bottom of the list always + + d.reject(myevents); + + // FIXME: Check what pagination does to this logic + if (monitorId == 0) { + oldevents = []; + } + return d.promise; + }); + return d.promise; }, getMontageSize: function () { diff --git a/www/js/DevOptionsCtrl.js b/www/js/DevOptionsCtrl.js index 9964b036..7c9cfce7 100644 --- a/www/js/DevOptionsCtrl.js +++ b/www/js/DevOptionsCtrl.js @@ -29,7 +29,7 @@ angular.module('zmApp.controllers').controller('zmApp.DevOptionsCtrl', ['$scope' } - if ((parseInt($scope.loginData.montageQuality) <10) || (parseInt($scope.loginData.montageQuality)>100)) + if ((parseInt($scope.loginData.montageQuality) <10) || (parseInt($scope.loginData.montageQuality)>70)) { $scope.loginData.montageQuality='50'; } diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js index 98c3b6c9..2cda31bf 100644 --- a/www/js/EventCtrl.js +++ b/www/js/EventCtrl.js @@ -146,16 +146,6 @@ angular.module('zmApp.controllers').controller('zmApp.EventCtrl', ['$ionicPlatfo $scope.controlEventStream = function (cmd) { console.log("Command value " + cmd); - if (ZMDataModel.isSimulated()) { - var str = "simulation mode. no action taken"; - $ionicLoading.show({ - template: str, - noBackdrop: true, - duration: 3000 - }); - return; - } - $ionicLoading.hide(); $ionicLoading.show({ template: "please wait...", @@ -421,9 +411,6 @@ $ionicLoading.show({ maxwidth:100, scope:$scope, template: '<button class="butto }; - $scope.isSimulated = function () { - return ZMDataModel.isSimulated(); - }; // For consistency we are keeping the refresher list // but its a dummy. The reason I deviated is because diff --git a/www/js/EventsGraphsCtrl.js b/www/js/EventsGraphsCtrl.js index b8bf7d97..21d67f56 100644 --- a/www/js/EventsGraphsCtrl.js +++ b/www/js/EventsGraphsCtrl.js @@ -1,5 +1,6 @@ /* jshint -W041 */ -/* jshint -W083 */ /*This is for the loop closure I am using in line 143 */ +/* jshint -W083 */ +/*This is for the loop closure I am using in line 143 */ /* jslint browser: true*/ /* global cordova,StatusBar,angular,console,moment */ @@ -34,7 +35,7 @@ angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', ['$ioni $scope.navTitle = 'Tab Page'; - // $scope.chart=""; + // $scope.chart=""; $scope.leftButtons = [{ type: 'button-icon icon ion-navicon', tap: function (e) { @@ -42,7 +43,7 @@ angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', ['$ioni } }]; - // $scope.chartObject=[{},{},{},{}]; + // $scope.chartObject=[{},{},{},{}]; angular.element(document).ready(function () { @@ -51,25 +52,20 @@ angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', ['$ioni // FIXME: No idea why this is not working // it seems it can't get a handle to chart - $scope.handleChartClick = function(event) - { + $scope.handleChartClick = function (event) { // console.log (JSON.stringify( $scope.chart1.getBarsAtEvent(event))); }; - - $scope.generateTCChart = function(id,chartTitle, hrs) - { + $scope.generateTCChart = function (id, chartTitle, hrs) { var monitors = []; - - - var dateRange = ""; + var dateRange = ""; var startDate = ""; var endDate = ""; - $scope.barHeight=$rootScope.devHeight; + $scope.barHeight = $rootScope.devHeight; - if (hrs) { + if (hrs) { // Apply a time based filter if I am not watching all events var cur = moment(); endDate = cur.format("YYYY-MM-DD hh:mm:ss"); @@ -79,32 +75,28 @@ angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', ['$ioni } var loginData = ZMDataModel.getLogin(); - - - $scope.data={}; - $scope.data = { - labels: [], - datasets: [ - { - label: '', - fillColor: 'rgba(151,187,205,0.5)', - strokeColor: 'rgba(151,187,205,0.8)', - highlightFill: 'rgba(0,163,124,0.5)', - // highlightFill: 'rgba(151,187,205,0.75)', - // highlightStroke: 'rgba(151,187,205,1)', - data: [] + $scope.data = {}; + $scope.data = { + labels: [], + datasets: [ + { + label: '', + fillColor: 'rgba(151,187,205,0.5)', + strokeColor: 'rgba(151,187,205,0.8)', + highlightFill: 'rgba(0,163,124,0.5)', + // highlightFill: 'rgba(151,187,205,0.75)', + // highlightStroke: 'rgba(151,187,205,1)', + data: [] }, - ] - }; - - ZMDataModel.getMonitors(0).then(function (data) { + ]}; + ZMDataModel.getMonitors(0).then(function (data) { monitors = data; var adjustedHeight = monitors.length * 30; if (adjustedHeight > $rootScope.devHeight) { - $scope.barHeight = adjustedHeight; - console.log ("********* BAR HEIGHT TO "+$scope.barHeight); + $scope.barHeight = adjustedHeight; + console.log("********* BAR HEIGHT TO " + $scope.barHeight); } for (var i = 0; i < monitors.length; i++) { @@ -114,7 +106,7 @@ angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', ['$ioni $scope.data.labels.push(monitors[j].Monitor.Name); - //$scope.chartObject[id].data.push([monitors[j].Monitor.Name,'0','color:#76A7FA','0']); + //$scope.chartObject[id].data.push([monitors[j].Monitor.Name,'0','color:#76A7FA','0']); // $scope.chartObject.data[j+1]=([monitors[j].Monitor.Name,'100','color:#76A7FA','0']); var dateString = ""; @@ -124,70 +116,39 @@ angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', ['$ioni var url = loginData.apiurl + "/events/index/MonitorId:" + monitors[j].Monitor.Id + dateString + ".json?page=1"; - // console.log("Monitor event URL:" + url); - if (!ZMDataModel.isSimulated()) { - $http.get(url /*,{timeout:15000}*/ ) - .success(function (data) { - console.log("**** EVENT COUNT FOR MONITOR " + - monitors[j].Monitor.Id + " IS " + data.pagination.count); - + // console.log("Monitor event URL:" + url); + $http.get(url /*,{timeout:15000}*/ ) + .success(function (data) { + console.log("**** EVENT COUNT FOR MONITOR " + + monitors[j].Monitor.Id + " IS " + data.pagination.count); $scope.data.datasets[0].data[j] = data.pagination.count; - - - - - - }) - .error(function (data) { - // ideally I should be treating it as an error - // but what I am really doing now is treating it like no events - // works but TBD: make this into a proper error handler - - - $scope.data.datasets[0].data[j] = 0; - - - }); - } // is not simulated - else // simulated: grab a random event count - { - var rndEventCount = Math.floor(Math.random() * (100 - 20 + 1)) + 20; - $scope.data.datasets[0].data[j] = rndEventCount; - - - } + }) + .error(function (data) { + // ideally I should be treating it as an error + // but what I am really doing now is treating it like no events + // works but TBD: make this into a proper error handler + $scope.data.datasets[0].data[j] = 0; + }); })(i); // j - } //for - }); - - - - $scope.options = { - - responsive: true, - scaleBeginAtZero: true, - scaleShowGridLines: false, - scaleGridLineColor: "rgba(0,0,0,.05)", - scaleGridLineWidth: 1, - barShowStroke: true, - barStrokeWidth: 2, - barValueSpacing: 5, - barDatasetSpacing: 1, - showTooltip: true, - - //String - A legend template - // legendTemplate : '<ul class="tc-chart-js-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].fillColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>' - }; - - - - }; - - - - + $scope.options = { + + responsive: true, + scaleBeginAtZero: true, + scaleShowGridLines: false, + scaleGridLineColor: "rgba(0,0,0,.05)", + scaleGridLineWidth: 1, + barShowStroke: true, + barStrokeWidth: 2, + barValueSpacing: 5, + barDatasetSpacing: 1, + showTooltip: true, + + //String - A legend template + // legendTemplate : '<ul class="tc-chart-js-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].fillColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>' + }; + }; }]); diff --git a/www/js/LoginCtrl.js b/www/js/LoginCtrl.js index 728c8b9c..b787f509 100644 --- a/www/js/LoginCtrl.js +++ b/www/js/LoginCtrl.js @@ -34,29 +34,25 @@ angular.module('zmApp.controllers').controller('zmApp.LoginCtrl', ['$scope', '$r $scope.loginData.username = $scope.loginData.username.trim(); $scope.loginData.streamingurl = $scope.loginData.streamingurl.trim(); - if ($scope.loginData.url.slice(-1) == '/') - { - $scope.loginData.url = $scope.loginData.url.slice(0,-1); + if ($scope.loginData.url.slice(-1) == '/') { + $scope.loginData.url = $scope.loginData.url.slice(0, -1); } - if ($scope.loginData.apiurl.slice(-1) == '/') - { - $scope.loginData.apiurl = $scope.loginData.apiurl.slice(0,-1); + if ($scope.loginData.apiurl.slice(-1) == '/') { + $scope.loginData.apiurl = $scope.loginData.apiurl.slice(0, -1); } - if ($scope.loginData.streamingurl.slice(-1) == '/') - { - $scope.loginData.streamingurl = $scope.loginData.streamingurl.slice(0,-1); + if ($scope.loginData.streamingurl.slice(-1) == '/') { + $scope.loginData.streamingurl = $scope.loginData.streamingurl.slice(0, -1); } // strip cgi-bin if it is there but only at the end - if ($scope.loginData.streamingurl.slice(-7).toLowerCase() == 'cgi-bin') - { - $scope.loginData.streamingurl = $scope.loginData.streamingurl.slice(0,-7); + if ($scope.loginData.streamingurl.slice(-7).toLowerCase() == 'cgi-bin') { + $scope.loginData.streamingurl = $scope.loginData.streamingurl.slice(0, -7); } @@ -65,22 +61,22 @@ angular.module('zmApp.controllers').controller('zmApp.LoginCtrl', ['$scope', '$r var apiurl = $scope.loginData.apiurl + '/host/getVersion.json'; var portalurl = $scope.loginData.url + '/index.php'; var streamingurl = $scope.loginData.streamingurl + - '/cgi-bin/zms?user='+$scope.loginData.username+"&pass="+$scope.loginData.password; + '/cgi-bin/zms?user=' + $scope.loginData.username + "&pass=" + $scope.loginData.password; - console.log("Checking API: " + apiurl + " PORTAL: " + portalurl + " CGI-BIN: "+streamingurl); + console.log("Checking API: " + apiurl + " PORTAL: " + portalurl + " CGI-BIN: " + streamingurl); // Let's do a sanity check to see if the URLs are ok $ionicLoading.show({ - template: 'Checking data...', - animation: 'fade-in', - showBackdrop: true, - duration: 15000, - maxWidth: 200, - showDelay: 0 - }); + template: 'Checking data...', + animation: 'fade-in', + showBackdrop: true, + duration: 15000, + maxWidth: 200, + showDelay: 0 + }); $q.all([ @@ -106,11 +102,11 @@ angular.module('zmApp.controllers').controller('zmApp.LoginCtrl', ['$scope', '$r }, { text: 'Details...', - onTap: function (e) - { + onTap: function (e) { $ionicPopup.alert({ title: 'Error Details', - template: JSON.stringify(error)}); + template: JSON.stringify(error) + }); } } ] diff --git a/www/js/ModalCtrl.js b/www/js/ModalCtrl.js index b0fd3ab9..14298269 100644 --- a/www/js/ModalCtrl.js +++ b/www/js/ModalCtrl.js @@ -4,15 +4,15 @@ /* global cordova,StatusBar,angular,console,ionic */ -angular.module('zmApp.controllers').controller('ModalCtrl', ['$scope', '$rootScope', 'ZMDataModel', '$ionicSideMenuDelegate', '$timeout', '$interval', '$ionicModal', '$ionicLoading', '$http', '$state', '$stateParams','$ionicHistory','$ionicScrollDelegate', function ($scope, $rootScope, ZMDataModel, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http,$state, $stateParams, $ionicHistory,$ionicScrollDelegate) { +angular.module('zmApp.controllers').controller('ModalCtrl', ['$scope', '$rootScope', 'ZMDataModel', '$ionicSideMenuDelegate', '$timeout', '$interval', '$ionicModal', '$ionicLoading', '$http', '$state', '$stateParams', '$ionicHistory', '$ionicScrollDelegate', function ($scope, $rootScope, ZMDataModel, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http, $state, $stateParams, $ionicHistory, $ionicScrollDelegate) { - console.log ("**** INSIDE MODAL CTRL *****"); + console.log("**** INSIDE MODAL CTRL *****"); - // This holds the PTZ menu control - // Note that I hacked radialMenu - // so please don't use the one you get from bower - $scope.radialMenuOptions = { + // This holds the PTZ menu control + // Note that I hacked radialMenu + // so please don't use the one you get from bower + $scope.radialMenuOptions = { content: '', background: '#2F4F4F', @@ -119,9 +119,7 @@ angular.module('zmApp.controllers').controller('ModalCtrl', ['$scope', '$rootSco console.log('About'); } }, - - - ] + ] }; // Send PTZ command to ZM @@ -133,17 +131,6 @@ angular.module('zmApp.controllers').controller('ModalCtrl', ['$scope', '$rootSco //curl -X POST "http://server.com/zm/index.php?view=request" -d "request=control&user=admin&passwd=xx&id=4&control=moveConLeft" console.log("Command value " + cmd + " with MID=" + monitorId); - - if (ZMDataModel.isSimulated()) { - var str = "simulation mode. no action taken"; - $ionicLoading.show({ - template: str, - noBackdrop: true, - duration: 3000 - }); - return; - } - $ionicLoading.hide(); $ionicLoading.show({ template: "please wait...", @@ -152,33 +139,6 @@ angular.module('zmApp.controllers').controller('ModalCtrl', ['$scope', '$rootSco }); var loginData = ZMDataModel.getLogin(); - - /* $http({ - method:'POST', - url:loginData.url + '/index.php', - headers:{ - 'Content-Type': 'application/x-www-form-urlencoded', - 'Accept': 'application/json', - }, - transformRequest: function (obj) { - var str = []; - for (var p in obj) - str.push(encodeURIComponent(p) + "=" + - encodeURIComponent(obj[p])); - var foo = str.join("&"); - console.log("****RETURNING " + foo); - return foo; - }, - - data: { - username:loginData.username, - password:loginData.password, - action:"login", - view:"console" - } - }) - .success (function(data,status,header,config) - {*/ $ionicLoading.hide(); $ionicLoading.show({ template: "Sending PTZ..", @@ -209,12 +169,9 @@ angular.module('zmApp.controllers').controller('ModalCtrl', ['$scope', '$rootSco view: "request", request: "control", id: monitorId, - //connkey: $scope.connKey, control: "moveCon" + cmd, xge: "30", yge: "30", - //user: loginData.username, - //pass: loginData.password } }); @@ -231,13 +188,9 @@ angular.module('zmApp.controllers').controller('ModalCtrl', ['$scope', '$rootSco $ionicLoading.hide(); console.log("ERROR: " + JSON.stringify(resp)); }); - - //}); } - - - $scope.finishedLoadingImage = function () { + $scope.finishedLoadingImage = function () { console.log("***Monitor image FINISHED Loading***"); $ionicLoading.hide(); /* $ionicLoading.show({ @@ -246,10 +199,6 @@ angular.module('zmApp.controllers').controller('ModalCtrl', ['$scope', '$rootSco });*/ }; - - - - // 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 diff --git a/www/js/MonitorCtrl.js b/www/js/MonitorCtrl.js index 5175237d..d0c6f90e 100644 --- a/www/js/MonitorCtrl.js +++ b/www/js/MonitorCtrl.js @@ -7,10 +7,6 @@ angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', ['$ionicPopup', '$scope', 'ZMDataModel', 'message', '$ionicSideMenuDelegate', '$ionicLoading', '$ionicModal', '$state', '$http', function ($ionicPopup, $scope, ZMDataModel, message, $ionicSideMenuDelegate, $ionicLoading, $ionicModal, $state, $http, $rootScope, $timeout) { - - //FIXME:curl http://server/zm/api/monitors/daemonStatus/id:5/daemon:zmc.json to check if daemon is alive - // but reutrns true for pending - $scope.monitors = []; $scope.openMenu = function () { @@ -27,9 +23,6 @@ angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', ['$ionicPopu }); }; - - - // This function takes care of changing function parameters // For now, I've only limited it to enable/disable and change monitor mode @@ -165,9 +158,6 @@ angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', ['$ionicPopu }; - $scope.isSimulated = function () { - return ZMDataModel.isSimulated(); - }; // same logic as EventCtrl.js $scope.finishedLoadingImage = function () { @@ -258,9 +248,6 @@ angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', ['$ionicPopu console.log("**** PORTAL LOGIN FAILED"); }); - - - }; $scope.closeModal = function () { @@ -281,17 +268,6 @@ angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', ['$ionicPopu function controlPTZ(monitorId, cmd) { console.log("Command value " + cmd + " with MID=" + monitorId); - - if (ZMDataModel.isSimulated()) { - var str = "simulation mode. no action taken"; - $ionicLoading.show({ - template: str, - noBackdrop: true, - duration: 3000 - }); - return; - } - $ionicLoading.hide(); $ionicLoading.show({ template: "please wait...", @@ -300,33 +276,6 @@ angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', ['$ionicPopu }); var loginData = ZMDataModel.getLogin(); - - /* $http({ - method:'POST', - url:loginData.url + '/index.php', - headers:{ - 'Content-Type': 'application/x-www-form-urlencoded', - 'Accept': 'application/json', - }, - transformRequest: function (obj) { - var str = []; - for (var p in obj) - str.push(encodeURIComponent(p) + "=" + - encodeURIComponent(obj[p])); - var foo = str.join("&"); - console.log("****RETURNING " + foo); - return foo; - }, - - data: { - username:loginData.username, - password:loginData.password, - action:"login", - view:"console" - } - }) - .success (function(data,status,header,config) - {*/ $ionicLoading.hide(); $ionicLoading.show({ template: "Sending PTZ..", @@ -334,11 +283,8 @@ angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', ['$ionicPopu duration: 15000, }); // console.log ("ANGULAR VERSION: "+JSON.stringify(angular.version)); - // console.log('Set-Cookie'+ header('Set-Cookie')); // - // FIXME: Put in an interval and do this once every few - // minutes so it does not time out var req = $http({ method: 'POST', /*timeout: 15000,*/ diff --git a/www/js/StateCtrl.js b/www/js/StateCtrl.js index b2bde9ed..4c44b6b5 100644 --- a/www/js/StateCtrl.js +++ b/www/js/StateCtrl.js @@ -4,113 +4,107 @@ // controller for State View -angular.module('zmApp.controllers').controller('zmApp.StateCtrl', ['$ionicPopup', '$scope', 'ZMDataModel', '$ionicSideMenuDelegate', '$ionicLoading', '$ionicModal', '$state', '$http', function ($ionicPopup,$scope, ZMDataModel, $ionicSideMenuDelegate, $ionicLoading, $ionicModal, $state, $http, $rootScope) { +angular.module('zmApp.controllers').controller('zmApp.StateCtrl', ['$ionicPopup', '$scope', 'ZMDataModel', '$ionicSideMenuDelegate', '$ionicLoading', '$ionicModal', '$state', '$http', function ($ionicPopup, $scope, ZMDataModel, $ionicSideMenuDelegate, $ionicLoading, $ionicModal, $state, $http, $rootScope) { - $scope.zmRun="loading..."; - $scope.zmLoad="loading..."; + $scope.zmRun = "loading..."; + $scope.zmLoad = "loading..."; $scope.zmDisk = "loading..."; - $scope.color=""; - $scope.showDanger=false; + $scope.color = ""; + $scope.showDanger = false; $scope.dangerText = ["Show ZoneMinder Controls", "Hide ZoneMinder Controls"]; $scope.dangerButtonColor = ["button-positive", "button-assertive"]; var loginData = ZMDataModel.getLogin(); - var apiRun = loginData.apiurl+"/host/daemonCheck.json"; - var apiLoad = loginData.apiurl+"/host/getLoad.json"; - var apiDisk = loginData.apiurl+"/host/getDiskPercent.json"; + var apiRun = loginData.apiurl + "/host/daemonCheck.json"; + var apiLoad = loginData.apiurl + "/host/getLoad.json"; + var apiDisk = loginData.apiurl + "/host/getDiskPercent.json"; - var apiExec = loginData.apiurl+"/states/change/"; + var apiExec = loginData.apiurl + "/states/change/"; var inProgress = 0; getRunStatus(); getLoadStatus(); getDiskStatus(); - function getDiskStatus(){ + function getDiskStatus() { $http.get(apiDisk) - .then( - function(success) - { + .then( + function (success) { var obj = success.data.usage; var du = 0; - console.log ("DISK:"+JSON.stringify(success)); - for (var p in obj) - { - if (obj.hasOwnProperty(p)) - { + console.log("DISK:" + JSON.stringify(success)); + for (var p in obj) { + if (obj.hasOwnProperty(p)) { du += parseFloat(obj[p].space); } } - $scope.zmDisk=du.toFixed(1).toString()+"G"; + $scope.zmDisk = du.toFixed(1).toString() + "G"; }, - function (error) - { - $scope.zmDisk="unknown"; - console.log ("ERROR:"+JSON.stringify(error)); + function (error) { + $scope.zmDisk = "unknown"; + console.log("ERROR:" + JSON.stringify(error)); } ); } function getRunStatus() { - $http.get(apiRun) - .then( - function (success) { - switch (success.data.result) { - case 1: - $scope.zmRun = 'running'; - $scope.color = 'color:green;'; - break; - case 0: - $scope.zmRun = 'stopped'; + $http.get(apiRun) + .then( + function (success) { + switch (success.data.result) { + case 1: + $scope.zmRun = 'running'; + $scope.color = 'color:green;'; + break; + case 0: + $scope.zmRun = 'stopped'; + $scope.color = 'color:red;'; + break; + default: + $scope.zmRun = 'undetermined'; + $scope.color = 'color:orange;'; + break; + } + + + // console.log("X"+success.data.result+"X"); + }, + function (error) { + console.log("ERROR in getRun: " + JSON.stringify(error)); $scope.color = 'color:red;'; - break; - default: $scope.zmRun = 'undetermined'; - $scope.color = 'color:orange;'; - break; } + ); - - // console.log("X"+success.data.result+"X"); - }, - function (error) { - console.log("ERROR in getRun: " + JSON.stringify(error)); - $scope.color = 'color:red;'; - $scope.zmRun = 'undetermined'; - } - ); - -} + } function getLoadStatus() { - $http.get(apiLoad) - .then( - function (success) { - //console.log(JSON.stringify(success)); - // load returns 3 params - one in the middle is avg. - $scope.zmLoad = success.data.load[1]; + $http.get(apiLoad) + .then( + function (success) { + //console.log(JSON.stringify(success)); + // load returns 3 params - one in the middle is avg. + $scope.zmLoad = success.data.load[1]; - // console.log("X"+success.data.result+"X"); - }, - function (error) { - console.log("ERROR in getLoad: " + JSON.stringify(error)); - $scope.zmLoad = 'undetermined'; - } - ); -} + // console.log("X"+success.data.result+"X"); + }, + function (error) { + console.log("ERROR in getLoad: " + JSON.stringify(error)); + $scope.zmLoad = 'undetermined'; + } + ); + } - $scope.controlZM = function(str) - { - if (inProgress) - { + $scope.controlZM = function (str) { + if (inProgress) { $ionicPopup.alert({ title: "Operation in Progress", template: "The previous operation is still in progress. Please wait..." @@ -119,67 +113,69 @@ angular.module('zmApp.controllers').controller('zmApp.StateCtrl', ['$ionicPopup' } - $ionicPopup.show({ - title: 'Please Confirm', - template: 'Are you sure you want to '+str+' Zoneminder?', - buttons: [ - { - text: 'Cancel', - type: 'button-positive' + $ionicPopup.show({ + title: 'Please Confirm', + template: 'Are you sure you want to ' + str + ' Zoneminder?', + buttons: [ + { + text: 'Cancel', + type: 'button-positive' }, - { - text: 'Yes, '+str+' Zoneminder', - type: 'button-assertive', - onTap: function (e) - { - $scope.zmRun = "please wait..."; - $scope.color = 'color:orange;'; - console.log ("Control command is " +apiExec+str+".json"); - inProgress = 1; - $http.post(apiExec+str+".json") - .then( - function(success) - { - switch (str) - { - case "stop":$scope.zmRun = 'stopped'; - $scope.color='color:red;'; break; - case "start": - case "restart":$scope.zmRun = 'running'; - $scope.color = 'color:green;';break; - - } - inProgress = 0; - }, - function (error) + { + text: 'Yes, ' + str + ' Zoneminder', + type: 'button-assertive', + onTap: function (e) { + $scope.zmRun = "please wait..."; + $scope.color = 'color:orange;'; + console.log("Control command is " + apiExec + str + ".json"); + inProgress = 1; + $http.post(apiExec + str + ".json") + .then( + function (success) { + switch (str) { + case "stop": + $scope.zmRun = 'stopped'; + $scope.color = 'color:red;'; + break; + case "start": + case "restart": + $scope.zmRun = 'running'; + $scope.color = 'color:green;'; + break; + + } + inProgress = 0; + }, + function (error) { + //if (error.status) // it seems to return error with status 0 if ok + // { + console.log("ERROR in Change State:" + JSON.stringify(error)); + $scope.zmRun = 'undetermined'; + $scope.color = 'color:orange;'; + inProgress = 0; + // } + /*else + { + switch (str) { - //if (error.status) // it seems to return error with status 0 if ok - // { - console.log("ERROR in Change State:"+JSON.stringify(error)); - $scope.zmRun = 'undetermined'; $scope.color='color:orange;'; - // } - /*else - { - switch (str) - { - case "stop":$scope.zmRun = 'stopped'; - $scope.color='color:red;'; break; - case "start": - case "restart":$scope.zmRun = 'running'; - $scope.color = 'color:green;';break; - - } - inProgress = 0; - }*/ + case "stop":$scope.zmRun = 'stopped'; + $scope.color='color:red;'; break; + case "start": + case "restart":$scope.zmRun = 'running'; + $scope.color = 'color:green;';break; } + inProgress = 0; + }*/ + + } - ); + ); - } + } } ] - }); + }); }; @@ -187,6 +183,12 @@ angular.module('zmApp.controllers').controller('zmApp.StateCtrl', ['$ionicPopup' $ionicSideMenuDelegate.toggleLeft(); }; + $scope.$on('$ionicView.leave', function () { + console.log("**VIEW ** State Ctrl Left"); + // FIXME not the best way... + inProgress = 0; + }); + $scope.reloadView = function () { console.log("*** Refreshing Modal view ***"); inProgress = 0; @@ -198,13 +200,6 @@ angular.module('zmApp.controllers').controller('zmApp.StateCtrl', ['$ionicPopup' }); }; - $scope.isSimulated = function () { - return ZMDataModel.isSimulated(); - }; - - - - $scope.doRefresh = function () { console.log("***Pull to Refresh"); getRunStatus(); diff --git a/www/js/app.js b/www/js/app.js index e8ac220e..463e15d4 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -10,10 +10,6 @@ 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 @@ -34,8 +30,6 @@ angular.module('zmApp', [ }) - - // 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 @@ -66,6 +60,7 @@ angular.module('zmApp', [ }; }) +// This service automatically logs into ZM at periodic intervals .factory('zmAutoLogin', function($interval, ZMDataModel, $http) { var zmAutoLoginHandle; function doLogin() @@ -158,7 +153,8 @@ angular.module('zmApp', [ -.run(function ($ionicPlatform, $ionicPopup, $rootScope, $state, ZMDataModel, $cordovaSplashscreen, $http, $interval, zmAutoLogin) { +.run(function ($ionicPlatform, $ionicPopup, $rootScope, $state, ZMDataModel, $cordovaSplashscreen, $http, $interval, zmAutoLogin) +{ ZMDataModel.init(); var loginData = ZMDataModel.getLogin(); @@ -169,7 +165,6 @@ angular.module('zmApp', [ } - // 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 @@ -246,9 +241,6 @@ angular.module('zmApp', [ }, false); - - - if (window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); } @@ -258,17 +250,14 @@ angular.module('zmApp', [ } - }); + }); //platformReady // lets POST so we get a session ID right hre - // var loginData = ZMDataModel.getLogin(); console.log ("Setting up POST LOGIN timer"); zmAutoLogin.start(); - - }) //run // My route map connecting menu options to their respective templates and controllers @@ -287,8 +276,6 @@ angular.module('zmApp', [ url: "/login", templateUrl: "templates/login.html", controller: 'zmApp.LoginCtrl', - - }); $stateProvider @@ -299,8 +286,6 @@ angular.module('zmApp', [ url: "/help", templateUrl: "templates/help.html", controller: 'zmApp.HelpCtrl', - - }) .state('monitors', { @@ -319,7 +304,6 @@ angular.module('zmApp', [ }) - .state('events', { data: { requireLogin: true @@ -336,7 +320,6 @@ angular.module('zmApp', [ }) - //n .state('events-graphs', { data: { requireLogin: true @@ -355,7 +338,6 @@ angular.module('zmApp', [ controller: 'zmApp.StateCtrl', }) - .state('devoptions', { data: { requireLogin: true @@ -365,8 +347,6 @@ angular.module('zmApp', [ controller: 'zmApp.DevOptionsCtrl', }) - - .state('montage', { data: { requireLogin: true @@ -385,7 +365,6 @@ angular.module('zmApp', [ }); - // if none of the above states are matched, use this as the fallback var defaultState = "/montage"; //var defaultState = "/login"; @@ -404,4 +383,4 @@ angular.module('zmApp', [ $state.go("montage"); }); -}); +}); //config diff --git a/www/templates/devoptions.html b/www/templates/devoptions.html index 4930c3e8..7b5fca0e 100644 --- a/www/templates/devoptions.html +++ b/www/templates/devoptions.html @@ -10,8 +10,6 @@ <span style="color:rgb(100,100,100)"><i class="ion-android-settings" style="font-size:150%"></i> Developer Options</span> - <!-- <ion-toggle ng-model="loginData.simulationMode" ng-checked={{loginData.simulationMode}} toggle-class="toggle-energized">Simulation Mode</ion-toggle>--> - <div class="item item-input-inset"> Max Monitors in Montage @@ -30,17 +28,14 @@ </div> - <div class="item item-input-inset"> + <div class="item item-input-inset"> Montage Streaming Quality(%) <label class="item-input-wrapper"> - <input type="tel" placeholder="max is 30" ng-model="loginData.montageQuality"> + <input type="tel" placeholder="max is 70" ng-model="loginData.montageQuality"> </label> - </div> - - <button class="button button-block button-balanced icon ion-locked" ng-click="saveDevOptions()"> Save</button> diff --git a/www/templates/events-graphs.html b/www/templates/events-graphs.html index 3f3c2305..91b58001 100644 --- a/www/templates/events-graphs.html +++ b/www/templates/events-graphs.html @@ -7,11 +7,11 @@ <!-- I'm calling the same controller function but with different parameters when you switch between tabs --> <ion-tabs class="tabs-icon-top tabs-stable"> - <ion-tab title="All" icon="ion-stats-bars" on-select="generateTCChart(0,'All Events',0)" > + <ion-tab title="All" icon="ion-stats-bars" on-select="generateTCChart(0,'All Events',0)"> <ion-nav-view> <ion-content class="has-header"> - <canvas tc-chartjs-bar chart-data="data" chart-options="options" ng-click="handleChartClick($event)" chart="chart1"> - </canvas> + <canvas tc-chartjs-bar chart-data="data" chart-options="options" ng-click="handleChartClick($event)" chart="chart1"> + </canvas> </ion-content> @@ -31,12 +31,12 @@ <div style="overflow:scroll;"> - <canvas tc-chartjs-bar chart-data="data" chart-options="options" ng-click="handleChartClick($event)" chart="chart2"> + <canvas tc-chartjs-bar chart-data="data" chart-options="options" ng-click="handleChartClick($event)" chart="chart2"> </canvas> </div> - </canvas> + </canvas> - <!-- <div google-chart chart="chartObject[1]"></div>--> + <!-- <div google-chart chart="chartObject[1]"></div>--> </div> </ion-content> @@ -49,7 +49,7 @@ <ion-content> <span></span> <div style="overflow:scroll;"> - <canvas tc-chartjs-bar chart-data="data" chart-options="options" chart="chart3" ng-click="handleChartClick($event)"> + <canvas tc-chartjs-bar chart-data="data" chart-options="options" chart="chart3" ng-click="handleChartClick($event)"> </canvas> </div> @@ -63,8 +63,8 @@ <span></span> <!-- <div google-chart chart="chartObject[3]"></div>--> - <div style="overflow:scroll;"> - <canvas tc-chartjs-bar chart-data="data" chart-options="options" chart="chart4" ng-click="handleChartClick($event)"> + <div style="overflow:scroll;"> + <canvas tc-chartjs-bar chart-data="data" chart-options="options" chart="chart4" ng-click="handleChartClick($event)"> </canvas> </div> </ion-content> diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html index 221e0dc7..c904c9d0 100644 --- a/www/templates/events-modal.html +++ b/www/templates/events-modal.html @@ -11,37 +11,25 @@ </h1> </ion-header-bar> --> <ion-content> - <div ng-controller="ModalCtrl"> - - <!-- replay can also be gapless --> + <div ng-controller="ModalCtrl"> + <!-- replay can also be gapless --> <ion-scroll has-bouncing=false min-zoom=1 zooming="true" direction="xy" style="width: 100%; "> <img imageonload="finishedLoadingImage()" ng-src="{{loginData.streamingurl}}/cgi-bin/zms?source=event&mode=jpeg&event={{eventId}}&frame=1&maxfps={{loginData.maxFPS}}&replay=single&user={{loginData.username}}&pass={{loginData.password}}&connkey={{connKey}}&rand={{rand}}" width="100%" /> </ion-scroll> - - </div> </ion-content> </ion-modal-view> - <nav mfb-menu position="br" effect="zoomin" label="collapse" active-icon="ion-chevron-down" resting-icon="ion-chevron-up" toggling-method="click"> - <button mfb-button icon="ion-close" label="exit event view" ng-click="closeModal()"></button> - - - <a mfb-button icon="ion-skip-backward" label="previous" ng-click="controlEventStream(eventCommands.previous)"></a> - - - <a mfb-button icon="ion-skip-forward" label="next" ng-click="controlEventStream(eventCommands.next)"></a> - - - - </nav> - - <nav mfb-menu position="bl" effect="zoomin" label="collapse" active-icon="ion-chevron-down" resting-icon="ion-chevron-up" toggling-method="click"> - <a mfb-button icon="ion-refresh" label="refresh" ng-click="reloadView()"></a> - - <a mfb-button icon="ion-pause" label="pause" ng-click="controlEventStream(eventCommands.pause)"></a> - - <a mfb-button icon="ion-play" label="play" ng-click="controlEventStream(eventCommands.play)"></a> - </nav> +<nav mfb-menu position="br" effect="zoomin" label="collapse" active-icon="ion-chevron-down" resting-icon="ion-chevron-up" toggling-method="click"> + <button mfb-button icon="ion-close" label="exit event view" ng-click="closeModal()"></button> + <a mfb-button icon="ion-skip-backward" label="previous" ng-click="controlEventStream(eventCommands.previous)"></a> + <a mfb-button icon="ion-skip-forward" label="next" ng-click="controlEventStream(eventCommands.next)"></a> +</nav> + +<nav mfb-menu position="bl" effect="zoomin" label="collapse" active-icon="ion-chevron-down" resting-icon="ion-chevron-up" toggling-method="click"> + <a mfb-button icon="ion-refresh" label="refresh" ng-click="reloadView()"></a> + <a mfb-button icon="ion-pause" label="pause" ng-click="controlEventStream(eventCommands.pause)"></a> + <a mfb-button icon="ion-play" label="play" ng-click="controlEventStream(eventCommands.play)"></a> +</nav> diff --git a/www/templates/events.html b/www/templates/events.html index 7c3b2bf3..0f9a5570 100644 --- a/www/templates/events.html +++ b/www/templates/events.html @@ -1,5 +1,5 @@ <ion-view view-title="" cache-view="false"> -<!-- <ion-nav-title>{{viewTitle.title}} Events</ion-nav-title>--> + <!-- <ion-nav-title>{{viewTitle.title}} Events</ion-nav-title>--> <ion-nav-buttons side="left"> <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button> @@ -7,48 +7,26 @@ <ion-nav-buttons side="right"> <a style="" class="button button-icon icon ion-stats-bars" ng-href="#events-graphs"> </a> - <a style="" class="button button-icon icon ion-refresh" ng-href="" ng-click="doRefresh();"> </a> - - <a style="" class="button button-icon icon ion-search" ng-href="" ng-click="searchClicked();"> </a> - - - - <!--<a ui-sref="app.events-graphs" class="item" ng-click="toggleMenu()">Tabs</a>--> - + <a style="" class="button button-icon icon ion-refresh" ng-href="" ng-click="doRefresh();"> </a> + <a style="" class="button button-icon icon ion-search" ng-href="" ng-click="searchClicked();"> </a> </ion-nav-buttons> - <div ng-if="showSearch"> - <ion-header-bar class="bar bar-subheader item-input-inset" > - <label class="item-input-wrapper" > - <i class="icon ion-ios7-search placeholder-icon" ></i> - <input type="search" placeholder="Search" ng-model="search.text" autocorrect="off" autocomplete="off" > - - </label> + <div ng-if="showSearch"> + <ion-header-bar class="bar bar-subheader item-input-inset"> + <label class="item-input-wrapper"> + <i class="icon ion-ios7-search placeholder-icon"></i> + <input type="search" placeholder="Search" ng-model="search.text" autocorrect="off" autocomplete="off"> -</ion-header-bar> + </label> + </ion-header-bar> </div> - <!-- - <ion-header-bar class="bar-dark bar-subheader" > - - <div class="bar bar-header item-input-inset" > - <label class="item-input-wrapper" > - <i class="icon ion-ios-search placeholder-icon" ></i> - <input type="search" placeholder="Search" ng-model="myfilter" > - </label> -</div> - </ion-header-bar> - --> - <ion-content on-tap="tapped();"> - <ion-refresher pulling-text="Tap the <i class='ion-refresh'></i> icon above to reload ..." spinner="bubbles" on-refresh="dummyDoRefresh();" ></ion-refresher> - <!--<ion-list>--> - <!-- <div ng-repeat="event in events">--> - + <ion-refresher pulling-text="Tap the <i class='ion-refresh'></i> icon above to reload ..." spinner="bubbles" on-refresh="dummyDoRefresh();"></ion-refresher> - <ion-item collection-repeat="event in events| filter:search.text" > + <ion-item collection-repeat="event in events| filter:search.text"> <div class="row"> <div class="col col-left"> @@ -77,22 +55,22 @@ <!-- 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="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}} <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> - + <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 class="col"> - <img ng-src="{{event.image}}" style="float:right; height:40px;" /> - </div> --> - </div> + <!--row--> <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}} diff --git a/www/templates/help.html b/www/templates/help.html index decdf47e..e5f18bd8 100644 --- a/www/templates/help.html +++ b/www/templates/help.html @@ -6,63 +6,57 @@ <ion-content class="padding"> - <div class="list"> + <div class="list"> - <ion-item class="item-text-wrap"> - <h2><b> What is an API path?</b> </h2> - The latest versions of ZoneMinder have an API that is supposed to replace the XML skin. - It is only available starting Zoneminder 1.29. If you don't have - the API installed the client WILL NOT WORK. + <ion-item class="item-text-wrap"> + <h2><b> What is an API path?</b> </h2> The latest versions of ZoneMinder have an API that is supposed to replace the XML skin. It is only available starting Zoneminder 1.29. If you don't have the API installed the client WILL NOT WORK. - </ion-item> + </ion-item> - <ion-item class="item-text-wrap"> - <h2><b> What is ZM base URL, portal alias and API path</b> </h2> - Okay, there are multiple ways you can install ZoneMinder. For example, let's say you access zoneminder via http://yourserver.com:8000/zm. Then, http://yoursever.com:8000 is the base portal URL and the alias is zm. It's important you get these right, otherwise the app won't be able to display the data. - </ion-item> + <ion-item class="item-text-wrap"> + <h2><b> What is ZM base URL, portal alias and API path</b> </h2> Okay, there are multiple ways you can install ZoneMinder. For example, let's say you access zoneminder via http://yourserver.com:8000/zm. Then, http://yoursever.com:8000 is the base portal URL and the alias is zm. It's important you get these right, otherwise the app won't be able to display the data. + </ion-item> - <ion-item class="item-text-wrap"> - <h2> <b>What should I be entering in the Base URL and API URL?</b></h2> - The base url is typically of the format "http://yourserver:port/" (don't specify zm) - The API url is typically of the format "http://yourserver:port/zm/api" - But it depends on how you've installed ZoneMinder - </ion-item> + <ion-item class="item-text-wrap"> + <h2> <b>What should I be entering in the Base URL and API URL?</b></h2> The base url is typically of the format "http://yourserver:port/" (don't specify zm) The API url is typically of the format "http://yourserver:port/zm/api" But it depends on how you've installed ZoneMinder + </ion-item> - <ion-item class="item-text-wrap"> - <h2> <b>I do not have authentication enabled but the app keeps asking me to specify authentication</b></h2> - If you don't use ZM authentication, just enter an "x" in both user name and password. - </ion-item> + <ion-item class="item-text-wrap"> + <h2> <b>I do not have authentication enabled but the app keeps asking me to specify authentication</b></h2> If you don't use ZM authentication, just enter an "x" in both user name and password. + </ion-item> - <ion-item class="item-text-wrap"> - <h2><b> The data is not refreshing!</b></h2> - Most screens that show lists of data has a pull down action. Pull down to refresh and your data - should be reloaded. - </ion-item> + <ion-item class="item-text-wrap"> + <h2><b> The data is not refreshing!</b></h2> Most screens that show lists of data has a pull down action. Pull down to refresh and your data should be reloaded. + </ion-item> - <ion-item class="item-text-wrap"> - <h2><b> What do all the colors in the Monitor view mean?</b></h2> - <i class="icon ion-checkmark-circled" style="color:#1E90FF"></i> Checking <br/> - <i class="icon ion-checkmark-circled" style="color:green"></i> All good <br/> - <i class="icon ion-close-circled" style="color:red"></i> Not running <br/> - <i class="icon ion-close-circled" style="color:orange"></i> Not running (pending) <br/> - <i class="icon ion-checkmark-circled" style="color:grey"></i> Disabled <br/> - <i class="icon ion-help-circled" style="color:#800000"></i> Unknown <br/> + <ion-item class="item-text-wrap"> + <h2><b> What do all the colors in the Monitor view mean?</b></h2> + <i class="icon ion-checkmark-circled" style="color:#1E90FF"></i> Checking + <br/> + <i class="icon ion-checkmark-circled" style="color:green"></i> All good + <br/> + <i class="icon ion-close-circled" style="color:red"></i> Not running + <br/> + <i class="icon ion-close-circled" style="color:orange"></i> Not running (pending) + <br/> + <i class="icon ion-checkmark-circled" style="color:grey"></i> Disabled + <br/> + <i class="icon ion-help-circled" style="color:#800000"></i> Unknown + <br/> - </ion-item> + </ion-item> - <ion-item class="item-text-wrap"> - <h2><b>I want to contribute!</b></h2> - Awesome. <a href="#" onclick="window.open('http://github.com/pliablepixels/zmNinja', '_blank', 'location=yes'); return false;"> Grab</a> the source code! - </ion-item> + <ion-item class="item-text-wrap"> + <h2><b>I want to contribute!</b></h2> Awesome. <a href="#" onclick="window.open('http://github.com/pliablepixels/zmNinja', '_blank', 'location=yes'); return false;"> Grab</a> the source code! + </ion-item> - <ion-item class="item-text-wrap"> - <h2><b>How do I contact the author?</b></h2> - Send me an <a href="#" onclick="window.open('mailto:pliablepixels@gmail.com', '_blank', 'location=yes'); return false;">email</a> - </ion-item> + <ion-item class="item-text-wrap"> + <h2><b>How do I contact the author?</b></h2> Send me an <a href="#" onclick="window.open('mailto:pliablepixels@gmail.com', '_blank', 'location=yes'); return false;">email</a> + </ion-item> </div> diff --git a/www/templates/login.html b/www/templates/login.html index 1ad11b0c..bf1fc487 100644 --- a/www/templates/login.html +++ b/www/templates/login.html @@ -27,8 +27,6 @@ <input autocapitalize="none" type="text" placeholder="ZM Api URL" ng-model="loginData.apiurl"> </label> </div> - - <button class="button button-block button-balanced icon ion-locked" ng-click="login()"> Save</button> </ion-content> diff --git a/www/templates/monitors-modal.html b/www/templates/monitors-modal.html index f8f15029..0e1401ab 100644 --- a/www/templates/monitors-modal.html +++ b/www/templates/monitors-modal.html @@ -1,59 +1,30 @@ <ion-modal-view cache="false"> - - <!-- <ion-header-bar> - <h1 class="title"> - <span style="float:left"> - <button class="button button-clear icon icon-left ion-close" ng-click="closeModal()" >Close</button> - </span> - <span style="float:right"> - {{eventName}} (Duration:{{eventDur}}s) - </span> - </h1> - </ion-header-bar> --> <ion-content> <div ng-controller="ModalCtrl"> - <!-- replay can also be gapless imageonload="finishedLoadingImage()"--> - + <!-- replay can also be gapless imageonload="finishedLoadingImage()"--> - <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.streamingurl}}/cgi-bin/zms?mode=jpeg&monitor={{monitorId}}&maxfps={{LoginData.maxFPS}}&buffer=1000&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{rand}}" width="100%" /> - <!-- <img imageonload="finishedLoadingImage()" ng-src="{{LoginData.streamingurl}}/cgi-bin/zms?mode=jpeg&monitor={{monitorId}}&maxfps=3&buffer=1000&rand={{rand}}" width="100%" />--> - </ion-scroll> - </div> + </ion-scroll> </ion-content> - <!-- - <div ng-if="isControllable=='1'"> - <nav mfb-menu position="bl" effect="zoomin" label="collapse" active-icon="ion-chevron-down" resting-icon="ion-chevron-up" toggling-method="click"> - <button mfb-button icon="ion-android-arrow-dropleft-circle" label="left" ng-click="controlPTZ('Left',monitorId)"></button> - <button mfb-button icon="ion-android-arrow-dropright-circle" label="right" ng-click="controlPTZ('Right',monitorId)"></button> - </nav> - -</div>--> - - <div ng-show="isControllable=='1' && showPTZ"> <div class="ptzcentered"> <circular options="radialMenuOptions"> </circular> </div> - </div> </div> - - + </div> </ion-modal-view> <nav mfb-menu position="br" effect="zoomin" label="collapse" active-icon="ion-chevron-down" resting-icon="ion-chevron-up" toggling-method="click"> - <button mfb-button icon="ion-refresh" label="refresh" ng-click="reloadView()"></button> - - <button mfb-button icon="ion-arrow-expand" label="pan/tilt/zoom" ng-click="togglePTZ();"></button> - - <button mfb-button icon="ion-close" label="exit live view" ng-click="closeModal()"></button> - </nav> + <button mfb-button icon="ion-refresh" label="refresh" ng-click="reloadView()"></button> + <button mfb-button icon="ion-arrow-expand" label="pan/tilt/zoom" ng-click="togglePTZ();"></button> + <button mfb-button icon="ion-close" label="exit live view" ng-click="closeModal()"></button> +</nav> diff --git a/www/templates/monitors.html b/www/templates/monitors.html index 7b6b00b3..1945fa22 100644 --- a/www/templates/monitors.html +++ b/www/templates/monitors.html @@ -9,27 +9,24 @@ <div ng-controller="ModalCtrl"> <ion-refresher pulling-text="Pull to reload Monitors..." spinner="bubbles" on-refresh="doRefresh()"></ion-refresher> <div class="list card" ng-repeat="monitor in monitors"> - <!-- <a href="#/app/events" ng-click="toggleLeft()"> --> + <div class="item" ng-style="{'background-color': monitor.Monitor.Enabled=='1'?'white':'white'}"> <div ng-if="monitor.Monitor.Enabled == '1'"> <span class='item item-icon-left item-icon-right'> - <i class="icon ion-ios-monitor-outline"></i> - <b>{{monitor.Monitor.Name}}</b> - + <i class="icon ion-ios-monitor-outline"></i> + <b>{{monitor.Monitor.Name}}</b> + <i class="icon {{monitor.Monitor.char}}" style="color:{{monitor.Monitor.color}};"></i> - <i class="icon {{monitor.Monitor.char}}" style="color:{{monitor.Monitor.color}};"></i> - - </span> + </span> </div> <div ng-if="monitor.Monitor.Enabled != '1'"> <span class='item item-icon-left item-icon-right'> - <i class="icon ion-ios-monitor-outline"></i> - <b>{{monitor.Monitor.Name}}</b> - <i class="icon {{monitor.Monitor.char}}" style="color:grey;"></i> - </span> - + <i class="icon ion-ios-monitor-outline"></i> + <b>{{monitor.Monitor.Name}}</b> + <i class="icon {{monitor.Monitor.char}}" style="color:grey;"></i> + </span> </div> @@ -41,7 +38,8 @@ <br/> Alarm Max FPS:{{monitor.Monitor.AlarmMaxFPS}} <br/> Alarm Frame Count: {{monitor.Monitor.AlarmFrameCount}} <br/> Status: {{monitor.Monitor.isRunningText}} - <br/><br/> + <br/> + <br/> </p> <div style="float:right;"> diff --git a/www/templates/montage.html b/www/templates/montage.html index 822212bc..d1106e2e 100644 --- a/www/templates/montage.html +++ b/www/templates/montage.html @@ -10,63 +10,55 @@ </ion-nav-buttons> - <ion-content padding="true" > + <ion-content padding="true"> <div ng-controller="ModalCtrl"> - - <ion-refresher pulling-text="Pull to reload Monitors..." spinner="bubbles" on-refresh="doRefresh()"></ion-refresher> - - + <ion-refresher pulling-text="Pull to reload Monitors..." spinner="bubbles" on-refresh="doRefresh()"></ion-refresher> <span ng-show="!minimal"> - <div class=" range range-positive"> - <i class="icon ion-arrow-shrink"></i> + <div class=" range range-positive"> + <i class="icon ion-arrow-shrink"></i> - <input type="range" ng-model="slider.monsize" min="1" max="6" ng-change="sliderChanged()"> - <i class="icon ion-arrow-expand"></i> + <input type="range" ng-model="slider.monsize" min="1" max="6" ng-change="sliderChanged()"> + <i class="icon ion-arrow-expand"></i> - </div> + </div> </span> - <div class="wrapper"> - <span ng-repeat="monitor in monitors| limitTo: monLimit"> - - <span ng-show="!minimal"> - <header class="header"> <i class="ion-monitor"></i> - {{monitor.Monitor.Name}} </header> - - - </span> - <article class="main"> - <img ng-src="{{LoginData.streamingurl}}/cgi-bin/zms?mode=single&monitor={{monitor.Monitor.Id}}&maxfps={{LoginData.maxFPS}}&scale=50&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{randomval}}" width="{{((devWidth-30)/(7-monitorSize[$index]))}}px;" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable)" on-hold="onHold($index)" on-release="onRelease($index)" /> - </article> - - <span ng-show="!minimal"> - - <span style="font-size:10px;"> - <footer class="footer"> - - {{monitor.Monitor.Enabled=="1"?"Enabled":"Not Enabled"}} - - <span style="float:right"> - <i class="icon ion-android-alert"></i> - - :{{monitor.Monitor.Function}} - </span> - </footer> - </span> - - - </span> - </span> - - <div ng-show="minimal"> - <br/> - <button class="button button-outline button-positive" ng-click="switchMinimal()"> - exit full screen view - </button> - + <div class="wrapper"> + <span ng-repeat="monitor in monitors| limitTo: monLimit"> + + <span ng-show="!minimal"> + <header class="header"> <i class="ion-monitor"></i> + {{monitor.Monitor.Name}} </header> + </span> + <article class="main"> + <!-- FIXME: Scale is 50% hardcoded --> + <img ng-src="{{LoginData.streamingurl}}/cgi-bin/zms?mode=single&monitor={{monitor.Monitor.Id}}&maxfps={{LoginData.maxFPS}}&scale=50&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{randomval}}" width="{{((devWidth-30)/(7-monitorSize[$index]))}}px;" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable)" on-hold="onHold($index)" on-release="onRelease($index)" /> + </article> + + <span ng-show="!minimal"> + <span style="font-size:10px;"> + <footer class="footer"> + + {{monitor.Monitor.Enabled=="1"?"Enabled":"Not Enabled"}} + + <span style="float:right"> + <i class="icon ion-android-alert"></i> + + :{{monitor.Monitor.Function}} + </span> + </footer> + </span> + </span> + </span> + + <div ng-show="minimal"> + <br/> + <button class="button button-outline button-positive" ng-click="switchMinimal()"> + exit full screen view + </button> + </div> </div> </div> - </div> + <!--ngcontroller --> </ion-content> - </ion-view> diff --git a/www/templates/state.html b/www/templates/state.html index a326652b..56679db2 100644 --- a/www/templates/state.html +++ b/www/templates/state.html @@ -60,7 +60,7 @@ <div class="button-bar" ng-show="showDanger"> <a class="button button-outline button-dark " ng-click="controlZM('restart');" href="">Restart</a> - <a class="button button-outline button-dark" href="" ng-click="controlZM('stop');" >Stop</a> + <a class="button button-outline button-dark" href="" ng-click="controlZM('stop');">Stop</a> <a class="button button-outline button-dark" ng-click="controlZM('start');" href="">Start</a> </div> </ion-item> |