From 089c6044f1e3f42382f115bc04b55135489ee50d Mon Sep 17 00:00:00 2001 From: Isaac Connor Date: Sun, 5 Dec 2021 17:48:49 -0500 Subject: [PATCH] Add layers toggle button, cleanup code by using ->canView, rename Monitor to monitor, add svg zones layer --- web/skins/classic/views/event.php | 107 ++++++++++++++---------- web/skins/classic/views/js/event.js | 32 +++++-- web/skins/classic/views/js/event.js.php | 10 ++- 3 files changed, 98 insertions(+), 51 deletions(-) diff --git a/web/skins/classic/views/event.php b/web/skins/classic/views/event.php index e352f305b..b096fda97 100644 --- a/web/skins/classic/views/event.php +++ b/web/skins/classic/views/event.php @@ -25,47 +25,57 @@ 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_ids = explode(',', $user['MonitorIds']); - if ( count($monitor_ids) and ! in_array($Event->MonitorId(), $monitor_ids) ) { - $view = 'error'; - return; - } -} -$Monitor = $Event->Monitor(); +$monitor = $Event->Monitor(); -if ( isset($_REQUEST['rate']) ) { +if (!$monitor->canView()) { + $view = 'error'; + return; +} + +zm_session_start(); +if (isset($_REQUEST['rate']) ) { $rate = validInt($_REQUEST['rate']); -} else if ( isset($_COOKIE['zmEventRate']) ) { +} 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']) ) { +if (isset($_REQUEST['scale'])) { $scale = validInt($_REQUEST['scale']); -} else if ( isset($_COOKIE['zmEventScale'.$Event->MonitorId()]) ) { +} 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']) ) { +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'), @@ -79,32 +89,30 @@ $replayModes = array( 'gapless' => translate('ReplayGapless'), ); -if ( isset($_REQUEST['streamMode']) ) +if (isset($_REQUEST['streamMode'])) $streamMode = validHtmlStr($_REQUEST['streamMode']); else $streamMode = 'video'; $replayMode = ''; -if ( isset($_REQUEST['replayMode']) ) +if (isset($_REQUEST['replayMode'])) $replayMode = validHtmlStr($_REQUEST['replayMode']); -if ( isset($_COOKIE['replayMode']) && preg_match('#^[a-z]+$#', $_COOKIE['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; -if ( $Event->DefaultVideo() and ( $codec == 'MP4' or $codec == 'auto' ) ) { - $video_tag = true; -} +$video_tag = ($Event->DefaultVideo() and ($codec == 'MP4' or $codec == 'auto')); + // 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')) ) + if (in_array($Event->Orientation(),array('90','270'))) $Zoom = $Event->Height()/$Event->Width(); } @@ -143,7 +151,7 @@ if ( $Event->Id() and !file_exists($Event->Path()) )
-Id() ) { ?> +Id()) { ?> @@ -158,7 +166,13 @@ if ( $Event->Id() and !file_exists($Event->Path()) ) -Id ?> + +

Id() ?>

@@ -190,10 +204,10 @@ if ( $Event->Id() and !file_exists($Event->Path()) )
-
+ -
-
-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),'&'); 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),'&'); 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 ) {
-
+ +$monitor->Id()), array('order'=>'Area DESC')) as $zone) { + echo $zone->svg_polygon(); + } // end foreach zone +?> + Sorry, your browser does not support inline SVG + +

- + diff --git a/web/skins/classic/views/js/event.js b/web/skins/classic/views/js/event.js index 94e132cc1..b252c292c 100644 --- a/web/skins/classic/views/js/event.js +++ b/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')) { - console.log('No element with id tag imageFeed found.'); + if (!$j('#videoFeed')) { + 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 = 'layers'; + setCookie('zmEventShowZones'+eventData.MonitorId, '0', 3600); + } else { + zones.show(); + button.setAttribute('title', hideZonesString); + button.innerHTML = 'layers_clear'; + setCookie('zmEventShowZones'+eventData.MonitorId, '1', 3600); + } + } else { + console.error("Zones svg not found"); + } +} + // Kick everything off $j(document).ready(initPage); diff --git a/web/skins/classic/views/js/event.js.php b/web/skins/classic/views/js/event.js.php index cdd4e9041..5d4d57f7c 100644 --- a/web/skins/classic/views/js/event.js.php +++ b/web/skins/classic/views/js/event.js.php @@ -1,7 +1,7 @@ Id() ?>', Name: 'Name() ?>', MonitorId: 'MonitorId() ?>', - MonitorName: 'Name()) ?>', + MonitorName: 'Name()) ?>', Cause: 'Cause()) ?>', + Notes: 'Notes()?>', Width: 'Width() ?>', Height: 'Height() ?>', Length: 'Length() ?>', @@ -72,6 +73,7 @@ var eventDataStrings = { MonitorId: '', MonitorName: '', Cause: '', + Notes: '', StartDateTimeShort: '', Length: '', Frames: '', @@ -93,7 +95,7 @@ var sortQuery = '; var rate = ''; // really only used when setting up initial playback rate. var scale = ""; -var LabelFormat = "LabelFormat())?>"; +var LabelFormat = "LabelFormat())?>"; var streamTimeout = ; @@ -105,6 +107,8 @@ var streamMode = ''; // var deleteString = ""; var causeString = ""; +var showZonesString = ""; +var hideZonesString = ""; var WEB_LIST_THUMB_WIDTH = ''; var WEB_LIST_THUMB_HEIGHT = ''; var popup = '';