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

use a scaled svg and replace inline js

pull/3034/head
Isaac Connor 2020-07-13 14:51:07 -04:00
parent dcd67a1acf
commit f22f3e9262
7 changed files with 49 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/includes/functions.php
View File

@ -2290,13 +2290,13 @@ function validHtmlStr($input) {
function getStreamHTML($monitor, $options = array()) {
if ( isset($options['scale']) ) {
if ( $options['scale'] != 'auto' && $options['scale'] != '0' and $options['scale'] != '' ) {
if ( $options['scale'] != 'auto' && $options['scale'] != '0' and $options['scale'] != '' and $options['scale'] != 0 ) {
ZM\Logger::Debug("Setting dimensions from scale:".$options['scale']);
$options['width'] = reScale($monitor->ViewWidth(), $options['scale']).'px';
$options['height'] = reScale($monitor->ViewHeight(), $options['scale']).'px';
} else {
$options['width'] = '100%';
$options['height'] = 'auto';
$options['width'] = 'auto';
$options['height'] = '100%';
}
} else {
# scale is empty or 100

5
web/skins/classic/css/base/views/zone.css
View File

@ -45,8 +45,13 @@
* the extreme edges of the imageFrame. */
#imageFrame {
position: relative;
width: 50%;
min-width: 640px;
padding: 0 3px 3px 0; /* Compensate for negative margins in the markers just below. */
}
#imageFrame img {
width: 100%;
}
#imageFrame div {
position: absolute;

14
web/skins/classic/css/base/views/zones.css
View File

@ -20,18 +20,18 @@
}
#zones, .ZonesImage {
position: relative;
width: 50%;
min-width: 500px;
float: left;
}
#zones {
width: 500px;
}
.ZonesImage img {
top:0;
left:0;
position: relative;
top:0;
left:0;
position: relative;
}
#content {
width: 100%;
width: 97%;
position: relative;
}

11
web/skins/classic/views/js/zone.js
View File

@ -245,13 +245,13 @@ function limitArea(field) {
}
function highlightOn(point) {
var index = point.getAttribute('data-index');
var index = point.getAttribute('data-point-index');
$('row'+index).addClass('highlight');
$('point'+index).addClass('highlight');
}
function highlightOff(point) {
var index = point.getAttribute('data-index');
var index = point.getAttribute('data-point-index');
$('row'+index).removeClass('highlight');
$('point'+index).removeClass('highlight');
}
@ -410,7 +410,7 @@ function drawZonePoints() {
for ( var i = 0; i < zone['Points'].length; i++ ) {
var div = new Element('div', {
'id': 'point'+i,
'data-index': i,
'data-point-index': i,
'class': 'zonePoint',
'title': 'Point '+(i+1),
'styles': {
@ -418,10 +418,8 @@ function drawZonePoints() {
'top': zone['Points'][i].y
}
});
//div.addEvent('mouseover', highlightOn.pass(i));
div.onmouseover = window['highlightOn'].bind(div, div);
div.onmouseout = window['highlightOff'].bind(div, div);
div.addEvent('mouseout', highlightOff.pass(i));
div.inject($('imageFrame'));
div.makeDraggable( {
'container': $('imageFrame'),
@ -439,7 +437,8 @@ function drawZonePoints() {
for ( var i = 0; i < zone['Points'].length; i++ ) {
var row;
row = new Element('tr', {'id': 'row'+i});
row.addEvents({'mouseover': highlightOn.pass(i), 'mouseout': highlightOff.pass(i)});
row.onmouseover = window['highlightOn'].bind(div, div);
row.onmouseout = window['highlightOff'].bind(div, div);
var cell = new Element('td');
cell.set('text', i+1);
cell.inject(row);

2
web/skins/classic/views/watch.php
View File

@ -151,7 +151,7 @@ if ( $streamMode == 'jpeg' ) {
} // end if streamMode==jpeg
?>
</div>
<div id="replayStatus"<?php echo $streamMode=="single"?' class="hidden"':'' ?>>
<div id="replayStatus"<?php echo $streamMode=="single" ? ' class="hidden"' : '' ?>>
<span id="mode"><?php echo translate('Mode') ?>: <span id="modeValue"></span></span>
<span id="rate"><?php echo translate('Rate') ?>: <span id="rateValue"></span>x</span>
<span id="delay"><?php echo translate('Delay') ?>: <span id="delayValue"></span>s</span>

31
web/skins/classic/views/zone.php
View File

@ -26,8 +26,6 @@ if ( !($mid and canEdit('Monitors', $mid)) ) {
$zid = (!empty($_REQUEST['zid'])) ? validInt($_REQUEST['zid']) : 0;
$scale = SCALE_BASE;
$hicolor = '0x00ff00'; // Green
$presets = array();
@ -45,16 +43,25 @@ foreach ( getEnumValues('Zones', 'Type') as $optType ) {
}
$optUnits = array();
foreach ( getEnumValues( 'Zones', 'Units' ) as $optUnit ) {
foreach ( getEnumValues('Zones', 'Units') as $optUnit ) {
$optUnits[$optUnit] = $optUnit;
}
$optCheckMethods = array();
foreach ( getEnumValues( 'Zones', 'CheckMethod' ) as $optCheckMethod ) {
foreach ( getEnumValues('Zones', 'CheckMethod') as $optCheckMethod ) {
$optCheckMethods[$optCheckMethod] = $optCheckMethod;
}
$monitor = new ZM\Monitor( $mid );
$monitor = new ZM\Monitor($mid);
if ( isset($_REQUEST['scale']) ) {
$scale = validInt($_REQUEST['scale']);
} else if ( isset($_COOKIE['zmWatchScale'.$mid]) ) {
$scale = $_COOKIE['zmWatchScale'.$mid];
} else {
$scale = $monitor->DefaultScale();
}
ZM\Error("Scale $scale");
$minX = 0;
$maxX = $monitor->ViewWidth()-1;
@ -63,7 +70,7 @@ $maxY = $monitor->ViewHeight()-1;
if ( !isset($newZone) ) {
if ( $zid > 0 ) {
$zone = dbFetchOne('SELECT * FROM Zones WHERE MonitorId = ? AND Id=?', NULL, array($monitor->Id(), $zid));
$zone = dbFetchOne('SELECT * FROM Zones WHERE MonitorId=? AND Id=?', NULL, array($monitor->Id(), $zid));
} else {
$zone = array(
'Id' => 0,
@ -110,17 +117,19 @@ $selfIntersecting = isSelfIntersecting($newZone['Points']);
$focusWindow = true;
$connkey = generateConnKey();
$streamSrc = '';
$streamMode = '';
# Have to do this here, because the .js.php references somethings figured out when generating the streamHTML
$StreamHTML = getStreamHTML($monitor, array('scale'=>$scale));
# So I'm thinking now that 50% of screen real-estate with a minimum of 640px.
# scale should be floor(whatever that width is/actual width)
# So we need javascript to figure out browser width, figure out scale and then activate the stream.
xhtmlHeaders(__FILE__, translate('Zone'));
?>
<body>
<div id="page">
<div id="header">
<h2><?php echo translate('Monitor') ?> <?php echo $monitor->Name() ?> - <?php echo translate('Zone') ?> <?php echo $newZone['Name'] ?></h2>
<h2><?php echo translate('Monitor').' '.$monitor->Name().' - '.translate('Zone').' '.$newZone['Name'] ?></h2>
</div>
<div id="content">
<form name="zoneForm" id="zoneForm" method="post" action="?" onkeypress="return event.keyCode != 13;">
@ -136,9 +145,9 @@ xhtmlHeaders(__FILE__, translate('Zone'));
<div id="definitionPanel">
<div class="monitor">
<div id="imagePanel">
<div id="imageFrame" style="position: relative; width: <?php echo reScale($monitor->ViewWidth(), $scale) ?>px; height: <?php echo reScale($monitor->ViewHeight(), $scale) ?>px;">
<div id="imageFrame">
<?php echo $StreamHTML; ?>
<svg id="zoneSVG" class="zones" style="position: absolute; top: 0; left: 0; width: <?php echo reScale($monitor->ViewWidth(), $scale) ?>px; height: <?php echo reScale($monitor->ViewHeight(), $scale) ?>px; background: none;">
<svg id="zoneSVG" class="zones" width="100%" viewBox="0 0 <?php echo $monitor->ViewWidth().' '.$monitor->ViewHeight() ?>" style="position:absolute; top: 0; left: 0; background: none;">
<?php
if ( $zone['Id'] ) {
$other_zones = dbFetchAll('SELECT * FROM Zones WHERE MonitorId = ? AND Id != ?', NULL, array($monitor->Id(), $zone['Id']));

14
web/skins/classic/views/zones.php
View File

@ -42,6 +42,7 @@ foreach ( dbFetchAll('SELECT * FROM Zones WHERE MonitorId=? ORDER BY Area DESC',
}
$connkey = generateConnKey();
$options = array('scale'=>$monitor->DefaultScale());
xhtmlHeaders(__FILE__, translate('Zones'));
?>
@ -56,13 +57,14 @@ xhtmlHeaders(__FILE__, translate('Zones'));
<input type="hidden" name="view" value="<?php echo $view ?>"/>
<input type="hidden" name="action" value="delete"/>
<input type="hidden" name="mid" value="<?php echo $mid ?>"/>
<div class="ZonesImage" style="width: <?php echo $monitor->ViewWidth() ?>px;">
<?php echo getStreamHTML($monitor); ?>
<svg class="zones" width="<?php echo $monitor->ViewWidth() ?>" height="<?php echo $monitor->ViewHeight() ?>" style="position:absolute; top: 0; left: 0; background: none;">
<div class="ZonesImage">
<?php echo getStreamHTML($monitor, $options); ?>
<svg class="zones" width="100%" viewBox="0 0 <?php echo $monitor->ViewWidth().' '.$monitor->ViewHeight() ?>"
style="position:absolute; top: 0; left: 0; background: none;">
<?php
foreach( array_reverse($zones) as $zone ) {
?>
<polygon points="<?php echo $zone['AreaCoords'] ?>" class="popup-link <?php echo $zone['Type']?>" onclick="streamCmdQuit(true); return false;"
<polygon points="<?php echo $zone['AreaCoords'] ?>" class="popup-link <?php echo $zone['Type']?>" data-on-click-true="streamCmdQuit"
data-url="?view=zone&amp;mid=<?php echo $mid ?>&amp;zid=<?php echo $zone['Id'] ?>"
data-window-name="zmZone<?php echo $zone['Id'] ?>"
data-window-tag="zone"
@ -90,7 +92,7 @@ xhtmlHeaders(__FILE__, translate('Zones'));
foreach( $zones as $zone ) {
?>
<tr>
<td class="colName"><?php echo makePopupLink('?view=zone&mid='.$mid.'&zid='.$zone['Id'], 'zmZone', array('zone', $monitor->ViewWidth(), $monitor->ViewHeight()), validHtmlStr($zone['Name']), true, 'onclick="streamCmdQuit(true); return false;"'); ?></td>
<td class="colName"><?php echo makePopupLink('?view=zone&mid='.$mid.'&zid='.$zone['Id'], 'zmZone', array('zone', $monitor->ViewWidth(), $monitor->ViewHeight()), validHtmlStr($zone['Name']), true, 'data-on-click-true="streamCmdQuit"'); ?></td>
<td class="colType"><?php echo validHtmlStr($zone['Type']) ?></td>
<td class="colUnits"><?php echo $zone['Area'] ?>&nbsp;/&nbsp;<?php echo sprintf('%.2f', ($zone['Area']*100)/($monitor->ViewWidth()*$monitor->ViewHeight()) ) ?></td>
<td class="colMark"><input type="checkbox" name="markZids[]" value="<?php echo $zone['Id'] ?>" data-on-click-this="configureDeleteButton"<?php if ( !canEdit('Monitors') ) { ?> disabled="disabled"<?php } ?>/></td>
@ -102,7 +104,7 @@ xhtmlHeaders(__FILE__, translate('Zones'));
</table>
<div id="contentButtons">
<?php echo makePopupButton('?view=zone&mid='.$mid.'&zid=0', 'zmZone', array('zone', $monitor->ViewWidth(), $monitor->ViewHeight()), translate('AddNewZone'), canEdit('Monitors')); ?>
<input type="submit" name="deleteBtn" value="<?php echo translate('Delete') ?>" disabled="disabled"/>
<button type="submit" name="deleteBtn" value="Delete" disabled="disabled"><?php echo translate('Delete') ?></button>
</div>
</div><!--zones-->
</form>