ZaneYork
/
zoneminder
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1406 from ZoneMinder/svg_zones 

replace the static zone image with a stream, and use SVG to draw the zones
This commit is contained in:
Isaac Connor 2016-04-11 11:14:11 -04:00
parent 32dac7e281 39a30ff51b
commit 851a81eff7
15 changed files with 487 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/includes/config.php.in
View File

@ -104,6 +104,7 @@ define( "CMD_PREV", 12 );
define( "CMD_NEXT", 13 );
define( "CMD_SEEK", 14 );
define( "CMD_VARPLAY", 15 );
define( "CMD_QUIT", 17 );
define( "CMD_QUERY", 99 );
//

18
web/includes/functions.php
View File

@ -2494,4 +2494,22 @@ function validHtmlStr( $input )
return( htmlspecialchars( $input, ENT_QUOTES ) );
}
function getStreamHTML( $monitor, $scale=100 ) {
//FIXME, the width and height of the image need to be scaled.
if ( ZM_WEB_STREAM_METHOD == 'mpeg' && ZM_MPEG_LIVE_FORMAT ) {
$streamSrc = $monitor->getStreamSrc( array( "mode=mpeg", "scale=".$scale, "bitrate=".ZM_WEB_VIDEO_BITRATE, "maxfps=".ZM_WEB_VIDEO_MAXFPS, "format=".ZM_MPEG_LIVE_FORMAT ) );
outputVideoStream( "liveStream", $streamSrc, reScale( $monitor->Width(), $scale ), reScale( $monitor->Height(), $scale ), ZM_MPEG_LIVE_FORMAT, $monitor->Name() );
} else if ( canStream() ) {
$streamSrc = $monitor->getStreamSrc( array( 'mode=jpeg', 'scale='.$scale, 'maxfps='.ZM_WEB_VIDEO_MAXFPS, 'buffer='.$monitor->StreamReplayBuffer() ) );
if ( canStreamNative() )
outputImageStream( "liveStream", $streamSrc, reScale( $monitor->Width(), $scale ), reScale( $monitor->Height(), $scale ), $monitor->Name() );
elseif ( canStreamApplet() )
outputHelperStream( "liveStream", $streamSrc, reScale( $monitor->Width(), $scale ), reScale( $monitor->Height(), $scale ), $monitor->Name() );
} else {
$streamSrc = $monitor->getStreamSrc( array( 'mode=single', "scale=".$scale ) );
outputImageStill( "liveStream", $streamSrc, reScale( $monitor->Width(), $scale ), reScale( $monitor->Height(), $scale ), $monitor->Name() );
Info( "The system has fallen back to single jpeg mode for streaming. Consider enabling Cambozola or upgrading the client browser.");
}
} // end function getStreamHTML
?>

1
web/index.php
View File

@ -49,6 +49,7 @@ if ( false )
require_once( 'includes/config.php' );
require_once( 'includes/logger.php' );
require_once( 'includes/Server.php' );
require_once( 'includes/Monitor.php' );
if ( isset($_SERVER["HTTPS"]) && $_SERVER["HTTPS"] == 'on' )
{

20
web/skins/classic/css/classic/views/zone.css
View File

@ -93,3 +93,23 @@
#zonePoints table a {
margin: 0 2px;
}
.zones polygon {
fill-opacity: 0.25;
stroke-width: 2px;
}
.Active {
stroke: #ff0000;
fill: #ff0000;
}
.Inclusive {
stroke: #FFA500;
fill: #FFA500;
}
.Exclusive {
stroke: #800080;
fill: #800080;
}
.Preclusive {
stroke: #0000FF;
fill: #0000FF;
}

20
web/skins/classic/css/classic/views/zones.css Normal file
View File

@ -0,0 +1,20 @@
.zones polygon {
fill-opacity: 0.25;
stroke-width: 2px;
}
.Active {
stroke: #ff0000;
fill: #ff0000;
}
.Inclusive {
stroke: #FFA500;
fill: #FFA500;
}
.Exclusive {
stroke: #800080;
fill: #800080;
}
.Preclusive {
stroke: #0000FF;
fill: #0000FF;
}

20
web/skins/classic/css/dark/views/zone.css
View File

@ -93,3 +93,23 @@
#zonePoints table a {
margin: 0 2px;
}
.zones polygon {
fill-opacity: 0.25;
stroke-width: 2px;
}
.Active {
stroke: #ff0000;
fill: #ff0000;
}
.Inclusive {
stroke: #FFA500;
fill: #FFA500;
}
.Exclusive {
stroke: #800080;
fill: #800080;
}
.Preclusive {
stroke: #0000FF;
fill: #0000FF;
}

20
web/skins/classic/css/dark/views/zones.css Normal file
View File

@ -0,0 +1,20 @@
.zones polygon {
fill-opacity: 0.25;
stroke-width: 2px;
}
.Active {
stroke: #ff0000;
fill: #ff0000;
}
.Inclusive {
stroke: #FFA500;
fill: #FFA500;
}
.Exclusive {
stroke: #800080;
fill: #800080;
}
.Preclusive {
stroke: #0000FF;
fill: #0000FF;
}

20
web/skins/classic/css/flat/views/zone.css
View File

@ -93,3 +93,23 @@
#zonePoints table a {
margin: 0 2px;
}
.zones polygon {
fill-opacity: 0.25;
stroke-width: 2px;
}
.Active {
stroke: #ff0000;
fill: #ff0000;
}
.Inclusive {
stroke: #FFA500;
fill: #FFA500;
}
.Exclusive {
stroke: #800080;
fill: #800080;
}
.Preclusive {
stroke: #0000FF;
fill: #0000FF;
}

20
web/skins/classic/css/flat/views/zones.css Normal file
View File

@ -0,0 +1,20 @@
.zones polygon {
fill-opacity: 0.25;
stroke-width: 2px;
}
.Active {
stroke: #ff0000;
fill: #ff0000;
}
.Inclusive {
stroke: #FFA500;
fill: #FFA500;
}
.Exclusive {
stroke: #800080;
fill: #800080;
}
.Preclusive {
stroke: #0000FF;
fill: #0000FF;
}

275
web/skins/classic/views/js/zone.js
View File

@ -304,19 +304,6 @@ function unsetActivePoint( index )
$('point'+index).removeClass( 'active' );
}
function updateZoneImageResponse( respObj, respText )
{
if ( respObj.result == 'Ok' )
{
document.zoneForm.elements['submitBtn'].disabled = ( selfIntersecting = respObj.selfIntersecting );
document.zoneForm.elements['newZone[Area]'].value = zone.Area = respObj.area;
if ( document.zoneForm.elements['newZone[Units]'].value == 'Pixels' )
document.zoneForm.elements['newZone[TempArea]'].value = document.zoneForm.elements['newZone[Area]'].value;
var newImage = new Asset.image( respObj.zoneImage, { 'onload': function() { $('zoneImage').src = newImage.src; } } );
}
}
function getCoordString()
{
var coords = new Array();
@ -327,9 +314,15 @@ function getCoordString()
function updateZoneImage()
{
var parms = "view=request&request=zone&action=zoneImage&mid="+zone.MonitorId+"&zid="+zone.Id+"&coords="+getCoordString();
var query = new Request.JSON( { url: thisUrl, method: 'post', timeout: AJAX_TIMEOUT, data: parms, onSuccess: updateZoneImageResponse } );
query.send();
var SVG = $('zoneSVG');
var Poly = $('zonePoly');
Poly.points.clear();
for ( var i = 0; i < zone['Points'].length; i++ ) {
var Point = SVG.createSVGPoint();
Point.x = zone['Points'][i].x;
Point.y = zone['Points'][i].y;
Poly.points.appendItem( Point );
}
}
function fixActivePoint( index )
@ -360,6 +353,10 @@ function updateActivePoint( index )
$('newZone[Points]['+index+'][y]').value = y;
zone['Points'][index].x = x;
zone['Points'][index].y = y;
var Point = $('zonePoly').points.getItem(index);
Point.x =x;
Point.y =y;
}
function addPoint( index )
@ -374,6 +371,7 @@ function addPoint( index )
else
zone['Points'].splice( nextIndex, 0, { 'x': newX, 'y': newY } );
drawZonePoints();
updateZoneImage();
//setActivePoint( nextIndex );
}
@ -397,8 +395,9 @@ function updateX( index )
point.setStyle( 'left', x+'px' );
zone['Points'][index].x = x;
updateZoneImage();
var Point = $('zonePoly').points.getItem(index);
Point.x =x;
Point.y =y;
}
function updateY( index )
@ -410,8 +409,9 @@ function updateY( index )
point.setStyle( 'top', y+'px' );
zone['Points'][index].y = y;
updateZoneImage();
var Point = $('zonePoly').points.getItem(index);
Point.x =x;
Point.y =y;
}
function saveChanges( element )
@ -471,10 +471,215 @@ function drawZonePoints()
row.inject( tables[i%tables.length].getElement( 'tbody' ) );
}
// Sets up the SVG polygon
updateZoneImage();
}
function initPage()
//
// Imported from watch.js and modified for new zone edit view
//
var alarmState = STATE_IDLE;
var lastAlarmState = STATE_IDLE;
function setAlarmState( currentAlarmState ) {
alarmState = currentAlarmState;
var stateString = "Unknown";
var stateClass = "";
if ( alarmState == STATE_ALARM )
stateClass = "alarm";
else if ( alarmState == STATE_ALERT )
stateClass = "alert";
$('stateValue').set( 'text', stateStrings[alarmState] );
if ( stateClass )
$('stateValue').setProperty( 'class', stateClass );
else
$('stateValue').removeProperty( 'class' );
var isAlarmed = ( alarmState == STATE_ALARM || alarmState == STATE_ALERT );
var wasAlarmed = ( lastAlarmState == STATE_ALARM || lastAlarmState == STATE_ALERT );
var newAlarm = ( isAlarmed && !wasAlarmed );
var oldAlarm = ( !isAlarmed && wasAlarmed );
if ( newAlarm )
{
if ( SOUND_ON_ALARM )
{
// Enable the alarm sound
if ( !canPlayPauseAudio )
$('alarmSound').removeClass( 'hidden' );
else
$('MediaPlayer').Play();
}
}
if ( SOUND_ON_ALARM )
{
if ( oldAlarm )
{
// Disable alarm sound
if ( !canPlayPauseAudio )
$('alarmSound').addClass( 'hidden' );
else
$('MediaPlayer').Stop();
}
}
lastAlarmState = alarmState;
}
var streamCmdParms = "view=request&request=stream&connkey="+connKey;
var streamCmdReq = new Request.JSON( { url: monitorUrl+thisUrl, method: 'post', timeout: AJAX_TIMEOUT, link: 'cancel', onSuccess: getStreamCmdResponse } );
var streamCmdTimer = null;
var streamStatus;
function getStreamCmdResponse( respObj, respText ) {
watchdogOk("stream");
if ( streamCmdTimer )
streamCmdTimer = clearTimeout( streamCmdTimer );
if ( respObj.result == 'Ok' ) {
streamStatus = respObj.status;
$('fpsValue').set( 'text', streamStatus.fps );
setAlarmState( streamStatus.state );
var delayString = secsToTime( streamStatus.delay );
if ( streamStatus.paused == true )
{
streamCmdPause( false );
} else if ( streamStatus.delayed == true && streamStatus.rate == 1 ) {
streamCmdPlay( false );
}
} else {
checkStreamForErrors("getStreamCmdResponse",respObj);//log them
// Try to reload the image stream.
var streamImg = document.getElementById('liveStream');
if ( streamImg )
streamImg.src = streamImg.src.replace(/rand=\d+/i,'rand='+Math.floor((Math.random() * 1000000) ));
}
var streamCmdTimeout = statusRefreshTimeout;
if ( alarmState == STATE_ALARM || alarmState == STATE_ALERT )
streamCmdTimeout = streamCmdTimeout/5;
streamCmdTimer = streamCmdQuery.delay( streamCmdTimeout );
}
var streamPause = false;
function streamCmdPauseToggle() {
if ( streamPause == true ) {
streamCmdPlay( true );
streamPause = false;
document.getElementById("pauseBtn").value = pauseString;
} else {
streamCmdPause( true );
streamPause = true;
document.getElementById("pauseBtn").value = playString;
}
}
function streamCmdPause( action ) {
if ( action )
streamCmdReq.send( streamCmdParms+"&command="+CMD_PAUSE );
}
function streamCmdPlay( action )
{
if ( action )
streamCmdReq.send( streamCmdParms+"&command="+CMD_PLAY );
}
function streamCmdStop( action ) {
if ( action )
streamCmdReq.send( streamCmdParms+"&command="+CMD_STOP );
}
function streamCmdQuery() {
streamCmdReq.send( streamCmdParms+"&command="+CMD_QUERY );
}
var statusCmdParms = "view=request&request=status&entity=monitor&id="+monitorId+"&element[]=Status&element[]=FrameRate";
var statusCmdReq = new Request.JSON( { url: monitorUrl+thisUrl, method: 'post', data: statusCmdParms, timeout: AJAX_TIMEOUT, link: 'cancel', onSuccess: getStatusCmdResponse } );
var statusCmdTimer = null;
function getStatusCmdResponse( respObj, respText ) {
watchdogOk("status");
if ( statusCmdTimer )
statusCmdTimer = clearTimeout( statusCmdTimer );
if ( respObj.result == 'Ok' )
{
$('fpsValue').set( 'text', respObj.monitor.FrameRate );
setAlarmState( respObj.monitor.Status );
}
else
checkStreamForErrors("getStatusCmdResponse",respObj);
var statusCmdTimeout = statusRefreshTimeout;
if ( alarmState == STATE_ALARM || alarmState == STATE_ALERT )
statusCmdTimeout = statusCmdTimeout/5;
statusCmdTimer = statusCmdQuery.delay( statusCmdTimeout );
}
function statusCmdQuery() {
statusCmdReq.send();
}
var tempImage = null;
function fetchImage( streamImage ) {
var now = new Date();
if ( !tempImage )
tempImage = new Element( 'img' );
tempImage.setProperty( 'src', streamSrc+'&'+now.getTime() );
$(streamImage).setProperty( 'src', tempImage.getProperty( 'src' ) );
}
function appletRefresh() {
if ( streamStatus && (!streamStatus.paused && !streamStatus.delayed) )
{
var streamImg = $('liveStream');
var parent = streamImg.getParent();
streamImg.dispose();
streamImg.inject( parent );
if ( appletRefreshTime )
appletRefresh.delay( appletRefreshTime*1000 );
}
else
{
appletRefresh.delay( 15*1000 ); //if we are paused or delayed check every 15 seconds if we are live yet...
}
}
var watchdogInactive = {
'stream': false,
'status': false
};
var watchdogFunctions = {
'stream': streamCmdQuery,
'status': statusCmdQuery
};
//Make sure the various refreshes are still taking effect
function watchdogCheck( type ) {
if ( watchdogInactive[type] ) {
console.log( "Detected streamWatch of type: " + type + " stopped, restarting" );
watchdogFunctions[type]();
watchdogInactive[type] = false;
} else {
watchdogInactive[type] = true;
}
}
function watchdogOk( type ) {
watchdogInactive[type] = false;
}
function initPage() {
var form = document.zoneForm;
//form.elements['newZone[Name]'].disabled = true;
@ -501,13 +706,37 @@ function initPage()
applyZoneType();
if ( form.elements['newZone[Units]'].value == 'Percent' )
{
if ( form.elements['newZone[Units]'].value == 'Percent' ) {
applyZoneUnits();
}
applyCheckMethod();
drawZonePoints();
//
// Imported from watch.js and modified for new zone edit view
//
if ( streamMode == "single" ) {
statusCmdTimer = statusCmdQuery.delay( (Math.random()+0.1)*statusRefreshTimeout );
watchdogCheck.pass('status').periodical(statusRefreshTimeout*2);
} else {
streamCmdTimer = streamCmdQuery.delay( (Math.random()+0.1)*statusRefreshTimeout );
watchdogCheck.pass('stream').periodical(statusRefreshTimeout*2);
}
if ( canStreamNative || streamMode == "single" ) {
var streamImg = $('imageFrame').getElement('img');
if ( !streamImg )
streamImg = $('imageFrame').getElement('object');
if ( streamMode == "single" ) {
streamImg.addEvent( 'click', fetchImage.pass( streamImg ) );
fetchImage.pass( streamImg ).periodical( imageRefreshTimeout );
}
}
if ( refreshApplet && appletRefreshTime )
appletRefresh.delay( appletRefreshTime*1000 );
}
window.addEvent( 'domready', initPage );

56
web/skins/classic/views/js/zone.js.php
View File

@ -46,8 +46,8 @@ zone['Points'][<?php echo $i ?>] = { 'x': <?php echo $newZone['Points'][$i]['x']
}
?>
var maxX = <?php echo $monitor['Width']-1 ?>;
var maxY = <?php echo $monitor['Height']-1 ?>;
var maxX = <?php echo $monitor->Width()-1 ?>;
var maxY = <?php echo $monitor->Height()-1 ?>;
var selfIntersecting = <?php echo $selfIntersecting?'true':'false' ?>;
var selfIntersectingString = '<?php echo addslashes(translate('SelfIntersecting')) ?>';
@ -65,3 +65,55 @@ var minBlobAreaLtMaxString = '<?php echo addslashes(translate('MinBlobAreaLtMax'
var minBlobLtMinFilterString = '<?php echo addslashes(translate('MinBlobLtMinFilter')) ?>';
var minBlobsUnsetString = '<?php echo addslashes(translate('MinBlobsUnset')) ?>';
var minBlobsLtMaxString = '<?php echo addslashes(translate('MinBlobsLtMax')) ?>';
//
// Imported from watch.js.php and modified for new zone edit view
//
var STATE_IDLE = <?php echo STATE_IDLE ?>;
var STATE_PREALARM = <?php echo STATE_PREALARM ?>;
var STATE_ALARM = <?php echo STATE_ALARM ?>;
var STATE_ALERT = <?php echo STATE_ALERT ?>;
var STATE_TAPE = <?php echo STATE_TAPE ?>;
var stateStrings = new Array();
stateStrings[STATE_IDLE] = "<?php echo translate('Idle') ?>";
stateStrings[STATE_PREALARM] = "<?php echo translate('Idle') ?>";
stateStrings[STATE_ALARM] = "<?php echo translate('Alarm') ?>";
stateStrings[STATE_ALERT] = "<?php echo translate('Alert') ?>";
stateStrings[STATE_TAPE] = "<?php echo translate('Record') ?>";
var pauseString = "<?php echo translate('Pause') ?>";
var playString = "<?php echo translate('Play') ?>";
var deleteString = "<?php echo translate('Delete') ?>";
var CMD_PAUSE = <?php echo CMD_PAUSE ?>;
var CMD_PLAY = <?php echo CMD_PLAY ?>;
var CMD_STOP = <?php echo CMD_STOP ?>;
var CMD_QUERY = <?php echo CMD_QUERY ?>;
var SCALE_BASE = <?php echo SCALE_BASE ?>;
var SOUND_ON_ALARM = <?php echo ZM_WEB_SOUND_ON_ALARM ?>;
var streamMode = "<?php echo $streamMode ?>";
var connKey = '<?php echo $connkey ?>';
var monitorId = <?php echo $monitor->Id() ?>;
var monitorUrl = '<?php echo ( $monitor->Server()->Url() ) ?>';
var streamSrc = "<?php echo preg_replace( '/&amp;/', '&', $streamSrc ) ?>";
var statusRefreshTimeout = <?php echo 1000*ZM_WEB_REFRESH_STATUS ?>;
var imageRefreshTimeout = <?php echo 1000*ZM_WEB_REFRESH_IMAGE ?>;
var canEditMonitors = <?php echo canEdit( 'Monitors' )?'true':'false' ?>;
var canStreamNative = <?php echo canStreamNative()?'true':'false' ?>;
var canPlayPauseAudio = Browser.ie;
var refreshApplet = <?php echo (canStreamApplet() && $streamMode == "jpeg")?'true':'false' ?>;
var appletRefreshTime = <?php echo ZM_RELOAD_CAMBOZOLA ?>;

8
web/skins/classic/views/js/zones.js Normal file
View File

@ -0,0 +1,8 @@
var streamCmdParms = "view=request&request=stream&connkey="+connKey;
var streamCmdReq = new Request.JSON( { url: monitorUrl+thisUrl, method: 'post', timeout: AJAX_TIMEOUT, link: 'cancel' } );
function streamCmdQuit( action ) {
if ( action )
streamCmdReq.send( streamCmdParms+"&command="+CMD_QUIT );
}

4
web/skins/classic/views/js/zones.js.php Normal file
View File

@ -0,0 +1,4 @@
var connKey = '<?php echo $connkey ?>';
var monitorUrl = '<?php echo ( $monitor->Server()->Url() ) ?>';
var CMD_QUIT = <?php echo CMD_QUIT ?>;

36
web/skins/classic/views/zone.php
View File

@ -59,28 +59,28 @@ foreach ( getEnumValues( 'Zones', 'CheckMethod' ) as $optCheckMethod )
$optCheckMethods[$optCheckMethod] = $optCheckMethod;
}
$monitor = dbFetchMonitor ( $mid );
$monitor = new Monitor( $mid );
$minX = 0;
$maxX = $monitor['Width']-1;
$maxX = $monitor->Width()-1;
$minY = 0;
$maxY = $monitor['Height']-1;
$maxY = $monitor->Height()-1;
if ( !isset($newZone) )
{
if ( $zid > 0 )
{
$zone = dbFetchOne( 'SELECT * FROM Zones WHERE MonitorId = ? AND Id=?', NULL, array( $monitor['Id'], $zid ) );
$zone = dbFetchOne( 'SELECT * FROM Zones WHERE MonitorId = ? AND Id=?', NULL, array( $monitor->Id(), $zid ) );
}
else
{
$zone = array(
'Name' => translate('New'),
'Id' => 0,
'MonitorId' => $monitor['Id'],
'MonitorId' => $monitor->Id(),
'NumCoords' => 4,
'Coords' => sprintf( "%d,%d %d,%d, %d,%d %d,%d", $minX, $minY, $maxX, $minY, $maxX, $maxY, $minX, $maxY ),
'Area' => $monitor['Width'] * $monitor['Height'],
'Area' => $monitor->Width() * $monitor->Height(),
'AlarmRGB' => 0xff0000,
'CheckMethod' => 'Blobs',
'MinPixelThreshold' => '',
@ -100,6 +100,7 @@ if ( !isset($newZone) )
);
}
$zone['Points'] = coordsToPoints( $zone['Coords'] );
$zone['AreaCoords'] = preg_replace( '/\s+/', ',', $zone['Coords'] );
$newZone = $zone;
}
@ -115,23 +116,15 @@ $newZone['Coords'] = pointsToCoords( $newZone['Points'] );
$newZone['Area'] = getPolyArea( $newZone['Points'] );
$selfIntersecting = isSelfIntersecting( $newZone['Points'] );
$wd = getcwd();
chdir( ZM_DIR_IMAGES );
$command = getZmuCommand( " -m ".$mid." -z" );
$command .= '"'.$zid.' '.$hicolor.' '.$newZone['Coords'].'"';
$status = exec( escapeshellcmd( $command ) );
chdir( $wd );
$zoneImage = ZM_DIR_IMAGES.'/Zones'.$monitor['Id'].'.jpg?'.time();
$focusWindow = true;
$connkey = generateConnKey();
xhtmlHeaders(__FILE__, translate('Zone') );
?>
<body>
<div id="page">
<div id="header">
<h2><?php echo translate('Monitor') ?> <?php echo $monitor['Name'] ?> - <?php echo translate('Zone') ?> <?php echo $newZone['Name'] ?></h2>
<h2><?php echo translate('Monitor') ?> <?php echo $monitor->Name() ?> - <?php echo translate('Zone') ?> <?php echo $newZone['Name'] ?></h2>
</div>
<div id="content">
<form name="zoneForm" id="zoneForm" method="post" action="<?php echo $_SERVER['PHP_SELF'] ?>">
@ -217,10 +210,15 @@ xhtmlHeaders(__FILE__, translate('Zone') );
</div>
<div id="definitionPanel">
<div id="imagePanel">
<div id="imageFrame" style="width: <?php echo reScale( $monitor['Width'], $scale ) ?>px; height: <?php echo reScale( $monitor['Height'], $scale ) ?>px;">
<img name="zoneImage" id="zoneImage" src="<?php echo $zoneImage ?>" width="<?php echo reScale( $monitor['Width'], $scale ) ?>" height="<?php echo reScale( $monitor['Height'], $scale ) ?>" alt="Zone Image"/>
<div id="imageFrame" style="width: <?php echo reScale( $monitor->Width(), $scale ) ?>px; height: <?php echo reScale( $monitor->Height(), $scale ) ?>px;">
<?php echo getStreamHTML( $monitor, $scale ); ?>
<svg id="zoneSVG" class="zones" style="width: <?php echo reScale( $monitor->Width(), $scale ) ?>px; height: <?php echo reScale( $monitor->Height(), $scale ) ?>px;margin-top: -<?php echo $monitor->Height ?>px;background: none;">
<polygon id="zonePoly" points="<?php echo $zone['AreaCoords'] ?>" class="<?php echo $zone['Type'] ?>"/>
Sorry, your browser does not support inline SVG
</svg>
</div>
</div>
<div id="monitorState"><?php echo translate('State') ?>:&nbsp;<span id="stateValue"></span>&nbsp;-&nbsp;<span id="fpsValue"></span>&nbsp;fps</div>
<table id="zonePoints" cellspacing="0">
<tbody>
<tr>
@ -269,7 +267,7 @@ for ( $i = 0; $i < $pointCols; $i++ )
</tr>
</tbody>
</table>
<input type="submit" id="submitBtn" name="submitBtn" value="<?php echo translate('Save') ?>" onclick="return saveChanges( this )"<?php if (!canEdit( 'Monitors' ) || (false && $selfIntersecting)) { ?> disabled="disabled"<?php } ?>/><input type="button" value="<?php echo translate('Cancel') ?>" onclick="closeWindow()"/>
<input id="pauseBtn" type="button" value="<?php echo translate('Pause') ?>" onclick="streamCmdPauseToggle()"/><input type="submit" id="submitBtn" name="submitBtn" value="<?php echo translate('Save') ?>" onclick="return saveChanges( this )"<?php if (!canEdit( 'Monitors' ) || (false && $selfIntersecting)) { ?> disabled="disabled"<?php } ?>/><input type="button" value="<?php echo translate('Cancel') ?>" onclick="refreshParentWindow(); closeWindow();"/>
</div>
</form>
</div>

30
web/skins/classic/views/zones.php
View File

@ -25,12 +25,7 @@ if ( !canView( 'Monitors' ) )
}
$mid = validInt($_REQUEST['mid']);
$wd = getcwd();
chdir( ZM_DIR_IMAGES );
$status = exec( escapeshellcmd( getZmuCommand( " -m ".$mid." -z" ) ) );
chdir( $wd );
$monitor = dbFetchMonitor( $mid );
$monitor = new Monitor( $mid );
$zones = array();
foreach( dbFetchAll( 'select * from Zones where MonitorId = ? order by Area desc', NULL, array($mid) ) as $row )
@ -42,7 +37,7 @@ foreach( dbFetchAll( 'select * from Zones where MonitorId = ? order by Area desc
}
}
$image = 'Zones'.$monitor['Id'].'.jpg';
$connkey = generateConnKey();
xhtmlHeaders(__FILE__, translate('Zones') );
?>
@ -53,18 +48,17 @@ xhtmlHeaders(__FILE__, translate('Zones') );
<h2><?php echo translate('Zones') ?></h2>
</div>
<div id="content">
<map name="zoneMap" id="zoneMap">
<?php echo getStreamHTML( $monitor ); ?>
<svg class="zones" width="<?php echo $monitor->Width ?>" height="<?php echo $monitor->Height ?>" style="margin-top: -<?php echo $monitor->Height ?>px;background: none;">
<?php
foreach( array_reverse($zones) as $zone )
{
foreach( array_reverse($zones) as $zone ) {
?>
<area shape="poly" alt="<?php echo htmlspecialchars($zone['Name']) ?>" coords="<?php echo $zone['AreaCoords'] ?>" href="#" onclick="createPopup( '?view=zone&amp;mid=<?php echo $mid ?>&amp;zid=<?php echo $zone['Id'] ?>', 'zmZone', 'zone', <?php echo $monitor['Width'] ?>, <?php echo $monitor['Height'] ?> ); return( false );"/>
<polygon points="<?php echo $zone['AreaCoords'] ?>" class="<?php echo $zone['Type']?>" onclick="streamCmdQuit( true ); createPopup( '?view=zone&amp;mid=<?php echo $mid ?>&amp;zid=<?php echo $zone['Id'] ?>', 'zmZone', 'zone', <?php echo $monitor->Width ?>, <?php echo $monitor->Height ?> ); return( false );"/>
<?php
}
} // end foreach zone
?>
<!--<area shape="default" nohref>-->
</map>
<img src="<?php echo ZM_DIR_IMAGES.'/'.$image ?>" alt="zones" usemap="#zoneMap" width="<?php echo $monitor['Width'] ?>" height="<?php echo $monitor['Height'] ?>" border="0"/>
Sorry, your browser does not support inline SVG
</svg>
<form name="contentForm" id="contentForm" method="get" action="<?php echo $_SERVER['PHP_SELF'] ?>">
<input type="hidden" name="view" value="<?php echo $view ?>"/>
<input type="hidden" name="action" value="delete"/>
@ -84,9 +78,9 @@ foreach( $zones as $zone )
{
?>
<tr>
<td class="colName"><a href="#" onclick="createPopup( '?view=zone&amp;mid=<?php echo $mid ?>&amp;zid=<?php echo $zone['Id'] ?>', 'zmZone', 'zone', <?php echo $monitor['Width'] ?>, <?php echo $monitor['Height'] ?> ); return( false );"><?php echo $zone['Name'] ?></a></td>
<td class="colName"><a href="#" onclick="streamCmdQuit( true ); createPopup( '?view=zone&amp;mid=<?php echo $mid ?>&amp;zid=<?php echo $zone['Id'] ?>', 'zmZone', 'zone', <?php echo $monitor->Width() ?>, <?php echo $monitor->Height() ?> ); return( false );"><?php echo $zone['Name'] ?></a></td>
<td class="colType"><?php echo $zone['Type'] ?></td>
<td class="colUnits"><?php echo $zone['Area'] ?>&nbsp;/&nbsp;<?php echo sprintf( "%.2f", ($zone['Area']*100)/($monitor['Width']*$monitor['Height']) ) ?></td>
<td class="colUnits"><?php echo $zone['Area'] ?>&nbsp;/&nbsp;<?php echo sprintf( "%.2f", ($zone['Area']*100)/($monitor->Width()*$monitor->Height()) ) ?></td>
<td class="colMark"><input type="checkbox" name="markZids[]" value="<?php echo $zone['Id'] ?>" onclick="configureDeleteButton( this );"<?php if ( !canEdit( 'Monitors' ) ) { ?> disabled="disabled"<?php } ?>/></td>
</tr>
<?php
@ -95,7 +89,7 @@ foreach( $zones as $zone )
</tbody>
</table>
<div id="contentButtons">
<input type="button" value="<?php echo translate('AddNewZone') ?>" onclick="createPopup( '?view=zone&amp;mid=<?php echo $mid ?>&amp;zid=0', 'zmZone', 'zone', <?php echo $monitor['Width'] ?>, <?php echo $monitor['Height'] ?> );"<?php if ( !canEdit( 'Monitors' ) ) { ?> disabled="disabled"<?php } ?>/>
<input type="button" value="<?php echo translate('AddNewZone') ?>" onclick="createPopup( '?view=zone&amp;mid=<?php echo $mid ?>&amp;zid=0', 'zmZone', 'zone', <?php echo $monitor->Width() ?>, <?php echo $monitor->Height() ?> );"<?php if ( !canEdit( 'Monitors' ) ) { ?> disabled="disabled"<?php } ?>/>
<input type="submit" name="deleteBtn" value="<?php echo translate('Delete') ?>" disabled="disabled"/>
</div>
</form>