summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--www/js/EventCtrl.js319
-rw-r--r--www/templates/events.html133
2 files changed, 271 insertions, 181 deletions
diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js
index b5fbf7e7..589a565b 100644
--- a/www/js/EventCtrl.js
+++ b/www/js/EventCtrl.js
@@ -633,14 +633,21 @@ angular.module('zmApp.controllers')
// scrub view for an event.
//-------------------------------------------------------------------------
- $scope.toggleGroup = function (event, ndx, frames) {
- toggleGroup(event, ndx, frames);
+ $scope.toggleGroupScrub = function (event, ndx, frames) {
+ $scope.groupType = "scrub";
+ toggleGroup(event, ndx, frames,$scope.groupType);
+ };
+
+ $scope.toggleGroupAlarms = function (event, ndx, frames) {
+ $scope.groupType = "alarms";
+ toggleGroup(event, ndx, frames,$scope.groupType);
};
- function toggleGroup(event, ndx, frames) {
+ function toggleGroup(event, ndx, frames, groupType) {
+
+ console.log ("*** video: " + event.Event.DefaultVideo);
+
- console.log ("*** TOGGLE: " + event.Event.DefaultVideo);
-
// If we are here and there is a record of a previous scroll
// then we need to scroll back to hide that view
if (scrollbynumber) {
@@ -659,160 +666,210 @@ angular.module('zmApp.controllers')
event.Event.ShowScrub = !event.Event.ShowScrub;
// $ionicScrollDelegate.resize();
- if (event.Event.ShowScrub == true) // turn on display now
- {
- ZMDataModel.zmDebug("EventCtrl: Scrubbing will turn on now");
- $scope.currentEvent = "";
- $scope.event = event;
- //$ionicScrollDelegate.freezeScroll(true);
- $ionicSideMenuDelegate.canDragContent(false);
- $scope.slider_options = {
- from: 1,
- to: event.Event.Frames,
- realtime: true,
- step: 1,
- className: "mySliderClass",
- callback: function (value, released) {
- //console.log("CALLBACK"+value+released);
- $ionicScrollDelegate.freezeScroll(!released);
- //ZMDataModel.zmDebug("EventCtrl: freezeScroll called with " + !released);
+ console.log ("GROUP TYPE IS " + groupType);
+
+ if (event.Event.ShowScrub == true) // turn on display now
+ {
+ if (groupType == 'alarms')
+ {
+ $scope.alarm_images=[];
+ event.Event.height = zm.eventsListDetailsHeight + zm.eventsListScrubHeight;
+ $ionicScrollDelegate.resize();
+ var myurl = loginData.apiurl + '/events/' + event.Event.Id + ".json";
+ ZMDataModel.zmLog("API for event details" + myurl);
+ $http.get(myurl)
+ .success(function (data) {
+ $scope.FrameArray = data.event.Frame;
+ // $scope.slider_options.scale=[];
+
+ //$scope.slider_options.scale = [];
+
+ var i;
+ for (i = 0; i < data.event.Frame.length; i++) {
+ if (data.event.Frame[i].Type == "Alarm") {
+
+ //console.log ("**ONLY ALARM AT " + i + "of " + data.event.Frame.length);
+ $scope.alarm_images.push({
+ id: data.event.Frame[i].FrameId,
+ score: data.event.Frame[i].Score,
+ fname: padToN(data.event.Frame[i].FrameId, eventImageDigits) + "-capture.jpg"
+ });
+ }
+
+ }
+
+ //console.log (JSON.stringify(data));
+ })
+ .error(function (err) {
+ ZMDataModel.zmLog("Error retrieving detailed frame API " + JSON.stringify(err));
+ ZMDataModel.displayBanner('error', ['could not retrieve frame details', 'please try again']);
+ });
+
+ } // end of groupType == alarms
+ else // groupType == scrub
+ {
+
+ ZMDataModel.zmDebug("EventCtrl: Scrubbing will turn on now");
+ $scope.currentEvent = "";
+ $scope.event = event;
+ //$ionicScrollDelegate.freezeScroll(true);
+ $ionicSideMenuDelegate.canDragContent(false);
+ $scope.slider_options = {
+ from: 1,
+ to: event.Event.Frames,
+ realtime: true,
+ step: 1,
+ className: "mySliderClass",
+ callback: function (value, released) {
+ //console.log("CALLBACK"+value+released);
+ $ionicScrollDelegate.freezeScroll(!released);
+ //ZMDataModel.zmDebug("EventCtrl: freezeScroll called with " + !released);
- },
- //modelLabels:function(val) {return "";},
- css: {
- background: {
- "background-color": "silver"
},
- before: {
- "background-color": "purple"
+ //modelLabels:function(val) {return "";},
+ css: {
+ background: {
+ "background-color": "silver"
+ },
+ before: {
+ "background-color": "purple"
+ },
+ default: {
+ "background-color": "white"
+ }, // default value: 1px
+ after: {
+ "background-color": "green"
+ }, // zone after default value
+ pointer: {
+ "background-color": "red"
+ }, // circle pointer
+ range: {
+ "background-color": "red"
+ } // use it if double value
},
- default: {
- "background-color": "white"
- }, // default value: 1px
- after: {
- "background-color": "green"
- }, // zone after default value
- pointer: {
- "background-color": "red"
- }, // circle pointer
- range: {
- "background-color": "red"
- } // use it if double value
- },
- scale: []
-
- };
-
- event.Event.height = zm.eventsListDetailsHeight + zm.eventsListScrubHeight;
- $ionicScrollDelegate.resize();
- $scope.mycarousel.index = 0;
- $scope.ionRange.index = 1;
- //console.log("**Resetting range");
- $scope.slides = [];
- var i;
- ZMDataModel.zmDebug("EventCtrl: found " + frames + " frames to scrub");
- for (i = 1; i <= frames; i++) {
- var fname = padToN(i, eventImageDigits) + "-capture.jpg";
- $scope.slides.push({
- id: i,
- img: fname
- });
+ scale: []
- }
+ };
+ event.Event.height = zm.eventsListDetailsHeight + zm.eventsListScrubHeight;
+ $ionicScrollDelegate.resize();
+ $scope.mycarousel.index = 0;
+ $scope.ionRange.index = 1;
+ //console.log("**Resetting range");
+ $scope.slides = [];
+ var i;
+ ZMDataModel.zmDebug("EventCtrl: found " + frames + " frames to scrub");
- // now get event details to show alarm frames
- var loginData = ZMDataModel.getLogin();
- if (typeof event.Event.DefaultVideo === 'undefined')
- event.Event.DefaultVideo = "";
- // grab video details
- event.Event.video = {};
- var videoURL = loginData.url + "/events/" + event.Event.relativePath + event.Event.DefaultVideo;
+ for (i = 1; i <= frames; i++) {
+ var fname = padToN(i, eventImageDigits) + "-capture.jpg";
- console.log("************** VIDEO IS " + videoURL);
- event.Event.video.config = {
- autoPlay: true,
- sources: [
- {
- src: $sce.trustAsResourceUrl(videoURL),
- type: "video/mp4"
- }
- ],
- theme: "lib/videogular-themes-default/videogular.css",
+ $scope.slides.push({
+ id: i,
+ img: fname
+ });
- };
+ }
- var myurl = loginData.apiurl + '/events/' + event.Event.Id + ".json";
- ZMDataModel.zmLog("API for event details" + myurl);
- $http.get(myurl)
- .success(function (data) {
- $scope.FrameArray = data.event.Frame;
- // $scope.slider_options.scale=[];
- $scope.slider_options.scale = [];
- var i;
- for (i = 0; i < data.event.Frame.length; i++) {
- if (data.event.Frame[i].Type == "Alarm") {
- //console.log ("**ALARM AT " + i);
- $scope.slider_options.scale.push({
- val: i + 1,
- label: ' '
- });
- } else {
- //$scope.slider_options.scale.push(' ');
+ // now get event details to show alarm frames
+ loginData = ZMDataModel.getLogin();
+
+ if (typeof event.Event.DefaultVideo === 'undefined')
+ event.Event.DefaultVideo = "";
+ // grab video details
+ event.Event.video = {};
+ var videoURL = loginData.url + "/events/" + event.Event.relativePath + event.Event.DefaultVideo;
+
+ console.log("************** VIDEO IS " + videoURL);
+ event.Event.video.config = {
+ autoPlay: true,
+ sources: [
+ {
+ src: $sce.trustAsResourceUrl(videoURL),
+ type: "video/mp4"
}
- }
+ ],
- //console.log (JSON.stringify(data));
- })
- .error(function (err) {
- ZMDataModel.zmLog("Error retrieving detailed frame API " + JSON.stringify(err));
- ZMDataModel.displayBanner('error', ['could not retrieve frame details', 'please try again']);
- });
+ theme: "lib/videogular-themes-default/videogular.css",
+ };
- oldEvent = event;
- $rootScope.rand = Math.floor(Math.random() * (999999 - 111111 + 1)) + 111111;
- var elem = angular.element(document.getElementById("item-" + ndx));
- var locobject = $ionicPosition.offset(elem);
- //console.log(JSON.stringify(locobject));
- var toplocation = parseInt(locobject.top);
- var objheight = parseInt(locobject.height);
- console.log("top location is " + toplocation);
- var distdiff = parseInt($rootScope.devHeight) - toplocation - objheight;
- console.log("*****Space at bottom is " + distdiff);
- if (distdiff < zm.eventsListScrubHeight) // size of the scroller with bars
- {
- scrollbynumber = zm.eventsListScrubHeight - distdiff;
- $ionicScrollDelegate.$getByHandle("mainScroll").scrollBy(0, scrollbynumber, true);
+ var myurl2 = loginData.apiurl + '/events/' + event.Event.Id + ".json";
+ ZMDataModel.zmLog("API for event details" + myurl2);
+ $http.get(myurl2)
+ .success(function (data) {
+ $scope.FrameArray = data.event.Frame;
+ // $scope.slider_options.scale=[];
+ $scope.slider_options.scale = [];
+
+ var i;
+ for (i = 0; i < data.event.Frame.length; i++) {
+ if (data.event.Frame[i].Type == "Alarm") {
+
+ //console.log ("**ALARM AT " + i + "of " + data.event.Frame.length);
+ $scope.slider_options.scale.push({
+ val: data.event.Frame[i].FrameId,
+ label: ' '
+ });
+ } else {
+ //$scope.slider_options.scale.push(' ');
+ }
- // we need to scroll up to make space
- }
+ }
- } else {
- // $ionicScrollDelegate.freezeScroll(false);
- $ionicSideMenuDelegate.canDragContent(true);
- event.Event.height = zm.eventsListDetailsHeight;
- $ionicScrollDelegate.resize();
-
- if (scrollbynumber) {
- $ionicScrollDelegate.$getByHandle("mainScroll").scrollBy(0, -1 * scrollbynumber, true);
- scrollbynumber = 0;
- }
- // we are turning off, so scroll by back
- }
+ //console.log (JSON.stringify(data));
+ })
+ .error(function (err) {
+ ZMDataModel.zmLog("Error retrieving detailed frame API " + JSON.stringify(err));
+ ZMDataModel.displayBanner('error', ['could not retrieve frame details', 'please try again']);
+ });
+
+
+ oldEvent = event;
+ $rootScope.rand = Math.floor(Math.random() * (999999 - 111111 + 1)) + 111111;
+ var elem = angular.element(document.getElementById("item-" + ndx));
+ var locobject = $ionicPosition.offset(elem);
+ //console.log(JSON.stringify(locobject));
+ var toplocation = parseInt(locobject.top);
+ var objheight = parseInt(locobject.height);
+ console.log("top location is " + toplocation);
+ var distdiff = parseInt($rootScope.devHeight) - toplocation - objheight;
+ console.log("*****Space at bottom is " + distdiff);
+
+ if (distdiff < zm.eventsListScrubHeight) // size of the scroller with bars
+ {
+ scrollbynumber = zm.eventsListScrubHeight - distdiff;
+ $ionicScrollDelegate.$getByHandle("mainScroll").scrollBy(0, scrollbynumber, true);
+
+ // we need to scroll up to make space
+ }
+ } // end of groupType == scrub
+ } // end of ShowScrub == true
+ else {
+ // $ionicScrollDelegate.freezeScroll(false);
+ $ionicSideMenuDelegate.canDragContent(true);
+ event.Event.height = zm.eventsListDetailsHeight;
+ $ionicScrollDelegate.resize();
+
+ if (scrollbynumber) {
+ $ionicScrollDelegate.$getByHandle("mainScroll").scrollBy(0, -1 * scrollbynumber, true);
+ scrollbynumber = 0;
+ }
+ // we are turning off, so scroll by back
}
+ }
+
$scope.closeIfOpen = function (event) {
if (event != undefined) {
if (event.Event.ShowScrub)
diff --git a/www/templates/events.html b/www/templates/events.html
index ae9bd5d3..57dbf082 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -108,12 +108,16 @@
<span style="float:right">
<div ng-if="event.Event.EndTime">
<button class="button button-small icon icon-left ion-ios-eye"
- ng-click="toggleGroup(event,$index,event.Event.Frames)" > Quick Scrub
+ ng-click="toggleGroupScrub(event,$index,event.Event.Frames)" > Scrub
+ </button>
+
+ <button ng-if="event.Event.AlarmFrames > 0" class="button button-small icon icon-left ion-ios-bell"
+ ng-click="toggleGroupAlarms(event,$index,event.Event.Frames)" > alarms
</button>
<button class="button button-small icon icon-left ion-ios-eye"
- ng-click="closeIfOpen(event);openModal(event)" > View Footage
+ ng-click="closeIfOpen(event);openModal(event)" > Footage
</button>
</div>
@@ -123,70 +127,99 @@
</span>
- <!-- this is the event scrub area -->
+ <!-- this is the event scrub/alarm frames area -->
<div ng-if="isGroupShown(event)">
-
- <div ng-if="event.Event.DefaultVideo=='' || loginData.enableh264==false">
-
-
- <br/>
+
+
+
+ <div ng-if="groupType=='alarms'">
<br/>
- <br/>
- <div style="width:90%">
- <input ng-model="ionRange.index" type="text" id="mySlider1" slider options="slider_options" />
+
+ <div style="height:190px">
+ <p>scroll <i class="icon ion-arrow-left-c"></i>
+ <i class="icon ion-arrow-right-c"></i></p>
+ <ion-scroll direction="x" >
+
+ <span ng-repeat="alarm in alarm_images">
+
+ <figure style="display:inline-block">
+ <figcaption><p>frame:{{alarm.id}} score:{{alarm.score}}</p></figcaption>
+ <img ng-src="{{playbackURL}}/index.php?view=image&path={{event.Event.relativePath}}{{alarm.fname}}&height=380" height="170px" />
+
+
+ </figure>
+
+ </span>
+
+ </ion-scroll>
</div>
-
- <br/>
+ </div>
+ <div ng-if="groupType=='scrub'">
+ <div ng-if="event.Event.DefaultVideo=='' || loginData.enableh264==false">
+ <br/>
+ <br/>
+ <br/>
+ <div style="width:90%">
+ <input ng-model="ionRange.index" type="text" id="mySlider1" slider options="slider_options" />
+ </div>
- <p>{{mycarousel.index+1}}/{{event.Event.Frames}} Type: {{FrameArray[mycarousel.index].Type}}</p>
+ <br/>
- <div style="height:190px">
-
-
- <ul rn-carousel rn-carousel-buffered rn-carousel-transition="none" rn-swipe-disabled="true" rn-carousel-index="mycarousel.index" rn-carousel-auto-slide="{{event.Event.Length/event.Event.Frames}}" rn-carousel-pause-on-hover rn-platform="{{$root.platformOS}}">
- <li ng-repeat="slide in slides">
- <!-- Linwood scaling -->
- <img imageonload="finishedLoadingImage($index)" image-spinner-src="{{playbackURL}}/index.php?view=image&path={{event.Event.relativePath}}{{slide.img}}&height=380" image-spinner-loader="lines" height="190px" ;/>
- <br/>
- </li>
- </ul>
- </div>
- </div>
- <!-- no DefaultVideo -->
+ <p>{{mycarousel.index+1}}/{{event.Event.Frames}} Type: {{FrameArray[mycarousel.index].Type}}</p>
+ <div style="height:190px">
- <div ng-if="event.Event.DefaultVideo!='' && loginData.enableh264 == true">
- <br/>
- <br/>
- <br/>
+ <ul rn-carousel rn-carousel-buffered rn-carousel-transition="none" rn-swipe-disabled="true" rn-carousel-index="mycarousel.index" rn-carousel-auto-slide="{{event.Event.Length/event.Event.Frames}}" rn-carousel-pause-on-hover rn-platform="{{$root.platformOS}}">
+ <li ng-repeat="slide in slides">
+ <!-- Linwood scaling -->
+
+
+ <img imageonload="finishedLoadingImage($index)" image-spinner-src="{{playbackURL}}/index.php?view=image&path={{event.Event.relativePath}}{{slide.img}}&height=380" image-spinner-loader="lines" height="190px" ;/>
+ <br/>
- <div class="videogular-container">
- <videogular vg-theme="event.Event.video.config.theme" vg-plays-inline="'true'" vg-auto-play="'true'" vg-responsive="true">
- <vg-controls>
- <vg-play-pause-button></vg-play-pause-button>
- <vg-scrub-bar>
- <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
- </vg-scrub-bar>
- <vg-time-display>{{ timeLeft | date:'mm:ss':'+0000' }}</vg-time-display>
- <vg-fullscreen-button></vg-fullscreen-button>
- <vg-volume>
- <vg-mute-button></vg-mute-button>
- </vg-volume>
- </vg-controls>
-
- <vg-media vg-src="event.Event.video.config.sources" vg-native-controls="false">
- </vg-media>
- </videogular>
+ </li>
+ </ul>
+ </div>
</div>
+ <!-- no DefaultVideo -->
+
+
+ <div ng-if="event.Event.DefaultVideo!='' && loginData.enableh264 == true">
+
+ <br/>
+ <br/>
+ <br/>
+
+
+ <div class="videogular-container">
+ <videogular vg-theme="event.Event.video.config.theme"
+ vg-plays-inline="'true'" vg-auto-play="'true'" vg-responsive="true">
+ <vg-controls>
+ <vg-play-pause-button></vg-play-pause-button>
+ <vg-scrub-bar>
+ <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
+ </vg-scrub-bar>
+ <vg-time-display>{{ timeLeft | date:'mm:ss':'+0000' }}</vg-time-display>
+ <vg-fullscreen-button></vg-fullscreen-button>
+ <vg-volume>
+ <vg-mute-button></vg-mute-button>
+ </vg-volume>
+ </vg-controls>
+
+ <vg-media vg-src="event.Event.video.config.sources" vg-native-controls="false">
+ </vg-media>
+ </videogular>
+ </div>
- </div>
- <!-- DefaultVideo -->
+ </div>
+ <!-- DefaultVideo -->
+ </div> <!-- type = scrub -->
</div>
<!-- isGroupShown -->
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-06 14:38:10 +0000