ZoneMinder
/
zoneminder
mirror of https://github.com/ZoneMinder/zoneminder.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix behaviour of layout,width,height scale etc. Height is a special case, it works differently than the rest. Use MonitorStream.js functions for setting the width/height and scale of the zms url. The img is always 100% width and height, everything is set in the containing divs.

pull/3468/head
Isaac Connor 2022-04-10 17:26:23 -04:00
parent 88665a68f5
commit 2c0a9528b3
1 changed files with 99 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,93 +5,107 @@
*/ */
function selectLayout(new_layout) { function selectLayout(new_layout) {
const ddm = $j('#zmMontageLayout'); const ddm = $j('#zmMontageLayout');
if (new_layout) { if (new_layout && (typeof(new_layout) != 'object')) {
console.log("Selecting new layout"+new_layout); $j('#zmMontageLayout option').attr('selected', false);
$j('#zmMontageLayout option:contains("'+new_layout+'")').attr('selected', true); $j('#zmMontageLayout option:contains("'+new_layout+'")').attr('selected', true);
} }
const layout_id = parseInt(ddm.val()); const layout_id = parseInt(ddm.val());
let layout = null; if (!layout_id) {
console.log("No layout_id?!");
if (layout_id) { return;
layout = layouts[layout_id]; }
if (!layout) {
console.log("No layout found for " + layout_id); let layout = layouts[layout_id];
return; if (!layout) {
} console.log("No layout found for " + layout_id);
for (var i = 0, length = monitors.length; i < length; i++) {
monitor = monitors[i];
// Need to clear the current positioning, and apply the new
monitor_frame = $j('#monitorFrame'+monitor.id);
if (!monitor_frame) {
console.log('Error finding frame for ' + monitor.id);
continue;
}
// Apply default layout options, like float left
if (layout.Positions['default'] ) {
styles = layout.Positions['default'];
for (style in styles) {
monitor_frame.css(style, styles[style]);
}
} else {
console.log("No default styles to apply" + layout.Positions);
} // end if default styles
if (layout.Positions['mId'+monitor.id]) {
styles = layout.Positions['mId'+monitor.id];
for (style in styles) {
monitor_frame.css(style, styles[style]);
}
} // end if specific monitor style
} // end foreach monitor
setCookie('zmMontageLayout', layout_id, 3600);
if (layouts[layout_id].Name != 'Freeform') { // 'montage_freeform.css' ) {
// For freeform, we don't touch the width/height/scale settings, but we may need to update sizing and scales
setCookie('zmMontageScale', '', 3600);
$j('#scale').val('');
$j('#width').val('0');
}
} // end if a stored layout
if (!layout) {
console.log('No layout?');
return; return;
} }
var width = parseInt($j('#width').val());
var height = parseInt($j('#height').val());
var scale = $j('#scale').val();
for (var i = 0, length = monitors.length; i < length; i++) { for (var i = 0, length = monitors.length; i < length; i++) {
var monitor = monitors[i]; monitor = monitors[i];
// Need to clear the current positioning, and apply the new
var stream_scale = 0; monitor_frame = $j('#monitor'+monitor.id);
if (scale) { if (!monitor_frame) {
stream_scale = scale; console.log('Error finding frame for ' + monitor.id);
} else if (width) { continue;
stream_scale = parseInt(100*width/monitor.width);
} else if (height) {
stream_scale = parseInt(100*height/monitor.height);
} else if (layouts[layout_id].Name != 'Freeform') {
monitor_frame = $j('#monitorFrame'+monitor.id);
console.log("Monitor frame width : " + monitor_frame.width() + " monitor Width: " + monitor.width);
if (monitor_frame.width() < monitor.width) {
stream_scale = parseInt(100 * monitor_frame.width() / monitor.width);
// Round to a multiple of 5, so 53 become 50% etc
stream_scale = Math.floor(stream_scale/5)*5;
}
} }
monitor.setScale(stream_scale);
// Apply default layout options, like float left
if (layout.Positions['default']) {
styles = layout.Positions['default'];
for (style in styles) {
//console.log('Applying ' + style + '=>' + styles[style]);
monitor_frame.css(style, styles[style]);
}
} else {
console.log("No default styles to apply" + layout.Positions);
} // end if default styles
if (layout.Positions['mId'+monitor.id]) {
styles = layout.Positions['mId'+monitor.id];
for (style in styles) {
monitor_frame.css(style, styles[style]);
}
} // end if specific monitor style
} // end foreach monitor } // end foreach monitor
setCookie('zmMontageLayout', layout_id, 3600);
if (layouts[layout_id].Name != 'Freeform') { // 'montage_freeform.css' ) {
// For freeform, we don't touch the width/height/scale settings, but we may need to update sizing and scales
setCookie('zmMontageScale', 'fixed', 3600);
setCookie('zmMontageWidth', 'auto', 3600);
//setCookie('zmMontageHeight', 'auto', 3600);
$j('#scale').val('fixed');
$j('#width').val('auto');
//$j('#height').val('auto');
}
if (0) {
var width = parseInt($j('#width').val());
var height = parseInt($j('#height').val());
var scale = $j('#scale').val();
for (var i = 0, length = monitors.length; i < length; i++) {
var monitor = monitors[i];
var stream_scale = 0;
if (scale) {
stream_scale = scale;
} else if (width) {
stream_scale = parseInt(100*width/monitor.width);
} else if (height) {
stream_scale = parseInt(100*height/monitor.height);
} else if (layouts[layout_id].Name != 'Freeform') {
monitor_frame = $j('#monitor'+monitor.id);
console.log("Monitor frame width : " + monitor_frame.width() + " monitor Width: " + monitor.width);
if (monitor_frame.width() < monitor.width) {
stream_scale = parseInt(100 * monitor_frame.width() / monitor.width);
// Round to a multiple of 5, so 53 become 50% etc
stream_scale = Math.floor(stream_scale/5)*5;
}
}
monitor.setScale('fixed');
//stream_scale, width, height);
} // end foreach monitor
}
} // end function selectLayout(element) } // end function selectLayout(element)
function changeHeight() {
var height = $j('#height').val();
setCookie('zmMontageHeight', height, 3600);
for (var i = 0, length = monitors.length; i < length; i++) {
var monitor = monitors[i];
monitor_frame = $j('#monitor'+monitor.id + " .monitorStream");
monitor_frame.css('height', height);
}
}
/** /**
* called when the widthControl|heightControl select elements are changed * called when the widthControl select element is changed
*/ */
function changeSize() { function changeWidth() {
var width = parseInt($j('#width').val()); var width = $j('#width').val();
var height = parseInt($j('#height').val()); var height = $j('#height').val();
selectLayout('Freeform'); selectLayout('Freeform');
$j('#width').val(width); $j('#width').val(width);
@ -99,26 +113,10 @@ function changeSize() {
for (var i = 0, length = monitors.length; i < length; i++) { for (var i = 0, length = monitors.length; i < length; i++) {
var monitor = monitors[i]; var monitor = monitors[i];
monitor.setScale('fixed', width, height);
// Scale the frame
monitor_frame = $j('#monitorFrame'+monitor.id);
if ( !monitor_frame ) {
console.log("Error finding frame for " + monitor.id);
continue;
}
monitor_frame.css('width', ( width ? width+'px' : 'auto'));
monitor_frame.css('height', ( height ? height+'px' : 'auto'));
var scale = 100;
if ( width ) {
scale = parseInt(100*width/monitor.width);
} else if ( height ) {
scale = parseInt(100*height/monitor.height);
}
monitor.setScale(scale);
} }
$j('#scale').val(''); $j('#scale').val('fixed');
setCookie('zmMontageScale', '', 3600); setCookie('zmMontageScale', 'fixed', 3600);
setCookie('zmMontageWidth', width, 3600); setCookie('zmMontageWidth', width, 3600);
setCookie('zmMontageHeight', height, 3600); setCookie('zmMontageHeight', height, 3600);
} // end function changeSize() } // end function changeSize()
@ -127,30 +125,17 @@ function changeSize() {
* called when the scaleControl select element is changed * called when the scaleControl select element is changed
*/ */
function changeScale() { function changeScale() {
var scale = parseInt($j('#scale').val()); var scale = $j('#scale').val();
selectLayout('Freeform'); // Will also clear width and height selectLayout('Freeform'); // Will also clear width and height
$j('#scale').val(scale); $j('#scale').val(scale);
setCookie('zmMontageScale', scale, 3600); setCookie('zmMontageScale', scale, 3600);
setCookie('zmMontageWidth', 'auto', 3600);
setCookie('zmMontageHeight', 'auto', 3600);
$j('#width').val('auto');
$j('#height').val('auto');
for ( var i = 0, length = monitors.length; i < length; i++ ) { for ( var i = 0, length = monitors.length; i < length; i++ ) {
const monitor = monitors[i]; var monitor = monitors[i];
const newWidth = ( monitorData[i].width * scale ) / SCALE_BASE;
//var newHeight = ( monitorData[i].height * scale ) / SCALE_BASE;
// Theoretically by setting to freeform layout, all heights have been set to auto
// Scale the frame
monitor_frame = $j('#monitorFrame'+monitor.id);
if (!monitor_frame) {
console.log("Error finding frame for " + monitor.id);
continue;
}
if (scale > 0) {
if (newWidth) {
monitor_frame.css('width', newWidth);
}
} else {
monitor_frame.css('width', '100%');
}
monitor.setScale(scale); monitor.setScale(scale);
} // end foreach Monitor } // end foreach Monitor
} }
@ -234,7 +219,7 @@ function takeSnapshot() {
window.location = '?view=snapshot&action=create&'+monitor_ids.join('&'); window.location = '?view=snapshot&action=create&'+monitor_ids.join('&');
} }
var monitors = new Array(); const monitors = new Array();
function initPage() { function initPage() {
$j("#hdrbutton").click(function() { $j("#hdrbutton").click(function() {
$j("#flipMontageHeader").slideToggle("slow"); $j("#flipMontageHeader").slideToggle("slow");
@ -253,9 +238,8 @@ function initPage() {
const delay = Math.round( (Math.random()+0.5)*statusRefreshTimeout ); const delay = Math.round( (Math.random()+0.5)*statusRefreshTimeout );
monitors[i].start(delay); monitors[i].start(delay);
const interval = monitors[i].refresh; if ((monitors[i].type == 'WebSite') && (monitors[i].refresh > 0)) {
if ( monitors[i].type == 'WebSite' && interval > 0 ) { setInterval(reloadWebSite, monitors.refresh*1000, i);
setInterval(reloadWebSite, interval*1000, i);
} }
monitors[i].setup_onclick(handleClick); monitors[i].setup_onclick(handleClick);
} }