summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--www/index.html1
-rw-r--r--www/js/EventCtrl.js23
-rw-r--r--www/js/EventsModalGraphCtrl.js404
-rw-r--r--www/templates/events-modalgraph.html10
-rw-r--r--www/templates/events-popover.html4
-rw-r--r--www/templates/events.html4
6 files changed, 443 insertions, 3 deletions
diff --git a/www/index.html b/www/index.html
index 295b833c..d4cdfe3d 100644
--- a/www/index.html
+++ b/www/index.html
@@ -103,6 +103,7 @@
<script src="js/NewsCtrl.js"></script>
<script src="js/TimelineModalCtrl.js"></script>
<script src="lib/ion-datetime-picker/release/ion-datetime-picker.min.js"></script>
+ <script src="js/EventsModalGraphCtrl.js"></script>
diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js
index ab55822f..e9cd22b7 100644
--- a/www/js/EventCtrl.js
+++ b/www/js/EventCtrl.js
@@ -956,6 +956,8 @@ angular.module('zmApp.controllers')
$scope.popover = popover;
});
+
+
//reset badge count
if (window.cordova && window.cordova.plugins.notification) {
$cordovaBadge.set(0).then(function () {
@@ -1266,10 +1268,29 @@ angular.module('zmApp.controllers')
sec + "/";
return basePath;
}
+
+ $scope.modalGraph = function()
+ {
+ $ionicModal.fromTemplateUrl('templates/events-modalgraph.html', {
+ scope: $scope, // give ModalCtrl access to this scope
+ animation: 'slide-in-up',
+ id:'modalgraph',
+
+ })
+ .then(function (modal) {
+ $scope.modal = modal;
+
+
+
+
+ $scope.modal.show();
+
+ });
+ };
$scope.analyzeEvent = function(ev)
{
- $scope.event = ev;
+ $scope.event = ev;
$ionicModal.fromTemplateUrl('templates/timeline-modal.html', {
scope: $scope, // give ModalCtrl access to this scope
animation: 'slide-in-up',
diff --git a/www/js/EventsModalGraphCtrl.js b/www/js/EventsModalGraphCtrl.js
new file mode 100644
index 00000000..899b83ae
--- /dev/null
+++ b/www/js/EventsModalGraphCtrl.js
@@ -0,0 +1,404 @@
+// Common Controller for the montage view
+/* jshint -W041 */
+/* jslint browser: true*/
+/* global saveAs, cordova,StatusBar,angular,console,ionic, moment, vis , Chart, DJS*/
+
+
+
+
+angular.module('zmApp.controllers').controller('EventsModalGraphCtrl', ['$scope', '$rootScope', 'zm', 'ZMDataModel', '$ionicSideMenuDelegate', '$timeout', '$interval', '$ionicModal', '$ionicLoading', '$http', '$state', '$stateParams', '$ionicHistory', '$ionicScrollDelegate', '$q', '$sce', 'carouselUtils', '$ionicPopup', function ($scope, $rootScope, zm, ZMDataModel, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http, $state, $stateParams, $ionicHistory, $ionicScrollDelegate, $q, $sce, carouselUtils, $ionicPopup) {
+
+
+
+
+ var Graph2d;
+ var tcGraph;
+ var items;
+ var groups;
+ var eventImageDigits=5;
+ var cv;
+ var ctx;
+ //var options;
+ //var data;
+ var onlyalarm_data;
+ var current_data;
+ var current_options;
+ var btype;
+ var data,options;
+
+
+
+
+
+
+ $scope.$on('modal.shown', function (e,m) {
+
+ if (m.id != 'modalgraph')
+ return;
+
+
+ console.log ("INSIDE MODAL GRAPH>>>>>>>>>>>>>>>>>");
+ data = {
+ labels: ["January", "February", "March", "April", "May", "June", "July"],
+ datasets: [
+ {
+ label: "My First dataset",
+ fillColor: "rgba(220,220,220,0.5)",
+ strokeColor: "rgba(220,220,220,0.8)",
+ highlightFill: "rgba(220,220,220,0.75)",
+ highlightStroke: "rgba(220,220,220,1)",
+ data: [65, 59, 80, 81, 56, 55, 40]
+ },
+ {
+ label: "My Second dataset",
+ fillColor: "rgba(151,187,205,0.5)",
+ strokeColor: "rgba(151,187,205,0.8)",
+ highlightFill: "rgba(151,187,205,0.75)",
+ highlightStroke: "rgba(151,187,205,1)",
+ data: [28, 48, 40, 19, 86, 27, 90]
+ }
+ ]
+};
+
+ options = {
+
+ scales: {
+ yAxes:[{
+ ticks: {
+ // beginAtZero:true,
+ min:-1,
+ },
+ }],
+ 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);
+ }
+ },
+
+ //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>'
+ };
+
+ cv = document.getElementById("eventchart");
+ ctx = cv.getContext("2d");
+ $timeout (function() {
+ var tcGraph2 = new Chart(ctx,{type:'bar', data: data, options:options}); });
+ });
+
+ //-------------------------------------------------------
+ // 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");
+
+
+ });
+
+
+
+
+
+ //-------------------------------------------------------
+ // 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(129, 207, 224, 1.0)',
+ borderColor: 'rgb(92, 147, 159)',
+ borderCapStyle: 'butt',
+ borderJoinStyle: 'miter',
+ pointBorderColor: "rgba(220,220,220,1)",
+ pointBackgroundColor: "#e74c3c",
+
+ pointHoverRadius: 10,
+ pointHoverBackgroundColor: "#f39c12",
+ pointHoverBorderWidth: 1,
+ tension: 0.1,
+
+ data: [],
+ frames: []
+ },
+
+ ]
+ };
+
+ onlyalarm_data = {
+ labels: [],
+ datasets: [
+ {
+ label: 'Score',
+ backgroundColor: 'rgba(129, 207, 224, 1.0)',
+ borderColor: 'rgba(129, 207, 224, 1.0)',
+ hoverBackgroundColor: 'rgba(248, 148, 6,1.0)',
+ hoverBorderColor: 'rgba(248, 148, 6,1.0)',
+ data: [],
+ frames: []
+ },
+
+ ]
+ };
+
+ // Chart.js Options
+ options = {
+
+ scales: {
+ yAxes:[{
+ ticks: {
+ // beginAtZero:true,
+ min:-1,
+ },
+ }],
+ 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);
+ }
+ },
+
+ //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++)
+ {
+
+
+ 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,
+ //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",
+
+ });
+ }
+
+ }
+
+ $scope.dataReady = true;
+
+ cv = document.getElementById("tcchart");
+ ctx = cv.getContext("2d");
+
+ if (ZMDataModel.getLogin().timelineModalGraphType == 'all')
+ {
+ btype = 'line';
+ current_data = data;
+ }
+ 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)
+ {
+ tapOrHover(b[0]._index);
+ }
+ };
+ }
+
+ function tapOrHover(ndx)
+ {
+
+ $timeout (function() {
+
+
+ //console.log ("You tapped " + ndx);
+ $scope.alarm_images=[];
+ $scope.playbackURL = ZMDataModel.getLogin().url;
+ var items = current_data.datasets[0].frames[ndx];
+ $scope.alarm_images.push({
+ relativePath:items.relativePath,
+ fid:items.fid,
+ fname:items.fname,
+ score:items.score,
+ time:moment(items.x).format("MMM D,"+ZMDataModel.getTimeFormatSec()),
+ eid:items.eid});
+ });
+
+ }
+
+
+
+ //--------------------------------------------------------
+ // utility function
+ //--------------------------------------------------------
+
+ function computeRelativePath(event) {
+ var relativePath = "";
+ var loginData = ZMDataModel.getLogin();
+ var str = event.Event.StartTime;
+ var yy = moment(str).format('YY');
+ var mm = moment(str).format('MM');
+ var dd = moment(str).format('DD');
+ var hh = moment(str).format('HH');
+ var min = moment(str).format('mm');
+ var sec = moment(str).format('ss');
+ relativePath = event.Event.MonitorId + "/" +
+ yy + "/" +
+ mm + "/" +
+ dd + "/" +
+ hh + "/" +
+ min + "/" +
+ sec + "/";
+ return relativePath;
+
+ }
+
+ //--------------------------------------------------------
+ // utility function
+ //--------------------------------------------------------
+
+ function computeBasePath(event) {
+ var basePath = "";
+ var loginData = ZMDataModel.getLogin();
+ var str = event.Event.StartTime;
+ var yy = moment(str).format('YY');
+ var mm = moment(str).format('MM');
+ var dd = moment(str).format('DD');
+ var hh = moment(str).format('HH');
+ var min = moment(str).format('mm');
+ var sec = moment(str).format('ss');
+
+ basePath = loginData.url + "/events/" +
+ event.Event.MonitorId + "/" +
+ yy + "/" +
+ mm + "/" +
+ dd + "/" +
+ hh + "/" +
+ min + "/" +
+ sec + "/";
+ return basePath;
+ }
+
+
+
+ function padToN(number, digits) {
+
+ var i;
+ var stringMax = "";
+ var stringLeading = "";
+ for (i = 1; i <= digits; i++) {
+ stringMax = stringMax + "9";
+ if (i != digits) stringLeading = stringLeading + "0";
+ }
+ var numMax = parseInt(stringMax);
+
+ if (number <= numMax) {
+ number = (stringLeading + number).slice(-digits);
+ }
+ //console.log ("PADTON: returning " + number);
+ return number;
+ }
+
+
+
+}]);
+
+
diff --git a/www/templates/events-modalgraph.html b/www/templates/events-modalgraph.html
new file mode 100644
index 00000000..8b718a5e
--- /dev/null
+++ b/www/templates/events-modalgraph.html
@@ -0,0 +1,10 @@
+<div ng-controller="EventsModalGraphCtrl">
+
+<ion-modal-view cache-view="false" style="width:80%;height:80%; top: 10%; left: 10%; right: 10%; bottom: 10%;" >
+ <ion-content ng-cloak on-double-tap="closeModal()" delegate-handle="eventgraph-modal-delegate">
+ <div data-tap-disabled="true">
+ <canvas id="eventchart" width="auto" height="70%"></canvas>
+ </div>
+ </ion-content>
+ </ion-modal-view>
+</div>
diff --git a/www/templates/events-popover.html b/www/templates/events-popover.html
index f189478e..866b4516 100644
--- a/www/templates/events-popover.html
+++ b/www/templates/events-popover.html
@@ -3,9 +3,9 @@
<div class="list" ng-click="popover.hide()">
<a class="item" ng-href="" ng-click="popover.hide();$state.go('events-date-time-filter');">Filter by Date/Time</a>
- <a class="item" ng-href="" ng-click=" popover.hide();$state.go('events-graphs');" >
+ <!-- <a class="item" ng-href="" ng-click=" popover.hide();$state.go('events-graphs');" >
Event Graphs
- </a>
+ </a>-->
<a class="item" ng-href="" ng-click="popover.hide();doRefresh();">
Refresh
</a>
diff --git a/www/templates/events.html b/www/templates/events.html
index cda5ce57..1a324d0d 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -13,6 +13,10 @@
<ion-nav-buttons side="right">
<a style="" class="button button-icon icon ion-android-more-vertical" ng-click="popover.show($event)" ;>&nbsp;&nbsp;&nbsp;</a>
+
+ <!-- FIXME: temporarily disabled will enable once its all working -->
+ <!--
+ <a style="" class="button button-icon icon ion-stats-bars" ng-click="modalGraph()" ;>&nbsp;&nbsp;&nbsp;</a>-->
<a style="" class="button button-icon icon ion-search" ng-href="" ng-click="searchClicked();"> </a>
</ion-nav-buttons>
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-06 17:19:53 +0000