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

This commit is contained in:
Isaac Connor 2021-12-05 17:48:49 -05:00
parent 76c4560c25
commit 089c6044f1
3 changed files with 98 additions and 51 deletions

View File

@ -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) ) {
$monitor = $Event->Monitor();
if (!$monitor->canView()) {
$view = 'error';
return;
}
}
$Monitor = $Event->Monitor();
if ( isset($_REQUEST['rate']) ) {
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()) )
<div id="toolbar" >
<button id="backBtn" class="btn btn-normal" data-toggle="tooltip" data-placement="top" title="<?php echo translate('Back') ?>" disabled><i class="fa fa-arrow-left"></i></button>
<button id="refreshBtn" class="btn btn-normal" data-toggle="tooltip" data-placement="top" title="<?php echo translate('Refresh') ?>" ><i class="fa fa-refresh"></i></button>
<?php if ( $Event->Id() ) { ?>
<?php if ($Event->Id()) { ?>
<button id="renameBtn" class="btn btn-normal" data-toggle="tooltip" data-placement="top" title="<?php echo translate('Rename') ?>" disabled><i class="fa fa-font"></i></button>
<button id="archiveBtn" class="btn btn-normal" data-toggle="tooltip" data-placement="top" title="<?php echo translate('Archive') ?>" disabled><i class="fa fa-archive"></i></button>
<button id="unarchiveBtn" class="btn btn-normal" data-toggle="tooltip" data-placement="top" title="<?php echo translate('Unarchive') ?>" disabled><i class="fa fa-file-archive-o"></i></button>
@ -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 -->
<?php
if ( $video_tag ) {
?>
<div id="videoFeed">
<?php
if ($video_tag) {
?>
<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>
@ -268,8 +286,8 @@ if ( (ZM_WEB_STREAM_METHOD == 'mpeg') && ZM_MPEG_LIVE_FORMAT ) {
<span id="mode"><?php echo translate('Mode') ?>: <span id="modeValue">Replay</span></span>
<span id="rate"><?php echo translate('Rate') ?>:
<?php
#rates are defined in skins/classic/includes/config.php
echo htmlSelect('rate', $rates, intval($rate), array('id'=>'rateValue'));
#rates are defined in skins/classic/includes/config.php
echo htmlSelect('rate', $rates, intval($rate), array('id'=>'rateValue'));
?>
<!--<span id="rateValue"><?php echo $rate/100 ?></span>x</span>-->
<span id="progress"><?php echo translate('Progress') ?>: <span id="progressValue">0</span>s</span>
@ -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();
?>

View File

@ -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 = '<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);

View File

@ -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 ?>';