summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--www/css/style.css7
-rw-r--r--www/external/packery.pkgd.js1
-rw-r--r--www/js/DataModel.js11
-rw-r--r--www/js/MonitorModalCtrl.js2
-rw-r--r--www/js/MontageCtrl.js84
-rw-r--r--www/js/app.js17
-rw-r--r--www/templates/montage.html12
7 files changed, 122 insertions, 12 deletions
diff --git a/www/css/style.css b/www/css/style.css
index 65b92df3..dc5b4de5 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -791,7 +791,12 @@ body { font-family: sans-serif; }
border:2px dotted #3498db;
}
-.grid-sizer,
+.dragborder-selected
+{
+ border:4px solid #e74c3c;
+}
+
+.grid-sizer {width:10%; }
.grid-item { width: 20%; }
.grid-item-20 { width: 20%; }
.grid-item-30 { width: 30%; }
diff --git a/www/external/packery.pkgd.js b/www/external/packery.pkgd.js
index cd5b2a2c..c63d46ab 100644
--- a/www/external/packery.pkgd.js
+++ b/www/external/packery.pkgd.js
@@ -2750,6 +2750,7 @@ Packery.prototype.getShiftPositions = function( attrName ) {
return this.items.map( function( item ) {
return {
attr: item.element.getAttribute( attrName ),
+ size: item.element.getAttribute ("data-item-size"),
x: item.rect.x / _this.packer.width
}
});
diff --git a/www/js/DataModel.js b/www/js/DataModel.js
index 5efede89..b68b478e 100644
--- a/www/js/DataModel.js
+++ b/www/js/DataModel.js
@@ -71,7 +71,8 @@ angular.module('zmApp.controllers')
'defaultPushSound': false,
'enableBlog':true,
'use24hr':false,
- 'packeryPositions':''
+ 'packeryPositions':'',
+ 'packerySizes':'',
};
@@ -293,6 +294,14 @@ angular.module('zmApp.controllers')
}
+
+ if (typeof loginData.packerySizes == 'undefined')
+ {
+ zmDebug ("packerySizes does not exist. Setting to empty");
+ loginData.packerySizes = "";
+
+ }
+
if (typeof loginData.use24hr == 'undefined')
{
zmDebug ("use24hr does not exist. Setting to false");
diff --git a/www/js/MonitorModalCtrl.js b/www/js/MonitorModalCtrl.js
index 7a3841eb..6b4d7b42 100644
--- a/www/js/MonitorModalCtrl.js
+++ b/www/js/MonitorModalCtrl.js
@@ -1641,7 +1641,7 @@ angular.module('zmApp.controllers').controller('MonitorModalCtrl', ['$scope', '$
console.log ("************* GENERATED CONNKEY " + $scope.connKey);
$scope.currentFrame = 1;
console.log ("CURRENT EVENT " + JSON.stringify($scope.currentEvent));
- $scope.currentEventDuration = parseFloat($scope.currentEvent.Event.Length);
+ //$scope.currentEventDuration = parseFloat($scope.currentEvent.Event.Length);
//console.log ($scope.event.Event.Frames);
if (currentEvent && currentEvent.Event)
prepareModalEvent(currentEvent.Event.Id);
diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js
index 43a96e2d..ab9a73e3 100644
--- a/www/js/MontageCtrl.js
+++ b/www/js/MontageCtrl.js
@@ -31,6 +31,8 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
$scope.slider.monsize = ZMDataModel.getMontageSize();
+
+ var oldSliderVal = $scope.slider.monsize;
$scope.revMonSize = 11 - parseInt($scope.slider.monsize);
// The difference between old and original is this:
@@ -108,6 +110,13 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
$scope.MontageMonitors = ZMDataModel.applyMontageMonitorPrefs (message, 1)[0];
+ for (i=0; i < $scope.MontageMonitors.length; i++)
+ {
+ $scope.MontageMonitors[i].Monitor.gridScale="20";
+ $scope.MontageMonitors[i].Monitor.selectStyle="";
+
+ }
+
var loginData = ZMDataModel.getLogin();
$scope.packMontage = loginData.packMontage;
@@ -160,7 +169,7 @@ function initPackery()
imagesLoaded(elem).on('progress', function() {
console.log ("******** SOME IMAGE LOADED");
progressCalled = true;
- if (layouttype) $timeout (function(){pckry.shiftLayout();},50);
+ if (layouttype) $timeout (function(){pckry.layout();},50);
});
imagesLoaded(elem).on('always', function() {
@@ -514,7 +523,7 @@ function initPackery()
" and hidden order as " + hiddenOrder.toString());
$scope.modal.remove();
ZMDataModel.zmLog ("Reloading packery");
- $timeout (function(){pckry.reloadItems(); pckry.shiftLayout();},50);
+ $timeout (function(){pckry.reloadItems(); pckry.layout();},50);
};
$scope.cancelReorder = function () {
@@ -694,6 +703,24 @@ function initPackery()
// console.log("dragging");
};
+ $scope.noop = function()
+ {
+ console.log ("Ignoring tap, drag on");
+ };
+
+ $scope.toggleSelectItem = function(ndx)
+ {
+
+ if ($scope.MontageMonitors[ndx].Monitor.selectStyle !== "undefined" && $scope.MontageMonitors[ndx].Monitor.selectStyle=="dragborder-selected")
+ {
+ $scope.MontageMonitors[ndx].Monitor.selectStyle="";
+ }
+ else
+ {
+ $scope.MontageMonitors[ndx].Monitor.selectStyle="dragborder-selected";
+ }
+ console.log ("Switched value to " + $scope.MontageMonitors[ndx].Monitor.selectStyle);
+ };
$scope.onDropComplete = function (index, obj, event) {
// console.log("dragged");
@@ -717,6 +744,7 @@ function initPackery()
{
draggies[i].enable();
}
+
}
else
@@ -727,6 +755,10 @@ function initPackery()
{
draggies[i].disable();
}
+ for (i=0; i < $scope.MontageMonitors.length; i++)
+ {
+ $scope.MontageMonitors[i].Monitor.selectStyle="";
+ }
}
};
@@ -1109,6 +1141,18 @@ function initPackery()
processSliderChanged($scope.slider.monsize);
};
+
+ $scope.resetSizes = function()
+ {
+ for (var i=0; i< $scope.MontageMonitors.length; i++)
+ {
+ $scope.MontageMonitors[i].Monitor.gridScale="20";
+ }
+ $timeout (function(){pckry.layout();},50);
+ $scope.slider.monsize = 2;
+
+ };
+
//---------------------------------------------------------
// slider is tied to the view slider for montage
@@ -1119,13 +1163,43 @@ function initPackery()
$scope.sliderChanged = function () {
+ if (oldSliderVal == $scope.slider.monsize) return;
-
+ var dirn = (oldSliderVal > $scope.slider.monsize) ? -1:1;
//pckry.destroy();
- $scope.gridScale = "grid-item-" + ($scope.slider.monsize * 10).toString();
+ //$scope.gridScale = "grid-item-" + ($scope.slider.monsize * 10).toString();
+
+
+
+ for (var i=0; i< $scope.MontageMonitors.length; i++)
+ {
+ var curVal = parseInt($scope.MontageMonitors[i].Monitor.gridScale);
+ curVal = curVal + (10 * dirn);
+ if (curVal < 20) curVal=20;
+ if (curVal >100) curVal = 100;
+ console.log ("For Index: " + i + " From: " + $scope.MontageMonitors[i].Monitor.gridScale + " To: " + curVal);
+
+ if ($scope.isDragabillyOn)
+ {
+ // only do this for selected monitors
+ if ($scope.MontageMonitors[i].Monitor.selectStyle=="dragborder-selected")
+ {
+
+ $scope.MontageMonitors[i].Monitor.gridScale= curVal;
+ }
+ }
+ else
+ {
+ $scope.MontageMonitors[i].Monitor.gridScale= curVal;
+
+ }
+ oldSliderVal = $scope.slider.monsize;
+ }
+
+
//console.log("**** CSS IS " + $scope.gridScale);
$timeout(function () {
- pckry.shiftLayout();
+ pckry.layout();
pckry.getItemElements().forEach(function (itemElem) {
console.log (itemElem.attributes['data-item-id'].value+" size "+itemElem.attributes['data-item-size'].value );
diff --git a/www/js/app.js b/www/js/app.js
index 51922d6a..f7bf544b 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -151,6 +151,23 @@ angular.module('zmApp', [
})
+.directive('detectGestures', function($ionicGesture) {
+ return {
+ restrict : 'A',
+
+ link : function(scope, elem, attrs) {
+ var gestureType = attrs.gestureType;
+
+ switch(gestureType) {
+ case 'pinchin':
+ $ionicGesture.on('pinchin', scope.reportEvent, elem);
+ break;
+ }
+
+ }
+ };
+})
+
.directive('tooltip', function () {
return {
restrict: 'C',
diff --git a/www/templates/montage.html b/www/templates/montage.html
index efeebec0..60b9321a 100644
--- a/www/templates/montage.html
+++ b/www/templates/montage.html
@@ -11,6 +11,10 @@
<button class="button button-icon button-clear ion-arrow-move" ng-click="dragToggle();">&nbsp;
</button>
+ <button class="button button-icon button-clear ion-loop" ng-click="resetSizes();">&nbsp;
+ </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>-->
@@ -49,20 +53,20 @@
<div class="grid" id="mygrid">
- <div class="grid-sizer {{gridScale}} {{dragborder}}"></div>
+ <div class="grid-sizer grid-item-10"></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}} {{dragBorder}}" data-item-id="{{monitor.Monitor.Id}}" data-item-size="{{gridScale}}" >
+ <div class="grid-item grid-item-{{monitor.Monitor.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 class="{{monitor.Monitor.selectStyle}}" 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="!isDragabillyOn?openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId, monitor.Monitor.connKey):toggleSelectItem($index);" image-spinner-loader="lines" />
</div>
<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="!isDragabillyOn?openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId, monitor.Monitor.connKey):toggleSelectItem($index);" image-spinner-loader="lines" />
</div>
</div>
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-06 22:10:53 +0000