ZaneYork
/
zoneminder
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix for zone overlay scaling issues in montage (#2643) 

* remove extra px in svg tag

* add js method to track liveStream img size for zones

* switch to using SVG scaling to deal with zone polygons

* update jsdoc for eslint

* fix blank lines eslint issue
This commit is contained in:
Tom Hodder 2019-06-24 16:45:40 +01:00 committed by Isaac Connor
parent 6ed0074077
commit 46c19c7efb
2 changed files with 14 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -204,7 +204,13 @@ function Monitor(monitorData) {
}
} // end function Monitor
/**
* called when the layoutControl select element is changed, or the page
* is rendered
* @param {*} element - the event data passed by onchange callback
*/
function selectLayout(element) {
console.dir(element);
layout = $j(element).val();
if ( layout_id = parseInt(layout) ) {
@ -266,14 +272,13 @@ function selectLayout(element) {
}
streamImg.style.width = '100%';
}
var zonesSVG = $('zones'+monitor.id);
if ( zonesSVG ) {
zonesSVG.style.width = '';
}
} // end foreach monitor
}
} // end function selectLayout(element)
/**
* called when the widthControl|heightControl select elements are changed
*/
function changeSize() {
var width = $('width').get('value');
var height = $('height').get('value');
@ -309,11 +314,6 @@ function changeSize() {
streamImg.style.height = height ? height : null;
//streamImg.style.height = '';
}
var zonesSVG = $('zones'+monitor.id);
if ( zonesSVG ) {
zonesSVG.style.width = width ? width : '100%';
zonesSVG.style.height = height;
}
}
$('scale').set('value', '');
Cookie.write('zmMontageScale', '', {duration: 10*365});
@ -322,6 +322,9 @@ function changeSize() {
selectLayout('#zmMontageLayout');
} // end function changeSize()
/**
* called when the scaleControl select element is changed
*/
function changeScale() {
var scale = $('scale').get('value');
$('width').set('value', 'auto');
@ -367,11 +370,6 @@ function changeScale() {
streamImg.style.width = newWidth + "px";
streamImg.style.height = newHeight + "px";
}
var zonesSVG = $('zones'+monitor.id);
if ( zonesSVG ) {
zonesSVG.style.width = newWidth + "px";
zonesSVG.style.height = newHeight + "px";
}
}
}

4
web/skins/classic/views/montage.php
View File

@ -43,6 +43,7 @@ $widths = array(
$heights = array(
'auto' => 'auto',
'240px' => '240px',
'320px' => '320px',
'480px' => '480px',
'720px' => '720px',
'1080px' => '1080px',
@ -256,7 +257,6 @@ foreach ( $monitors as $monitor ) {
if ( $scale ) {
limitPoints($row['Points'], 0, 0, $monitor->Width(), $monitor->Height());
scalePoints($row['Points'], $scale);
} else {
limitPoints($row['Points'], 0, 0,
( $width ? $width-1 : $monitor->Width()-1 ),
@ -269,7 +269,7 @@ foreach ( $monitors as $monitor ) {
} // end foreach Zone
?>
<svg class="zones" id="zones<?php echo $monitor->Id() ?>" style="position:absolute; top: 0; left: 0; background: none; width: <?php echo $width ?>px; height: <?php echo $height ?>px;">
<svg class="zones" id="zones<?php echo $monitor->Id() ?>" style="position:absolute; top: 0; left: 0; background: none; width: 100%; height: 100%;" viewBox="0 0 <?php echo $monitor->Width() ?> <?php echo $monitor->Height() ?>" preserveAspectRatio="none">
<?php
foreach( array_reverse($zones) as $zone ) {
echo '<polygon points="'. $zone['AreaCoords'] .'" class="'. $zone['Type'].'" />';