From 23b05e3ba46a01b0aef63774004d0f1dd4359c03 Mon Sep 17 00:00:00 2001
From: Arjun Roychowdhury <pliablepixels@gmail.com>
Date: Fri, 13 Nov 2015 13:53:36 -0500
Subject: #82 - alarm indication

Former-commit-id: 8ff19d73113773b4969e89e529ed3829766cde6b
---
 www/css/style.css          | 12 +++++--
 www/js/MontageCtrl.js      | 17 +++++++---
 www/js/app.js              |  1 +
 www/templates/montage.html | 83 +++++++++++++++++++---------------------------
 4 files changed, 56 insertions(+), 57 deletions(-)

(limited to 'www')

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">&nbsp;<i class="ion-monitor"></i>
@@ -49,42 +48,33 @@
                             {{monitor.Monitor.Name}}&nbsp;
                         </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&amp;monitor={{monitor.Monitor.Id}}&amp;maxfps={{LoginData.maxFPS}}&amp;scale=50&amp;{{$root.authSession}}&amp;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
-- 
cgit v1.2.3