From f22f3e92629bb819eace9195cec17edc06fca051 Mon Sep 17 00:00:00 2001
From: Isaac Connor <isaac@zoneminder.com>
Date: Mon, 13 Jul 2020 14:51:07 -0400
Subject: [PATCH] use a scaled svg and replace inline js

---
 web/includes/functions.php                 |  6 ++---
 web/skins/classic/css/base/views/zone.css  |  5 ++++
 web/skins/classic/css/base/views/zones.css | 14 +++++-----
 web/skins/classic/views/js/zone.js         | 11 ++++----
 web/skins/classic/views/watch.php          |  2 +-
 web/skins/classic/views/zone.php           | 31 ++++++++++++++--------
 web/skins/classic/views/zones.php          | 14 +++++-----
 7 files changed, 49 insertions(+), 34 deletions(-)

diff --git a/web/includes/functions.php b/web/includes/functions.php
index 59cb169d7..2a1d1413c 100644
--- a/web/includes/functions.php
+++ b/web/includes/functions.php
@@ -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
diff --git a/web/skins/classic/css/base/views/zone.css b/web/skins/classic/css/base/views/zone.css
index 44cd1a115..9fd88d1fb 100644
--- a/web/skins/classic/css/base/views/zone.css
+++ b/web/skins/classic/css/base/views/zone.css
@@ -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;
diff --git a/web/skins/classic/css/base/views/zones.css b/web/skins/classic/css/base/views/zones.css
index f65dcdf33..0f987361b 100644
--- a/web/skins/classic/css/base/views/zones.css
+++ b/web/skins/classic/css/base/views/zones.css
@@ -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;
 }
diff --git a/web/skins/classic/views/js/zone.js b/web/skins/classic/views/js/zone.js
index 013df3ea5..ac9097135 100644
--- a/web/skins/classic/views/js/zone.js
+++ b/web/skins/classic/views/js/zone.js
@@ -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);
diff --git a/web/skins/classic/views/watch.php b/web/skins/classic/views/watch.php
index 70e5f410a..c0e056691 100644
--- a/web/skins/classic/views/watch.php
+++ b/web/skins/classic/views/watch.php
@@ -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>
diff --git a/web/skins/classic/views/zone.php b/web/skins/classic/views/zone.php
index 207bd64e5..3ab75338e 100644
--- a/web/skins/classic/views/zone.php
+++ b/web/skins/classic/views/zone.php
@@ -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']));
diff --git a/web/skins/classic/views/zones.php b/web/skins/classic/views/zones.php
index de862d5c0..4ecd18432 100644
--- a/web/skins/classic/views/zones.php
+++ b/web/skins/classic/views/zones.php
@@ -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>