Merge branch 'zones_on_montage' into storageareas

web/includes/functions.php

@@ -1774,6 +1774,13 @@ function limitPoints( &$points, $min_x, $min_y, $max_x, $max_y ) {
   } // end foreach point
 } // end function limitPoints( $points, $min_x, $min_y, $max_x, $max_y )
 
+function scalePoints( &$points, $scale ) {
+  foreach ( $points as &$point ) {
+    $point['x'] = reScale( $point['x'], $scale );
+    $point['y'] = reScale( $point['y'], $scale );
+  }
+}
+
 function getLanguages() {
   $langs = array();
   foreach ( glob("lang/*_*.php") as $file ) {

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

@@ -28,9 +28,11 @@
 #monitors .imageFeed {
     text-align: center;
     vertical-align: middle;
+  position: relative;
 }
 
-#monitors .imageFeed img {
+#monitors .imageFeed img,
+#monitors .imageFeed svg {
     border: 2px solid #ffffff;
     margin: 0;
     padding: 0;
@@ -53,7 +55,29 @@
     margin: 2px auto;
     text-align: center;
     border: 0;
+  min-height: 16px;
 }
 #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/includes/functions.php

@@ -98,10 +98,10 @@ var $j = jQuery.noConflict();
   <script src='https://www.google.com/recaptcha/api.js'></script>
 <?php } else if ( $title == 'Event' ) {
 ?>
-        <link href="//vjs.zencdn.net/4.11/video-js.css" rel="stylesheet">
+        <link href="skins/<?php echo $skin; ?>/js/video-js.css" rel="stylesheet">
-        <script src="//vjs.zencdn.net/4.11/video.js"></script>
+        <script src="skins/<?php echo $skin; ?>/js/video.js"></script>
         <script src="./js/videojs.zoomrotate.js"></script>
-        <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
+        <script src="skins/<?php echo $skin; ?>/js/moment.min.js"></script>
 <?php
     }
     if ( $skinJsPhpFile )

web/skins/classic/views/montage.php

@@ -34,6 +34,12 @@ if ( !empty($_REQUEST['group']) ) {
 }
 
 $showControl = false;
+$showZones = false;
+if ( isset( $_REQUEST['showZones'] ) ) {
+  if ( $_REQUEST['showZones'] == 1 ) {
+    $showZones = true;
+  }
+}
 $monitors = array();
 $widths = array( 
   ''  => 'auto',
@@ -42,27 +48,25 @@ $widths = array(
   352  => 352,
   640 => 640,
   1280 => 1280 );
+
 $heights = array( 
   ''  => 'auto',
   240 => 240,
   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;
   }
 
-  $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 );
 
@@ -76,7 +80,7 @@ foreach( dbFetchAll( $sql ) as $row ) {
   if ( ! isset( $heights[$row['Height']] ) ) {
     $heights[$row['Height']] = $row['Height'];
   }
-}
+} # end foreach Monitor
 
 $focusWindow = true;
 
@@ -115,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>
@@ -135,7 +148,59 @@ foreach ( $monitors as $monitor ) {
         <div id="monitorFrame<?php echo $monitor->Id() ?>" class="monitorFrame" title="<?php echo $monitor->Id() . ' ' .$monitor->Name() ?>">
           <div id="monitor<?php echo $monitor->Id() ?>" class="monitor idle">
             <div id="imageFeed<?php echo $monitor->Id() ?>" class="imageFeed" onclick="createPopup( '?view=watch&amp;mid=<?php echo $monitor->Id() ?>', 'zmWatch<?php echo $monitor->Id() ?>', 'watch', <?php echo reScale( $monitor->Width(), $monitor->PopupScale() ); ?>, <?php echo reScale( $monitor->Height(), $monitor->PopupScale() ); ?> );">
-            <?php echo getStreamHTML( $monitor, $options ); ?>
+            <?php 
+              echo getStreamHTML( $monitor, $options );
+              if ( $showZones ) { 
+                $height = null;
+                $width = null;
+                if ( $options['width'] ) {
+                  $width = $options['width'];
+                  if ( ! $options['height'] ) {
+                    $scale = (int)( 100 * $options['width'] / $monitor->Width() );
+                    $height = reScale( $monitor->Height(), $scale );
+                  }
+                } 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();
+                foreach( dbFetchAll( 'SELECT * FROM Zones WHERE MonitorId=? ORDER BY Area DESC', NULL, array($monitor->Id()) ) as $row ) {
+                  $row['Points'] = coordsToPoints( $row['Coords'] );
+
+                  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 ),
+                        ( $height ? $height-1 : $monitor->Height()-1 )
+                        );
+                  }
+                  $row['Coords'] = pointsToCoords( $row['Points'] );
+                  $row['AreaCoords'] = preg_replace( '/\s+/', ',', $row['Coords'] );
+                  $zones[] = $row;
+                }
+
+?>
+
+            <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 ) {
+              ?>
+                <polygon points="<?php echo $zone['AreaCoords'] ?>" class="<?php echo $zone['Type']?>" />
+                <?php
+            } // end foreach zone
+?>
+  Sorry, your browser does not support inline SVG
+  </svg>
+<?php } # end if showZones ?>
             </div>
 <?php
     if ( !ZM_WEB_COMPACT_MONTAGE ) {