Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Optimizing code related to GridStack (montage.js) #4040

Merged
merged 2 commits into from
May 26, 2024
Merged

Optimizing code related to GridStack (montage.js) #4040

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c5cd1b2
Optimizing code related to GridStack (montage.js)
IgorA100 May 26, 2024
1b84a83
Chore: eslint (montage.js)
IgorA100 May 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 70 additions & 34 deletions web/skins/classic/views/js/montage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}
Expand Down Expand Up @@ -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;*/
}
Expand Down Expand Up @@ -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);
}
Expand All @@ -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) {
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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;

Expand All @@ -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() {
Expand Down
Loading