diff options
Diffstat (limited to 'www/js/TimelineModalCtrl.js')
| -rw-r--r-- | www/js/TimelineModalCtrl.js | 564 |
1 files changed, 266 insertions, 298 deletions
diff --git a/www/js/TimelineModalCtrl.js b/www/js/TimelineModalCtrl.js index 35d93ea9..68b37925 100644 --- a/www/js/TimelineModalCtrl.js +++ b/www/js/TimelineModalCtrl.js @@ -8,14 +8,14 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '$rootScope', 'zm', 'ZMDataModel', '$ionicSideMenuDelegate', '$timeout', '$interval', '$ionicModal', '$ionicLoading', '$http', '$state', '$stateParams', '$ionicHistory', '$ionicScrollDelegate', '$q', '$sce', 'carouselUtils', '$ionicPopup', '$translate', function ($scope, $rootScope, zm, ZMDataModel, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http, $state, $stateParams, $ionicHistory, $ionicScrollDelegate, $q, $sce, carouselUtils, $ionicPopup, $translate) { - - + + var Graph2d; var tcGraph; var items; var groups; - var eventImageDigits=5; + var eventImageDigits = 5; var cv; var ctx; var options; @@ -24,88 +24,82 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', ' var current_data; var current_options; var btype; - + $scope.graphType = ZMDataModel.getLogin().timelineModalGraphType; //$scope.graphType = "all"; - $scope.errorDetails=""; - - - + $scope.errorDetails = ""; + + + //---------------------------------------------------------------- - // Alarm notification handling - //---------------------------------------------------------------- - $scope.handleAlarms = function () { - $rootScope.isAlarm = !$rootScope.isAlarm; - if (!$rootScope.isAlarm) { - $rootScope.alarmCount = "0"; - $ionicHistory.nextViewOptions({ - disableBack: true - }); - $state.go("events", { - "id": 0 - }, { - reload: true - }); - } - }; - + // Alarm notification handling + //---------------------------------------------------------------- + $scope.handleAlarms = function () { + $rootScope.isAlarm = !$rootScope.isAlarm; + if (!$rootScope.isAlarm) { + $rootScope.alarmCount = "0"; + $ionicHistory.nextViewOptions({ + disableBack: true + }); + $state.go("events", { + "id": 0 + }, { + reload: true + }); + } + }; + + - //------------------------------------------------------- // we use this to reload the connkey if authkey changed //------------------------------------------------------ - - - $rootScope.$on("auth-success", function () { - ZMDataModel.zmDebug("EventModalCtrl: Re-login detected, resetting everything & re-generating connkey"); - - + + $rootScope.$on("auth-success", function () { + + ZMDataModel.zmDebug("EventModalCtrl: Re-login detected, resetting everything & re-generating connkey"); + + }); - - - $scope.scrollUp = function() - { + + + $scope.scrollUp = function () { //console.log ("SWIPE UP"); $ionicScrollDelegate.$getByHandle("timeline-modal-delegate").scrollTop(true); }; - - $scope.scrollDown = function() - { + + $scope.scrollDown = function () { //console.log ("SWIPE DOWN"); $ionicScrollDelegate.$getByHandle("timeline-modal-delegate").scrollBottom(true); }; - - - $scope.switchType = function() - { - - if ($scope.graphType == $translate.instant('kGraphAll')) - { + + + $scope.switchType = function () { + + if ($scope.graphType == $translate.instant('kGraphAll')) { current_data = onlyalarm_data; $scope.graphType = $translate.instant('kGraphAlarmed'); - ZMDataModel.zmDebug ("Alarm array has " + onlyalarm_data.labels.length+ " frames"); - btype='bar'; + ZMDataModel.zmDebug("Alarm array has " + onlyalarm_data.labels.length + " frames"); + btype = 'bar'; //console.log (JSON.stringify(onlyalarm_data)); - - } - else - { + + } else { current_data = data; - // tcGraph.data = + // tcGraph.data = $scope.graphType = $translate.instant('kGraphAll'); - btype='line'; + btype = 'line'; } - - ZMDataModel.zmLog ("Switching graph type to "+$scope.graphType); - + + ZMDataModel.zmLog("Switching graph type to " + $scope.graphType); + var ld = ZMDataModel.getLogin(); ld.timelineModalGraphType = $scope.graphType; ZMDataModel.setLogin(ld); - - - $timeout (function() { - + + + $timeout(function () { + /* if ($scope.graphType == 'alarmed') tcGraph.data = data; @@ -113,40 +107,46 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', ' tcGraph.data = onlyalarm_data; tcGraph.update();*/ tcGraph.destroy(); - console.log ("GRAPH TYPE IS " + btype); - tcGraph = new Chart(ctx,{type:btype, data: current_data, options:options}); - }); - - - + console.log("GRAPH TYPE IS " + btype); + tcGraph = new Chart(ctx, { + type: btype, + data: current_data, + options: options + }); + }); + + + }; - - + + //------------------------------------------------------- // Tapping on a frame shows this image //------------------------------------------------------ - - $scope.showImage = function (p,r,f, fid,e, imode, id) - { + + $scope.showImage = function (p, r, f, fid, e, imode, id) { var img; - console.log ("Image Mode " + imode); - if (imode=='path') - - img = "<img width='100%' ng-src='"+p+"/index.php?view=image&path="+r+f+"'>"; - else - { - img = "<img width='100%' ng-src='"+p+"/index.php?view=image&fid="+id+"'>"; - // console.log ("IS MULTISERVER SO IMAGE IS " + img); + console.log("Image Mode " + imode); + if (imode == 'path') + + img = "<img width='100%' ng-src='" + p + "/index.php?view=image&path=" + r + f + "'>"; + else { + img = "<img width='100%' ng-src='" + p + "/index.php?view=image&fid=" + id + "'>"; + // console.log ("IS MULTISERVER SO IMAGE IS " + img); } - $rootScope.zmPopup = $ionicPopup.alert({title: 'frame:'+fid+'/Event:'+e,template:img, cssClass:'popup80'}); + $rootScope.zmPopup = $ionicPopup.alert({ + title: 'frame:' + fid + '/Event:' + e, + template: img, + cssClass: 'popup80' + }); }; - - - - - $scope.$on('modal.removed', function (e,m) { - + + + + + $scope.$on('modal.removed', function (e, m) { + if (m.id != 'analyze') return; //Graph2d.destroy(); @@ -157,267 +157,237 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', ' //------------------------------------------------------- // init drawing here //------------------------------------------------------ - - $scope.$on('modal.shown', function (e,m) { - - if (m.id != 'analyze') + + $scope.$on('modal.shown', function (e, m) { + + if (m.id != 'analyze') return; - - $scope.alarm_images=[]; - $scope.graphWidth=$rootScope.devWidth-30; - ZMDataModel.zmLog ("Setting init graph width to " + $scope.graphWidth); - $scope.dataReady = false; - - ZMDataModel.getKeyConfigParams(0) + + $scope.alarm_images = []; + $scope.graphWidth = $rootScope.devWidth - 30; + ZMDataModel.zmLog("Setting init graph width to " + $scope.graphWidth); + $scope.dataReady = false; + + ZMDataModel.getKeyConfigParams(0) .then(function (data) { //console.log ("***GETKEY: " + JSON.stringify(data)); eventImageDigits = parseInt(data); ZMDataModel.zmLog("Image padding digits reported as " + eventImageDigits); }); - $scope.eventdetails = $translate.instant('kLoading')+"..."; - processEvent(); - //$scope.eventdetails = JSON.stringify($scope.event); - }); - - + $scope.eventdetails = $translate.instant('kLoading') + "..."; + processEvent(); + //$scope.eventdetails = JSON.stringify($scope.event); + }); + + //------------------------------------------------------- // okay, really init drawing here //------------------------------------------------------ - - function processEvent() - { + + function processEvent() { var eid = $scope.event.Event.Id; //eid = 22302; var ld = ZMDataModel.getLogin(); - var apiurl = ld.apiurl + "/events/"+eid+".json"; - ZMDataModel.zmLog ("Getting " + apiurl); - $http.get (apiurl) - .then (function (success) - { + var apiurl = ld.apiurl + "/events/" + eid + ".json"; + ZMDataModel.zmLog("Getting " + apiurl); + $http.get(apiurl) + .then(function (success) { //$scope.eventdetails = JSON.stringify(success); drawGraphTC(success.data); - }, - function (error) - { + }, + function (error) { $scope.errorDetails = $translate.instant('kGraphError'); - ZMDataModel.zmLog ("Error in timeline frames " + JSON.stringify(error)); - }); + ZMDataModel.zmLog("Error in timeline frames " + JSON.stringify(error)); + }); } - - + + //------------------------------------------------------- // I was kidding, this is where it really is drawn // scout's promise //------------------------------------------------------ - - function drawGraphTC(event) - { - - $scope.eid = event.event.Event.Id; - - $scope.alarm_images=[]; - - /*data = { - labels: [], - datasets: [ - { - label: 'Score', - fill:true, - borderJoinStyle: 'miter', - pointBorderColor: "rgba(220,220,220,1)", - pointBackgroundColor: "#e74c3c", - backgroundColor: 'rgba(129, 207, 224, 1.0)', - pointHoverRadius: 5, - pointHoverBackgroundColor: "#40d47e", - pointHoverBorderWidth: 2, - tension: 0.1, - borderColor: 'rgba(129, 207, 224, 1.0)', - hoverBackgroundColor: 'rgba(248, 148, 6,1.0)', - hoverBorderColor: 'rgba(248, 148, 6,1.0)', - data: [], - frames: [] - }, - - ] - };*/ - - - data = { - labels: [], - datasets: [ - { - label: 'Score', - fill:true, - backgroundColor: 'rgba(89, 171, 227, 1.0)', - borderColor: 'rgba(52, 152, 219, 1.0)', - borderCapStyle: 'butt', - borderJoinStyle: 'miter', - pointBorderColor: "#e74c3c", - pointBackgroundColor: "#e74c3c", - - pointHoverRadius: 10, - pointHoverBackgroundColor: "rgba(249, 105, 14,1.0)", - pointHoverBorderWidth: 1, - tension: 0.1, - - data: [], - frames: [] + + function drawGraphTC(event) { + + $scope.eid = event.event.Event.Id; + + $scope.alarm_images = []; + + + data = { + labels: [], + datasets: [ + { + label: 'Score', + fill: true, + backgroundColor: 'rgba(89, 171, 227, 1.0)', + borderColor: 'rgba(52, 152, 219, 1.0)', + borderCapStyle: 'butt', + borderJoinStyle: 'miter', + pointBorderColor: "#e74c3c", + pointBackgroundColor: "#e74c3c", + + pointHoverRadius: 10, + pointHoverBackgroundColor: "rgba(249, 105, 14,1.0)", + pointHoverBorderWidth: 1, + tension: 0.1, + + data: [], + frames: [] }, - + ] - }; - - onlyalarm_data = { - labels: [], - datasets: [ - { - label: 'Score', - backgroundColor: 'rgba(52, 152, 219, 1.0)', - borderColor: 'rgba(52, 152, 219, 1.0)', - hoverBackgroundColor: 'rgba(249, 105, 14,1.0)', - hoverBorderColor: 'rgba(249, 105, 14,1.0)', - data: [], - frames: [] + }; + + onlyalarm_data = { + labels: [], + datasets: [ + { + label: 'Score', + backgroundColor: 'rgba(52, 152, 219, 1.0)', + borderColor: 'rgba(52, 152, 219, 1.0)', + hoverBackgroundColor: 'rgba(249, 105, 14,1.0)', + hoverBorderColor: 'rgba(249, 105, 14,1.0)', + data: [], + frames: [] }, - + ] - }; + }; - // Chart.js Options - options = { - legend:false, - scales: { - yAxes:[{ - ticks: { - // beginAtZero:true, - min:-1, - }, + // Chart.js Options + options = { + legend: false, + scales: { + yAxes: [{ + ticks: { + // beginAtZero:true, + min: -1, + }, }], - xAxes:[{ - display:false + xAxes: [{ + display: false }] - }, + }, - responsive: true, - scaleBeginAtZero : true, - scaleShowGridLines : true, - scaleGridLineColor : "rgba(0,0,0,.05)", - scaleGridLineWidth : 1, - - - hover: - { - mode:'single', - onHover:function(obj) - { - if (obj.length > 0) - tapOrHover(obj[0]._index); - } - }, + responsive: true, + scaleBeginAtZero: true, + scaleShowGridLines: true, + scaleGridLineColor: "rgba(0,0,0,.05)", + scaleGridLineWidth: 1, + + + hover: { + mode: 'single', + onHover: function (obj) { + if (obj.length > 0) + tapOrHover(obj[0]._index); + } + }, + + //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>' + }; - //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.graphWidth = event.event.Frame.length * 10; if ($scope.graphWidth < $rootScope.devWidth) $scope.graphWidth = $rootScope.devWidth; - - // ZMDataModel.zmLog ("Changing graph width to " + $scope.graphWidth); - - for (var i=0; i< event.event.Frame.length; i++) - { - - + + // ZMDataModel.zmLog ("Changing graph width to " + $scope.graphWidth); + + for (var i = 0; i < event.event.Frame.length; i++) { + + data.labels.push(event.event.Frame[i].TimeStamp); //data.labels.push(' '); data.datasets[0].data.push(event.event.Frame[i].Score); - data.datasets[0].frames.push({x:event.event.Frame[i].TimeStamp, - y:event.event.Frame[i].Score, - eid: event.event.Event.Id, - fid: event.event.Frame[i].FrameId, - id: event.event.Frame[i].Id, - //group:i, - relativePath:computeRelativePath(event.event), - score:event.event.Frame[i].Score, - fname: padToN(event.event.Frame[i].FrameId,eventImageDigits)+"-capture.jpg", - - }); - - if (event.event.Frame[i].Type=="Alarm") - { - + data.datasets[0].frames.push({ + x: event.event.Frame[i].TimeStamp, + y: event.event.Frame[i].Score, + eid: event.event.Event.Id, + fid: event.event.Frame[i].FrameId, + id: event.event.Frame[i].Id, + //group:i, + relativePath: computeRelativePath(event.event), + score: event.event.Frame[i].Score, + fname: padToN(event.event.Frame[i].FrameId, eventImageDigits) + "-capture.jpg", + + }); + + if (event.event.Frame[i].Type == "Alarm") { + onlyalarm_data.labels.push(event.event.Frame[i].TimeStamp); //data.labels.push(' '); onlyalarm_data.datasets[0].data.push(event.event.Frame[i].Score); - onlyalarm_data.datasets[0].frames.push({x:event.event.Frame[i].TimeStamp, - y:event.event.Frame[i].Score, - eid: event.event.Event.Id, - fid: event.event.Frame[i].FrameId, - //group:i, - relativePath:computeRelativePath(event.event), - score:event.event.Frame[i].Score, - fname: padToN(event.event.Frame[i].FrameId,eventImageDigits)+"-capture.jpg", - id: event.event.Frame[i].Id, - - }); + onlyalarm_data.datasets[0].frames.push({ + x: event.event.Frame[i].TimeStamp, + y: event.event.Frame[i].Score, + eid: event.event.Event.Id, + fid: event.event.Frame[i].FrameId, + //group:i, + relativePath: computeRelativePath(event.event), + score: event.event.Frame[i].Score, + fname: padToN(event.event.Frame[i].FrameId, eventImageDigits) + "-capture.jpg", + id: event.event.Frame[i].Id, + + }); } - + } - + $scope.dataReady = true; - - cv = document.getElementById("tcchart"); - ctx = cv.getContext("2d"); - - if (ZMDataModel.getLogin().timelineModalGraphType == $translate.instant('kGraphAll')) - { + + cv = document.getElementById("tcchart"); + ctx = cv.getContext("2d"); + + if (ZMDataModel.getLogin().timelineModalGraphType == $translate.instant('kGraphAll')) { btype = 'line'; current_data = data; - } - else - { + } else { btype = 'bar'; current_data = onlyalarm_data; } - $timeout(function() { - tcGraph = new Chart(ctx,{type:btype, data: current_data, options:options});}); - - cv.onclick = function(e) - { - var b = tcGraph.getElementAtEvent(e); - if (b.length > 0) - { + $timeout(function () { + tcGraph = new Chart(ctx, { + type: btype, + data: current_data, + options: options + }); + }); + + cv.onclick = function (e) { + var b = tcGraph.getElementAtEvent(e); + if (b.length > 0) { tapOrHover(b[0]._index); } }; } - - function tapOrHover(ndx) - { - - $timeout (function() { - - - //console.log ("You tapped " + ndx); - $scope.alarm_images=[]; - $scope.playbackURL = $scope.event.Event.baseURL; - var items = current_data.datasets[0].frames[ndx]; - $scope.alarm_images.push({ - relativePath:items.relativePath, - fid:items.fid, - id: items.id, - fname:items.fname, - score:items.score, - time:moment(items.x).format("MMM D,"+ZMDataModel.getTimeFormatSec()), - eid:items.eid}); + + function tapOrHover(ndx) { + + $timeout(function () { + + + //console.log ("You tapped " + ndx); + $scope.alarm_images = []; + $scope.playbackURL = $scope.event.Event.baseURL; + var items = current_data.datasets[0].frames[ndx]; + $scope.alarm_images.push({ + relativePath: items.relativePath, + fid: items.fid, + id: items.id, + fname: items.fname, + score: items.score, + time: moment(items.x).format("MMM D," + ZMDataModel.getTimeFormatSec()), + eid: items.eid }); - + }); + } - - - + + + //-------------------------------------------------------- // utility function //-------------------------------------------------------- @@ -489,8 +459,6 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', ' return number; } - - -}]); +}]);
\ No newline at end of file |