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

switch to using SVG scaling to deal with zone polygons

This commit is contained in:
tolland 2019-06-20 17:11:22 +00:00
parent edd52e7fbf
commit ffaad88bf0
2 changed files with 3 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -206,7 +206,7 @@ function Monitor(monitorData) {
/**
* called when the layoutControl select element is changed, or the page
* is rendered??
* is rendered
* @return null
*/
function selectLayout(element) {
@ -270,10 +270,7 @@ function selectLayout(element) {
// APPLET's and OBJECTS need to be re-initialized
}
streamImg.style.width = '100%';
updateZoneSvg(monitor, streamImg.getSize().x, streamImg.getSize().y);
}
} // end foreach monitor
}
} // end function selectLayout(element)
@ -316,12 +313,7 @@ function changeSize() {
streamImg.style.width = width ? width : null;
streamImg.style.height = height ? height : null;
//streamImg.style.height = '';
// not sure how the above block works... so rescale zone if img changed??
updateZoneSvg(monitor, streamImg.getSize().x, streamImg.getSize().y);
}
}
$('scale').set('value', '');
Cookie.write('zmMontageScale', '', {duration: 10*365});
@ -337,7 +329,6 @@ function changeSize() {
function changeScale() {
var scale = $('scale').get('value');
$('width').set('value', 'auto');
// console.dir($('width'));
$('height').set('value', 'auto');
Cookie.write('zmMontageScale', scale, {duration: 10*365});
Cookie.write('zmMontageWidth', '', {duration: 10*365});
@ -348,10 +339,6 @@ function changeScale() {
}
for ( var i = 0, length = monitors.length; i < length; i++ ) {
var monitor = monitors[i];
// console.log("scale = "+scale);
// console.log("SCALE_BASE = " + SCALE_BASE);
var newWidth = ( monitorData[i].width * scale ) / SCALE_BASE;
var newHeight = ( monitorData[i].height * scale ) / SCALE_BASE;
@ -384,126 +371,9 @@ function changeScale() {
streamImg.style.width = newWidth + "px";
streamImg.style.height = newHeight + "px";
}
// console.log("monitor_frame.height = " + monitor_frame.height());
// console.log("newHeight = " + newHeight);
updateZoneSvg(monitor, newWidth, newHeight);
}
}
//
// function updateZoneSvg(monitor, monitor_frame) {
/**
* cause the zone overlay Svg to track dims of associated monitor frame
* @arg monitor_frame is a jQuery element object
*/
function updateZoneSvg(monitor, newWidth, newHeight) {
console.log("calling updateZoneSvg");
// console.dir(monitor_frame);
// newWidth = monitor_frame.width();
// newHeight = monitor_frame.height();
if (!newWidth)
debugger;
if (!newHeight || newHeight < 10)
debugger;
if (!monitor)
monitor;
// zonesSVG is a mootools object
var zonesSVG = $('zones' + monitor.id);
if (zonesSVG) {
console.log("newWidth = " + newWidth);
console.log("newHeight = " + newHeight);
orig_scale = zonesSVG.getProperty('data-scale-orig');
//debugger;
//console.log("zonesSVG.style.width =" + zonesSVG.style.width);
zonesSVG.style.width = newWidth + "px";
//console.log("newWidth = " + newWidth + "px");
//console.log("zonesSVG.style.width = " + zonesSVG.style.width);
zonesSVG.style.height = newHeight + "px";
polygons = zonesSVG.getElements("polygon");
for (let index = 0; index < polygons.length; index++) {
const polygon = polygons[index];
//console.dir(polygon);
points = coordsToPoints(polygon.getProperty("data-coords-orig"));
//console.dir(points);
newPoints = scaleZonePoints(points,
newWidth / monitorData[index].width,
newHeight / monitorData[index].height);
//console.dir(newPoints);
//console.dir(newPoints);
//console.dir();
//console.dir(pointsToCoords(newPoints));
polygon.setProperty("points", pointsToCoords(newPoints));
}
}
}
/**
*
* @param {*} points
* @param {*} scale
*/
function scaleZonePoints(points, scalex, scaley) {
if (!points)
debugger;
if (!scalex)
debugger;
if (!scaley)
debugger;
// console.dir(points);
//debugger;
var newPoints = [];
for (let index = 0; index < points.length; index++) {
const point = points[index];
newPoints.push([point[0] * scalex, point[1] * scaley ]);
}
// console.dir(newPoints);
return newPoints;
}
/**
* convery coords string - "37,411 1246,542 1263,694 ..." to js array
* @param {*} coords
*/
function coordsToPoints(coords) {
var points = [];
points = coords.split(" ").map(function (item) {
return item.split(",").map(Math.round);
});
// console.dir(points);
return points;
}
/**
* convery points array to string - "37,411 1246,542 1263,694 ..."
* @param {*} coords
*/
function pointsToCoords(points) {
// console.dir(points);
var coords = [];
coords = points.map(function (item) {
return item.map(Math.round).join(",");
}).join(",");
// console.dir(coords);
return coords;
}
function toGrid(value) {
return Math.round(value / 80) * 80;
}

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

@ -254,13 +254,9 @@ foreach ( $monitors as $monitor ) {
$zones = array();
foreach( dbFetchAll('SELECT * FROM Zones WHERE MonitorId=? ORDER BY Area DESC', NULL, array($monitor->Id()) ) as $row ) {
$row['Points'] = coordsToPoints($row['Coords']);
$row['Points_orig'] = $row['Points'];
$row['Coords_orig'] = $row['Coords'];
// $monitor.orig_points = $row['Points'];
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 ),
@ -273,11 +269,10 @@ foreach ( $monitors as $monitor ) {
} // end foreach Zone
?>
<!-- track original values from when page is loaded with data-x-orig -->
<svg class="zones" id="zones<?php echo $monitor->Id() ?>" style="position:absolute; top: 0; left: 0; background: none; width: <?php echo $width ?>; height: <?php echo $height ?>;" data-width-orig="<?php echo $width ?>" data-height-orig="<?php echo $height ?>" data-scale-orig="<?php echo $scale ? $scale : 100 ?>">
<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'] .'" data-areacoords-orig="'. $zone['AreaCoords'] .'" data-coords-orig="'. $zone['Coords_orig'] .'" class="'. $zone['Type'].'" />';
echo '<polygon points="'. $zone['AreaCoords'] .'" class="'. $zone['Type'].'" />';
} // end foreach zone
?>
Sorry, your browser does not support inline SVG