summaryrefslogtreecommitdiff
path: root/www
diff options
context:
space:
mode:
Diffstat (limited to 'www')
-rw-r--r--www/css/style.css447
-rwxr-xr-xwww/js/DataModel.js8
-rw-r--r--www/js/DevOptionsCtrl.js14
-rw-r--r--www/js/MontageCtrl.js19
-rw-r--r--www/lang/locale-en.json1
-rw-r--r--www/templates/devoptions.html8
6 files changed, 427 insertions, 70 deletions
diff --git a/www/css/style.css b/www/css/style.css
index 39cf95b7..e0d21763 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -1048,96 +1048,417 @@ videogular div.event-time {
}
.grid-sizer {
- width: 5%;
+ width: 1%;
}
.grid-item {
- width: 20%;
+ width: 1%;
}
-.grid-item-5 {
+.grid-item-1 {
+ width: 1%;
+ }
+
+ .grid-item-2 {
+ width: 2%;
+ }
+
+ .grid-item-3 {
+ width: 3%;
+ }
+
+ .grid-item-4 {
+ width: 4%;
+ }
+
+ .grid-item-5 {
width: 5%;
-}
-.grid-item-10 {
+ }
+
+ .grid-item-6 {
+ width: 6%;
+ }
+
+ .grid-item-7 {
+ width: 7%;
+ }
+
+ .grid-item-8 {
+ width: 8%;
+ }
+
+ .grid-item-9 {
+ width: 9%;
+ }
+
+ .grid-item-10 {
width: 10%;
-}
-
-.grid-item-15 {
+ }
+
+ .grid-item-11 {
+ width: 11%;
+ }
+
+ .grid-item-12 {
+ width: 12%;
+ }
+
+ .grid-item-13 {
+ width: 13%;
+ }
+
+ .grid-item-14 {
+ width: 14%;
+ }
+
+ .grid-item-15 {
width: 15%;
-}
-
-
-.grid-item-20 {
+ }
+
+ .grid-item-16 {
+ width: 16%;
+ }
+
+ .grid-item-17 {
+ width: 17%;
+ }
+
+ .grid-item-18 {
+ width: 18%;
+ }
+
+ .grid-item-19 {
+ width: 19%;
+ }
+
+ .grid-item-20 {
width: 20%;
-}
-
-.grid-item-25 {
+ }
+
+ .grid-item-21 {
+ width: 21%;
+ }
+
+ .grid-item-22 {
+ width: 22%;
+ }
+
+ .grid-item-23 {
+ width: 23%;
+ }
+
+ .grid-item-24 {
+ width: 24%;
+ }
+
+ .grid-item-25 {
width: 25%;
-}
-
-.grid-item-30 {
+ }
+
+ .grid-item-26 {
+ width: 26%;
+ }
+
+ .grid-item-27 {
+ width: 27%;
+ }
+
+ .grid-item-28 {
+ width: 28%;
+ }
+
+ .grid-item-29 {
+ width: 29%;
+ }
+
+ .grid-item-30 {
width: 30%;
-}
-
-.grid-item-35 {
+ }
+
+ .grid-item-31 {
+ width: 31%;
+ }
+
+ .grid-item-32 {
+ width: 32%;
+ }
+
+ .grid-item-33 {
+ width: 33%;
+ }
+
+ .grid-item-34 {
+ width: 34%;
+ }
+
+ .grid-item-35 {
width: 35%;
-}
-
-.grid-item-40 {
+ }
+
+ .grid-item-36 {
+ width: 36%;
+ }
+
+ .grid-item-37 {
+ width: 37%;
+ }
+
+ .grid-item-38 {
+ width: 38%;
+ }
+
+ .grid-item-39 {
+ width: 39%;
+ }
+
+ .grid-item-40 {
width: 40%;
-}
-
-.grid-item-45 {
+ }
+
+ .grid-item-41 {
+ width: 41%;
+ }
+
+ .grid-item-42 {
+ width: 42%;
+ }
+
+ .grid-item-43 {
+ width: 43%;
+ }
+
+ .grid-item-44 {
+ width: 44%;
+ }
+
+ .grid-item-45 {
width: 45%;
-}
-
-.grid-item-50 {
+ }
+
+ .grid-item-46 {
+ width: 46%;
+ }
+
+ .grid-item-47 {
+ width: 47%;
+ }
+
+ .grid-item-48 {
+ width: 48%;
+ }
+
+ .grid-item-49 {
+ width: 49%;
+ }
+
+ .grid-item-50 {
width: 50%;
-}
-
-.grid-item-55 {
+ }
+
+ .grid-item-51 {
+ width: 51%;
+ }
+
+ .grid-item-52 {
+ width: 52%;
+ }
+
+ .grid-item-53 {
+ width: 53%;
+ }
+
+ .grid-item-54 {
+ width: 54%;
+ }
+
+ .grid-item-55 {
width: 55%;
-}
-
-.grid-item-60 {
+ }
+
+ .grid-item-56 {
+ width: 56%;
+ }
+
+ .grid-item-57 {
+ width: 57%;
+ }
+
+ .grid-item-58 {
+ width: 58%;
+ }
+
+ .grid-item-59 {
+ width: 59%;
+ }
+
+ .grid-item-60 {
width: 60%;
-}
-
-.grid-item-65 {
+ }
+
+ .grid-item-61 {
+ width: 61%;
+ }
+
+ .grid-item-62 {
+ width: 62%;
+ }
+
+ .grid-item-63 {
+ width: 63%;
+ }
+
+ .grid-item-64 {
+ width: 64%;
+ }
+
+ .grid-item-65 {
width: 65%;
-}
-
-.grid-item-70 {
+ }
+
+ .grid-item-66 {
+ width: 66%;
+ }
+
+ .grid-item-67 {
+ width: 67%;
+ }
+
+ .grid-item-68 {
+ width: 68%;
+ }
+
+ .grid-item-69 {
+ width: 69%;
+ }
+
+ .grid-item-70 {
width: 70%;
-}
-
-.grid-item-75 {
+ }
+
+ .grid-item-71 {
+ width: 71%;
+ }
+
+ .grid-item-72 {
+ width: 72%;
+ }
+
+ .grid-item-73 {
+ width: 73%;
+ }
+
+ .grid-item-74 {
+ width: 74%;
+ }
+
+ .grid-item-75 {
width: 75%;
-}
-.grid-item-80 {
+ }
+
+ .grid-item-76 {
+ width: 76%;
+ }
+
+ .grid-item-77 {
+ width: 77%;
+ }
+
+ .grid-item-78 {
+ width: 78%;
+ }
+
+ .grid-item-79 {
+ width: 79%;
+ }
+
+ .grid-item-80 {
width: 80%;
-}
-
-.grid-item-85 {
+ }
+
+ .grid-item-81 {
+ width: 81%;
+ }
+
+ .grid-item-82 {
+ width: 82%;
+ }
+
+ .grid-item-83 {
+ width: 83%;
+ }
+
+ .grid-item-84 {
+ width: 84%;
+ }
+
+ .grid-item-85 {
width: 85%;
-}
-
-.grid-item-90 {
+ }
+
+ .grid-item-86 {
+ width: 86%;
+ }
+
+ .grid-item-87 {
+ width: 87%;
+ }
+
+ .grid-item-88 {
+ width: 88%;
+ }
+
+ .grid-item-89 {
+ width: 89%;
+ }
+
+ .grid-item-90 {
width: 90%;
-}
-
-.grid-item-95 {
+ }
+
+ .grid-item-91 {
+ width: 91%;
+ }
+
+ .grid-item-92 {
+ width: 92%;
+ }
+
+ .grid-item-93 {
+ width: 93%;
+ }
+
+ .grid-item-94 {
+ width: 94%;
+ }
+
+ .grid-item-95 {
width: 95%;
-}
-
-.grid-item-100 {
+ }
+
+ .grid-item-96 {
+ width: 96%;
+ }
+
+ .grid-item-97 {
+ width: 97%;
+ }
+
+ .grid-item-98 {
+ width: 98%;
+ }
+
+ .grid-item-99 {
+ width: 99%;
+ }
+
+ .grid-item-100 {
width: 100%;
-}
-
+ }
+
/* clear fix */
-.grid:after {
+/*.grid:after {
content: '';
display: block;
clear: both;
@@ -1147,7 +1468,7 @@ videogular div.event-time {
display: block;
width: 100%;
height: auto;
-}
+}*/
/* ---- .grid-item ---- */
diff --git a/www/js/DataModel.js b/www/js/DataModel.js
index 78d24772..b86c6f08 100755
--- a/www/js/DataModel.js
+++ b/www/js/DataModel.js
@@ -177,6 +177,7 @@ angular.module('zmApp.controllers')
'disableSimulStreaming': false,
'insertBasicAuthToken': false,
'loginAPISupported': false,
+ 'montageResizeSteps': 5,
};
@@ -1304,6 +1305,13 @@ angular.module('zmApp.controllers')
}
+ if (typeof loginData.montageResizeSteps == 'undefined') {
+
+ loginData.montageResizeSteps = 5;
+
+ }
+
+
loginData.canSwipeMonitors = true;
loginData.forceImageModePath = false;
loginData.enableBlog = true;
diff --git a/www/js/DevOptionsCtrl.js b/www/js/DevOptionsCtrl.js
index 1ee85904..7d50aa4e 100644
--- a/www/js/DevOptionsCtrl.js
+++ b/www/js/DevOptionsCtrl.js
@@ -96,6 +96,20 @@ angular.module('zmApp.controllers').controller('zmApp.DevOptionsCtrl', ['$scope'
}
+ // make sure only ints are used as CSS classes only use ints
+ // in grid scale
+ $scope.loginData.montageResizeSteps = parseInt($scope.loginData.montageResizeSteps);
+
+ if ($scope.loginData.montageResizeSteps < 1) {
+ $scope.loginData.montageResizeSteps = 1;
+
+ }
+
+ if ($scope.loginData.montageResizeSteps > 50) {
+ $scope.loginData.montageResizeSteps = 50;
+
+ }
+
if ((parseInt($scope.loginData.montageQuality) < zm.safeMontageLimit) ||
(parseInt($scope.loginData.montageQuality) > 100)) {
$scope.loginData.montageQuality = 100;
diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js
index b2021920..ee34a1b3 100644
--- a/www/js/MontageCtrl.js
+++ b/www/js/MontageCtrl.js
@@ -286,10 +286,11 @@ angular.module('zmApp.controllers')
pckry = new Packery('.grid', {
itemSelector: '.grid-item',
percentPosition: true,
- columnWidth: '.grid-sizer',
+ //columnWidth: '.grid-sizer',
gutter: 0,
initLayout: layouttype,
- shiftPercentResize: true
+ shiftPercentResize: true,
+ transitionDuration: 0
});
@@ -2054,6 +2055,7 @@ angular.module('zmApp.controllers')
}
$scope.sliderChanging = true;
+ var ld = NVRDataModel.getLogin();
$ionicLoading.show({
template: $translate.instant('kPleaseWait'),
@@ -2077,7 +2079,7 @@ angular.module('zmApp.controllers')
for (var i = 0; i < $scope.MontageMonitors.length; i++) {
var curVal = parseInt($scope.MontageMonitors[i].Monitor.gridScale) || 20;
- curVal = curVal + (5 * dirn);
+ curVal = curVal + (ld.montageResizeSteps * dirn);
if (curVal < 10) curVal = 10;
if (curVal > 100) curVal = 100;
//console.log ("For Index: " + i + " From: " + $scope.MontageMonitors[i].Monitor.gridScale + " To: " + curVal);
@@ -2102,7 +2104,7 @@ angular.module('zmApp.controllers')
{
for (i = 0; i < $scope.MontageMonitors.length; i++) {
var cv = parseInt($scope.MontageMonitors[i].Monitor.gridScale) || 20;
- cv = cv + (5 * dirn);
+ cv = cv + (ld.montageResizeSteps * dirn);
if (cv < 10) cv = 10;
if (cv > 100) cv = 100;
$scope.MontageMonitors[i].Monitor.gridScale = cv;
@@ -2118,7 +2120,10 @@ angular.module('zmApp.controllers')
if (dirn == 1) //expand
{
- pckry.getItemElements().forEach(function (elem) {
+ pckry.once('layoutComplete', resizeComplete);
+ pckry.layout();
+
+ /* pckry.getItemElements().forEach(function (elem) {
var id = elem.getAttribute("data-item-id");
var sz = elem.getAttribute("data-item-size");
if (isNaN(sz)) sz = 20;
@@ -2129,7 +2134,7 @@ angular.module('zmApp.controllers')
pckry.fit(elem);
}
- });
+ });*/
} else //shrink
{
//console.log("Calling shift");
@@ -2138,7 +2143,7 @@ angular.module('zmApp.controllers')
}
- }, 20);
+ }, 150);
/* if (!somethingReset) {
//console.log (">>>SOMETHING NOT RESET");
diff --git a/www/lang/locale-en.json b/www/lang/locale-en.json
index 843d110f..cb776682 100644
--- a/www/lang/locale-en.json
+++ b/www/lang/locale-en.json
@@ -225,6 +225,7 @@
"kMontageDefaultProfile" :"all monitors",
"kMontageImageScale" :"Montage image scale",
"kMontageNoSavedProfiles" :"No saved montage profiles",
+ "kMontageResizeSteps" :"Montage resize factor",
"kMontageSave" :"Save Montage Profile",
"kMontageSaveDefaultWarning" :"This profile does not allow monitors to be hidden. Any hidden monitors are now unhidden",
"kMontageSaveSubtitle" :"please enter a profile name to save current settings",
diff --git a/www/templates/devoptions.html b/www/templates/devoptions.html
index 80a1d80a..64146a50 100644
--- a/www/templates/devoptions.html
+++ b/www/templates/devoptions.html
@@ -71,6 +71,14 @@
<input type="tel" placeholder="max is 70" ng-model="loginData.montageQuality">
</label>
</div>
+
+ <div class="item item-text-wrap item-input-inset">
+ {{'kMontageResizeSteps' | translate}}(%)&nbsp;
+ <label class="item-input-wrapper">
+ <input type="tel" placeholder="" ng-model="loginData.montageResizeSteps">
+ </label>
+ </div>
+
<div class="item item-text-wrap item-input-inset">
{{'kEventSingleImageScale' | translate}}(%)&nbsp;
<label class="item-input-wrapper">
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-06 08:26:56 +0000