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

add js method to track liveStream img size for zones

This commit is contained in:
tolland 2019-06-20 12:46:04 +00:00
parent 4da5c52cd2
commit edd52e7fbf
2 changed files with 149 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -204,6 +204,11 @@ function Monitor(monitorData) {
}
} // end function Monitor
/**
* called when the layoutControl select element is changed, or the page
* is rendered??
* @return null
*/
function selectLayout(element) {
layout = $j(element).val();
@ -265,15 +270,18 @@ function selectLayout(element) {
// APPLET's and OBJECTS need to be re-initialized
}
streamImg.style.width = '100%';
updateZoneSvg(monitor, streamImg.getSize().x, streamImg.getSize().y);
}
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
* @return null
*/
function changeSize() {
var width = $('width').get('value');
var height = $('height').get('value');
@ -308,12 +316,12 @@ 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);
}
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,9 +330,14 @@ function changeSize() {
selectLayout('#zmMontageLayout');
} // end function changeSize()
/**
* called when the scaleControl select element is changed
* @return null
*/
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});
@ -335,6 +348,10 @@ 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;
@ -367,14 +384,126 @@ 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";
// 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

@ -43,6 +43,7 @@ $widths = array(
$heights = array(
'auto' => 'auto',
'240px' => '240px',
'320px' => '320px',
'480px' => '480px',
'720px' => '720px',
'1080px' => '1080px',
@ -253,6 +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());
@ -269,10 +273,11 @@ 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 ?>; height: <?php echo $height ?>;">
<!-- 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 ?>">
<?php
foreach( array_reverse($zones) as $zone ) {
echo '<polygon points="'. $zone['AreaCoords'] .'" class="'. $zone['Type'].'" />';
echo '<polygon points="'. $zone['AreaCoords'] .'" data-areacoords-orig="'. $zone['AreaCoords'] .'" data-coords-orig="'. $zone['Coords_orig'] .'" class="'. $zone['Type'].'" />';
} // end foreach zone
?>
Sorry, your browser does not support inline SVG