From 10b39b965f4b7898c5512897fb3e5dc41cdd5bab Mon Sep 17 00:00:00 2001 From: IgorA100 Date: Thu, 23 May 2024 01:30:29 +0300 Subject: [PATCH 1/4] Start monitors always with Scale=25 (Monitor.php) Dirty code (test only) fixes #4033 --- web/includes/Monitor.php | 1 + 1 file changed, 1 insertion(+) diff --git a/web/includes/Monitor.php b/web/includes/Monitor.php index dcfe9be70f..73f79ca5d8 100644 --- a/web/includes/Monitor.php +++ b/web/includes/Monitor.php @@ -491,6 +491,7 @@ public function getStreamSrc($args, $querySep='&') { if (isset($args['height'])) unset($args['height']); + $args['scale'] = 25; $streamSrc .= '?'.http_build_query($args, '', $querySep); return $streamSrc; From 161928bf33133cfff5b12fa1b20d50af8dd6dd99 Mon Sep 17 00:00:00 2001 From: IgorA100 Date: Thu, 23 May 2024 19:17:49 +0300 Subject: [PATCH 2/4] Calculation of Scale before the start of monitors (montage.js) --- web/skins/classic/views/js/montage.js | 48 ++++++++++++++++++++++++++- 1 file changed, 47 insertions(+), 1 deletion(-) diff --git a/web/skins/classic/views/js/montage.js b/web/skins/classic/views/js/montage.js index 1df3c78172..f2c22adc81 100644 --- a/web/skins/classic/views/js/montage.js +++ b/web/skins/classic/views/js/montage.js @@ -13,6 +13,7 @@ var objGridStack; var layoutColumns = 48; //Maximum number of columns (items per row) for GridStack var changedMonitors = []; //Monitor IDs that were changed in the DOM var scrollBbarExists = false; +var prevWidthMonitors = []; //Monitor data (id, width, stop (true - stop moving)) var panZoomEnabled = true; //Add it to settings in the future var panZoomMaxScale = 10; @@ -558,6 +559,12 @@ function handleClick(evt) { function startMonitors() { for (let i = 0, length = monitorData.length; i < length; i++) { + const obj = document.getElementById('liveStream'+monitors[i].id); + const url = new URL(obj.src); + + url.searchParams.set('scale', parseInt(obj.clientWidth / monitors[i].width * 100)); + obj.src = url; + // Start the fps and status updates. give a random delay so that we don't assault the server const delay = Math.round( (Math.random()+0.5)*statusRefreshTimeout ); monitors[i].start(delay); @@ -739,10 +746,12 @@ function initPage() { //Create a Ratio array for each monitor const r = monitors[i].width / monitors[i].height; arrRatioMonitors.push(r > 1 ? r : 1/r); //landscape or portret orientation + + //Prepare the array. + movableMonitorData[monitors[i].id] = {'width': 0, 'stop': false}; } calculateAverageMonitorsRatio(arrRatioMonitors); - startMonitors(); $j(window).on('resize', windowResize); //Only used when trying to apply "changeScale". It will be deleted in the future. document.addEventListener("fullscreenchange", fullscreenchanged); @@ -856,6 +865,14 @@ function initPage() { $j('[id ^= "liveStream"]').each(function() { observer.observe(this); }); + + //Check if the monitor arrangement is complete + const intervalIdWidth = setInterval(() => { + if (checkEndMonitorsChange()) { + startMonitors(); + clearInterval(intervalIdWidth); + } + }, 100); } // end initPage function formSubmit(form) { @@ -1100,6 +1117,35 @@ function setTriggerChangedMonitors(id=null) { } } +function checkEndMonitorsChange() { + for (let i = 0, length = monitorData.length; i < length; i++) { + const id = monitors[i].id; + + if (!movableMonitorData[id].stop) { + //Monitor is still moving + const objWidth = document.getElementById('liveStream'+monitors[i].id).clientWidth; + if (objWidth == movableMonitorData[id].width && objWidth !=0 ) { + movableMonitorData[id].stop = true; //The size does not change, which means it’s already in its place! + } else { + movableMonitorData[id].width = objWidth; + } + } + } + //Check if all monitors are in their places + for (let i = 0, length = movableMonitorData.length; i < length; i++) { + var monitorsEndMoving = true; + + if (movableMonitorData[i]) { //There may be empty elements + if (!movableMonitorData[i].stop) { + //Monitor is still moving + monitorsEndMoving = false; + return; + } + } + } + return monitorsEndMoving; +} + function changeMonitorStatusPositon() { const monitorStatusPositon = $j('#monitorStatusPositon').val(); $j('.monitorStatus').each(function updateStatusPosition() { From 10628346a82766da860656db07f7444c8e9b757b Mon Sep 17 00:00:00 2001 From: IgorA100 Date: Thu, 23 May 2024 19:19:50 +0300 Subject: [PATCH 3/4] Cancel changes (Monitor.php) --- web/includes/Monitor.php | 1 - 1 file changed, 1 deletion(-) diff --git a/web/includes/Monitor.php b/web/includes/Monitor.php index 73f79ca5d8..dcfe9be70f 100644 --- a/web/includes/Monitor.php +++ b/web/includes/Monitor.php @@ -491,7 +491,6 @@ public function getStreamSrc($args, $querySep='&') { if (isset($args['height'])) unset($args['height']); - $args['scale'] = 25; $streamSrc .= '?'.http_build_query($args, '', $querySep); return $streamSrc; From 743e31bbcf0b62f71ebfdad5315038feeab63976 Mon Sep 17 00:00:00 2001 From: IgorA100 Date: Thu, 23 May 2024 19:46:28 +0300 Subject: [PATCH 4/4] Fix movableMonitorData montage.js --- web/skins/classic/views/js/montage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/skins/classic/views/js/montage.js b/web/skins/classic/views/js/montage.js index f2c22adc81..2c43331d2f 100644 --- a/web/skins/classic/views/js/montage.js +++ b/web/skins/classic/views/js/montage.js @@ -13,7 +13,7 @@ var objGridStack; var layoutColumns = 48; //Maximum number of columns (items per row) for GridStack var changedMonitors = []; //Monitor IDs that were changed in the DOM var scrollBbarExists = false; -var prevWidthMonitors = []; //Monitor data (id, width, stop (true - stop moving)) +var movableMonitorData = []; //Monitor data (id, width, stop (true - stop moving)) var panZoomEnabled = true; //Add it to settings in the future var panZoomMaxScale = 10;