Add layers toggle button, cleanup code by using ->canView, rename Monitor to monitor, add svg zones layer

web/skins/classic/views/event.php

@@ -25,26 +25,26 @@ if ( !canView('Events') ) {
 
 require_once('includes/Event.php');
 require_once('includes/Filter.php');
+require_once('includes/Zone.php');
 
 $eid = validInt($_REQUEST['eid']);
 $fid = !empty($_REQUEST['fid']) ? validInt($_REQUEST['fid']) : 1;
 
 $Event = new ZM\Event($eid);
-if ( $user['MonitorIds'] ) {
+$monitor = $Event->Monitor();
-  $monitor_ids = explode(',', $user['MonitorIds']);
+
-  if ( count($monitor_ids) and ! in_array($Event->MonitorId(), $monitor_ids) ) {
+if (!$monitor->canView()) {
   $view = 'error';
   return;
 }
-}
-$Monitor = $Event->Monitor();
 
+zm_session_start();
 if (isset($_REQUEST['rate']) ) {
   $rate = validInt($_REQUEST['rate']);
 } else if (isset($_COOKIE['zmEventRate'])) {
   $rate = $_COOKIE['zmEventRate'];
 } else {
-  $rate = reScale(RATE_BASE, $Monitor->DefaultRate(), ZM_WEB_DEFAULT_RATE);
+  $rate = reScale(RATE_BASE, $monitor->DefaultRate(), ZM_WEB_DEFAULT_RATE);
 }
 
 if (isset($_REQUEST['scale'])) {
@@ -52,20 +52,30 @@ if ( isset($_REQUEST['scale']) ) {
 } else if (isset($_COOKIE['zmEventScale'.$Event->MonitorId()])) {
   $scale = $_COOKIE['zmEventScale'.$Event->MonitorId()];
 } else {
-  $scale = $Monitor->DefaultScale();
+  $scale = $monitor->DefaultScale();
+}
+
+$showZones = false;
+if (isset($_REQUEST['showZones'])) {
+  $showZones = $_REQUEST['showZones'] == 1;
+  $_SESSION['zmEventShowZones'.$monitor->Id()] = $showZones;
+} else if (isset($_COOKIE['zmEventShowZones'.$monitor->Id()])) {
+  $showZones = $_COOKIE['zmEventShowZones'.$monitor->Id()] == 1;
+} else if (isset($_SESSION['zmEventShowZones'.$monitor->Id()]) ) {
+  $showZones = $_SESSION['zmEventShowZones'.$monitor->Id()];
 }
 
 $codec = 'auto';
 if (isset($_REQUEST['codec'])) {
   $codec = $_REQUEST['codec'];
-  zm_session_start();
   $_SESSION['zmEventCodec'.$Event->MonitorId()] = $codec;
-  session_write_close();
 } else if ( isset($_SESSION['zmEventCodec'.$Event->MonitorId()]) ) {
   $codec = $_SESSION['zmEventCodec'.$Event->MonitorId()];
 } else {
-  $codec = $Monitor->DefaultCodec();
+  $codec = $monitor->DefaultCodec();
 }
+session_write_close();
+
 $codecs = array(
   'auto'  => translate('Auto'),
   'MP4'   => translate('MP4'),
@@ -90,18 +100,16 @@ if ( isset($_REQUEST['replayMode']) )
 if (isset($_COOKIE['replayMode']) && preg_match('#^[a-z]+$#', $_COOKIE['replayMode']))
   $replayMode = validHtmlStr($_COOKIE['replayMode']);
 
-if ( ( !$replayMode ) or ( !$replayModes[$replayMode] ) ) {
+if ((!$replayMode) or !$replayModes[$replayMode]) {
   $replayMode = 'none';
 }
 
-$video_tag = false;
+$video_tag = ($Event->DefaultVideo() and ($codec == 'MP4' or $codec == 'auto'));
-if ( $Event->DefaultVideo() and ( $codec == 'MP4' or $codec == 'auto' ) ) {
+
-  $video_tag = true;
-}
 // videojs zoomrotate only when direct recording
 $Zoom = 1;
 $Rotation = 0;
-if ( $Monitor->VideoWriter() == '2' ) {
+if ($monitor->VideoWriter() == '2') {
 # Passthrough
   $Rotation = $Event->Orientation();
   if (in_array($Event->Orientation(),array('90','270')))
@@ -158,7 +166,13 @@ if ( $Event->Id() and !file_exists($Event->Path()) )
         <button id="statsBtn" class="btn btn-normal" data-toggle="tooltip" data-placement="top" title="<?php echo translate('Stats') ?>" ><i class="fa fa-info"></i></button>
         <button id="framesBtn" class="btn btn-normal" data-toggle="tooltip" data-placement="top" title="<?php echo translate('Frames') ?>" ><i class="fa fa-picture-o"></i></button>
         <button id="deleteBtn" class="btn btn-danger" data-toggle="tooltip" data-placement="top" title="<?php echo translate('Delete') ?>"><i class="fa fa-trash"></i></button>
-<?php } // end if Event->Id ?>
+<?php
+  if (canView('System')) { ?>
+    <button id="toggleZonesButton" class="btn btn-<?php echo $showZones?'normal':'secondary'?>" title="<?php echo translate(($showZones?'Hide':'Show').' Zones')?>" ><span class="material-icons"><?php echo $showZones?'layers_clear':'layers'?></span</button>
+<?php
+  }
+  } // end if Event->Id
+?>
       </div>
       
       <h2><?php echo translate('Event').' '.$Event->Id() ?></h2>
@@ -190,10 +204,10 @@ if ( $Event->Id() and !file_exists($Event->Path()) )
       <div class="">
       <div id="eventVideo">
       <!-- VIDEO CONTENT -->
+        <div id="videoFeed">
 <?php
 if ($video_tag) {
 ?>
-        <div id="videoFeed">
           <video autoplay id="videoobj" class="video-js vjs-default-skin"
             style="transform: matrix(1, 0, 0, 1, 0, 0);"
            <?php echo $scale ? 'width="'.reScale($Event->Width(), $scale).'"' : '' ?>
@@ -209,21 +223,17 @@ if ( $video_tag ) {
           <track id="monitorCaption" kind="captions" label="English" srclang="en" src='data:plain/text;charset=utf-8,"WEBVTT\n\n 00:00:00.000 --> 00:00:01.000 ZoneMinder"' default/>
           Your browser does not support the video tag.
           </video>
-        </div><!--videoFeed-->
 <?php
 } else {
-?>
-      <div id="imageFeed">
-<?php
 if ( (ZM_WEB_STREAM_METHOD == 'mpeg') && ZM_MPEG_LIVE_FORMAT ) {
   $streamSrc = $Event->getStreamSrc(array('mode'=>'mpeg', 'scale'=>$scale, 'rate'=>$rate, 'bitrate'=>ZM_WEB_VIDEO_BITRATE, 'maxfps'=>ZM_WEB_VIDEO_MAXFPS, 'format'=>ZM_MPEG_REPLAY_FORMAT, 'replay'=>$replayMode),'&amp;');
   outputVideoStream('evtStream', $streamSrc, reScale( $Event->Width(), $scale ).'px', reScale( $Event->Height(), $scale ).'px', ZM_MPEG_LIVE_FORMAT );
 } else {
   $streamSrc = $Event->getStreamSrc(array('mode'=>'jpeg', 'frame'=>$fid, 'scale'=>$scale, 'rate'=>$rate, 'maxfps'=>ZM_WEB_VIDEO_MAXFPS, 'replay'=>$replayMode),'&amp;');
   if ( canStreamNative() ) {
-    outputImageStream('evtStream', $streamSrc, reScale($Event->Width(), $scale).'px', reScale($Event->Height(), $scale).'px', validHtmlStr($Event->Name()));
+    outputImageStream('evtStream', $streamSrc, '100%', '100%', validHtmlStr($Event->Name()));
   } else {
-    outputHelperStream('evtStream', $streamSrc, reScale($Event->Width(), $scale).'px', reScale($Event->Height(), $scale).'px' );
+    outputHelperStream('evtStream', $streamSrc, '100%', '100%');
   }
 } // end if stream method
 ?>
@@ -231,10 +241,18 @@ if ( (ZM_WEB_STREAM_METHOD == 'mpeg') && ZM_MPEG_LIVE_FORMAT ) {
         <div id="progressBar" style="width: <?php echo reScale($Event->Width(), $scale);?>px;">
           <div class="progressBox" id="progressBox" title="" style="width: 0%;"></div>
         </div><!--progressBar-->
-      </div><!--imageFeed-->
 <?php
 } /*end if !DefaultVideo*/
 ?>
+<svg class="zones" id="zones<?php echo $monitor->Id() ?>" style="display:<?php echo $showZones ? 'block' : 'none'; ?>" viewBox="0 0 <?php echo $monitor->ViewWidth().' '.$monitor->ViewHeight() ?>" preserveAspectRatio="none">
+<?php
+    foreach (ZM\Zone::find(array('MonitorId'=>$monitor->Id()), array('order'=>'Area DESC')) as $zone) {
+      echo $zone->svg_polygon();
+    } // end foreach zone
+?>
+  Sorry, your browser does not support inline SVG
+</svg>
+        </div><!--videoFeed-->
         <p id="dvrControls">
           <button type="button" id="prevBtn" title="<?php echo translate('Prev') ?>" class="inactive" data-on-click-true="streamPrev">
           <i class="material-icons md-18">skip_previous</i>
@@ -283,4 +301,7 @@ echo htmlSelect('rate', $rates, intval($rate), array('id'=>'rateValue'));
     </div><!--content-->
     
   </div><!--page-->
-<?php xhtmlFooter() ?>
+<?php
+  echo output_link_if_exists(array('css/base/zones.css'));
+  xhtmlFooter();
+?>

web/skins/classic/views/js/event.js

@@ -177,7 +177,7 @@ function changeScale() {
   var newWidth;
   var newHeight;
   var autoScale;
-  var eventViewer= $j(vid ? '#videoobj' : '#evtStream');
+  var eventViewer= $j(vid ? '#videoobj' : '#videoFeed');
   var alarmCue = $j('div.alarmCue');
   var bottomEl = $j('#replayStatus');
 
@@ -910,12 +910,12 @@ function initPage() {
     progressBarNav();
     streamCmdTimer = setTimeout(streamQuery, 500);
     if (canStreamNative) {
-      if (!$j('#imageFeed')) {
+      if (!$j('#videoFeed')) {
-        console.log('No element with id tag imageFeed found.');
+        console.log('No element with id tag videoFeed found.');
       } else {
-        var streamImg = $j('#imageFeed img');
+        var streamImg = $j('#videoFeed img');
         if (!streamImg) {
-          streamImg = $j('#imageFeed object');
+          streamImg = $j('#videoFeed object');
         }
         $j(streamImg).click(function(event) {
           handleClick(event);
@@ -1071,5 +1071,27 @@ function initPage() {
   });
 } // end initPage
 
+document.getElementById('toggleZonesButton').addEventListener('click', toggleZones);
+
+function toggleZones(e) {
+  const zones = $j('#zones'+eventData.MonitorId);
+  const button = document.getElementById('toggleZonesButton');
+  if (zones.length) {
+    if (zones.is(":visible")) {
+      zones.hide();
+      button.setAttribute('title', showZonesString);
+      button.innerHTML = '<span class="material-icons">layers</span>';
+      setCookie('zmEventShowZones'+eventData.MonitorId, '0', 3600);
+    } else {
+      zones.show();
+      button.setAttribute('title', hideZonesString);
+      button.innerHTML = '<span class="material-icons">layers_clear</span>';
+      setCookie('zmEventShowZones'+eventData.MonitorId, '1', 3600);
+    }
+  } else {
+    console.error("Zones svg not found");
+  }
+}
+
 // Kick everything off
 $j(document).ready(initPage);

web/skins/classic/views/js/event.js.php

@@ -1,7 +1,7 @@
 <?php
   global $connkey;
   global $Event;
-  global $Monitor;
+  global $monitor;
   global $filterQuery;
   global $sortQuery;
   global $rates;
@@ -43,8 +43,9 @@ var eventData = {
     Id: '<?php echo $Event->Id() ?>',
     Name: '<?php echo $Event->Name() ?>',
     MonitorId: '<?php echo $Event->MonitorId() ?>',
-    MonitorName: '<?php echo validJsStr($Monitor->Name()) ?>',
+    MonitorName: '<?php echo validJsStr($monitor->Name()) ?>',
     Cause: '<?php echo validHtmlStr($Event->Cause()) ?>',
+    Notes: '<?php echo $Event->Notes()?>',
     Width: '<?php echo $Event->Width() ?>',
     Height: '<?php echo $Event->Height() ?>',
     Length: '<?php echo $Event->Length() ?>',
@@ -72,6 +73,7 @@ var eventDataStrings = {
     MonitorId: '<?php echo translate('AttrMonitorId') ?>',
     MonitorName: '<?php echo translate('AttrMonitorName') ?>',
     Cause: '<?php echo translate('Cause') ?>',
+    Notes: '<?php echo translate('Notes') ?>',
     StartDateTimeShort: '<?php echo translate('AttrStartTime') ?>',
     Length: '<?php echo translate('Duration') ?>',
     Frames: '<?php echo translate('AttrFrames') ?>',
@@ -93,7 +95,7 @@ var sortQuery = '<?php echo isset($sortQuery)?validJsStr(htmlspecialchars_decode
 var rates = <?php echo json_encode(array_keys($rates)) ?>;
 var rate = '<?php echo $rate ?>'; // really only used when setting up initial playback rate.
 var scale = "<?php echo $scale ?>";
-var LabelFormat = "<?php echo validJsStr($Monitor->LabelFormat())?>";
+var LabelFormat = "<?php echo validJsStr($monitor->LabelFormat())?>";
 
 var streamTimeout = <?php echo 1000*ZM_WEB_REFRESH_STATUS ?>;
 
@@ -105,6 +107,8 @@ var streamMode = '<?php echo $streamMode ?>';
 //
 var deleteString = "<?php echo validJsStr(translate('Delete')) ?>";
 var causeString = "<?php echo validJsStr(translate('AttrCause')) ?>";
+var showZonesString = "<?php echo validJsStr(translate('Show Zones'))?>";
+var hideZonesString = "<?php echo validJsStr(translate('Hide Zones'))?>";
 var WEB_LIST_THUMB_WIDTH = '<?php echo ZM_WEB_LIST_THUMB_WIDTH ?>';
 var WEB_LIST_THUMB_HEIGHT = '<?php echo ZM_WEB_LIST_THUMB_HEIGHT ?>';
 var popup = '<?php echo $popup ?>';