mirror/zoneminder
1
0
Fork 0
mirror of https://github.com/ZoneMinder/zoneminder.git synced 2026-03-31 04:02:54 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4040 from IgorA100/patch-118

Browse Source 
Optimizing code related to GridStack (montage.js)
This commit is contained in:
Isaac Connor
2024-05-26 18:56:34 -04:00
committed by GitHub
parent e716dca381 1b84a83d41
commit cb8633bd11
1 changed files with 70 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
web/skins/classic/views/js/montage.js
View File

@@ -301,21 +301,16 @@ function setSelectedRatioForAllMonitors(value) {
function changeRatioForAll() {
const value = getSelected(document.getElementById("ratio"));
//objGridStack.compact('list', true); //???
//selectLayout(); //???
setCookie('zmMontageRatioForAll', value);
setSelectedRatioForAllMonitors(value);
setTriggerChangedMonitors();
waitingMonitorsPlaced('changeRatio');
}
/*Called from a form*/
function changeRatio(el) {
const objSelect = el.target;
//objGridStack.compact('list', true); //???
//selectLayout(); //???
checkRatioForAllMonitors();
setTriggerChangedMonitors(stringToNumber(objSelect.id));
}
@@ -352,6 +347,27 @@ function checkRatioForAllMonitors() {
}
}
function setRatioForMonitor(objLiveStream, id=null) {
if (!id) {
id = stringToNumber(objLiveStream.id);
}
const value = getSelected(document.getElementById("ratio"+id));
const currentMonitor = monitors.find((o) => {
return parseInt(o["id"]) === id;
});
var ratio;
if (value == 'real') {
ratio = (currentMonitor.width / currentMonitor.height > 1) ? currentMonitor.width / currentMonitor.height : currentMonitor.height / currentMonitor.width;
} else {
const partsRatio = value.split(':');
ratio = (value == 'auto') ? averageMonitorsRatio : partsRatio[0]/partsRatio[1];
}
const height = (currentMonitor.width / currentMonitor.height > 1) ? (objLiveStream.clientWidth / ratio + 'px') /* landscape */ : (objLiveStream.clientWidth * ratio + 'px');
objLiveStream.style['height'] = height;
objLiveStream.parentNode.style['height'] = height;
}
function toGrid(value) { //Not used
/* return Math.round(value / 80) * 80;*/
}
@@ -799,24 +815,9 @@ function initPage() {
setInterval(() => { //Updating GridStack resizeToContent, Scale & Ratio
if (changedMonitors.length > 0) {
changedMonitors.slice().reverse().forEach(function(item, index, object) {
const value = getSelected(document.getElementById("ratio"+item));
const img = document.getElementById('liveStream'+item);
const currentMonitor = monitors.find((o) => {
return parseInt(o["id"]) === item;
});
if (value == 'real') {
img.style['height'] = 'auto';
img.parentNode.style['height'] = 'auto';
} else {
const partsRatio = value.split(':');
const monitorRatioSel = partsRatio[0]/partsRatio[1];
const ratio = (value == 'auto') ? averageMonitorsRatio : monitorRatioSel;
const h = (currentMonitor.width / currentMonitor.height > 1) ? (img.clientWidth / ratio + 'px') /*landscape*/ : (img.clientWidth * ratio + 'px');
img.style['height'] = h;
img.parentNode.style['height'] = h;
}
if (img.offsetHeight > 20 && objGridStack) { //Required for initial page loading
setRatioForMonitor(img, item);
objGridStack.resizeToContent(document.getElementById('m'+item));
changedMonitors.splice(object.length - 1 - index, 1);
}
@@ -825,10 +826,8 @@ function initPage() {
}
}, 100);
setTimeout(() => {
selectLayout();
$j('#monitors').removeClass('hidden-shift');
}, 50); //No matter what flickers. But perhaps this will not be necessary in the future...
selectLayout();
$j('#monitors').removeClass('hidden-shift');
changeMonitorStatusPositon();
if (panZoomEnabled) {
@@ -870,14 +869,9 @@ function initPage() {
observer.observe(this);
});
//You can immediately call startMonitors() here, but in this case the height of the monitor will initially be minimal, and then become normal, but this is not pretty.
//Check if the monitor arrangement is complete
const intervalIdWidth = setInterval(() => {
if (checkEndMonitorsChange()) {
initGridStack();
startMonitors();
clearInterval(intervalIdWidth);
}
}, 100);
waitingMonitorsPlaced('startMonitors');
} // end initPage
function formSubmit(form) {
@@ -1110,7 +1104,7 @@ function setTriggerChangedMonitors(id=null) {
}
}
function checkEndMonitorsChange() {
function checkEndMonitorsPlaced() {
for (let i = 0, length = monitorData.length; i < length; i++) {
const id = monitors[i].id;
@@ -1136,9 +1130,51 @@ function checkEndMonitorsChange() {
}
}
}
if (monitorsEndMoving) {
for (let i = 0, length = monitorData.length; i < length; i++) {
//Clean for later use
movableMonitorData[monitors[i].id] = {'width': 0, 'stop': false};
}
}
return monitorsEndMoving;
}
function waitingMonitorsPlaced(action = null) {
const intervalWait = setInterval(() => {
if (checkEndMonitorsPlaced()) {
// This code may not be executed, because when opening the page we still end up in "action == 'changeRatio'"
//if (isPresetLayout(getCurrentNameLayout())) {
// objGridStack.compact('list', true);
//}
if (action == 'startMonitors') {
startMonitors();
} else if (action == 'changeRatio') {
if (!isPresetLayout(getCurrentNameLayout())) {
return;
}
if (objGridStack) {
objGridStack.destroy(false);
}
for (let i = 0, length = monitors.length; i < length; i++) {
const monitor = monitors[i];
// Need to clear the current positioning "X". Otherwise, the order of the monitors will be disrupted
const monitor_frame = $j('#monitor'+monitor.id);
if (!monitor_frame) {
console.log('Error finding frame for ' + monitor.id);
continue;
}
//monitor_wrapper
monitor_frame.closest('[gs-id="' + monitor.id + '"]').removeAttr('gs-x');
}
initGridStack();
// You could use "objGridStack.compact('list', true)" instead of all this code, but that would mess up the monitor sorting. Because The "compact" algorithm in GridStack is not perfect.
}
clearInterval(intervalWait);
}
}, 100);
}
function changeMonitorStatusPositon() {
const monitorStatusPositon = $j('#monitorStatusPositon').val();
$j('.monitorStatus').each(function updateStatusPosition() {