diff options
| -rw-r--r-- | www/css/style.css | 12 | ||||
| -rw-r--r-- | www/js/MontageCtrl.js | 17 | ||||
| -rw-r--r-- | www/js/app.js | 1 | ||||
| -rw-r--r-- | www/templates/montage.html | 83 |
4 files changed, 56 insertions, 57 deletions
diff --git a/www/css/style.css b/www/css/style.css index 00557085..b1cfd10b 100644 --- a/www/css/style.css +++ b/www/css/style.css @@ -84,11 +84,17 @@ Credit: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ border-style: solid; border-width:1px; opactity:80%; + } -.footer { - background: #666666; - border-color:#AAAAAA; +.alarmed-body { + border-left: thick solid #ba3e3e; + +} + +.alarmed-footer { + background: #ba3e3e; + border-color:#ba3e3e; color:#ffffff; border-width:1px; /*padding:2px;*/ diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js index 40b3a69c..7ff9cbd7 100644 --- a/www/js/MontageCtrl.js +++ b/www/js/MontageCtrl.js @@ -211,21 +211,28 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', ' { console.log ("**** TRAPPED EVENT: "+alarmMonitors[i]); - for (var j=0; i<$scope.monitors.length; i++) + for (var j=0; i<$scope.monitors.length; j++) { if ($scope.monitors[j].Monitor.Id == alarmMonitors[i]) { $scope.monitors[j].Monitor.isAlarmed="true"; + scheduleRemoveFlash(j); } } } - - - - + }); + + function scheduleRemoveFlash(id) + { + ZMDataModel.zmDebug ("Scheduled a 10 sec timer for dis-alarming monitor ID="+id); + $timeout( function() { + $scope.monitors[id].Monitor.isAlarmed = 'false'; + ZMDataModel.zmDebug ("dis-alarming monitor ID="+id); + },zm.alarmFlashTimer); + } //---------------------------------------------------------------- // Alarm notification handling diff --git a/www/js/app.js b/www/js/app.js index 94551555..8cb5e869 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -34,6 +34,7 @@ angular.module('zmApp', [ .constant('zm', { minAppVersion: '1.28.107', // if ZM is less than this, the app won't work minEventServerVersion: '0.4', + alarmFlashTimer:20000, // time to flash alarm gcmSenderId:'710936220256', httpTimeout: 15000, largeHttpTimeout: 60000, diff --git a/www/templates/montage.html b/www/templates/montage.html index 6a583847..87838e76 100644 --- a/www/templates/montage.html +++ b/www/templates/montage.html @@ -6,22 +6,22 @@ <ion-nav-buttons side="right"> - <span class="rotate-button"> + <span class="rotate-button"> <button class="button button-icon button-clear ion-arrow-swap" ng-click="toggleReorder();"> </button> </span> - <button class="button button-icon button-clear ion-android-contract" - ng-click="switchMinimal()"> - </button> + <button class="button button-icon button-clear ion-android-contract" ng-click="switchMinimal()"> + </button> <!--<button class="button button-icon ion-ios-help-outline" ng-click="popover.show($event)"></button>--> - </ion-nav-buttons> + </ion-nav-buttons> <ion-content has-bouncing="false" style="background-color:#444444"> - <ion-refresher pulling-text="Pull to reload Monitors..." - spinner="bubbles" on-refresh="doRefresh()"> + + <ion-refresher pulling-text="Pull to reload Monitors..." spinner="bubbles" on-refresh="doRefresh()"> </ion-refresher> + <!--{{stateofSlide}} Status--> <span ng-show="!minimal"> <div class="range range-positive"> @@ -35,8 +35,7 @@ <div class="wrapper"> - <span ng-repeat="monitor in MontageMonitors|limitTo: monLimit" - ng-if="monitor.Monitor.Function!='None' && monitor.Monitor.listDisplay!='noshow'"> + <span ng-repeat="monitor in MontageMonitors|limitTo: monLimit" ng-if="monitor.Monitor.Function!='None' && monitor.Monitor.listDisplay!='noshow'"> <span ng-show="!minimal"> <div ng-if="monitor.Monitor.isAlarmed=='true'"> <header class="alarmed-header animated infinite flash"> <i class="ion-monitor"></i> @@ -49,42 +48,33 @@ {{monitor.Monitor.Name}} </header> </div> - </span> <article class="main"> - + <!-- back to ng-src. spinner was not updating when rand changes--> - <!-- FIXME: Scale is 50% hardcoded --> <!-- moving to single so I can rely on rand for reloads --> - + <div ng-if="!isModalActive"> - <div ng-if="$root.authSession!='undefined'"> - <img id="img-$index" image-spinner-src="{{LoginData.streamingurl}}/cgi-bin/nph-zms?mode=single&monitor={{monitor.Monitor.Id}}&scale={{LoginData.montageQuality}}{{$root.authSession}}&rand={{$root.rand}}" width="{{((devWidth)/(7-monitorSize[$index]))}}px;" - ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId)" - - style="display:block;" image-spinner-loader="lines" - - /> - <!-- on-hold="onHold($index)" - on-release="onRelease($index)" --> + <img ng-class="monitor.Monitor.isAlarmed=='true'? 'animated infinite flash':''" id="img-$index" image-spinner-src="{{LoginData.streamingurl}}/cgi-bin/nph-zms?mode=single&monitor={{monitor.Monitor.Id}}&scale={{LoginData.montageQuality}}{{$root.authSession}}&rand={{$root.rand}}" width="{{((devWidth)/(7-monitorSize[$index]))}}px;" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId)" style="display:block;" image-spinner-loader="lines" /> + </div> + <div ng-if="!$root.authSession=='undefined'"> - <img id="img-$index" ng-src="img/pausevideo.png" style="display:block;" - width="{{((devWidth)/(7-monitorSize[$index]))}}px;"/> + <img id="img-$index" ng-src="img/pausevideo.png" style="display:block;" width="{{((devWidth)/(7-monitorSize[$index]))}}px;" /> </div> + </div> - - <!--url: {{LoginData.streamingurl}}/cgi-bin/nph-zms?mode=single&monitor={{monitor.Monitor.Id}}&maxfps={{LoginData.maxFPS}}&scale=50&{{$root.authSession}}&rand={{$root.rand}}--> - <div ng-if="isModalActive"> - <img id="img-$index" ng-src="img/pausevideo.png" style="display:block;" width="{{((devWidth)/(7-monitorSize[$index]))}}px;"/> - </div> - - - + <div ng-if="isModalActive"> + <img id="img-$index" ng-src="img/pausevideo.png" style="display:block;" width="{{((devWidth)/(7-monitorSize[$index]))}}px;" /> + </div> + + + </article> - </span> - </div> + + </span> <!-- ngrepeat --> + </div> <!--wrapper--> <ion-item ng-show="!MontageMonitors.length"> @@ -93,28 +83,23 @@ </ion-content> <div ng-show="minimal"> - <nav mfb-menu position="br" effect="zoomin" label="collapse" - active-icon="ion-chevron-down" resting-icon="ion-chevron-up" toggling-method="click"> - - <button mfb-button icon="ion-arrow-expand" label="increase size" - ng-click="changeSize(1)"> + <nav mfb-menu position="br" effect="zoomin" label="collapse" active-icon="ion-chevron-down" resting-icon="ion-chevron-up" toggling-method="click"> + + <button mfb-button icon="ion-arrow-expand" label="increase size" ng-click="changeSize(1)"> </button> - <button mfb-button icon="ion-arrow-shrink" label="decrease size" - ng-click="changeSize(-1)"> + <button mfb-button icon="ion-arrow-shrink" label="decrease size" ng-click="changeSize(-1)"> </button> <button mfb-button icon="ion-refresh" label="refresh" ng-click="reloadView();"> - </button> - <button mfb-button icon="ion-close" label="exit full screen" - ng-click="switchMinimal()"> + </button> + <button mfb-button icon="ion-close" label="exit full screen" ng-click="switchMinimal()"> </button> </nav> - - <span class="modal-alarm-badge"> + + <span class="modal-alarm-badge"> <a data-badge="{{$root.alarmCount}}" class="animated infinite tada button icon ion-ios-bell notification-badge button-assertive" ng-click="handleAlarmsWhileMinimized();" ng-if="$root.isAlarm"></a> </span> - + </div> <br/> -</ion-view> - +</ion-view>
\ No newline at end of file |