mirror/zoneminder
1
0
Fork 0
mirror of https://github.com/ZoneMinder/zoneminder.git synced 2026-07-20 18:12:25 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' of github.com:ZoneMinder/zoneminder

Browse Source
This commit is contained in:
Isaac Connor
2019-10-30 09:31:12 -04:00
parent 276be8fa37 6ae220f756
commit 3906999872
9 changed files with 518 additions and 380 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
web/includes/Monitor.php
View File

@@ -199,7 +199,14 @@ private $status_fields = array(
return $streamSrc;
} // end function getStreamSrc
public function Width($new = null) {
public function isPortrait() {
return $this->ViewWidth() > $this->ViewHeight();
}
public function isLandscape() {
return $this->ViewWidth() < $this->ViewHeight();
}
public function ViewWidth($new = null) {
if ( $new )
$this->{'Width'} = $new;
@@ -209,7 +216,7 @@ private $status_fields = array(
return $this->defaults{$field};
} // end function Width
public function Height($new=null) {
public function ViewHeight($new=null) {
if ( $new )
$this->{'Height'} = $new;

22
web/includes/actions/zone.php
View File

@@ -21,7 +21,7 @@
// Monitor edit actions, require a monitor id and edit permissions for that monitor
if ( !empty($_REQUEST['mid']) && canEdit('Monitors', $_REQUEST['mid']) ) {
$mid = validInt($_REQUEST['mid']);
if ( $action == 'zone' && isset($_REQUEST['zid']) ) {
if ( ($action == 'zone') && isset($_REQUEST['zid']) ) {
$zid = validInt($_REQUEST['zid']);
$monitor = new ZM\Monitor($mid);
@@ -32,17 +32,15 @@ if ( !empty($_REQUEST['mid']) && canEdit('Monitors', $_REQUEST['mid']) ) {
}
if ( $_REQUEST['newZone']['Units'] == 'Percent' ) {
$_REQUEST['newZone']['MinAlarmPixels'] = intval(($_REQUEST['newZone']['MinAlarmPixels']*$_REQUEST['newZone']['Area'])/100);
$_REQUEST['newZone']['MaxAlarmPixels'] = intval(($_REQUEST['newZone']['MaxAlarmPixels']*$_REQUEST['newZone']['Area'])/100);
if ( isset($_REQUEST['newZone']['MinFilterPixels']) )
$_REQUEST['newZone']['MinFilterPixels'] = intval(($_REQUEST['newZone']['MinFilterPixels']*$_REQUEST['newZone']['Area'])/100);
if ( isset($_REQUEST['newZone']['MaxFilterPixels']) )
$_REQUEST['newZone']['MaxFilterPixels'] = intval(($_REQUEST['newZone']['MaxFilterPixels']*$_REQUEST['newZone']['Area'])/100);
if ( isset($_REQUEST['newZone']['MinBlobPixels']) )
$_REQUEST['newZone']['MinBlobPixels'] = intval(($_REQUEST['newZone']['MinBlobPixels']*$_REQUEST['newZone']['Area'])/100);
if ( isset($_REQUEST['newZone']['MaxBlobPixels']) )
$_REQUEST['newZone']['MaxBlobPixels'] = intval(($_REQUEST['newZone']['MaxBlobPixels']*$_REQUEST['newZone']['Area'])/100);
}
foreach (array(
'MinAlarmPixels','MaxAlarmPixels',
'MinFilterPixels','MaxFilterPixels',
'MinBlobPixels','MaxBlobPixels'
) as $field ) {
if ( isset($_REQUEST['newZone'][$field]) and $_REQUEST['newZone'][$field] )
$_REQUEST['newZone'][$field] = intval(($_REQUEST['newZone'][$field]*$_REQUEST['newZone']['Area'])/100);
}
}
unset($_REQUEST['newZone']['Points']);

12
web/includes/functions.php
View File

@@ -2278,15 +2278,15 @@ function validHtmlStr($input) {
function getStreamHTML($monitor, $options = array()) {
if ( isset($options['scale']) and $options['scale'] and ($options['scale'] != 100) ) {
$options['width'] = reScale($monitor->Width(), $options['scale']).'px';
$options['height'] = reScale($monitor->Height(), $options['scale']).'px';
$options['width'] = reScale($monitor->ViewWidth(), $options['scale']).'px';
$options['height'] = reScale($monitor->ViewHeight(), $options['scale']).'px';
} else {
# scale is empty or 100
# There may be a fixed width applied though, in which case we need to leave the height empty
if ( ! ( isset($options['width']) and $options['width'] ) ) {
$options['width'] = $monitor->Width().'px';
$options['width'] = $monitor->ViewWidth().'px';
if ( ! ( isset($options['height']) and $options['height'] ) ) {
$options['height'] = $monitor->Height().'px';
$options['height'] = $monitor->ViewHeight().'px';
}
} else if ( ! isset($options['height']) ) {
$options['height'] = '';
@@ -2326,8 +2326,8 @@ function getStreamHTML($monitor, $options = array()) {
elseif ( canStreamApplet() )
// Helper, empty widths and heights really don't work.
return getHelperStream( 'liveStream'.$monitor->Id(), $streamSrc,
$options['width'] ? $options['width'] : $monitor->Width(),
$options['height'] ? $options['height'] : $monitor->Height(),
$options['width'] ? $options['width'] : $monitor->ViewWidth(),
$options['height'] ? $options['height'] : $monitor->ViewHeight(),
$monitor->Name());
} else {
if ( $options['mode'] == 'stream' ) {

58
web/skins/classic/css/base/views/zone.css
View File

@@ -1,16 +1,21 @@
#settingsPanel {
float: left;
margin: 0 2px;
.monitor, #settingsPanel, .buttons, #zonePoints {
float: left;
margin: 2px;
}
#settingsPanel,
#zonePoints {
width: 600px;
}
#zoneSettings {
border-collapse: collapse;
border-collapse: collapse;
}
#zoneSettings th, #zoneSettings td {
border: 1px solid #7f7fb2;
padding: 3px;
text-align: left;
#zoneSettings th,
#zoneSettings td {
border: 1px solid #7f7fb2;
padding: 3px;
text-align: left;
}
#zoneSettings th[scope=row] {
@@ -21,12 +26,13 @@
#definitionPanel {
float: left;
margin: 0 2px;
margin: 2px;
text-align: center;
}
#definitionPanel input[type=submit], #definitionPanel input[type=submit] {
margin: 0 4px;
#definitionPanel input[type=submit],
#definitionPanel input[type=submit] {
margin: 0 4px;
}
#imagePanel {
@@ -52,20 +58,19 @@
}
#imageFrame div {
background-image: url(/zm/skins/classic/graphics/point-g.png);
background-image: url(../skins/classic/graphics/point-g.png);
}
#imageFrame div.highlight {
background-image: url(/zm/skins/classic/graphics/point-o.png);
background-image: url(../skins/classic/graphics/point-o.png);
}
#imageFrame div.active {
background-image: url(../../../graphics/point-r.png);
background-image: url(../skins/classic/graphics/point-r.png);
}
#zonePoints {
margin: 8px 0;
border-collapse: collapse;
float: left;
}
#zonePoints td {
@@ -73,18 +78,22 @@
}
#zonePoints table {
border-collapse: collapse;
border-collapse: collapse;
width: 100%;
}
#zonePoints table table {
}
#zonePoints table tr.highlight {
#zonePoints table table tr.highlight {
background-color: #f0e68c;
}
#zonePoints table tr.active {
#zonePoints table table tr.active {
background-color: #ffa07a;
}
#zonePoints table th, #zonePoints table td {
#zonePoints table table th,
#zonePoints table table td {
border: 1px solid #7f7fb2;
padding: 3px;
text-align: center;
@@ -116,3 +125,12 @@
stroke: #0000FF;
fill: #0000FF;
}
input[name="newZone[Name]"] {
width: 100%;
}
input[name="newAlarmRgbR"],
input[name="newAlarmRgbG"],
input[name="newAlarmRgbB"] {
width: 30%;
}

17
web/skins/classic/css/base/views/zones.css
View File

@@ -18,3 +18,20 @@
stroke: #0000FF;
fill: #0000FF;
}
#zones, .ZonesImage {
float: left;
}
#zones {
width: 500px;
}
.ZonesImage img {
top:0;
left:0;
position: relative;
}
#content {
width: 100%;
position: relative;
}

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

@@ -48,13 +48,13 @@ function validateForm( form ) {
}
}
if ( errors.length ) {
alert( errors.join( "\n" ) );
alert(errors.join("\n"));
return false;
}
return true;
}
function submitForm( form ) {
function submitForm(form) {
form.elements['newZone[AlarmRGB]'].value = (form.newAlarmRgbR.value<<16)|(form.newAlarmRgbG.value<<8)|form.newAlarmRgbB.value;
form.elements['newZone[NumCoords]'].value = zone['Points'].length;
form.elements['newZone[Coords]'].value = getCoordString();
@@ -175,13 +175,13 @@ function applyPreset() {
}
}
function toPixels( field, maxValue ) {
function toPixels(field, maxValue) {
if ( field.value != '' ) {
field.value = Math.round((field.value*maxValue)/100);
}
}
function toPercent( field, maxValue ) {
function toPercent(field, maxValue) {
if ( field.value != '' ) {
field.value = Math.round((100*100*field.value)/maxValue)/100;
}
@@ -193,62 +193,72 @@ function applyZoneUnits() {
var form = document.zoneForm;
if ( form.elements['newZone[Units]'].value == 'Pixels' ) {
form.elements['newZone[TempArea]'].value = area;
toPixels( form.elements['newZone[MinAlarmPixels]'], area );
toPixels( form.elements['newZone[MaxAlarmPixels]'], area );
toPixels( form.elements['newZone[MinFilterPixels]'], area );
toPixels( form.elements['newZone[MaxFilterPixels]'], area );
toPixels( form.elements['newZone[MinBlobPixels]'], area );
toPixels( form.elements['newZone[MaxBlobPixels]'], area );
toPixels(form.elements['newZone[MinAlarmPixels]'], area);
toPixels(form.elements['newZone[MaxAlarmPixels]'], area);
toPixels(form.elements['newZone[MinFilterPixels]'], area);
toPixels(form.elements['newZone[MaxFilterPixels]'], area);
toPixels(form.elements['newZone[MinBlobPixels]'], area);
toPixels(form.elements['newZone[MaxBlobPixels]'], area);
} else {
form.elements['newZone[TempArea]'].value = Math.round( area/monitorArea * 100 );
toPercent( form.elements['newZone[MinAlarmPixels]'], area );
toPercent( form.elements['newZone[MaxAlarmPixels]'], area );
toPercent( form.elements['newZone[MinFilterPixels]'], area );
toPercent( form.elements['newZone[MaxFilterPixels]'], area );
toPercent( form.elements['newZone[MinBlobPixels]'], area );
toPercent( form.elements['newZone[MaxBlobPixels]'], area );
form.elements['newZone[TempArea]'].value = Math.round(area/monitorArea * 100);
toPercent(form.elements['newZone[MinAlarmPixels]'], area);
toPercent(form.elements['newZone[MaxAlarmPixels]'], area);
toPercent(form.elements['newZone[MinFilterPixels]'], area);
toPercent(form.elements['newZone[MaxFilterPixels]'], area);
toPercent(form.elements['newZone[MinBlobPixels]'], area);
toPercent(form.elements['newZone[MaxBlobPixels]'], area);
}
}
function limitRange( field, minValue, maxValue ) {
function limitRange(field, minValue, maxValue) {
if ( field.value != '' ) {
field.value = constrainValue( parseInt(field.value), parseInt(minValue), parseInt(maxValue) );
field.value = constrainValue(
parseInt(field.value),
parseInt(minValue),
parseInt(maxValue)
);
}
}
function limitFilter( field ) {
function limitRangeToUnsignedByte(field) {
if ( field.value != '' ) {
field.value = constrainValue(parseInt(field.value), 0, 255);
}
}
function limitFilter(field) {
field.value = (Math.floor((field.value-1)/2)*2) + 1;
field.value = constrainValue(parseInt(field.value), 3, 15);
}
function limitArea( field ) {
function limitArea(field) {
var minValue = 0;
var maxValue = zone.Area;
if ( document.zoneForm.elements['newZone[Units]'].value == "Percent" ) {
if ( document.zoneForm.elements['newZone[Units]'].value == 'Percent' ) {
maxValue = 100;
}
limitRange( field, minValue, maxValue );
limitRange(field, minValue, maxValue);
}
function highlightOn( index ) {
$('row'+index).addClass( 'highlight' );
$('point'+index).addClass( 'highlight' );
function highlightOn(index) {
$('row'+index).addClass('highlight');
$('point'+index).addClass('highlight');
}
function highlightOff( index ) {
$('row'+index).removeClass( 'highlight' );
$('point'+index).removeClass( 'highlight' );
function highlightOff(index) {
$('row'+index).removeClass('highlight');
$('point'+index).removeClass('highlight');
}
function setActivePoint( index ) {
highlightOff( index );
$('row'+index).addClass( 'active' );
$('point'+index).addClass( 'active' );
function setActivePoint(index) {
highlightOff(index);
$('row'+index).addClass('active');
$('point'+index).addClass('active');
}
function unsetActivePoint( index ) {
$('row'+index).removeClass( 'active' );
$('point'+index).removeClass( 'active' );
function unsetActivePoint(index) {
$('row'+index).removeClass('active');
$('point'+index).removeClass('active');
}
function getCoordString() {
@@ -256,7 +266,7 @@ function getCoordString() {
for ( var i = 0; i < zone['Points'].length; i++ ) {
coords[coords.length] = zone['Points'][i].x+','+zone['Points'][i].y;
}
return ( coords.join( " " ) );
return coords.join(' ');
}
function updateZoneImage() {
@@ -267,17 +277,17 @@ function updateZoneImage() {
var Point = SVG.createSVGPoint();
Point.x = zone['Points'][i].x;
Point.y = zone['Points'][i].y;
Poly.points.appendItem( Point );
Poly.points.appendItem(Point);
}
}
function fixActivePoint( index ) {
updateActivePoint( index );
unsetActivePoint( index );
function fixActivePoint(index) {
updateActivePoint(index);
unsetActivePoint(index);
updateZoneImage();
}
function constrainValue( value, loVal, hiVal ) {
function constrainValue(value, loVal, hiVal) {
if ( value < loVal ) {
return loVal;
}
@@ -287,10 +297,10 @@ function constrainValue( value, loVal, hiVal ) {
return value;
}
function updateActivePoint( index ) {
function updateActivePoint(index) {
var point = $('point'+index);
var x = constrainValue( point.getStyle( 'left' ).toInt(), 0, maxX );
var y = constrainValue( point.getStyle( 'top' ).toInt(), 0, maxY );
var x = constrainValue(point.getStyle('left').toInt(), 0, maxX);
var y = constrainValue(point.getStyle('top').toInt(), 0, maxY);
$('newZone[Points]['+index+'][x]').value = x;
$('newZone[Points]['+index+'][y]').value = y;
@@ -302,7 +312,7 @@ function updateActivePoint( index ) {
updateArea();
}
function addPoint( index ) {
function addPoint(index) {
var nextIndex = index+1;
if ( index >= (zone['Points'].length-1) ) {
nextIndex = 0;
@@ -320,12 +330,12 @@ function addPoint( index ) {
//setActivePoint( nextIndex );
}
function delPoint( index ) {
zone['Points'].splice( index, 1 );
function delPoint(index) {
zone['Points'].splice(index, 1);
drawZonePoints();
}
function limitPointValue( point, loVal, hiVal ) {
function limitPointValue(point, loVal, hiVal) {
point.value = constrainValue(point.value, loVal, hiVal);
}
@@ -343,33 +353,33 @@ function updateArea( ) {
}
}
function updateX( index ) {
limitPointValue( $('newZone[Points]['+index+'][x]'), 0, maxX );
function updateX(index) {
limitPointValue($('newZone[Points]['+index+'][x]'), 0, maxX);
var point = $('point'+index);
var x = $('newZone[Points]['+index+'][x]').get('value');
point.setStyle( 'left', x+'px' );
point.setStyle('left', x+'px');
zone['Points'][index].x = x;
var Point = $('zonePoly').points.getItem(index);
Point.x = x;
updateArea();
}
function updateY( index ) {
limitPointValue( $('newZone[Points]['+index+'][y]'), 0, maxY );
function updateY(index) {
limitPointValue($('newZone[Points]['+index+'][y]'), 0, maxY);
var point = $('point'+index);
var y = $('newZone[Points]['+index+'][y]').get('value');
point.setStyle( 'top', y+'px' );
point.setStyle('top', y+'px');
zone['Points'][index].y = y;
var Point = $('zonePoly').points.getItem(index);
Point.y = y;
updateArea();
}
function saveChanges( element ) {
function saveChanges(element) {
var form = element.form;
if ( validateForm(form) ) {
submitForm(form);
@@ -382,11 +392,12 @@ function saveChanges( element ) {
}
function drawZonePoints() {
$('imageFrame').getElements( 'div.zonePoint' ).each( function( element ) {
element.destroy();
} );
$('imageFrame').getElements('div.zonePoint').each(
function(element) {
element.destroy();
});
for ( var i = 0; i < zone['Points'].length; i++ ) {
var div = new Element( 'div', {
var div = new Element('div', {
'id': 'point'+i,
'class': 'zonePoint',
'title': 'Point '+(i+1),
@@ -394,57 +405,69 @@ function drawZonePoints() {
'left': zone['Points'][i].x,
'top': zone['Points'][i].y
}
} );
div.addEvent( 'mouseover', highlightOn.pass( i ) );
div.addEvent( 'mouseout', highlightOff.pass( i ) );
div.inject( $('imageFrame') );
});
div.addEvent('mouseover', highlightOn.pass(i));
div.addEvent('mouseout', highlightOff.pass(i));
div.inject($('imageFrame'));
div.makeDraggable( {
'container': $('imageFrame'),
'onStart': setActivePoint.pass( i ),
'onComplete': fixActivePoint.pass( i ),
'onDrag': updateActivePoint.pass( i )
'onStart': setActivePoint.pass(i),
'onComplete': fixActivePoint.pass(i),
'onDrag': updateActivePoint.pass(i)
} );
}
var tables = $('zonePoints').getElements( 'table' );
tables.each( function( table ) {
table.getElement( 'tbody' ).empty();
var tables = $('zonePoints').getElement('table').getElements('table');
tables.each( function(table) {
table.getElement('tbody').empty();
} );
for ( var i = 0; i < zone['Points'].length; i++ ) {
var row = new Element( 'tr', {'id': 'row'+i} );
row.addEvents( {'mouseover': highlightOn.pass( i ), 'mouseout': highlightOff.pass( i )} );
var cell = new Element( 'td' );
cell.set( 'text', i+1 );
cell.inject( row );
var row;
row = new Element('tr', {'id': 'row'+i});
row.addEvents({'mouseover': highlightOn.pass(i), 'mouseout': highlightOff.pass(i)});
var cell = new Element('td');
cell.set('text', i+1);
cell.inject(row);
cell = new Element( 'td' );
var input = new Element( 'input', {'id': 'newZone[Points]['+i+'][x]', 'name': 'newZone[Points]['+i+'][x]', 'value': zone['Points'][i].x, 'size': 5} );
input.addEvent( 'input', updateX.pass( i ) );
input.inject( cell );
cell.inject( row );
cell = new Element('td');
var input = new Element('input', {
'id': 'newZone[Points]['+i+'][x]',
'name': 'newZone[Points]['+i+'][x]',
'value': zone['Points'][i].x,
'size': 5
});
input.addEvent('input', updateX.pass(i));
input.inject(cell);
cell.inject(row);
cell = new Element( 'td' );
input = new Element( 'input', {'id': 'newZone[Points]['+i+'][y]', 'name': 'newZone[Points]['+i+'][y]', 'value': zone['Points'][i].y, 'size': 5} );
input.addEvent( 'input', updateY.pass( i ) );
input.inject( cell );
cell.inject( row );
cell = new Element('td');
input = new Element('input', {
'id': 'newZone[Points]['+i+'][y]',
'name': 'newZone[Points]['+i+'][y]',
'value': zone['Points'][i].y,
'size': 5
} );
input.addEvent('input', updateY.pass(i));
input.inject(cell);
cell.inject(row);
cell = new Element( 'td' );
new Element( 'button', {
cell = new Element('td');
new Element('button', {
'type': 'button',
'events': {'click': addPoint.pass(i)}
}).set( 'text', '+' ).inject( cell );
}).set('text', '+').inject(cell);
if ( zone['Points'].length > 3 ) {
cell.appendText(' ');
new Element( 'button', {
new Element('button', {
'id': 'delete'+i,
'type': 'button',
'events': {'click': delPoint.pass(i)}
} ).set( 'text', '-' ).inject( cell );
}).set('text', '-').inject(cell);
}
cell.inject( row );
cell.inject(row);
row.inject( tables[i%tables.length].getElement( 'tbody' ) );
row.inject(tables[i%tables.length].getElement('tbody'));
}
// Sets up the SVG polygon
updateZoneImage();
@@ -460,17 +483,17 @@ var lastAlarmState = STATE_IDLE;
function setAlarmState( currentAlarmState ) {
alarmState = currentAlarmState;
var stateClass = "";
var stateClass = '';
if ( alarmState == STATE_ALARM ) {
stateClass = "alarm";
stateClass = 'alarm';
} else if ( alarmState == STATE_ALERT ) {
stateClass = "alert";
stateClass = 'alert';
}
$('stateValue').set( 'text', stateStrings[alarmState] );
$('stateValue').set('text', stateStrings[alarmState]);
if ( stateClass ) {
$('stateValue').setProperty( 'class', stateClass );
$('stateValue').setProperty('class', stateClass);
} else {
$('stateValue').removeProperty( 'class' );
$('stateValue').removeProperty('class');
}
var isAlarmed = ( alarmState == STATE_ALARM || alarmState == STATE_ALERT );
@@ -483,7 +506,7 @@ function setAlarmState( currentAlarmState ) {
if ( SOUND_ON_ALARM ) {
// Enable the alarm sound
if ( !canPlayPauseAudio ) {
$('alarmSound').removeClass( 'hidden' );
$('alarmSound').removeClass('hidden');
} else {
$('MediaPlayer').Play();
}
@@ -493,7 +516,7 @@ function setAlarmState( currentAlarmState ) {
if ( oldAlarm ) {
// Disable alarm sound
if ( !canPlayPauseAudio ) {
$('alarmSound').addClass( 'hidden' );
$('alarmSound').addClass('hidden');
} else {
$('MediaPlayer').Stop();
}
@@ -517,40 +540,40 @@ var streamCmdTimer = null;
var streamStatus;
function getStreamCmdResponse( respObj, respText ) {
function getStreamCmdResponse(respObj, respText) {
watchdogOk("stream");
if ( streamCmdTimer ) {
streamCmdTimer = clearTimeout( streamCmdTimer );
streamCmdTimer = clearTimeout(streamCmdTimer);
}
if ( respObj.result == 'Ok' ) {
streamStatus = respObj.status;
$('fpsValue').set( 'text', streamStatus.fps );
$('fpsValue').set('text', streamStatus.fps);
setAlarmState( streamStatus.state );
setAlarmState(streamStatus.state);
if ( streamStatus.paused == true ) {
streamCmdPause( false );
streamCmdPause(false);
} else if ( streamStatus.delayed == true && streamStatus.rate == 1 ) {
streamCmdPlay( false );
streamCmdPlay(false);
}
} else {
checkStreamForErrors("getStreamCmdResponse", respObj);//log them
checkStreamForErrors('getStreamCmdResponse', respObj);//log them
if ( ! streamPause ) {
// Try to reload the image stream.
var streamImg = $('liveStream'+monitorId);
if ( streamImg ) {
streamImg.src = streamImg.src.replace(/rand=\d+/i, 'rand='+Math.floor((Math.random() * 1000000) ));
streamImg.src = streamImg.src.replace(/rand=\d+/i, 'rand='+Math.floor(Math.random() * 1000000));
}
}
}
if ( ! streamPause ) {
if ( !streamPause ) {
var streamCmdTimeout = statusRefreshTimeout;
if ( alarmState == STATE_ALARM || alarmState == STATE_ALERT ) {
streamCmdTimeout = streamCmdTimeout/5;
}
streamCmdTimer = streamCmdQuery.delay( streamCmdTimeout );
streamCmdTimer = streamCmdQuery.delay(streamCmdTimeout);
}
}
@@ -558,36 +581,36 @@ var streamPause = false;
function streamCmdPauseToggle() {
if ( streamPause == true ) {
streamCmdPlay( true );
streamCmdPlay(true);
streamPause = false;
document.getElementById("pauseBtn").value = pauseString;
document.getElementById('pauseBtn').innerHTML = pauseString;
} else {
streamCmdPause( true );
streamCmdPause(true);
streamPause = true;
document.getElementById("pauseBtn").value = playString;
document.getElementById('pauseBtn').innerHTML = playString;
}
}
function streamCmdPause( action ) {
function streamCmdPause(action) {
if ( action ) {
streamCmdReq.send( streamCmdParms+"&command="+CMD_PAUSE );
streamCmdReq.send(streamCmdParms+"&command="+CMD_PAUSE);
}
}
function streamCmdPlay( action ) {
function streamCmdPlay(action) {
if ( action ) {
streamCmdReq.send( streamCmdParms+"&command="+CMD_PLAY );
streamCmdReq.send(streamCmdParms+"&command="+CMD_PLAY);
}
}
function streamCmdStop( action ) {
function streamCmdStop(action) {
if ( action ) {
streamCmdReq.send( streamCmdParms+"&command="+CMD_STOP );
streamCmdReq.send(streamCmdParms+"&command="+CMD_STOP);
}
}
function streamCmdQuery() {
streamCmdReq.send( streamCmdParms+"&command="+CMD_QUERY );
streamCmdReq.send(streamCmdParms+"&command="+CMD_QUERY);
}
var statusCmdParms = "view=request&request=status&entity=monitor&id="+monitorId+"&element[]=Status&element[]=FrameRate";
@@ -604,15 +627,15 @@ var statusCmdReq = new Request.JSON( {
} );
var statusCmdTimer = null;
function getStatusCmdResponse( respObj, respText ) {
function getStatusCmdResponse(respObj, respText) {
watchdogOk("status");
if ( statusCmdTimer ) {
statusCmdTimer = clearTimeout( statusCmdTimer );
statusCmdTimer = clearTimeout(statusCmdTimer);
}
if ( respObj.result == 'Ok' ) {
$('fpsValue').set( 'text', respObj.monitor.FrameRate );
setAlarmState( respObj.monitor.Status );
$('fpsValue').set('text', respObj.monitor.FrameRate);
setAlarmState(respObj.monitor.Status);
} else {
checkStreamForErrors("getStatusCmdResponse", respObj);
}
@@ -622,7 +645,7 @@ function getStatusCmdResponse( respObj, respText ) {
if ( alarmState == STATE_ALARM || alarmState == STATE_ALERT ) {
statusCmdTimeout = statusCmdTimeout/5;
}
statusCmdTimer = statusCmdQuery.delay( statusCmdTimeout );
statusCmdTimer = statusCmdQuery.delay(statusCmdTimeout);
}
}
@@ -659,9 +682,9 @@ var watchdogFunctions = {
};
//Make sure the various refreshes are still taking effect
function watchdogCheck( type ) {
function watchdogCheck(type) {
if ( watchdogInactive[type] ) {
console.log( "Detected streamWatch of type: " + type + " stopped, restarting" );
console.log("Detected streamWatch of type: " + type + " stopped, restarting");
watchdogFunctions[type]();
watchdogInactive[type] = false;
} else {
@@ -669,7 +692,7 @@ function watchdogCheck( type ) {
}
}
function watchdogOk( type ) {
function watchdogOk(type) {
watchdogInactive[type] = false;
}
@@ -680,18 +703,59 @@ function initPage() {
//form.elements['newZone[Type]'].disabled = true;
form.presetSelector.disabled = true;
//form.elements['newZone[Units]'].disabled = true;
form.newAlarmRgbR.disabled = true;
form.newAlarmRgbG.disabled = true;
form.newAlarmRgbB.disabled = true;
form.elements['newZone[CheckMethod]'].disabled = true;
form.elements['newZone[MinPixelThreshold]'].disabled = true;
form.elements['newZone[MaxPixelThreshold]'].disabled = true;
form.elements['newZone[MinAlarmPixels]'].disabled = true;
form.elements['newZone[MaxAlarmPixels]'].disabled = true;
form.elements['newZone[FilterX]'].disabled = true;
form.elements['newZone[FilterY]'].disabled = true;
form.elements['newZone[MinFilterPixels]'].disabled = true;
form.elements['newZone[MaxFilterPixels]'].disabled = true;
if ( CheckMethod = form.elements['newZone[CheckMethod]'] ) {
CheckMethod.disabled = true;
CheckMethod.onchange = window['applyCheckMethod'].bind(CheckMethod, CheckMethod);
}
[
'newZone[MinPixelThreshold]',
'newZone[MaxPixelThreshold]',
'newAlarmRgbR',
'newAlarmRgbG',
'newAlarmRgbB',
].forEach(
function(element_name, index) {
var el = form.elements[element_name];
if ( el ) {
el.oninput = window['limitRangeToUnsignedByte'].bind(el, el);
el.disabled = true;
} else {
console.error("Element " + element_name + " not found in zone edit form");
}
});
[
'newZone[FilterX]',
'newZone[FilterY]'
].forEach(
function(element_name, index) {
var el = form.elements[element_name];
if ( el ) {
el.oninput = window['limitFilter'].bind(el, el);
el.disabled = true;
} else {
console.error("Element " + element_name + " not found in zone edit form");
}
}
);
[
'newZone[MinAlarmPixels]',
'newZone[MaxAlarmPixels]',
'newZone[MinFilterPixels]',
'newZone[MaxFilterPixels]'
].forEach(
function(element_name, index) {
var el = form.elements[element_name];
if ( el ) {
el.oninput = window['limitArea'].bind(el, el);
el.disabled = true;
} else {
console.error("Element " + element_name + " not found in zone edit form");
}
}
);
form.elements['newZone[MinBlobPixels]'].disabled = true;
form.elements['newZone[MaxBlobPixels]'].disabled = true;
form.elements['newZone[MinBlobs]'].disabled = true;
@@ -707,37 +771,50 @@ function initPage() {
applyCheckMethod();
drawZonePoints();
$('pauseBtn').onclick = function() {
streamCmdPauseToggle();
};
if ( el = $('saveBtn') ) {
el.onclick = window['saveChanges'].bind(el, el);
}
if ( el = $('cancelBtn') ) {
el.onclick = function() {
refreshParentWindow();
closeWindow();
}
}
//
// Imported from watch.js and modified for new zone edit view
//
var delay = (Math.random()+0.1)*statusRefreshTimeout;
var delay = (Math.random()+0.1) * statusRefreshTimeout;
//console.log("Delay for status updates is: " + delay );
if ( streamMode == "single" ) {
statusCmdTimer = statusCmdQuery.delay( delay );
if ( streamMode == 'single' ) {
statusCmdTimer = statusCmdQuery.delay(delay);
watchdogCheck.pass('status').periodical(statusRefreshTimeout*2);
} else {
streamCmdTimer = streamCmdQuery.delay( delay );
streamCmdTimer = streamCmdQuery.delay(delay);
watchdogCheck.pass('stream').periodical(statusRefreshTimeout*2);
}
if ( canStreamNative || streamMode == "single" ) {
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 ( streamMode == 'single' ) {
streamImg.addEvent('click', fetchImage.pass(streamImg));
fetchImage.pass(streamImg).periodical(imageRefreshTimeout);
}
}
if ( refreshApplet && appletRefreshTime ) {
appletRefresh.delay( appletRefreshTime*1000 );
appletRefresh.delay(appletRefreshTime*1000);
}
}
function Polygon_calcArea( coords ) {
function Polygon_calcArea(coords) {
var n_coords = coords.length;
var float_area = 0.0;
@@ -748,7 +825,7 @@ function Polygon_calcArea( coords ) {
}
float_area += (coords[n_coords-1].x*coords[0].y - coords[0].x*coords[n_coords-1].y) / 2;
return Math.round( Math.abs( float_area ) );
return Math.round(Math.abs(float_area));
}
window.addEventListener( 'DOMContentLoaded', initPage );
window.addEventListener('DOMContentLoaded', initPage);

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

@@ -44,10 +44,10 @@ 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 monitorArea = <?php echo $monitor->Width() * $monitor->Height() ?>;
var selfIntersecting = <?php echo $selfIntersecting?'true':'false' ?>;
var maxX = <?php echo $monitor->ViewWidth()-1 ?>;
var maxY = <?php echo $monitor->ViewHeight()-1 ?>;
var monitorArea = <?php echo $monitor->ViewWidth() * $monitor->ViewHeight() ?>;
var selfIntersecting = <?php echo $selfIntersecting ? 'true' : 'false' ?>;
var selfIntersectingString = '<?php echo addslashes(translate('SelfIntersecting')) ?>';
var alarmRGBUnsetString = '<?php echo addslashes(translate('AlarmRGBUnset')) ?>';

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

@@ -24,7 +24,7 @@ if ( !canView('Monitors') ) {
}
$mid = validInt($_REQUEST['mid']);
$zid = !empty($_REQUEST['zid'])?validInt($_REQUEST['zid']):0;
$zid = (!empty($_REQUEST['zid'])) ? validInt($_REQUEST['zid']) : 0;
$scale = SCALE_BASE;
@@ -34,13 +34,13 @@ $presets = array();
$presetNames = array();
$presetNames[0] = translate('ChoosePreset');
$sql = 'SELECT *, Units-1 AS UnitsIndex, CheckMethod-1 AS CheckMethodIndex FROM ZonePresets ORDER BY Id ASC';
foreach( dbFetchAll( $sql ) as $preset ) {
foreach ( dbFetchAll($sql) as $preset ) {
$presetNames[$preset['Id']] = $preset['Name'];
$presets[] = $preset;
}
$optTypes = array();
foreach ( getEnumValues( 'Zones', 'Type' ) as $optType ) {
foreach ( getEnumValues('Zones', 'Type') as $optType ) {
$optTypes[$optType] = $optType;
}
@@ -57,9 +57,9 @@ foreach ( getEnumValues( 'Zones', 'CheckMethod' ) as $optCheckMethod ) {
$monitor = new ZM\Monitor( $mid );
$minX = 0;
$maxX = $monitor->Width()-1;
$maxX = $monitor->ViewWidth()-1;
$minY = 0;
$maxY = $monitor->Height()-1;
$maxY = $monitor->ViewHeight()-1;
if ( !isset($newZone) ) {
if ( $zid > 0 ) {
@@ -72,7 +72,7 @@ if ( !isset($newZone) ) {
'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->ViewWidth() * $monitor->ViewHeight(),
'AlarmRGB' => 0xff0000,
'CheckMethod' => 'Blobs',
'MinPixelThreshold' => '',
@@ -91,8 +91,8 @@ if ( !isset($newZone) ) {
'ExtendAlarmFrames' => '',
);
}
$zone['Points'] = coordsToPoints( $zone['Coords'] );
$zone['AreaCoords'] = preg_replace( '/\s+/', ',', $zone['Coords'] );
$zone['Points'] = coordsToPoints($zone['Coords']);
$zone['AreaCoords'] = preg_replace('/\s+/', ',', $zone['Coords']);
$newZone = $zone;
} # end if new Zone
@@ -130,151 +130,169 @@ xhtmlHeaders(__FILE__, translate('Zone'));
<input type="hidden" name="newZone[NumCoords]" value="<?php echo count($newZone['Points']) ?>"/>
<input type="hidden" name="newZone[Coords]" value="<?php echo $newZone['Coords'] ?>"/>
<input type="hidden" name="newZone[Area]" value="<?php echo $newZone['Area'] ?>"/>
<input type="hidden" name="newZone[AlarmRGB]" value=""/>
<div id="settingsPanel">
<table id="zoneSettings">
<tbody>
<tr>
<th scope="row"><?php echo translate('Name') ?></th>
<td colspan="2"><input type="text" name="newZone[Name]" value="<?php echo $newZone['Name'] ?>" size="12"/></td>
</tr>
<tr>
<th scope="row"><?php echo translate('Type') ?></th>
<td colspan="2"><?php echo buildSelect( "newZone[Type]", $optTypes, 'applyZoneType()' ) ?></td>
</tr>
<tr>
<th scope="row"><?php echo translate('Preset') ?></th>
<td colspan="2"><?php echo buildSelect( "presetSelector", $presetNames, array( "onchange"=>"applyPreset()", "onblur"=>"this.selectedIndex=0" ) ) ?></td>
</tr>
<tr>
<th scope="row"><?php echo translate('Units') ?></th>
<td colspan="2"><?php echo buildSelect( "newZone[Units]", $optUnits, 'applyZoneUnits()' ) ?></td>
</tr>
<tr>
<th scope="row"><?php echo translate('ZoneAlarmColour') ?></th>
<td colspan="2">
<input type="text" name="newAlarmRgbR" value="<?php echo ($newZone['AlarmRGB']>>16)&0xff ?>" size="3" onchange="limitRange( this, 0, 255 )"/>
/
<input type="text" name="newAlarmRgbG" value="<?php echo ($newZone['AlarmRGB']>>8)&0xff ?>" size="3" onchange="limitRange( this, 0, 255 )"/>
/
<input type="text" name="newAlarmRgbB" value="<?php echo $newZone['AlarmRGB']&0xff ?>" size="3" onchange="limitRange( this, 0, 255 )"/>
</td>
</tr>
<tr>
<th scope="row"><?php echo translate('CheckMethod') ?></th>
<td colspan="2"><?php echo buildSelect('newZone[CheckMethod]', $optCheckMethods, 'applyCheckMethod()' ) ?></td>
</tr>
<tr>
<th scope="row"><?php echo translate('ZoneMinMaxPixelThres') ?></th>
<td><input type="text" name="newZone[MinPixelThreshold]" value="<?php echo $newZone['MinPixelThreshold'] ?>" size="4" onchange="limitRange( this, 0, 255 )"/></td>
<td><input type="text" name="newZone[MaxPixelThreshold]" value="<?php echo $newZone['MaxPixelThreshold'] ?>" size="4" onchange="limitRange( this, 0, 255 )"/></td>
</tr>
<tr>
<th scope="row"><?php echo translate('ZoneFilterSize') ?></th>
<td><input type="text" name="newZone[FilterX]" value="<?php echo $newZone['FilterX'] ?>" size="4" onchange="limitFilter( this )"/></td>
<td><input type="text" name="newZone[FilterY]" value="<?php echo $newZone['FilterY'] ?>" size="4" onchange="limitFilter( this )"/></td>
</tr>
<tr>
<th scope="row"><?php echo translate('ZoneArea') ?></th>
<td colspan="2"><input type="text" name="newZone[TempArea]" value="<?php echo $newZone['Area'] ?>" size="7" disabled="disabled"/></td>
</tr>
<tr>
<th scope="row"><?php echo translate('ZoneMinMaxAlarmArea') ?></th>
<td><input type="text" name="newZone[MinAlarmPixels]" value="<?php echo $newZone['MinAlarmPixels'] ?>" size="6" onchange="limitArea(this)"/></td>
<td><input type="text" name="newZone[MaxAlarmPixels]" value="<?php echo $newZone['MaxAlarmPixels'] ?>" size="6" onchange="limitArea(this)"/></td>
</tr>
<tr>
<th scope="row"><?php echo translate('ZoneMinMaxFiltArea') ?></th>
<td><input type="text" name="newZone[MinFilterPixels]" value="<?php echo $newZone['MinFilterPixels'] ?>" size="6" onchange="limitArea(this)"/></td>
<td><input type="text" name="newZone[MaxFilterPixels]" value="<?php echo $newZone['MaxFilterPixels'] ?>" size="6" onchange="limitArea(this)"/></td>
</tr>
<tr>
<th scope="row"><?php echo translate('ZoneMinMaxBlobArea') ?></th>
<td><input type="text" name="newZone[MinBlobPixels]" value="<?php echo $newZone['MinBlobPixels'] ?>" size="6"/></td>
<td><input type="text" name="newZone[MaxBlobPixels]" value="<?php echo $newZone['MaxBlobPixels'] ?>" size="6"/></td>
</tr>
<tr>
<th scope="row"><?php echo translate('ZoneMinMaxBlobs') ?></th>
<td><input type="text" name="newZone[MinBlobs]" value="<?php echo $newZone['MinBlobs'] ?>" size="4"/></td>
<td><input type="text" name="newZone[MaxBlobs]" value="<?php echo $newZone['MaxBlobs'] ?>" size="4"/></td>
</tr>
<tr>
<th scope="row"><?php echo translate('ZoneOverloadFrames') ?></th>
<td colspan="2"><input type="text" name="newZone[OverloadFrames]" value="<?php echo $newZone['OverloadFrames'] ?>" size="4"/></td>
</tr>
<tr>
<th scope="row"><?php echo translate('ZoneExtendAlarmFrames') ?></th>
<td colspan="2"><input type="text" name="newZone[ExtendAlarmFrames]" value="<?php echo $newZone['ExtendAlarmFrames'] ?>" size="4"/></td>
</tr>
</tbody>
</table>
</div>
<input type="hidden" name="newZone[AlarmRGB]"/>
<div id="definitionPanel">
<div id="imagePanel">
<div id="imageFrame" style="position: relative; width: <?php echo reScale( $monitor->Width(), $scale ) ?>px; height: <?php echo reScale( $monitor->Height(), $scale ) ?>px;">
<?php echo $StreamHTML; ?>
<svg id="zoneSVG" class="zones" style="position: absolute; top: 0; left: 0; width: <?php echo reScale( $monitor->Width(), $scale ) ?>px; height: <?php echo reScale( $monitor->Height(), $scale ) ?>px; background: none;">
<?php
if ( $zone['Id'] ) {
$other_zones = dbFetchAll('SELECT * FROM Zones WHERE MonitorId = ? AND Id != ?', NULL, array($monitor->Id(), $zone['Id']));
} else {
$other_zones = dbFetchAll('SELECT * FROM Zones WHERE MonitorId = ?', NULL, array($monitor->Id()));
}
if ( count($other_zones) ) {
$html = '';
foreach ( $other_zones as $other_zone ) {
$other_zone['AreaCoords'] = preg_replace('/\s+/', ',', $other_zone['Coords']);
$html .= '<polygon id="zonePoly'.$other_zone['Id'].'" points="'. $other_zone['AreaCoords'] .'" class="'. $other_zone['Type'] .'"/>';
}
echo $html;
}
?>
<polygon id="zonePoly" points="<?php echo $zone['AreaCoords'] ?>" class="Editing <?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">
<tbody>
<tr>
<div class="monitor">
<div id="imagePanel">
<div id="imageFrame" style="position: relative; width: <?php echo reScale($monitor->ViewWidth(), $scale) ?>px; height: <?php echo reScale($monitor->ViewHeight(), $scale) ?>px;">
<?php echo $StreamHTML; ?>
<svg id="zoneSVG" class="zones" style="position: absolute; top: 0; left: 0; width: <?php echo reScale($monitor->ViewWidth(), $scale) ?>px; height: <?php echo reScale($monitor->ViewHeight(), $scale) ?>px; background: none;">
<?php
if ( $zone['Id'] ) {
$other_zones = dbFetchAll('SELECT * FROM Zones WHERE MonitorId = ? AND Id != ?', NULL, array($monitor->Id(), $zone['Id']));
} else {
$other_zones = dbFetchAll('SELECT * FROM Zones WHERE MonitorId = ?', NULL, array($monitor->Id()));
}
if ( count($other_zones) ) {
$html = '';
foreach ( $other_zones as $other_zone ) {
$other_zone['AreaCoords'] = preg_replace('/\s+/', ',', $other_zone['Coords']);
$html .= '<polygon id="zonePoly'.$other_zone['Id'].'" points="'. $other_zone['AreaCoords'] .'" class="'. $other_zone['Type'] .'"/>';
}
echo $html;
}
?>
<polygon id="zonePoly" points="<?php echo $zone['AreaCoords'] ?>" class="Editing <?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>
</div>
<div id="settingsPanel">
<table id="zoneSettings">
<tbody>
<tr>
<th scope="row"><?php echo translate('Name') ?></th>
<td colspan="2"><input type="text" name="newZone[Name]" value="<?php echo $newZone['Name'] ?>"/></td>
</tr>
<tr>
<th scope="row"><?php echo translate('Type') ?></th>
<td colspan="2"><?php echo htmlSelect('newZone[Type]', $optTypes, $newZone['Type'],
array('onchange'=>'applyZoneType()')); ?></td>
</tr>
<tr>
<th scope="row"><?php echo translate('Preset') ?></th>
<td colspan="2">
<?php echo htmlSelect('presetSelector', $presetNames,
( isset($_REQUEST['presetSelector']) ? $_REQUEST['presetSelector'] : null),
array('onchange'=>'applyPreset()', 'onblur'=>'this.selectedIndex=0') )
?></td>
</tr>
<tr>
<th scope="row"><?php echo translate('Units') ?></th>
<td colspan="2"><?php echo htmlSelect('newZone[Units]', $optUnits, $newZone['Units'],
array('onchange'=>'applyZoneUnits()') ) ?></td>
</tr>
<tr>
<th scope="row"><?php echo translate('ZoneAlarmColour') ?></th>
<td colspan="2">
<input type="number" name="newAlarmRgbR" value="<?php echo ($newZone['AlarmRGB']>>16)&0xff ?>" size="3"/>
/
<input type="number" name="newAlarmRgbG" value="<?php echo ($newZone['AlarmRGB']>>8)&0xff ?>" size="3"/>
/
<input type="number" name="newAlarmRgbB" value="<?php echo $newZone['AlarmRGB']&0xff ?>" size="3"/>
</td>
</tr>
<tr>
<th scope="row"><?php echo translate('CheckMethod') ?></th>
<td colspan="2"><?php echo htmlSelect('newZone[CheckMethod]', $optCheckMethods, $newZone['CheckMethod']); ?></td>
</tr>
<tr>
<th scope="row"><?php echo translate('ZoneMinMaxPixelThres') ?></th>
<td><input type="number" name="newZone[MinPixelThreshold]" value="<?php echo $newZone['MinPixelThreshold'] ?>" size="4"/></td>
<td><input type="number" name="newZone[MaxPixelThreshold]" value="<?php echo $newZone['MaxPixelThreshold'] ?>" size="4"/></td>
</tr>
<tr>
<th scope="row"><?php echo translate('ZoneFilterSize') ?></th>
<td><input type="number" name="newZone[FilterX]" value="<?php echo $newZone['FilterX'] ?>" size="4"/></td>
<td><input type="number" name="newZone[FilterY]" value="<?php echo $newZone['FilterY'] ?>" size="4"/></td>
</tr>
<tr>
<th scope="row"><?php echo translate('ZoneArea') ?></th>
<td colspan="2"><input type="number" name="newZone[TempArea]" value="<?php echo $newZone['Area'] ?>" size="7" disabled="disabled"/></td>
</tr>
<tr>
<th scope="row"><?php echo translate('ZoneMinMaxAlarmArea') ?></th>
<td><input type="number" name="newZone[MinAlarmPixels]" value="<?php echo $newZone['MinAlarmPixels'] ?>" size="6"/></td>
<td><input type="number" name="newZone[MaxAlarmPixels]" value="<?php echo $newZone['MaxAlarmPixels'] ?>" size="6"/></td>
</tr>
<tr>
<th scope="row"><?php echo translate('ZoneMinMaxFiltArea') ?></th>
<td><input type="number" name="newZone[MinFilterPixels]" value="<?php echo $newZone['MinFilterPixels'] ?>" size="6"/></td>
<td><input type="number" name="newZone[MaxFilterPixels]" value="<?php echo $newZone['MaxFilterPixels'] ?>" size="6"/></td>
</tr>
<tr>
<th scope="row"><?php echo translate('ZoneMinMaxBlobArea') ?></th>
<td><input type="number" name="newZone[MinBlobPixels]" value="<?php echo $newZone['MinBlobPixels'] ?>" size="6"/></td>
<td><input type="number" name="newZone[MaxBlobPixels]" value="<?php echo $newZone['MaxBlobPixels'] ?>" size="6"/></td>
</tr>
<tr>
<th scope="row"><?php echo translate('ZoneMinMaxBlobs') ?></th>
<td><input type="number" name="newZone[MinBlobs]" value="<?php echo $newZone['MinBlobs'] ?>" size="4"/></td>
<td><input type="number" name="newZone[MaxBlobs]" value="<?php echo $newZone['MaxBlobs'] ?>" size="4"/></td>
</tr>
<tr>
<th scope="row"><?php echo translate('ZoneOverloadFrames') ?></th>
<td colspan="2"><input type="number" name="newZone[OverloadFrames]" value="<?php echo $newZone['OverloadFrames'] ?>" size="4"/></td>
</tr>
<tr>
<th scope="row"><?php echo translate('ZoneExtendAlarmFrames') ?></th>
<td colspan="2"><input type="number" name="newZone[ExtendAlarmFrames]" value="<?php echo $newZone['ExtendAlarmFrames'] ?>" size="4"/></td>
</tr>
</tbody>
</table>
</div>
<div id="zonePoints">
<table>
<tbody>
<tr>
<?php
$pointCols = 2;
for ( $i = 0; $i < $pointCols; $i++ ) {
?>
<td>
<table>
<thead>
<tr>
<th><?php echo translate('Point') ?></th>
<th><?php echo translate('X') ?></th>
<th><?php echo translate('Y') ?></th>
<th><?php echo translate('Action') ?></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</td>
<td>
<table>
<thead>
<tr>
<th><?php echo translate('Point') ?></th>
<th><?php echo translate('X') ?></th>
<th><?php echo translate('Y') ?></th>
<th><?php echo translate('Action') ?></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</td>
<?php
# I think this for horizontal filler
if ( $i < ($pointCols-1) ) {
?>
<td>&nbsp;</td>
<td>&nbsp;</td>
<?php
}
}
} # end foreach pointcol
?>
</tr>
</tbody>
</table>
<button id="pauseBtn" type="button" data-on-click="streamCmdPauseToggle"><?php echo translate('Pause') ?></button>
<button type="button" id="submitBtn" name="submitBtn" value="Save" data-on-click-this="saveChanges"<?php if (!canEdit('Monitors') || (false && $selfIntersecting)) { ?> disabled="disabled"<?php } ?>>
<?php echo translate('Save') ?>
</button>
<button type="button" value="Cancel" onclick="refreshParentWindow(); closeWindow();"><?php echo translate('Cancel') ?></button>
</div>
</tr>
</tbody>
</table>
<div class="buttons">
<button type="button" id="pauseBtn"><?php echo translate('Pause') ?></button>
<button type="button" id="saveBtn" value="Save" <?php if (!canEdit('Monitors') || (false && $selfIntersecting)) { ?> disabled="disabled"<?php } ?>>
<?php echo translate('Save') ?>
</button>
<button type="button" id="cancelBtn" value="Cancel"><?php echo translate('Cancel') ?></button>
</div>
</div><!--end ZonePoints-->
</div><!--definitionsPanel-->
</form>
</div>
</div>
</div><!--content-->
</div><!--page-->
</body>
</html>

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

@@ -1,6 +1,6 @@
<?php
//
// ZoneMinder web zones view file, $Date$, $Revision$
// ZoneMinder web zones view file
// Copyright (C) 2001-2008 Philip Coombes
//
// This program is free software; you can redistribute it and/or
@@ -25,14 +25,14 @@ if ( !canView('Monitors') ) {
$mid = validInt($_REQUEST['mid']);
$monitor = new ZM\Monitor($mid);
# Width() and Height() are already rotated
# ViewWidth() and ViewHeight() are already rotated
$minX = 0;
$maxX = $monitor->Width()-1;
$maxX = $monitor->ViewWidth()-1;
$minY = 0;
$maxY = $monitor->Height()-1;
$maxY = $monitor->ViewHeight()-1;
$zones = array();
foreach( dbFetchAll('SELECT * FROM Zones WHERE MonitorId=? ORDER BY Area DESC', NULL, array($mid)) as $row ) {
foreach ( dbFetchAll('SELECT * FROM Zones WHERE MonitorId=? ORDER BY Area DESC', NULL, array($mid)) as $row ) {
$row['Points'] = coordsToPoints($row['Coords']);
limitPoints($row['Points'], $minX, $minY, $maxX, $maxY);
@@ -51,57 +51,60 @@ xhtmlHeaders(__FILE__, translate('Zones'));
<div id="headerButtons"><a href="#" data-on-click="closeWindow"><?php echo translate('Close') ?></a></div>
<h2><?php echo translate('Zones') ?></h2>
</div>
<div id="content" style="width:<?php echo $monitor->Width() ?>px; height:<?php echo $monitor->Height() ?>px; position:relative; margin: 0 auto;">
<div id="content">
<form name="contentForm" id="contentForm" method="get" action="?">
<input type="hidden" name="view" value="<?php echo $view ?>"/>
<input type="hidden" name="action" value="delete"/>
<input type="hidden" name="mid" value="<?php echo $mid ?>"/>
<div id="contentButtons">
<?php echo makePopupButton('?view=zone&mid=' . $mid . '&zid=0', 'zmZone', array('zone', $monitor->Width(), $monitor->Height()), translate('AddNewZone'), canEdit('Monitors')); ?>
<input type="submit" name="deleteBtn" value="<?php echo translate('Delete') ?>" disabled="disabled"/>
</div>
<table id="contentTable" class="major" cellspacing="0">
<thead>
<tr>
<th class="colName"><?php echo translate('Name') ?></th>
<th class="colType"><?php echo translate('Type') ?></th>
<th class="colUnits"><?php echo translate('AreaUnits') ?></th>
<th class="colMark"><?php echo translate('Mark') ?></th>
</tr>
</thead>
<tbody>
<?php
foreach( $zones as $zone ) {
?>
<tr>
<td class="colName"><?php echo makePopupLink('?view=zone&mid=' . $mid . '&zid=' . $zone['Id'], 'zmZone', array('zone', $monitor->Width(), $monitor->Height()), validHtmlStr($zone['Name']), true, 'onclick="streamCmdQuit( true ); return( false );"'); ?></td>
<td class="colType"><?php echo validHtmlStr($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="colMark"><input type="checkbox" name="markZids[]" value="<?php echo $zone['Id'] ?>" data-on-click-this="configureDeleteButton"<?php if ( !canEdit( 'Monitors' ) ) { ?> disabled="disabled"<?php } ?>/></td>
</tr>
<?php
}
?>
</tbody>
</table>
<div class="ZonesImage" style="position:relative; clear:both;">
<?php echo getStreamHTML( $monitor ); ?>
<svg class="zones" width="<?php echo $monitor->Width() ?>" height="<?php echo $monitor->Height() ?>" style="position:absolute; top: 0; left: 0; background: none;">
<div class="ZonesImage" style="width: <?php echo $monitor->ViewWidth() ?>px;">
<?php echo getStreamHTML($monitor); ?>
<svg class="zones" width="<?php echo $monitor->ViewWidth() ?>" height="<?php echo $monitor->ViewHeight() ?>" style="position:absolute; top: 0; left: 0; background: none;">
<?php
foreach( array_reverse($zones) as $zone ) {
?>
<polygon points="<?php echo $zone['AreaCoords'] ?>" class="popup-link <?php echo $zone['Type']?>" onclick="streamCmdQuit( true ); return( false );"
<polygon points="<?php echo $zone['AreaCoords'] ?>" class="popup-link <?php echo $zone['Type']?>" onclick="streamCmdQuit(true); return false;"
data-url="?view=zone&amp;mid=<?php echo $mid ?>&amp;zid=<?php echo $zone['Id'] ?>"
data-window-name="zmZone"
data-window-name="zmZone<?php echo $zone['Id'] ?>"
data-window-tag="zone"
data-window-width="<?php echo $monitor->Width ?>"
data-window-height="<?php echo $monitor->Height ?>"/>
data-window-width="<?php echo $monitor->ViewWidth() ?>"
data-window-height="<?php echo $monitor->ViewHeight() ?>"
/>
<?php
} // end foreach zone
?>
Sorry, your browser does not support inline SVG
</svg>
</div>
<div id="zones">
<table id="zonesTable" class="major">
<thead>
<tr>
<th class="colName"><?php echo translate('Name') ?></th>
<th class="colType"><?php echo translate('Type') ?></th>
<th class="colUnits"><?php echo translate('AreaUnits') ?></th>
<th class="colMark"><?php echo translate('Mark') ?></th>
</tr>
</thead>
<tbody>
<?php
foreach( $zones as $zone ) {
?>
<tr>
<td class="colName"><?php echo makePopupLink('?view=zone&mid='.$mid.'&zid='.$zone['Id'], 'zmZone', array('zone', $monitor->ViewWidth(), $monitor->ViewHeight()), validHtmlStr($zone['Name']), true, 'onclick="streamCmdQuit(true); return false;"'); ?></td>
<td class="colType"><?php echo validHtmlStr($zone['Type']) ?></td>
<td class="colUnits"><?php echo $zone['Area'] ?>&nbsp;/&nbsp;<?php echo sprintf('%.2f', ($zone['Area']*100)/($monitor->ViewWidth()*$monitor->ViewHeight()) ) ?></td>
<td class="colMark"><input type="checkbox" name="markZids[]" value="<?php echo $zone['Id'] ?>" data-on-click-this="configureDeleteButton"<?php if ( !canEdit('Monitors') ) { ?> disabled="disabled"<?php } ?>/></td>
</tr>
<?php
}
?>
</tbody>
</table>
<div id="contentButtons">
<?php echo makePopupButton('?view=zone&mid='.$mid.'&zid=0', 'zmZone', array('zone', $monitor->ViewWidth(), $monitor->ViewHeight()), translate('AddNewZone'), canEdit('Monitors')); ?>
<input type="submit" name="deleteBtn" value="<?php echo translate('Delete') ?>" disabled="disabled"/>
</div>
</div><!--zones-->
</form>
</div>
</div>