summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--config.xml2
-rw-r--r--www/css/style.css5
-rw-r--r--www/js/MontageCtrl.js6
-rw-r--r--www/js/TimelineModalCtrl.js102
-rw-r--r--www/templates/events.html4
-rw-r--r--www/templates/timeline-modal.html13
-rw-r--r--www/templates/timeline.html2
7 files changed, 82 insertions, 52 deletions
diff --git a/config.xml b/config.xml
index 5018a6d8..50197078 100644
--- a/config.xml
+++ b/config.xml
@@ -1,5 +1,5 @@
<?xml version='1.0' encoding='utf-8'?>
-<widget id="com.pliablepixels.zmninja-pro" version="1.1.2" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+<widget id="com.pliablepixels.zmninja-pro" version="1.1.3" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>zmNinja</name>
<description>
High performance ZoneMinder client
diff --git a/www/css/style.css b/www/css/style.css
index 226a82a5..d5c82b73 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -850,3 +850,8 @@ body { font-family: sans-serif; }
transition: transform 0.2s;
}
+
+.wide-as-needed {
+ overflow: scroll;
+ white-space: nowrap;
+}
diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js
index 69c837b9..1e0bc5e3 100644
--- a/www/js/MontageCtrl.js
+++ b/www/js/MontageCtrl.js
@@ -222,6 +222,12 @@ function initPackery()
ZMDataModel.zmLog ("Monitors that are active: " + cnt + " while grid has " + positions.length);
+ if (cnt > ZMDataModel.getLogin().maxMontage )
+ {
+ cnt = ZMDataModel.getLogin().maxMontage;
+ ZMDataModel.zmLog ("restricting monitor count to " + cnt + " due to max-montage setting");
+ }
+
if (cnt!= positions.length)
{
diff --git a/www/js/TimelineModalCtrl.js b/www/js/TimelineModalCtrl.js
index 6bde9672..d127cbca 100644
--- a/www/js/TimelineModalCtrl.js
+++ b/www/js/TimelineModalCtrl.js
@@ -6,13 +6,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', 'Hello', function ($scope, $rootScope, zm, ZMDataModel, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http, $state, $stateParams, $ionicHistory, $ionicScrollDelegate, $q, $sce, carouselUtils, $ionicPopup,Hello) {
+angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$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 eventImageDigits=5;
+ $scope.errorDetails="";
//----------------------------------------------------------------
// Alarm notification handling
//----------------------------------------------------------------
@@ -46,6 +47,10 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '
});
+ //-------------------------------------------------------
+ // Tapping on a frame shows this image
+ //------------------------------------------------------
+
$scope.showImage = function (p,r,f, fid)
{
var img = "<img width='100%' ng-src='"+p+"/index.php?view=image&path="+r+f+"'>";
@@ -59,6 +64,10 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '
// Execute action
});
+ //-------------------------------------------------------
+ // init drawing here
+ //------------------------------------------------------
+
$scope.$on('modal.shown', function () {
$scope.dataReady = false;
@@ -76,6 +85,10 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '
});
+ //-------------------------------------------------------
+ // okay, really init drawing here
+ //------------------------------------------------------
+
function processEvent()
{
var eid = $scope.event.Event.Id;
@@ -85,16 +98,22 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '
$http.get (apiurl)
.then (function (success)
{
- $scope.eventdetails = JSON.stringify(success);
+ //$scope.eventdetails = JSON.stringify(success);
drawGraph(success.data);
},
function (error)
{
- $scope.eventdetails = JSON.stringify(error);
+ $scope.errorDetails = "there was an error rendering the graph. Please see logs";
+ ZMDataModel.zmLog ("Error in timeline frames " + JSON.stringify(error));
});
}
+ //-------------------------------------------------------
+ // I was kidding, this is where it really is drawn
+ // scout's promise
+ //------------------------------------------------------
+
function drawGraph(event)
{
console.log ("EVENT IS " + JSON.stringify(event));
@@ -121,33 +140,38 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '
var dataset = new vis.DataSet(items);
- var options = {
- autoResize:true,
- height: Math.floor($rootScope.devHeight/2),
-
- style:'bar',
- start: event.event.Frame[0].TimeStamp,
- end: event.event.Frame[event.event.Frame.length-1].TimeStamp,
- max: event.event.Frame[event.event.Frame.length-1].TimeStamp,
- min: event.event.Frame[0].TimeStamp,
-
- barChart:
- {
- width: 50,
- sideBySide:false,
- align:'center'
- },
- dataAxis:
- {
- left: {title: {text:'score'}},
- }
- };
+ var options = {
+ autoResize:true,
+ height: Math.floor($rootScope.devHeight/2),
+ //clickToUse:true,
+
+ style:'bar',
+ start: event.event.Frame[0].TimeStamp,
+ end: event.event.Frame[event.event.Frame.length-1].TimeStamp,
+ max: event.event.Frame[event.event.Frame.length-1].TimeStamp,
+ min: event.event.Frame[0].TimeStamp,
+
+ barChart:
+ {
+ width: 50,
+ sideBySide:false,
+ align:'center'
+ },
+ dataAxis:
+ {
+ left: {title: {text:'score'}},
+ }
+ };
var container = document.getElementById('timeline-alarm-vis');
Graph2d = new vis.Graph2d(container, dataset, groups, options);
$scope.dataReady = true;
- $scope.alarm_data = Hello.get();
+
+ //-------------------------------------------------------
+ // When you tap on a data node
+ //------------------------------------------------------
+
Graph2d.on('click',function (prop) {
$timeout( function() {
@@ -155,22 +179,27 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '
$scope.playbackURL = ZMDataModel.getLogin().url;
var t = moment(prop.time);
- //console.log ("x="+prop.x);
- // console.log ("val="+JSON.stringify(prop.value));
+
console.log ("date="+t.format("YYYY-MM-DD HH:mm:ss"));
var tformat = t.format ("YYYY-MM-DD HH:mm:ss");
- //console.log ("event="+JSON.stringify(prop.event));
+
for (var i=0; i<items.length; i++)
{
if (items[i].x == tformat)
{
- //console.log ("ITEM " + i + " matches, relative path=" + items[i].relativePath);
- $scope.alarm_images.push({relativePath:items[i].relativePath, fid:items[i].fid, fname:items[i].fname, score:items[i].score, eid:items[i].eid});
+
+ $scope.alarm_images.push({
+ relativePath:items[i].relativePath,
+ fid:items[i].fid,
+ fname:items[i].fname,
+ score:items[i].score,
+ time:moment(items[i].x).format("MMM D,"+ZMDataModel.getTimeFormat()),
+ eid:items[i].eid});
}
}
- //console.log ("I PUSHED " + $scope.alarm_images.length);
+
});
});
@@ -252,13 +281,4 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '
}]);
-angular.module('zmApp.controllers')
-.factory('Hello', function()
-{
- var data = 12;
- return {
- 'set': function(val) {data=val;},
- 'get': function() {return data;}
- };
-
-});
+
diff --git a/www/templates/events.html b/www/templates/events.html
index b15afc78..51af9d22 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -143,9 +143,7 @@
<span ng-repeat="alarm in alarm_images">
<figure style="display:inline-block">
- <small>
- {{playbackURL}}/index.php?view=image&amp;path={{event.Event.relativePath}}{{alarm.fname}}&amp;height=380"
- </small>
+
<figcaption><p>frame:{{alarm.id}} score:{{alarm.score}}</p></figcaption>
<img image-spinner-src="{{playbackURL}}/index.php?view=image&path={{event.Event.relativePath}}{{alarm.fname}}&height=380" style="width: auto; height: auto;max-width: 100%;max-height: 170px" />
diff --git a/www/templates/timeline-modal.html b/www/templates/timeline-modal.html
index 2df0ea89..0b06a269 100644
--- a/www/templates/timeline-modal.html
+++ b/www/templates/timeline-modal.html
@@ -4,22 +4,21 @@
<ion-modal-view cache-view="false">
<ion-content ng-cloak on-double-tap="closeModal()">
<div ng-controller="TimelineModalCtrl">
- <center><h5> Showing frames for Event: {{eid}}</h5></center>
-
+ <br/>
+ <center> <h5>Showing for Event: {{eid}} (double-tap to exit)</h5></center>
+ {{errorDetails}}
<div id="timeline-alarm-vis" ></div>
<ion-spinner icon="spiral" style="position:absolute; top:50%;left:50%" ng-if="!dataReady"></ion-spinner>
<div style="height:190px;">
- <ion-scroll direction="x" >
-
-
+ <ion-scroll direction="x" class="wide-as-needed">
<span ng-repeat="alarm in alarm_images">
<figure style="display:inline-block">
- <figcaption><small>frame:{{alarm.fid}} score:{{alarm.score}}</small></figcaption>
- <img ng-src="{{playbackURL}}/index.php?view=image&path={{alarm.relativePath}}{{alarm.fname}}&height=380" style="width: auto; height: auto;max-width: 100%;max-height: 170px" on-tap="showImage(playbackURL,alarm.relativePath,alarm.fname, alarm.fid)"/>
+ <figcaption><small>f:{{alarm.fid}} scr:{{alarm.score}} @ {{alarm.time}}</small></figcaption>
+ <img image-spinner-src="{{playbackURL}}/index.php?view=image&path={{alarm.relativePath}}{{alarm.fname}}&height=380" style="width: auto; height: auto;max-width: 100%;max-height: 170px;" on-tap="showImage(playbackURL,alarm.relativePath,alarm.fname, alarm.fid)"/>
</figure>
diff --git a/www/templates/timeline.html b/www/templates/timeline.html
index 0a59e5f9..9caf51b2 100644
--- a/www/templates/timeline.html
+++ b/www/templates/timeline.html
@@ -29,6 +29,8 @@
{{prettify(fromDate)}} - {{prettify(toDate)}} (only displaying last {{maxItems}} events)
</div>
+ <ion-spinner icon="spiral" style="position:absolute; top:50%;left:50%" ng-if="!graphLoaded"></ion-spinner>
+
<div ng-if="!graphLoaded">
<br/><br/>
<center>
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-07 10:32:59 +0000