mirror/zoneminder
1
0
Fork 0
mirror of https://github.com/ZoneMinder/zoneminder.git synced 2026-04-04 22:14:07 -04:00
Code Issues Packages Projects Releases Wiki Activity

Added the ability to disable image resizing when changing Scale (MonitorStream.js)

Browse Source 
Required when using GridStack & PanZoom on Montage page
This commit is contained in:
IgorA100
2024-05-07 20:23:00 +03:00
committed by GitHub
parent 4e7d774667
commit 6d4e6fd401
1 changed files with 23 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
web/js/MonitorStream.js
View File

@@ -90,9 +90,11 @@ function MonitorStream(monitorData) {
/* scale should be '0' for auto, or an integer value
* width should be auto, 100%, integer +px
* height should be auto, 100%, integer +px
* resize should be boolean (added only for using GridStack & PanZoom on Montage page)
* */
this.setScale = function(newscale, width, height) {
this.setScale = function(newscale, width, height, resize = true) {
const img = this.getElement();
const newscaleSelect = newscale;
if (!img) {
console.log('No img in setScale');
return;
@@ -124,7 +126,9 @@ function MonitorStream(monitorData) {
newscale = parseInt(100*parseInt(width)/this.width);
} else { // %
// Set it, then get the calculated width
if (resize) {
monitor_frame.css('width', width);
}
newscale = parseInt(100*parseInt(monitor_frame.width())/this.width);
}
} else if (height) {
@@ -137,11 +141,28 @@ function MonitorStream(monitorData) {
height = Math.round(parseInt(this.height) * newscale / 100)+'px';
}
if (width && (width != '0px') && (img.style.width.search('%') == -1)) {
if (resize) {
monitor_frame.css('width', parseInt(width));
}
}
if (resize) {
if (img.style.width) img.style.width = '100%';
if (height && height != '0px') img.style.height = height;
} else { //This code will not be needed when using GridStack & PanZoom on Montage page. Only required when trying to use "scaleControl"
if (newscaleSelect != 0) {
img.style.width = 'auto';
$j(img).closest('.monitorStream')[0].style.overflow = 'auto';
} else {
const monitor_stream = $j(img).closest('.monitorStream');
const realWidth = monitor_stream.attr('data-width');
const realHeight = monitor_stream.attr('data-height');
const ratio = realWidth / realHeight;
const imgWidth = $j(img)[0].offsetWidth + 4; // including border
const monitorStreamHeight = imgWidth / ratio;
img.style.width = '100%';
$j(img).closest('.monitorStream')[0].style.overflow = 'hidden';
}
}
this.setStreamScale(newscale);
}; // setScale