summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--www/js/DataModel.js8
-rw-r--r--www/js/TimelineModalCtrl.js89
-rw-r--r--www/templates/timeline-modal.html11
-rw-r--r--www/templates/timeline.html1
4 files changed, 100 insertions, 9 deletions
diff --git a/www/js/DataModel.js b/www/js/DataModel.js
index cccc54c2..96c55a9d 100644
--- a/www/js/DataModel.js
+++ b/www/js/DataModel.js
@@ -74,6 +74,7 @@ angular.module('zmApp.controllers')
'use24hr':false,
'packeryPositions':'',
'packerySizes':'',
+ 'timelineModalGraphType':'alarmed',
};
@@ -444,6 +445,13 @@ angular.module('zmApp.controllers')
}
+ if (typeof timelineModalGraphType == 'undefined')
+ {
+ zmDebug ("timeline graph type not set. Setting to alarmed");
+ loginData.timelineModalGraphType = 'alarmed';
+ }
+
+
if (typeof loginData.montageHistoryQuality == 'undefined')
{
zmDebug ("montageHistoryQuality does not exist. Setting to 50");
diff --git a/www/js/TimelineModalCtrl.js b/www/js/TimelineModalCtrl.js
index 535e8f14..8a07cb4d 100644
--- a/www/js/TimelineModalCtrl.js
+++ b/www/js/TimelineModalCtrl.js
@@ -20,7 +20,11 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '
var ctx;
var options;
var data;
+ var onlyalarm_data;
+ var current_data;
+ $scope.graphType = ZMDataModel.getLogin().timelineModalGraphType;
+ //$scope.graphType = "all";
$scope.errorDetails="";
@@ -70,6 +74,40 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '
$ionicScrollDelegate.$getByHandle("timeline-modal-delegate").scrollBottom(true);
};
+
+ $scope.switchType = function()
+ {
+ if ($scope.graphType == "all")
+ {
+ current_data = onlyalarm_data;
+ $scope.graphType = "alarmed";
+ ZMDataModel.zmDebug ("Alarm array has " + onlyalarm_data.labels.length+ " frames");
+ //console.log (JSON.stringify(onlyalarm_data));
+
+ }
+ else
+ {
+ current_data = data;
+ // tcGraph.data =
+ $scope.graphType = "all";
+ }
+
+ ZMDataModel.zmLog ("Switching graph type to "+$scope.graphType);
+
+ var ld = ZMDataModel.getLogin();
+ ld.timelineModalGraphType = $scope.graphType;
+ ZMDataModel.setLogin(ld);
+
+ $timeout (function() {
+ tcGraph.destroy();
+ tcGraph = new Chart(ctx,{type:'bar', data: current_data, options:options});
+ });
+
+
+
+ };
+
+
//-------------------------------------------------------
// Tapping on a frame shows this image
//------------------------------------------------------
@@ -118,6 +156,7 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '
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);
@@ -142,6 +181,8 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '
function drawGraphTC(event)
{
+
+ $scope.eid = event.event.Event.Id;
data = {
labels: [],
@@ -158,11 +199,30 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '
]
};
+
+ 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},
+ }],
xAxes:[{
display:false
}]
@@ -198,7 +258,7 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '
if ($scope.graphWidth < $rootScope.devWidth)
$scope.graphWidth = $rootScope.devWidth;
- ZMDataModel.zmLog ("Changing graph width to " + $scope.graphWidth);
+ // ZMDataModel.zmLog ("Changing graph width to " + $scope.graphWidth);
for (var i=0; i< event.event.Frame.length; i++)
{
@@ -216,14 +276,37 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '
});
+ 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')
+ current_data = data;
+ else
+ current_data = onlyalarm_data;
$timeout(function() {
- tcGraph = new Chart(ctx,{type:'bar', data: data, options:options});});
+ tcGraph = new Chart(ctx,{type:'bar', data: current_data, options:options});});
cv.onclick = function(e)
{
@@ -244,7 +327,7 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '
//console.log ("You tapped " + ndx);
$scope.alarm_images=[];
$scope.playbackURL = ZMDataModel.getLogin().url;
- var items = data.datasets[0].frames[ndx];
+ var items = current_data.datasets[0].frames[ndx];
$scope.alarm_images.push({
relativePath:items.relativePath,
fid:items.fid,
diff --git a/www/templates/timeline-modal.html b/www/templates/timeline-modal.html
index e5579d8c..42860a75 100644
--- a/www/templates/timeline-modal.html
+++ b/www/templates/timeline-modal.html
@@ -9,15 +9,14 @@
<br/>
- <center> <h5>Showing Event: {{eid}} (double-tap to exit)</h5>
+ <center> <h5>Showing {{graphType}} frames of Event:{{eid}} </h5>
+ <p>double-tap exits. touch/mouse-over and drag over bars to see frames</p>
- <button class="button icon-left button-small button-positive" style="z-index:999;bottom:2%;right:20px;position:absolute; opacity:0.7" ng-click="scrollUp()">
+ <!--<button class="button icon-left button-small button-positive" style="z-index:999;bottom:2%;right:20px;position:absolute; opacity:0.7" ng-click="scrollUp()">
<i class="ion-chevron-up"></i>
- </button>
+ </button>-->
- <button class="button icon-left button-small button-positive" style="top:30px;right:20px;position:absolute; opacity:0.7" ng-click="scrollDown()">
- <i class="ion-chevron-down"></i>
- </button>
+ <button class="button icon-left button-small button-positive" style="top:30px;right:20px;position:absolute; opacity:0.7" ng-click="switchType()"><i class="ion-shuffle"></i></button>
{{errorDetails}}
<!--<p>scroll left/right if needed</p>-->
diff --git a/www/templates/timeline.html b/www/templates/timeline.html
index 9caf51b2..cbc4084f 100644
--- a/www/templates/timeline.html
+++ b/www/templates/timeline.html
@@ -27,6 +27,7 @@
<div style="padding-left:15px; font-size:10px; color:grey">
{{prettify(fromDate)}} - {{prettify(toDate)}} (only displaying last {{maxItems}} events)
+ <strong><br/>tap:view event, double-tap:view frame graph</strong>
</div>
<ion-spinner icon="spiral" style="position:absolute; top:50%;left:50%" ng-if="!graphLoaded"></ion-spinner>
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-07 16:49:05 +0000