summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--www/css/style.css16
-rw-r--r--www/external/packery.pkgd.js42
-rw-r--r--www/js/DataModel.js8
-rw-r--r--www/js/MontageCtrl.js87
-rw-r--r--www/templates/montage.html15
5 files changed, 141 insertions, 27 deletions
diff --git a/www/css/style.css b/www/css/style.css
index fb2f6241..65b92df3 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -208,13 +208,13 @@ figcaption {
}
.normal-figcaption {
- background: #575656;
+ background: rgba(0,0,0,0.2);
color: #FFF;
position: absolute;
bottom: 0;
left: 0;
right: 0;
- opacity:0.7;
+
}
.alarmed-figcaption {
@@ -786,6 +786,11 @@ body { font-family: sans-serif; }
/* ---- grid ---- */
+.dragborder
+{
+ border:2px dotted #3498db;
+}
+
.grid-sizer,
.grid-item { width: 20%; }
.grid-item-20 { width: 20%; }
@@ -809,18 +814,15 @@ body { font-family: sans-serif; }
.grid-item img {
display: block;
max-width: 100%;
+
}
/* ---- .grid-item ---- */
-.grid-item:hover {
- border-color: hsla(0, 0%, 100%, 0.5);
- cursor: move;
-}
.grid-item.is-dragging,
.grid-item.is-positioning-post-drag {
- background: #C90;
+ background: #34495e;
z-index: 2;
}
diff --git a/www/external/packery.pkgd.js b/www/external/packery.pkgd.js
index c8353909..cd5b2a2c 100644
--- a/www/external/packery.pkgd.js
+++ b/www/external/packery.pkgd.js
@@ -2743,6 +2743,48 @@ Packery.Item = Item;
var proto = Packery.prototype;
+// get JSON-friendly data for items positions
+Packery.prototype.getShiftPositions = function( attrName ) {
+ attrName = attrName || 'id';
+ var _this = this;
+ return this.items.map( function( item ) {
+ return {
+ attr: item.element.getAttribute( attrName ),
+ x: item.rect.x / _this.packer.width
+ }
+ });
+};
+
+Packery.prototype.initShiftLayout = function( positions, attr ) {
+ if ( !positions ) {
+ // if no initial positions, run packery layout
+ this.layout();
+ return;
+ }
+ // parse string to JSON
+ if ( typeof positions == 'string' ) {
+ try {
+ positions = JSON.parse( positions );
+ } catch( error ) {
+ console.error( 'JSON parse error: ' + error );
+ this.layout();
+ return;
+ }
+ }
+
+ attr = attr || 'id'; // default to id attribute
+ this._resetLayout();
+ // set item order and horizontal position from saved positions
+ this.items = positions.map( function( itemPosition ) {
+ var selector = '[' + attr + '="' + itemPosition.attr + '"]'
+ var itemElem = this.element.querySelector( selector );
+ var item = this.getItem( itemElem );
+ item.rect.x = itemPosition.x * this.packer.width;
+ return item;
+ }, this );
+ this.shiftLayout();
+};
+
proto._create = function() {
// call super
Outlayer.prototype._create.call( this );
diff --git a/www/js/DataModel.js b/www/js/DataModel.js
index 814c87ff..5efede89 100644
--- a/www/js/DataModel.js
+++ b/www/js/DataModel.js
@@ -71,6 +71,7 @@ angular.module('zmApp.controllers')
'defaultPushSound': false,
'enableBlog':true,
'use24hr':false,
+ 'packeryPositions':''
};
@@ -285,6 +286,13 @@ angular.module('zmApp.controllers')
}
+ if (typeof loginData.packeryPositions == 'undefined')
+ {
+ zmDebug ("packeryPositions does not exist. Setting to empty");
+ loginData.packeryPositions = "";
+
+ }
+
if (typeof loginData.use24hr == 'undefined')
{
zmDebug ("use24hr does not exist. Setting to false");
diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js
index 051c189e..43a96e2d 100644
--- a/www/js/MontageCtrl.js
+++ b/www/js/MontageCtrl.js
@@ -4,7 +4,7 @@
/* global cordova,StatusBar,angular,console,ionic,Packery, Draggabilly, imagesLoaded */
-angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$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) {
+angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '$rootScope', 'ZMDataModel', 'message', '$ionicSideMenuDelegate', '$timeout', '$interval', '$ionicModal', '$ionicLoading', '$http', '$state', '$ionicPopup', '$stateParams', '$ionicHistory', '$ionicScrollDelegate', '$ionicPlatform', 'zm', '$ionicPopover', '$controller', 'imageLoadingDataShare', '$window', '$localstorage', function ($scope, $rootScope, ZMDataModel, message, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http, $state, $ionicPopup, $stateParams, $ionicHistory, $ionicScrollDelegate, $ionicPlatform, zm, $ionicPopover, $controller, imageLoadingDataShare, $window, $localstorage) {
$controller('zmApp.BaseController', {
$scope: $scope
@@ -43,6 +43,7 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
var draggies;
$scope.isDragabillyOn = false;
$scope.gridScale = "grid-item-20";
+ $scope.animateMonitor="";
$scope.changeScale = function()
{
@@ -123,25 +124,47 @@ function initPackery()
var progressCalled = false;
draggies = [];
+
+ var layouttype = true;
+ var ld = ZMDataModel.getLogin();
+
+
+ var positionsStr = ld.packeryPositions;
+ var positions={};
+
+ if (positionsStr == '')
+ {
+ ZMDataModel.zmLog ("Did NOT find a packery layout");
+ layouttype = true;
+ }
+ else
+ {
+ console.log ("POSITION STR IS " + positionsStr);
+ positions = JSON.parse(positionsStr);
+ ZMDataModel.zmLog ("found a packery layout");
+ layouttype = false;
+ }
var elem = angular.element(document.getElementById("mygrid"));
pckry = new Packery('.grid',
{
itemSelector: '.grid-item',
percentPosition: true,
- columnWidth: '.grid-sizer',
- initLayout: true,
+ columnWidth: '.grid-sizer',
+ gutter:0,
+ initLayout:layouttype
+
});
- console.log ("**** mygrid is " + JSON.stringify(elem));
+ //console.log ("**** mygrid is " + JSON.stringify(elem));
imagesLoaded(elem).on('progress', function() {
console.log ("******** SOME IMAGE LOADED");
progressCalled = true;
- pckry.layout();
+ if (layouttype) $timeout (function(){pckry.shiftLayout();},50);
});
imagesLoaded(elem).on('always', function() {
- console.log ("******** ALL IMAGE LOADED");
+ console.log ("******** ALL IMAGES LOADED");
if (!progressCalled)
{
@@ -156,8 +179,17 @@ function initPackery()
draggies.push(draggie);
draggie.disable();
});
-
+
pckry.on( 'dragItemPositioned', itemDragged );
+
+
+
+ if (!isEmpty(positions))
+ {
+ ZMDataModel.zmLog ("Arranging as per packery grid");
+ $timeout(function(){pckry.initShiftLayout(positions, 'data-item-id');},500);
+ //$grid.packery( 'initShiftLayout', initPositions, 'data-item-id' );
+ }
});
@@ -167,16 +199,27 @@ function initPackery()
pckry.getItemElements().forEach(function (itemElem) {
- //itemElem.attr('data-module-index', i);
- console.log (itemElem.attributes['data-item-id'].value);
+ console.log (itemElem.attributes['data-item-id'].value+" size "+itemElem.attributes['data-item-size'].value );
});
+ var positions = pckry.getShiftPositions('data-item-id');
+ console.log ("POSITIONS MAP " + JSON.stringify(positions));
+ var ld = ZMDataModel.getLogin();
+ ld.packeryPositions = JSON.stringify(positions);
+ ZMDataModel.setLogin(ld);
}
}
+ function isEmpty( obj )
+ {
+ for ( var prop in obj ) {
+ return false;
+ }
+ return true;
+}
// --------------------------------------------------------
@@ -471,7 +514,7 @@ function initPackery()
" and hidden order as " + hiddenOrder.toString());
$scope.modal.remove();
ZMDataModel.zmLog ("Reloading packery");
- $timeout (function(){pckry.reloadItems(); pckry.layout();},500);
+ $timeout (function(){pckry.reloadItems(); pckry.shiftLayout();},50);
};
$scope.cancelReorder = function () {
@@ -668,6 +711,7 @@ function initPackery()
ZMDataModel.zmDebug ("setting dragabilly to " + $scope.isDragabillyOn);
if ($scope.isDragabillyOn)
{
+ $scope.dragBorder="dragborder";
ZMDataModel.zmDebug ("Enabling drag for " + draggies.length + " items");
for (i=0; i < draggies.length; i++)
{
@@ -677,6 +721,7 @@ function initPackery()
}
else
{
+ $scope.dragBorder="";
ZMDataModel.zmDebug ("Disabling drag for " + draggies.length + " items");
for ( i=0; i < draggies.length; i++)
{
@@ -1073,13 +1118,27 @@ function initPackery()
//---------------------------------------------------------
$scope.sliderChanged = function () {
+
+
//pckry.destroy();
$scope.gridScale = "grid-item-" + ($scope.slider.monsize * 10).toString();
- console.log("**** CSS IS " + $scope.gridScale);
- setTimeout(function () {
- pckry.layout();
- });
+ //console.log("**** CSS IS " + $scope.gridScale);
+ $timeout(function () {
+ pckry.shiftLayout();
+ pckry.getItemElements().forEach(function (itemElem) {
+
+ console.log (itemElem.attributes['data-item-id'].value+" size "+itemElem.attributes['data-item-size'].value );
+
+
+ });
+ var positions = pckry.getShiftPositions('data-item-id');
+ console.log ("POSITIONS MAP " + JSON.stringify(positions));
+ var ld = ZMDataModel.getLogin();
+ ld.packeryPositions = JSON.stringify(positions);
+ ZMDataModel.setLogin(ld);
+
+ },50);
// pckry.destroy();
// $timeout ( function () {initPackery(); },500);
//pckry.reloadItems();
diff --git a/www/templates/montage.html b/www/templates/montage.html
index 7a6319c7..efeebec0 100644
--- a/www/templates/montage.html
+++ b/www/templates/montage.html
@@ -8,14 +8,17 @@
<ion-nav-buttons side="right">
- <button ng-class="packMontage?'button button-icon button-clear ion-android-more-vertical':'button button-icon button-clear ion-android-more-horizontal'" ng-click="dragToggle();">&nbsp;
+ <button class="button button-icon button-clear ion-arrow-move" ng-click="dragToggle();">&nbsp;
</button>
- <span class="rotate-button">
+ <!--<button ng-class="packMontage?'button button-icon button-clear ion-android-more-vertical':'button button-icon button-clear ion-android-more-horizontal'" ng-click="dragToggle();">&nbsp;
+ </button>-->
+
+ <!--<span class="rotate-button">
<button class="button button-icon button-clear ion-arrow-swap"
ng-click="changeScale();">
</button>
- </span>
+ </span>-->
<!--<span class="rotate-button">
<button class="button button-icon button-clear ion-arrow-swap"
@@ -46,15 +49,15 @@
<div class="grid" id="mygrid">
- <div class="grid-sizer {{gridScale}}"></div>
+ <div class="grid-sizer {{gridScale}} {{dragborder}}"></div>
<span ng-repeat="monitor in MontageMonitors|limitTo: monLimit" ng-if="monitor.Monitor.Function!='None' && monitor.Monitor.listDisplay!='noshow' && monitor.Monitor.Enabled !='0'">
- <div class="grid-item {{gridScale}}" data-item-id="{{monitor.Monitor.Id}}">
+ <div class="grid-item {{gridScale}} {{dragBorder}}" data-item-id="{{monitor.Monitor.Id}}" data-item-size="{{gridScale}}" >
<figure>
<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}}" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId, monitor.Monitor.connKey)" image-spinner-loader="lines" />
+ <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}}" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId, monitor.Monitor.connKey)" image-spinner-loader="lines" />
</div>
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-06 21:50:05 +0000