fix scaling, zones now work. Add a Show/Hide Zones at the top

web/skins/classic/css/classic/views/montage.css

@@ -26,7 +26,8 @@
     vertical-align: middle;
 }
 
-#monitors .imageFeed img {
+#monitors .imageFeed img ,
+#monitors .imageFeed svg {
     border: 2px solid #ffffff;
 }
 
@@ -50,3 +51,23 @@
 #monitors .alert .monitorState {
     border: 0;
 }
+.zones polygon {
+  fill-opacity: 0.25;
+}
+.Active {
+  stroke: #ff0000;
+  fill: #ff0000;
+}
+.Inclusive {
+  stroke: #FFA500;
+  fill: #FFA500;
+}
+.Exclusive {
+  stroke: #800080;
+  fill: #800080;
+}
+.Preclusive {
+  stroke: #0000FF;
+  fill: #0000FF;
+}
+

web/skins/classic/css/dark/views/montage.css

@@ -27,7 +27,8 @@
     vertical-align: middle;
 }
 
-#monitors .imageFeed img {
+#monitors .imageFeed img ,
+#monitors .imageFeed svg {
     border: 2px solid #999999;
 }
 
@@ -52,3 +53,23 @@
     border: 0;
 }
 
+.zones polygon {
+  fill-opacity: 0.25;
+}
+.Active {
+  stroke: #ff0000;
+  fill: #ff0000;
+}
+.Inclusive {
+  stroke: #FFA500;
+  fill: #FFA500;
+}
+.Exclusive {
+  stroke: #800080;
+  fill: #800080;
+}
+.Preclusive {
+  stroke: #0000FF;
+  fill: #0000FF;
+}
+

web/skins/classic/css/flat/views/montage.css

@@ -31,7 +31,8 @@
   position: relative;
 }
 
-#monitors .imageFeed img {
+#monitors .imageFeed img,
+#monitors .imageFeed svg {
     border: 2px solid #ffffff;
     margin: 0;
     padding: 0;
@@ -62,7 +63,6 @@
 
 .zones polygon {
   fill-opacity: 0.25;
-  stroke-width: 2px;
 }
 .Active {
   stroke: #ff0000;

web/skins/classic/views/montage.php

@@ -34,7 +34,12 @@ if ( !empty($_REQUEST['group']) ) {
 }
 
 $showControl = false;
-$showZones = true;
+$showZones = false;
+if ( isset( $_REQUEST['showZones'] ) ) {
+  if ( $_REQUEST['showZones'] == 1 ) {
+    $showZones = true;
+  }
+}
 $monitors = array();
 $widths = array( 
   ''  => 'auto',
@@ -50,20 +55,18 @@ $heights = array(
   480 => 480,
 );
 
+$width_scale = $height_scale = $scale = null;
+
+if ( isset( $_REQUEST['scale'] ) )
+  $scale = validInt($_REQUEST['scale']);
+else if ( isset( $_COOKIE['zmMontageScale'] ) )
+  $scale = $_COOKIE['zmMontageScale'];
+
 foreach( dbFetchAll( $sql ) as $row ) {
   if ( !visibleMonitor( $row['Id'] ) ) {
     continue;
   }
 
-  $width_scale = $height_scale = $scale = null;
-  
-  if ( isset( $_REQUEST['scale'] ) )
-    $scale = validInt($_REQUEST['scale']);
-  else if ( isset( $_COOKIE['zmMontageScale'] ) )
-    $scale = $_COOKIE['zmMontageScale'];
-  #else
-    #$scale = reScale( SCALE_BASE, $row['DefaultScale'], ZM_WEB_DEFAULT_SCALE );
-
   $row['Scale'] = $scale;
   $row['PopupScale'] = reScale( SCALE_BASE, $row['DefaultScale'], ZM_WEB_DEFAULT_SCALE );
 
@@ -116,6 +119,15 @@ if ( $showControl ) {
         <a href="#" onclick="createPopup( '?view=control', 'zmControl', 'control' )"><?php echo translate('Control') ?></a>
 <?php
 }
+if ( $showZones ) {
+?>
+        <a href="<?php echo $_SERVER['PHP_SELF'].'?view=montage&showZones=0'; ?>">Hide Zones</a>
+<?php
+} else {
+?>
+        <a href="<?php echo $_SERVER['PHP_SELF'].'?view=montage&showZones=1'; ?>">Show Zones</a>
+<?php
+}
 ?>
         <a href="#" onclick="closeWindow()"><?php echo translate('Close') ?></a>
       </div>
@@ -141,13 +153,21 @@ foreach ( $monitors as $monitor ) {
               if ( $showZones ) { 
                 $height = null;
                 $width = null;
-                if ( $options['width'] and ! $options['height'] ) {
+                if ( $options['width'] ) {
-                  $scale =  $options['width'] / $monitor->Width();
+                  $width = $options['width'];
-                  $height = $monitor->Height() * $scale;
+                  if ( ! $options['height'] ) {
-                } else if ( $options['height'] and ! $options['width'] ) {
+                    $scale = (int)( 100 * $options['width'] / $monitor->Width() );
-                  
+                    $height = reScale( $monitor->Height(), $scale );
-                  $scale = $options['height'] / $monitor->Height();
+                  }
+                } else if ( $options['height'] ) {
+                  $height =  $options['height'];
+                  if ( ! $options['width'] ) {
+                    $scale = (int)( 100 * $options['height'] / $monitor->Height() );
+                    $width = reScale( $monitor->Width(), $scale );
+                  }
+                } else if ( $scale ) {
                   $width = $monitor->Width() * $scale;
+                  $height = $monitor->Height() * $scale;
                 } 
 
                 $zones = array();
@@ -155,7 +175,6 @@ foreach ( $monitors as $monitor ) {
                   $row['Points'] = coordsToPoints( $row['Coords'] );
 
                   if ( $scale ) {
-Debug(" Scale: $scale" );
                     limitPoints( $row['Points'], 0, 0, $monitor->Width(), $monitor->Height() );
                     scalePoints( $row['Points'], $scale );
                   } else {
@@ -171,7 +190,7 @@ Debug(" Scale: $scale" );
 
 ?>
 
-            <svg class="zones" width="<?php echo $options['width'] ? $options['width'] : reScale( $monitor->Width(), $scale ) ?>" height="<?php echo $options['height'] ? $options['height'] : reScale( $monitor->Height(), $scale ) ?>" style="position:absolute; top: 0; left: 0; background: none;">
+            <svg class="zones" width="<?php echo $width ?>" height="<?php echo $height ?>" style="position:absolute; top: 0; left: 0; background: none;">
             <?php
             foreach( array_reverse($zones) as $zone ) {
               ?>