summaryrefslogtreecommitdiff
path: root/www
diff options
context:
space:
mode:
Diffstat (limited to 'www')
-rw-r--r--www/css/style.css6
-rw-r--r--www/index.html7
-rw-r--r--www/js/MonitorCtrl.js10
-rw-r--r--www/js/MontageCtrl.js44
-rw-r--r--www/js/app.js59
-rw-r--r--www/templates/events-modal.html4
-rw-r--r--www/templates/monitors-modal.html4
-rw-r--r--www/templates/montage.html2
8 files changed, 81 insertions, 55 deletions
diff --git a/www/css/style.css b/www/css/style.css
index 7716dfbe..b239d043 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -127,10 +127,10 @@ Credit: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.timelinebuttons {
position: fixed; /* or absolute */
- bottom:100px;
+ bottom:130px;
left: 50%;
- transform: translate(-50%, -50%);
- z-index:9999;
+ transform: translate(-50%, -50%);
+ z-index:10;
}
.eventprogress
diff --git a/www/index.html b/www/index.html
index d5bbb1b3..f1ab5aa9 100644
--- a/www/index.html
+++ b/www/index.html
@@ -58,7 +58,10 @@
<script src="js/LogCtrl.js"></script>
<script src="js/EventDateTimeFilterCtrl.js"></script>
<script src="js/TimelineCtrl.js"></script>
- <script src="lib/vis/dist/vis.min.js"></script>
+ <!-- <script src="lib/vis/dist/vis.min.js"></script>-->
+
+ <script src="lib/vis/dist/vis-dev.js"></script>
+
@@ -106,7 +109,7 @@
<ion-nav-view></ion-nav-view>
</ion-side-menu-content>
- <ion-side-menu side="left">
+ <ion-side-menu >
<ion-header-bar class="bar bar-header bar-dark">
<h1 class="title">Options</h1>
</ion-header-bar>
diff --git a/www/js/MonitorCtrl.js b/www/js/MonitorCtrl.js
index c4d338e5..a44e4a95 100644
--- a/www/js/MonitorCtrl.js
+++ b/www/js/MonitorCtrl.js
@@ -12,6 +12,8 @@ angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', ['$ionicPopu
// Controller Main
//-----------------------------------------------------------------------
+ // var isModalOpen = false;
+
console.log("***EVENTS: Waiting for Monitors to load before I proceed");
$scope.monitors = [];
$scope.monitors = message;
@@ -34,6 +36,7 @@ angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', ['$ionicPopu
//-----------------------------------------------------------------------
$scope.reloadView = function () {
console.log("*** Refreshing Modal view ***");
+ $rootScope.rand =Math.floor(Math.random() * (999999 - 111111 + 1)) + 111111;
$scope.rand = Math.floor(Math.random() * (999999 - 111111 + 1)) + 111111;
$ionicLoading.show({
template: "refreshed view",
@@ -191,6 +194,10 @@ angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', ['$ionicPopu
console.log("**VIEW ** Monitor Ctrl Loaded");
});
+
+
+
+
//-------------------------------------------------------------------------
// Lets make sure we set screen dim properly as we enter
// The problem is we enter other states before we leave previous states
@@ -214,9 +221,12 @@ angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', ['$ionicPopu
$scope.openModal = function (mid, controllable, controlid) {
console.log("Open Monitor Modal with monitor Id=" + mid + " and Controllable:" + controllable + " with control ID:" + controlid);
+
$scope.monitorId = mid;
$scope.LoginData = ZMDataModel.getLogin();
$scope.rand = Math.floor(Math.random() * (999999 - 111111 + 1)) + 111111;
+ $rootScope.rand = Math.floor(Math.random() * (999999 - 111111 + 1)) + 111111;
+
$scope.ptzMoveCommand = "";
// This is a modal to show the monitor footage
diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js
index 055dc0d7..99b6d5b5 100644
--- a/www/js/MontageCtrl.js
+++ b/www/js/MontageCtrl.js
@@ -14,6 +14,7 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
document.addEventListener("pause", onPause, false);
+ document.addEventListener("resume", onResume, false);
$ionicPopover.fromTemplateUrl('templates/help/montage-help.html', {
scope: $scope,
@@ -164,18 +165,17 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
// load. Will it bonk with many monitors? Who knows. I have tried with 5 and 1280x960@32bpp
- this.loadNotifications = function () {
+ function loadNotifications() {
// randomval is appended to img src, so after each interval the image reloads
$scope.randomval = (new Date()).getTime();
+ $rootScope.rand = Math.floor((Math.random() * 100000) + 1);
+ // console.log ("*** Montage timer");
// console.log ("New " + $scope.randomval);
- };
+ }
+
+ var intervalHandle ;
- var intervalHandle = $interval(function () {
- this.loadNotifications();
- // console.log ("Refreshing Image...");
- }.bind(this), 1000);
- this.loadNotifications();
//-------------------------------------------------------------
// Called when user taps on the reorder button
@@ -398,6 +398,8 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
// Note: no need to setAwake(true) as its already awake
// in montage view
+
+ $interval.cancel(intervalHandle);
$scope.monitorId = mid;
$scope.LoginData = ZMDataModel.getLogin();
@@ -456,6 +458,14 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
// Note: no need to setAwake(false) as needs to be awake
// in montage view
$scope.modal.remove();
+ $rootScope.rand = Math.floor((Math.random() * 100000) + 1);
+
+ console.log ("Restarting montage timer...");
+
+ intervalHandle= $interval(function () {
+ loadNotifications();
+ // console.log ("Refreshing Image...");
+ }.bind(this), 1000);
};
@@ -497,7 +507,7 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
scaleMontage();
}.bind(this), zm.montageScaleFrequency);
- console.log("**************" + zm.montageScaleFrequency);
+ console.log("****Interval handle started **********" + zm.montageScaleFrequency);
};
//---------------------------------------------------------------------
@@ -526,6 +536,16 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
}
+ function onResume()
+ {
+ console.log ("Restarting montage timer on resume");
+ $interval.cancel(intervalHandle);
+ intervalHandle= $interval(function () {
+ loadNotifications();
+ // console.log ("Refreshing Image...");
+ }.bind(this), 1000);
+
+ }
$scope.openMenu = function () {
$timeout (function() {
@@ -549,6 +569,14 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
console.log("**VIEW ** Montage Ctrl Entered");
console.log("Setting Awake to " + ZMDataModel.getKeepAwake());
ZMDataModel.setAwake(ZMDataModel.getKeepAwake());
+
+ $interval.cancel(intervalHandle);
+ intervalHandle= $interval(function () {
+ loadNotifications();
+ // console.log ("Refreshing Image...");
+ }.bind(this), 1000);
+
+ loadNotifications();
});
$scope.$on('$ionicView.leave', function () {
diff --git a/www/js/app.js b/www/js/app.js
index 8f27141a..3cf72c73 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -28,7 +28,7 @@ angular.module('zmApp', [
largeHttpTimeout:60000,
logFile:'zmNinjaLog.txt',
authoremail:'pliablepixels+zmNinja@gmail.com',
- logFileMaxSize: 50000, // after this limit log gets reset
+ logFileMaxSize: 10000, // after this limit log gets reset
loginInterval:300000, //5m*60s*1000 - ZM auto login after 5 mins
loadingTimeout:15000,
safeMontageLimit:10,
@@ -53,6 +53,10 @@ angular.module('zmApp', [
})
+//------------------------------------------------------------------
+// I use this factory to share data between carousel and lazy load
+// carousel will not progress autoslide till imageLoading is 0 or -1
+//-------------------------------------------------------------------
.factory('imageLoadingDataShare', function () {
var imageLoading = 0; // 0 = not loading, 1 = loading, -1 = error;
return {
@@ -107,9 +111,9 @@ angular.module('zmApp', [
var loader = $compile('<div class="image-loader-container"><ion-spinner style="position:fixed;top:5%;left:5%" class="image-loader" icon="' + $attributes.imageSpinnerLoader + '"></ion-spinner></div>')($scope);
$element.after(loader);
}
- imageLoadingDataShare.set(1);
- loadImage();
- $attributes.$observe('imageSpinnerSrc', function(value){
+ imageLoadingDataShare.set(1);
+ loadImage();
+ $attributes.$observe('imageSpinnerSrc', function(value){
//console.log ("SOURCE CHANGED");
imageLoadingDataShare.set(1);
loadImage();
@@ -321,8 +325,8 @@ angular.module('zmApp', [
.run(function ($ionicPlatform, $ionicPopup, $rootScope, zm, $state, $stateParams, ZMDataModel, $cordovaSplashscreen, $http, $interval, zmAutoLogin, $fileLogger,$timeout, $ionicHistory, $window, $ionicSideMenuDelegate)
{
- $rootScope.zmGlobalCookie="";
- $rootScope.isEventFilterOn = false;
+ $rootScope.zmGlobalCookie="";
+ $rootScope.isEventFilterOn = false;
$rootScope.fromDate = "";
$rootScope.fromTime= "";
$rootScope.toDate = "";
@@ -333,8 +337,8 @@ angular.module('zmApp', [
ZMDataModel.init();
// for making sure we canuse $state.go with ng-click
// needed for views that use popovers
-$rootScope.$state = $state;
- $rootScope.$stateParams = $stateParams;
+ $rootScope.$state = $state;
+ $rootScope.$stateParams = $stateParams;
var loginData = ZMDataModel.getLogin();
@@ -348,8 +352,6 @@ $rootScope.$state = $state;
// This code takes care of trapping the Android back button
// and takes it to the menu.
-
-
$ionicPlatform.registerBackButtonAction(function(e) {
e.preventDefault();
if (!$ionicSideMenuDelegate.isOpenLeft()) {
@@ -361,9 +363,6 @@ $rootScope.$state = $state;
}, 1000);
-
-
-
// this works reliably on both Android and iOS. The "onorientation" seems to reverse w/h in Android. Go figure.
// http://stackoverflow.com/questions/1649086/detect-rotation-of-android-phone-in-the-browser-with-javascript
@@ -372,6 +371,10 @@ $rootScope.$state = $state;
$rootScope.devWidth = ((window.innerWidth > 0) ? window.innerWidth : screen.width);
$rootScope.devHeight = ((window.innerHeight > 0) ? window.innerHeight : screen.height);
console.log("********NEW Computed Dev Width & Height as" + $rootScope.devWidth + "*" + $rootScope.devHeight);
+
+
+
+
//ZMDataModel.zmLog("Device orientation change: "+$rootScope.devWidth + "*" + $rootScope.devHeight);
};
@@ -411,7 +414,7 @@ $rootScope.$state = $state;
$fileLogger.checkFile().then(function(resp) {
if (parseInt(resp.size) > zm.logFileMaxSize)
{
- console.log ("Deleting old log file as it exceeds 50K bytes");
+ console.log ("Deleting old log file as it exceeds " + zm.logFileMaxSize+" bytes");
$fileLogger.deleteLogfile().then(function()
{
console.log('Logfile deleted');
@@ -476,29 +479,10 @@ $rootScope.$state = $state;
$rootScope.rand = Math.floor((Math.random() * 100000) + 1);
//$scope.rand = Math.floor((Math.random() * 100000) + 1);
console.log("** generated Random of " + $rootScope.rand);
- //console.log ("*******************************CURRENT STATE: " + JSON.stringify($state.current));
- if ($state.current.url == "/timeline")
- {
- ZMDataModel.zmLog("Skipping state refresh for Timeline");
- }
- else
- {
- ZMDataModel.zmLog ("Reloading screen for state " + $state.current.url);
- $state.go($state.current, {}, {
- reload: true
- });
- }
- //$window.location.reload(true);
- //$route.reload();
-
- // This sort of solves the problem of inactive windows
- // if you switch the screen off and on
- // not ideal as reload removes the Modal and shows the view
- // but better than an inactive/unresponsive screen
- // FIXME: see if we can get the modal back
- $window.location.reload();
zmAutoLogin.stop(); //safety
zmAutoLogin.start();
+
+
}, false);
@@ -564,13 +548,14 @@ $rootScope.$state = $state;
templateUrl: "templates/help.html",
controller: 'zmApp.HelpCtrl',
})
- /*
+
.state('app', {
url: '/',
abstract: true,
templateUrl: 'index.html',
+ cache:false,
//controller: 'AppCtrl'
- })*/
+ })
.state('monitors', {
diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html
index b66a0655..d98138d0 100644
--- a/www/templates/events-modal.html
+++ b/www/templates/events-modal.html
@@ -1,6 +1,6 @@
<div ng-controller="ModalCtrl">
<!-- style="width: 90%; height: 90%; top: 5%; left: 5%; right: 5%; bottom: 5%;"-->
- <ion-modal-view cache="false" >
+ <ion-modal-view cache-view="false" >
<ion-content style="background-color:#444444" ng-cloak>
<ion-scroll has-bouncing=false min-zoom=1 zooming="true"
@@ -15,7 +15,7 @@
<li ng-repeat="slide in slides">
<img imageonload="finishedLoadingImage($index)"
- image-spinner-src="{{loginData.url}}/index.php?view=image&path={{relativePath}}{{slide.img}}"
+ image-spinner-src="{{loginData.url}}/index.php?view=image&&rand={{$root.rand}}&path={{relativePath}}{{slide.img}}"
image-spinner-loader="lines"
ng-class="{'zm-image-fit':imageFit==true, 'zm-image-crop':imageFit==false}"/>
diff --git a/www/templates/monitors-modal.html b/www/templates/monitors-modal.html
index 4e85234d..18556b10 100644
--- a/www/templates/monitors-modal.html
+++ b/www/templates/monitors-modal.html
@@ -3,7 +3,7 @@
<!--style="background-color:#444444;width: 90%; height: 90%; top: 5%; left: 5%; right: 5%; bottom: 5%;"-->
- <ion-modal-view cache="false" style="background-color:#444444" >
+ <ion-modal-view cache-view="false" style="background-color:#444444" >
<ion-content >
<ion-scroll has-bouncing=false min-zoom=1 zooming="true"
@@ -13,7 +13,7 @@
<div style="height: 100vh;">
<img imageonload="finishedLoadingImage()"
image-spinner-loader="lines"
- image-spinner-src="{{LoginData.streamingurl}}/cgi-bin/zms?mode=jpeg&amp;monitor={{monitorId}}&maxfps={{LoginData.maxFPS}}&buffer=1000&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{rand}}" ng-class="{'zm-image-fit':imageFit==true, 'zm-image-crop':imageFit==false}" on-swipe-left="onSwipeLeft(monitorId,-1)" on-swipe-right="onSwipeRight(monitorId,1)" />
+ image-spinner-src="{{LoginData.streamingurl}}/cgi-bin/zms?mode=jpeg&amp;monitor={{monitorId}}&maxfps={{LoginData.maxFPS}}&buffer=1000&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{$root.rand}}" ng-class="{'zm-image-fit':imageFit==true, 'zm-image-crop':imageFit==false}" on-swipe-left="onSwipeLeft(monitorId,-1)" on-swipe-right="onSwipeRight(monitorId,1)" />
</div>
</ion-scroll>
</ion-content>
diff --git a/www/templates/montage.html b/www/templates/montage.html
index 035debd4..259f6587 100644
--- a/www/templates/montage.html
+++ b/www/templates/montage.html
@@ -43,7 +43,7 @@
<article class="main">
<!-- back to ng-src. spinner was not updating when rand changes-->
<!-- FIXME: Scale is 50% hardcoded -->
- <img image-spinner-src="{{LoginData.streamingurl}}/cgi-bin/zms?mode=single&monitor={{monitor.Monitor.Id}}&maxfps={{LoginData.maxFPS}}&scale=50&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{randomval}}" width="{{((devWidth)/(7-monitorSize[$index]))}}px;"
+ <img image-spinner-src="{{LoginData.streamingurl}}/cgi-bin/zms?mode=single&monitor={{monitor.Monitor.Id}}&maxfps={{LoginData.maxFPS}}&scale=50&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{$root.rand}}" width="{{((devWidth)/(7-monitorSize[$index]))}}px;"
ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId)"
on-hold="onHold($index)"
on-release="onRelease($index)"
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-06 18:15:58 +0000