From 7556b9a4fd0feeada9ebfb531e0ac6c7eb2a169f Mon Sep 17 00:00:00 2001 From: Pliable Pixels Date: Fri, 3 Nov 2017 14:54:22 -0400 Subject: [PATCH] lets see what happens #553 --- www/js/MontageCtrl.js | 3202 ++++++++++++++++++------------------ www/js/app.js | 91 +- www/templates/montage.html | 5 +- 3 files changed, 1686 insertions(+), 1612 deletions(-) diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js index 92bec7953..46b8f83e5 100644 --- a/www/js/MontageCtrl.js +++ b/www/js/MontageCtrl.js @@ -4,2021 +4,2087 @@ /* global cordova,StatusBar,angular,console,ionic,Packery, Draggabilly, imagesLoaded, ConnectSDK, moment */ angular.module('zmApp.controllers') - .controller('zmApp.MontageCtrl', ['$scope', '$rootScope', 'NVRDataModel', 'message', '$ionicSideMenuDelegate', '$timeout', '$interval', '$ionicModal', '$ionicLoading', '$http', '$state', '$ionicPopup', '$stateParams', '$ionicHistory', '$ionicScrollDelegate', '$ionicPlatform', 'zm', '$ionicPopover', '$controller', 'imageLoadingDataShare', '$window', '$localstorage', '$translate', 'SecuredPopups', function($scope, $rootScope, NVRDataModel, message, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http, $state, $ionicPopup, $stateParams, $ionicHistory, $ionicScrollDelegate, $ionicPlatform, zm, $ionicPopover, $controller, imageLoadingDataShare, $window, $localstorage, $translate, SecuredPopups) +.controller('zmApp.MontageCtrl', ['$scope', '$rootScope', 'NVRDataModel', 'message', '$ionicSideMenuDelegate', '$timeout', '$interval', '$ionicModal', '$ionicLoading', '$http', '$state', '$ionicPopup', '$stateParams', '$ionicHistory', '$ionicScrollDelegate', '$ionicPlatform', 'zm', '$ionicPopover', '$controller', 'imageLoadingDataShare', '$window', '$localstorage', '$translate', 'SecuredPopups', function($scope, $rootScope, NVRDataModel, message, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http, $state, $ionicPopup, $stateParams, $ionicHistory, $ionicScrollDelegate, $ionicPlatform, zm, $ionicPopover, $controller, imageLoadingDataShare, $window, $localstorage, $translate, SecuredPopups) +{ + + //--------------------------------------------------------------------- + // Controller main + //--------------------------------------------------------------------- + + var intervalHandleMontage; // image re-load handler + var intervalHandleAlarmStatus; // status of each alarm state + var intervalHandleMontageCycle; + var intervalHandleReloadPage; + + var gridcontainer; + var pckry, draggie; + var draggies; + var loginData; + var timestamp; + var sizeInProgress; + var modalIntervalHandle; + var ld; + var refreshSec; + var reloadPage = zm.forceMontageReloadDelay; + + $rootScope.$on("auth-success", function () { + NVRDataModel.debug("REAUTH"); + console.log ("RETAUTH"); + NVRDataModel.stopNetwork(); + }); + + + //-------------------------------------------------------------------------------------- + // Handles bandwidth change, if required + // + //-------------------------------------------------------------------------------------- + + $rootScope.$on("bandwidth-change", function(e, data) { + // not called for offline, I'm only interested in BW switches + NVRDataModel.debug("Got network change:" + data); + var ds; + if (data == 'lowbw') + { + ds = $translate.instant('kLowBWDisplay'); + } + else + { + ds = $translate.instant('kHighBWDisplay'); + } + NVRDataModel.displayBanner('net', [ds]); + var ld = NVRDataModel.getLogin(); + refreshSec = (NVRDataModel.getBandwidth() == 'lowbw') ? ld.refreshSecLowBW : ld.refreshSec; - //--------------------------------------------------------------------- - // Controller main - //--------------------------------------------------------------------- - - var intervalHandleMontage; // image re-load handler - var intervalHandleAlarmStatus; // status of each alarm state - var intervalHandleMontageCycle; - - var gridcontainer; - var pckry, draggie; - var draggies; - var loginData; - var timestamp; - var sizeInProgress; - var modalIntervalHandle; - var ld; - var refreshSec; - - $rootScope.$on("auth-success", function () { - NVRDataModel.debug("REAUTH"); - console.log ("RETAUTH"); - NVRDataModel.stopNetwork(); - }); + $interval.cancel(intervalHandleMontage); + $interval.cancel(intervalHandleMontageCycle); + $interval.cancel(intervalHandleReloadPage); + + + intervalHandleMontage = $interval(function() + { + loadNotifications(); + }.bind(this), refreshSec * 1000); + + intervalHandleMontageCycle = $interval(function() + { + cycleMontageProfiles(); + }.bind(this), NVRDataModel.getLogin().cycleMontageInterval* 1000); + + intervalHandleReloadPage = $interval(function() + { + forceReloadPage(); + }.bind(this), reloadPage * 1000); + + if (NVRDataModel.getBandwidth() == 'lowbw') + { + NVRDataModel.debug("Enabling low bandwidth parameters"); + $scope.LoginData.montageQuality = zm.montageQualityLowBW; + $scope.LoginData.singleImageQuality = zm.eventSingleImageQualityLowBW; + $scope.LoginData.montageHistoryQuality = zm.montageQualityLowBW; + } + }); - //-------------------------------------------------------------------------------------- - // Handles bandwidth change, if required - // - //-------------------------------------------------------------------------------------- + // -------------------------------------------------------- + // Handling of back button in case modal is open should + // close the modal + // -------------------------------------------------------- - $rootScope.$on("bandwidth-change", function(e, data) + $ionicPlatform.registerBackButtonAction(function(e) + { + e.preventDefault(); + if ($scope.modal != undefined && $scope.modal.isShown()) + { + // switch off awake, as liveview is finished + NVRDataModel.debug("Modal is open, closing it"); + NVRDataModel.setAwake(false); + $scope.isModalActive = false; + cleanupOnClose(); + } + else { - // not called for offline, I'm only interested in BW switches - NVRDataModel.debug("Got network change:" + data); - var ds; - if (data == 'lowbw') + NVRDataModel.debug("Modal is closed, so toggling or exiting"); + if (!$ionicSideMenuDelegate.isOpenLeft()) { - ds = $translate.instant('kLowBWDisplay'); + $ionicSideMenuDelegate.toggleLeft(); + } else { - ds = $translate.instant('kHighBWDisplay'); + navigator.app.exitApp(); } - NVRDataModel.displayBanner('net', [ds]); - var ld = NVRDataModel.getLogin(); - refreshSec = (NVRDataModel.getBandwidth() == 'lowbw') ? ld.refreshSecLowBW : ld.refreshSec; - - $interval.cancel(intervalHandleMontage); - $interval.cancel(intervalHandleMontageCycle); + } - intervalHandleMontage = $interval(function() - { - loadNotifications(); - }.bind(this), refreshSec * 1000); + }, 1000); - intervalHandleMontageCycle = $interval(function() - { - cycleMontageProfiles(); - }.bind(this), NVRDataModel.getLogin().cycleMontageInterval* 1000); + /*$scope.toggleHide = function(mon) + { + - if (NVRDataModel.getBandwidth() == 'lowbw') - { - NVRDataModel.debug("Enabling low bandwidth parameters"); - $scope.LoginData.montageQuality = zm.montageQualityLowBW; - $scope.LoginData.singleImageQuality = zm.eventSingleImageQualityLowBW; - $scope.LoginData.montageHistoryQuality = zm.montageQualityLowBW; + if (mon.Monitor.listDisplay == 'noshow') + mon.Monitor.listDisplay = 'show'; + else + mon.Monitor.listDisplay = 'noshow'; - } - }); + + + };*/ - // -------------------------------------------------------- - // Handling of back button in case modal is open should - // close the modal - // -------------------------------------------------------- - $ionicPlatform.registerBackButtonAction(function(e) + function forceReloadPage() { + if ($scope.isDragabillyOn) { - e.preventDefault(); - if ($scope.modal != undefined && $scope.modal.isShown()) - { - // switch off awake, as liveview is finished - NVRDataModel.debug("Modal is open, closing it"); - NVRDataModel.setAwake(false); - $scope.isModalActive = false; - cleanupOnClose(); - } - else - { - NVRDataModel.debug("Modal is closed, so toggling or exiting"); - if (!$ionicSideMenuDelegate.isOpenLeft()) - { - $ionicSideMenuDelegate.toggleLeft(); + NVRDataModel.debug ("not cycling, edit in progress"); + return; - } - else - { - navigator.app.exitApp(); - } + } - } + NVRDataModel.log ("Reloading view to keep memory in check..."); + $window.location.reload(); + /*$ionicHistory.nextViewOptions( + { + disableAnimate: true, + disableBack: true + }); + $state.go("app.montage", + { + minimal: $scope.minimal, + isRefresh: true + });*/ + } - }, 1000); + // called by afterEnter to load Packery + function initPackery() + { - /*$scope.toggleHide = function(mon) + $ionicLoading.show( { - - - if (mon.Monitor.listDisplay == 'noshow') - mon.Monitor.listDisplay = 'show'; - else - mon.Monitor.listDisplay = 'noshow'; + template: $translate.instant('kArrangingImages'), + noBackdrop: true, + duration: zm.loadingTimeout + }); - - - };*/ + var progressCalled = false; + draggies = []; + var layouttype = true; + var ld = NVRDataModel.getLogin(); - // called by afterEnter to load Packery - function initPackery() - { + var positionsStr = ld.packeryPositions; + var positions = {}; - $ionicLoading.show( - { - template: $translate.instant('kArrangingImages'), - noBackdrop: true, - duration: zm.loadingTimeout - }); + if (positionsStr == '' || positionsStr == undefined) + { + NVRDataModel.log("Did NOT find a packery layout"); + layouttype = true; + } + else + { - var progressCalled = false; - draggies = []; - var layouttype = true; - var ld = NVRDataModel.getLogin(); + //console.log ("POSITION STR IS " + positionsStr); + positions = JSON.parse(positionsStr); + NVRDataModel.log("found a packery layout"); - var positionsStr = ld.packeryPositions; - var positions = {}; + layouttype = false; + } - if (positionsStr == '' || positionsStr == undefined) - { - NVRDataModel.log("Did NOT find a packery layout"); - layouttype = true; - } - else - { + var cnt = 0; + $scope.MontageMonitors.forEach(function(elem) + { + if ((elem.Monitor.Enabled != '0') && (elem.Monitor.Function != 'None') ) + cnt++; + }); - //console.log ("POSITION STR IS " + positionsStr); - positions = JSON.parse(positionsStr); - NVRDataModel.log("found a packery layout"); + NVRDataModel.log("Monitors that are active and not DOM hidden: " + cnt + " while grid has " + positions.length); - layouttype = false; - } + if (cnt > NVRDataModel.getLogin().maxMontage) + { + cnt = NVRDataModel.getLogin().maxMontage; + NVRDataModel.log("restricting monitor count to " + cnt + " due to max-montage setting"); + } - var cnt = 0; - $scope.MontageMonitors.forEach(function(elem) - { - if ((elem.Monitor.Enabled != '0') && (elem.Monitor.Function != 'None') ) - cnt++; - }); + if (cnt != positions.length) + { - NVRDataModel.log("Monitors that are active and not DOM hidden: " + cnt + " while grid has " + positions.length); + NVRDataModel.log("Whoops!! Monitors have changed. I'm resetting layouts, sorry!"); + layouttype = true; + positions = {}; + } - if (cnt > NVRDataModel.getLogin().maxMontage) - { - cnt = NVRDataModel.getLogin().maxMontage; - NVRDataModel.log("restricting monitor count to " + cnt + " due to max-montage setting"); - } + var elem = angular.element(document.getElementById("mygrid")); - if (cnt != positions.length) - { + //console.log ("**** mygrid is " + JSON.stringify(elem)); - NVRDataModel.log("Whoops!! Monitors have changed. I'm resetting layouts, sorry!"); - layouttype = true; - positions = {}; - } + pckry = new Packery('.grid', + { + itemSelector: '.grid-item', + percentPosition: true, + columnWidth: '.grid-sizer', + gutter: 0, + initLayout: layouttype, + shiftPercentResize: true - var elem = angular.element(document.getElementById("mygrid")); + }); - //console.log ("**** mygrid is " + JSON.stringify(elem)); + imagesLoaded(elem).on('progress', function(instance, img) + { - pckry = new Packery('.grid', - { - itemSelector: '.grid-item', - percentPosition: true, - columnWidth: '.grid-sizer', - gutter: 0, - initLayout: layouttype, - shiftPercentResize: true + var result = img.isLoaded ? 'loaded' : 'broken'; + NVRDataModel.debug('~~loaded image is ' + result + ' for ' + img.img.src); - }); + // lay out every image if a pre-arranged position has not been found - imagesLoaded(elem).on('progress', function(instance, img) + $timeout(function() { + if (layouttype) pckry.layout(); + }, 100); - var result = img.isLoaded ? 'loaded' : 'broken'; - NVRDataModel.debug('~~loaded image is ' + result + ' for ' + img.img.src); + progressCalled = true; - // lay out every image if a pre-arranged position has not been found + // if (layouttype) $timeout (function(){layout(pckry);},100); + }); - $timeout(function() - { - if (layouttype) pckry.layout(); - }, 100); + imagesLoaded(elem).on('always', function() + { + //console.log ("******** ALL IMAGES LOADED"); + // $scope.$digest(); + NVRDataModel.debug("All images loaded"); - progressCalled = true; + $scope.areImagesLoading = false; - // if (layouttype) $timeout (function(){layout(pckry);},100); - }); + $ionicLoading.hide(); - imagesLoaded(elem).on('always', function() + if (!progressCalled) { - //console.log ("******** ALL IMAGES LOADED"); - // $scope.$digest(); - NVRDataModel.debug("All images loaded"); - - $scope.areImagesLoading = false; + NVRDataModel.log("*** PROGRESS WAS NOT CALLED"); + // pckry.reloadItems(); + } - $ionicLoading.hide(); + $timeout(function() + { - if (!progressCalled) + pckry.getItemElements().forEach(function(itemElem) { - NVRDataModel.log("*** PROGRESS WAS NOT CALLED"); - // pckry.reloadItems(); - } - $timeout(function() - { + draggie = new Draggabilly(itemElem); + pckry.bindDraggabillyEvents(draggie); + draggies.push(draggie); + draggie.disable(); + draggie.unbindHandles(); + }); - pckry.getItemElements().forEach(function(itemElem) - { + pckry.on('dragItemPositioned', itemDragged); - draggie = new Draggabilly(itemElem); - pckry.bindDraggabillyEvents(draggie); - draggies.push(draggie); - draggie.disable(); - draggie.unbindHandles(); - }); + if (!isEmpty(positions)) + { + NVRDataModel.log("Arranging as per packery grid"); - pckry.on('dragItemPositioned', itemDragged); - if (!isEmpty(positions)) + for (var i = 0; i < $scope.MontageMonitors.length; i++) { - NVRDataModel.log("Arranging as per packery grid"); - - - for (var i = 0; i < $scope.MontageMonitors.length; i++) + for (var j = 0; j < positions.length; j++) { - for (var j = 0; j < positions.length; j++) + if ($scope.MontageMonitors[i].Monitor.Id == positions[j].attr) { - if ($scope.MontageMonitors[i].Monitor.Id == positions[j].attr) - { - if (isNaN(positions[j].size)) positions[j].size=20; - $scope.MontageMonitors[i].Monitor.gridScale = positions[j].size; - $scope.MontageMonitors[i].Monitor.listDisplay = positions[j].display; - NVRDataModel.debug("Setting monitor ID: " + $scope.MontageMonitors[i].Monitor.Id + " to size: " + positions[j].size + " and display:" + positions[j].display); - } - //console.log ("Index:"+positions[j].attr+ " with size: " + positions[j].size); + if (isNaN(positions[j].size)) positions[j].size=20; + $scope.MontageMonitors[i].Monitor.gridScale = positions[j].size; + $scope.MontageMonitors[i].Monitor.listDisplay = positions[j].display; + NVRDataModel.debug("Setting monitor ID: " + $scope.MontageMonitors[i].Monitor.Id + " to size: " + positions[j].size + " and display:" + positions[j].display); } + //console.log ("Index:"+positions[j].attr+ " with size: " + positions[j].size); } + } - NVRDataModel.debug("All images loaded, doing image layout"); + NVRDataModel.debug("All images loaded, doing image layout"); - } + } + $timeout(function() + { + //NVRDataModel.log("Force calling resize"); + ///pckry.reloadItems(); + ///positions is defined only if layouttype was false + console.log (">>> Positions is "+ JSON.stringify(positions)); + if (!layouttype) pckry.initShiftLayout(positions, "data-item-id"); + // now do a jiggle $timeout(function() { - //NVRDataModel.log("Force calling resize"); - ///pckry.reloadItems(); - ///positions is defined only if layouttype was false - console.log (">>> Positions is "+ JSON.stringify(positions)); - if (!layouttype) pckry.initShiftLayout(positions, "data-item-id"); - // now do a jiggle - $timeout(function() - { - NVRDataModel.debug("doing the jiggle and dance..."); - pckry.resize(true); - }, 300); - - }, 100); + NVRDataModel.debug("doing the jiggle and dance..."); + pckry.resize(true); + }, 300); - //pckry.onresize(); + }, 100); - }, 20); + //pckry.onresize(); - }); + }, 20); - function itemDragged(item) - { - NVRDataModel.debug("drag complete"); - $timeout (function(){pckry.shiftLayout();},20); + }); - pckry.once ('layoutComplete', function() { + function itemDragged(item) + { + NVRDataModel.debug("drag complete"); + $timeout (function(){pckry.shiftLayout();},20); - var positions = pckry.getShiftPositions('data-item-id'); - //console.log ("POSITIONS MAP " + JSON.stringify(positions)); - var ld = NVRDataModel.getLogin(); - ld.packeryPositions = JSON.stringify(positions); - console.log ("Saving " + ld.packeryPositions); - // console.log ("FULL OBJECT "+ JSON.stringify(ld)); - ld.currentMontageProfile = ""; - $scope.currentProfileName = $translate.instant ('kMontage'); - NVRDataModel.setLogin(ld); - NVRDataModel.debug("saved new positions"); - }); + pckry.once ('layoutComplete', function() { - //pckry.getItemElements().forEach(function (itemElem) { + var positions = pckry.getShiftPositions('data-item-id'); + //console.log ("POSITIONS MAP " + JSON.stringify(positions)); + var ld = NVRDataModel.getLogin(); + ld.packeryPositions = JSON.stringify(positions); + console.log ("Saving " + ld.packeryPositions); + // console.log ("FULL OBJECT "+ JSON.stringify(ld)); + ld.currentMontageProfile = ""; + $scope.currentProfileName = $translate.instant ('kMontage'); + NVRDataModel.setLogin(ld); + NVRDataModel.debug("saved new positions"); + }); - //console.log (itemElem.attributes['data-item-id'].value+" size "+itemElem.attributes['data-item-size'].value ); - // }); + //pckry.getItemElements().forEach(function (itemElem) { - - } + //console.log (itemElem.attributes['data-item-id'].value+" size "+itemElem.attributes['data-item-size'].value ); + // }); + } - function isEmpty(obj) + } + + function isEmpty(obj) + { + for (var prop in obj) { - for (var prop in obj) - { - return false; - } - return true; + return false; } + return true; + } - //----------------------------------------------------------------------- - // color for monitor state in montage - //----------------------------------------------------------------------- + //----------------------------------------------------------------------- + // color for monitor state in montage + //----------------------------------------------------------------------- - $scope.stateColor = function() + $scope.stateColor = function() + { + //console.log ("***MONSTATUS**"+$scope.monStatus+"**"); + var attr = ""; + switch ($scope.monStatus) { - //console.log ("***MONSTATUS**"+$scope.monStatus+"**"); - var attr = ""; - switch ($scope.monStatus) - { - case "": - attr = "color:rgba(0, 0, 0, 0)"; - break; - case "idle": - attr = "color:rgba(0, 0, 0, 0)"; - break; - case "pre-alarm": - attr = "color:#e67e22"; - break; - case "alarmed": - attr = "color:#D91E18"; - break; - case "alert": - attr = "color:#e67e22"; - break; - case "record": - attr = "color:#26A65B"; - break; - } + case "": + attr = "color:rgba(0, 0, 0, 0)"; + break; + case "idle": + attr = "color:rgba(0, 0, 0, 0)"; + break; + case "pre-alarm": + attr = "color:#e67e22"; + break; + case "alarmed": + attr = "color:#D91E18"; + break; + case "alert": + attr = "color:#e67e22"; + break; + case "record": + attr = "color:#26A65B"; + break; + } - return attr; - }; + return attr; + }; - function findNext (key,obj) - { + function findNext (key,obj) + { - console.log (" key is: "+ key); - console.log ("array is " + JSON.stringify (obj)); - var keys = Object.keys(obj); + console.log (" key is: "+ key); + console.log ("array is " + JSON.stringify (obj)); + var keys = Object.keys(obj); - var len = keys.length; - var curindex = keys.indexOf(key); - var modulus = (curindex + 1) % len; + var len = keys.length; + var curindex = keys.indexOf(key); + var modulus = (curindex + 1) % len; - console.log ("*********** len="+len+" curr="+curindex+" next="+modulus); + console.log ("*********** len="+len+" curr="+curindex+" next="+modulus); - //console.log ("Keys array "+ JSON.stringify(keys)); + //console.log ("Keys array "+ JSON.stringify(keys)); - //console.log ("Current index: "+ keys.indexOf(key) ); - //console.log ("returning index of " + (keys.indexOf(key) + 1) % (keys.length)); - // console.log ("keys length is "+ keys.length); - return keys[modulus]; + //console.log ("Current index: "+ keys.indexOf(key) ); + //console.log ("returning index of " + (keys.indexOf(key) + 1) % (keys.length)); + // console.log ("keys length is "+ keys.length); + return keys[modulus]; - /* var size = Object.keys(obj).length; - var i; - for (i=0; i