From 6bcc09cf53aee2ee8efc41d6d95213d678d8c330 Mon Sep 17 00:00:00 2001
From: pliablepixels <pliablepixels@gmail.com>
Date: Tue, 26 Jan 2016 10:11:07 -0500
Subject: #154 - mostly working - events playing black nicely

Former-commit-id: 523cb7b8166cb7bbfedb9fa3586b7937c424b289
---
 www/css/style.css                  |   7 +++
 www/img/noevent.png                | Bin 0 -> 42270 bytes
 www/js/MontageHistoryCtrl.js       | 109 +++++++++++++++++++++++++++++--------
 www/templates/montage-history.html |  78 +++++++++++++++++---------
 4 files changed, 147 insertions(+), 47 deletions(-)
 create mode 100644 www/img/noevent.png

(limited to 'www')

diff --git a/www/css/style.css b/www/css/style.css
index 2a4ba025..ffda637f 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -220,6 +220,13 @@ http://www.cssportal.com/tryit/index.php?file=blog/css-notification-badge */
     transform: translate(-50%, -50%);
 }
 
+.timeline_text {
+    text-align:center;
+    color:white;
+    
+    
+}
+
 .ptzcenteredbutton
 {
     position: absolute;
diff --git a/www/img/noevent.png b/www/img/noevent.png
new file mode 100644
index 00000000..3fb3bfd4
Binary files /dev/null and b/www/img/noevent.png differ
diff --git a/www/js/MontageHistoryCtrl.js b/www/js/MontageHistoryCtrl.js
index fa1e9247..bdbfeea5 100644
--- a/www/js/MontageHistoryCtrl.js
+++ b/www/js/MontageHistoryCtrl.js
@@ -4,6 +4,8 @@
 /* global cordova,StatusBar,angular,console,ionic,Masonry,moment */
 
 
+// FIXME: This is a copy of montageCtrl - needs a lot of code cleanup
+
 angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$scope', '$rootScope', 'ZMDataModel', 'message', '$ionicSideMenuDelegate', '$timeout', '$interval', '$ionicModal', '$ionicLoading', '$http', '$state', '$ionicPopup', '$stateParams', '$ionicHistory', '$ionicScrollDelegate', '$ionicPlatform', 'zm', '$ionicPopover', '$controller', 'imageLoadingDataShare', '$window', function ($scope, $rootScope, ZMDataModel, message, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http, $state, $ionicPopup, $stateParams, $ionicHistory, $ionicScrollDelegate, $ionicPlatform, zm, $ionicPopover, $controller, imageLoadingDataShare, $window) {
 
     $controller('zmApp.BaseController', {
@@ -27,7 +29,7 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
         }
 
         $scope.prettifyTime = function (str) {
-            console.log ("got " + str);
+            
             return moment(str).format('h:mm a');
         };
 
@@ -36,33 +38,61 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
             return moment(str).format('h:mm:ssa on MMMM Do YYYY');
         };
     
-    $scope.toggleTimeDisplay = function()
+    
+    
+    
+    $scope.footerCollapse = function()
     {
-        console.log ("TOGGLING");
-        $scope.displayDateTimeSliders = !$scope.displayDateTimeSliders;
         
-        if ($scope.displayDateTimeSliders)
-        {
-            $scope.showtimers=true;
-        }
-        else
+        window.stop();
+        
+        
+        $scope.sliderVal.realRate = $scope.sliderVal.rate *100;
+        ZMDataModel.zmDebug ("Playback rate is:"  + $scope.sliderVal.realRate);
+        for (var i=0; i< $scope.MontageMonitors.length; i++)
         {
-            $timeout(function()
-                { $scope.showtimers=false; },300);
+            $scope.MontageMonitors[i].eventUrl = "img/noevent.png";
+
         }
-    
-        /*var element = angular.element(document.getElementById("historydials"));
         
-        if (!$scope.displayDateTimeSliders)
-        {
+        var TimeObjectFrom = $scope.sliderVal.year+"-"+$scope.sliderVal.month+"-"+$scope.sliderVal.day+" "+$scope.sliderVal.hour+":"+$scope.sliderVal.min;
+        
+        
+        
+        var TimeObjectTo = moment(TimeObjectFrom).add(1,'hour').format('YYYY-MM-DD HH:mm');
+        
         
-            element.removeClass("animated fadeInDown");
-            element.addClass("animated fadeOutUp");
-        }
-     */
-
         
+         var apiurl = ld.apiurl + "/events/index/StartTime >=:"+TimeObjectFrom+"/StartTime <=:"+ TimeObjectTo+".json";
+            
+            console.log ("New URL to get is " + apiurl);
+        
+            $http.get(apiurl)
+            .success( function(data) {
+                ZMDataModel.zmDebug ("Got new history events:"+ JSON.stringify(data));
+                var eid, mid;
+                for (i=0; i<data.events.length; i++)
+                {
+                    mid = data.events[i].Event.MonitorId;
+                    eid = data.events[i].Event.Id;
+                    
+                   // only take the first one for each monitor
+                   // that's the earliest match and play gapless from there
+                   if ($scope.MontageMonitors[mid].eventUrl == 'img/noevent.png')    
+                       $scope.MontageMonitors[mid].eventUrl=ld.streamingurl+"/nph-zms?source=event&mode=jpeg&event="+eid+"&frame=1&replay=gapless";
+                    console.log ("Monitor " + mid + " url is " + $scope.MontageMonitors[mid].eventUrl);
+                }
+                
+               
+                
+                
+            })
+            .error (function (data) {
+                ZMDataModel.zmDebug ("history  ERROR:"+ JSON.stringify(data));
+                
+            });
         
+            
     };
     
     $scope.displayDateTimeSliders = true;
@@ -73,9 +103,24 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
         month:1,
         day:1,
         hour:0,
-        min:0
+        min:0,
+        rate:1,
+        realRate:100,
+        hideNoEvents:false,
     };
     
+    // start with a day ago
+    var timenow = moment().subtract('1','day');
+    $scope.sliderVal.year = timenow.format("YYYY");
+    $scope.sliderVal.month = timenow.format("MM");
+    $scope.sliderVal.day = timenow.format("DD");
+    $scope.sliderVal.hour = timenow.format("HH");
+    $scope.sliderVal.min = 0;
+    $scope.sliderVal.rate = 1;
+    $scope.sliderVal.realRate = $scope.sliderVal.rate *100;
+    
+    
+    
     var commonCss =  
         {
         
@@ -98,6 +143,20 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
                 "background-color": "red"
             } // use it if double value
         };
+   
+    
+     $scope.slider_modal_options_rate = {
+                        from: 1,
+                        to: 10,
+                        realtime: true,
+                        step: 1,
+                        className: "mySliderClass",
+                        //modelLabels:function(val) {return "";},
+                        smooth: false,
+                        css: commonCss,
+                        dimension:'X'
+                        
+                    };
     
     $scope.slider_modal_options_YY = {
                         from: 2010,
@@ -148,7 +207,7 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
                         from: 0,
                         to: 59,
                         realtime: true,
-                        step: 1,
+                        step: 29,
                         className: "mySliderClass",
                         //modelLabels:function(val) {return "";},
                         smooth: false,
@@ -214,6 +273,12 @@ angular.module('zmApp.controllers').controller('zmApp.MontageHistoryCtrl', ['$sc
     
     $scope.packMontage = loginData.packMontage;
     
+    for (i=0; i< $scope.MontageMonitors.length; i++)
+    {
+        $scope.MontageMonitors[i].eventUrl = "img/noevent.png";
+        
+    }
+    
     
     
     
diff --git a/www/templates/montage-history.html b/www/templates/montage-history.html
index 620f8386..173aaf5a 100644
--- a/www/templates/montage-history.html
+++ b/www/templates/montage-history.html
@@ -1,4 +1,4 @@
-<ion-view title="Montage" cache-view="false" hide-nav-bar="{{minimal}}">
+<ion-view title="History" cache-view="false" hide-nav-bar="{{minimal}}">
     <ion-nav-buttons side="left">
         <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
         
@@ -22,9 +22,9 @@
                 </button>
         </span>   
 
-  
+    <!--
         <button class="button button-icon button-clear ion-android-contract" ng-click="switchMinimal()">
-        </button>
+        </button>-->
         <!--<button class="button button-icon ion-ios-help-outline" ng-click="popover.show($event)"></button>-->
         
         
@@ -41,6 +41,9 @@
 
 
         <span ng-show="!minimal">
+            
+            <div class="timeline_text"><b>Timeline starting: {{prettifyDate(sliderVal.year+"-"+sliderVal.month+"-"+sliderVal.day)}} at {{prettifyTime(sliderVal.year+"-"+sliderVal.month+"-"+sliderVal.day+" "+sliderVal.hour+":"+sliderVal.min)}}@ {{sliderVal.rate}}x</b></div>
+        
                 <div class="range range-positive">
                     <i style="color:#bbbbbb" class="icon ion-image"></i>
                     <input type="range" ng-model="slider.monsize" min="1"
@@ -58,26 +61,33 @@
             <span ng-repeat="monitor in MontageMonitors|limitTo: monLimit" 
                   ng-if="monitor.Monitor.Function!='None' && monitor.Monitor.listDisplay!='noshow' && monitor.Monitor.Enabled !='0'">
      
-            <!-- back to ng-src. spinner was not updating when rand changes-->
-            <!-- moving to single so I can rely on rand for reloads -->
-                
-                
-                <!--src=" /zm/cgi-bin/nph-zms?source=event&mode=jpeg&event=7664&frame=1&scale=100&rate=100&maxfps=5&replay=gapless&auth=6b8c60f81fa2edff94f80f12bdebd98d&connkey=286643&rand=1453671607"
-
-
-https://arjunrc.ddns.net:8889/zm/api/events/index/StartTime%20=:2016-01-25.json
-
-Events started in X-X+30
-https://arjunrc.ddns.net:8889/zm/api/events/index/StartTime%20%3E=:2016-01-25%2000:00:00/StartTime%20%3C=:2016-01-25%2000:30:00.json
--->
+           
                 
                 <div style="position: relative;width:{{devWidth/slider.monsize}}px;">
                     <div ng-if="!isModalActive">
                         <div ng-if="$root.authSession!='undefined' && !isBackground()">
-                            <div ng-if = "!minimal">
-                                <img id="img-$index" image-spinner-src="{{LoginData.streamingurl}}/nph-zms?mode=single&monitor={{monitor.Monitor.Id}}&scale={{LoginData.montageQuality}}{{$root.authSession}}&rand={{$root.rand}}"  image-spinner-loader="lines" style="
+                            <div ng-if = "!minimal && monitor.eventUrl == 'img/noevent.png' && !sliderVal.hideNoEvents">
+                                <img id="img-$index" image-spinner-src="{{monitor.eventUrl}}"  image-spinner-loader="lines" style="
+        width: 100% !important;
+        height: auto !important;" />
+                                <div   style="position:absolute; bottom:0%; right:0%;white-space:nowrap;overflow:hidden;" 
+                                 class="header">
+                                &nbsp;<i class="ion-monitor"></i>
+                               {{monitor.Monitor.Name}}&nbsp;
+                                </div>
+                            </div>
+                            
+                            <div ng-if = "!minimal && monitor.eventUrl != 'img/noevent.png'">
+                                <img id="img-$index" image-spinner-src="{{monitor.eventUrl}}&scale={{LoginData.singleImageQuality}}{{$root.authSession}}&rand={{$root.rand}}&rate={{sliderVal.realRate}}"  image-spinner-loader="lines" style="
         width: 100% !important;
         height: auto !important;" />
+                                
+                                <div   style="position:absolute; bottom:0%; right:0%;white-space:nowrap;overflow:hidden;" 
+                                     class="header">
+                                    &nbsp;<i class="ion-monitor"></i>
+                                   {{monitor.Monitor.Name}}&nbsp;
+                                </div>
+                                
                             </div>
                             
                             <div ng-if = "minimal">
@@ -94,6 +104,7 @@ https://arjunrc.ddns.net:8889/zm/api/events/index/StartTime%20%3E=:2016-01-25%20
   height: auto !important;" />
                         </div>
                         
+                        
 
 
                     </div>
@@ -142,31 +153,48 @@ https://arjunrc.ddns.net:8889/zm/api/events/index/StartTime%20%3E=:2016-01-25%20
 
     </div>
     
-    <ion-pull-up-footer class="bar-dark" on-expand="footerExpand()" on-collapse="footerCollapse()" initial-state="minimized" default-behavior="expand">
+    <ion-pull-up-footer class="bar-dark"  on-minimize="footerCollapse()" on-collapse="footerCollapse()" initial-state="minimized" default-behavior="expand">
      <ion-pull-up-handle width="100" height="25" toggle="ion-chevron-up ion-chevron-down" style="border-radius: 25px 25px 0 0">
             <i class="icon ion-chevron-up"></i>
         </ion-pull-up-handle>
         <ion-pull-up-bar>
-            <h1 class="title" ion-pull-up-trigger>Timeline Browser</h1>
+            <h1 class="title" ion-pull-up-trigger>Event History</h1>
         </ion-pull-up-bar>
         <ion-pull-up-content scroll="true">
            
             
             <div class="list list-inset">
                 
-                <div class="item item-divider">Timeline starting: {{prettifyDate(sliderVal.year+"-"+sliderVal.month+"-"+sliderVal.day)}} at {{prettifyTime(sliderVal.year+"-"+sliderVal.month+"-"+sliderVal.day+" "+sliderVal.hour+":"+sliderVal.min)}}</div>
+                   
+                <ion-toggle ng-model="sliderVal.hideNoEvents"
+                            ng-checked="{{sliderVal.hideNoEvents}}"
+                            toggle-class="toggle-dark">Hide monitors without events</ion-toggle>
+            
+                
+                <div class="item item-divider">History at: {{prettifyDate(sliderVal.year+"-"+sliderVal.month+"-"+sliderVal.day)}} at {{prettifyTime(sliderVal.year+"-"+sliderVal.month+"-"+sliderVal.day+" "+sliderVal.hour+":"+sliderVal.min)}} </div>
+                
+                
+                <div class="item"><br/><div style="width:90%"><input ng-model="sliderVal.rate" type="text" id="mySlider6" slider options="slider_modal_options_rate"/></div><br/></div>
+                
+                <div class="item"><br/><div style="width:90%"><input ng-model="sliderVal.min" type="text" id="mySlider5" slider options="slider_modal_options_mm"/></div><br/></div>
+                
+                <div class="item"><br/><div style="width:90%"><input ng-model="sliderVal.hour" type="text" id="mySlider4" slider options="slider_modal_options_hh"/></div><br/></div>
+                
+                <div class="item"><br/><div style="width:90%"><input ng-model="sliderVal.day" type="text" id="mySlider3" slider options="slider_modal_options_DD"/></div><br/></div>
+                
+                <div class="item" ><br/><div style="width:90%"><input ng-model="sliderVal.month" type="text" id="mySlider2" slider options="slider_modal_options_MM"/></div><br/></div>
                 
-                <div class="item" ><br/><input ng-model="sliderVal.year" type="text" id="mySlider1" slider options="slider_modal_options_YY" /><br/></div>
+                <div class="item" ><br/><div style="width:90%"><input ng-model="sliderVal.year" type="text" id="mySlider1" slider options="slider_modal_options_YY" /></div><br/></div>
 
-                 <div class="item" ><br/><input ng-model="sliderVal.month" type="text" id="mySlider2" slider options="slider_modal_options_MM"/><br/></div>
+                 
 
 
-                 <div class="item"><br/><input ng-model="sliderVal.day" type="text" id="mySlider3" slider options="slider_modal_options_DD"/><br/></div>
+                 
 
 
-                 <div class="item"><br/><input ng-model="sliderVal.hour" type="text" id="mySlider4" slider options="slider_modal_options_hh"/><br/></div>
+                 
 
-                 <div class="item"><br/><input ng-model="sliderVal.min" type="text" id="mySlider5" slider options="slider_modal_options_mm"/><br/></div>
+                 
             </div>
         </ion-pull-up-content>
     </ion-pull-up-footer>
-- 
cgit v1.2.3