diff --git a/web/includes/Monitor.php b/web/includes/Monitor.php index ccb7a4163..384cbde84 100644 --- a/web/includes/Monitor.php +++ b/web/includes/Monitor.php @@ -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; diff --git a/web/includes/actions/zone.php b/web/includes/actions/zone.php index b42aa4318..c0e4eabbb 100644 --- a/web/includes/actions/zone.php +++ b/web/includes/actions/zone.php @@ -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']); diff --git a/web/includes/functions.php b/web/includes/functions.php index 49896dbfe..a98994868 100644 --- a/web/includes/functions.php +++ b/web/includes/functions.php @@ -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' ) { diff --git a/web/skins/classic/css/base/views/zone.css b/web/skins/classic/css/base/views/zone.css index c2feb6734..44cd1a115 100644 --- a/web/skins/classic/css/base/views/zone.css +++ b/web/skins/classic/css/base/views/zone.css @@ -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%; +} diff --git a/web/skins/classic/css/base/views/zones.css b/web/skins/classic/css/base/views/zones.css index 9952e5db4..f65dcdf33 100644 --- a/web/skins/classic/css/base/views/zones.css +++ b/web/skins/classic/css/base/views/zones.css @@ -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; +} diff --git a/web/skins/classic/views/js/zone.js b/web/skins/classic/views/js/zone.js index 8ed5d4544..d9d159033 100644 --- a/web/skins/classic/views/js/zone.js +++ b/web/skins/classic/views/js/zone.js @@ -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); diff --git a/web/skins/classic/views/js/zone.js.php b/web/skins/classic/views/js/zone.js.php index 069a0de54..41f384250 100644 --- a/web/skins/classic/views/js/zone.js.php +++ b/web/skins/classic/views/js/zone.js.php @@ -44,10 +44,10 @@ zone['Points'][] = { 'x': -var maxX = Width()-1 ?>; -var maxY = Height()-1 ?>; -var monitorArea = Width() * $monitor->Height() ?>; -var selfIntersecting = ; +var maxX = ViewWidth()-1 ?>; +var maxY = ViewHeight()-1 ?>; +var monitorArea = ViewWidth() * $monitor->ViewHeight() ?>; +var selfIntersecting = ; var selfIntersectingString = ''; var alarmRGBUnsetString = ''; diff --git a/web/skins/classic/views/zone.php b/web/skins/classic/views/zone.php index ea4ad990c..e72eb43cf 100644 --- a/web/skins/classic/views/zone.php +++ b/web/skins/classic/views/zone.php @@ -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')); - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
"applyPreset()", "onblur"=>"this.selectedIndex=0" ) ) ?>
- - / - - / - -
-
+ +
-
-
- - -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 .= ''; - } - echo $html; -} -?> - - Sorry, your browser does not support inline SVG - -
-
-
:  -  fps
- - - +
+
+
+ + + 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 .= ''; + } + echo $html; + } + ?> + + Sorry, your browser does not support inline SVG + +
+
+
+ :  -  fps +
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
'applyZoneType()')); ?>
+ 'applyPreset()', 'onblur'=>'this.selectedIndex=0') ) + ?>
'applyZoneUnits()') ) ?>
+ + / + + / + +
+
+ +
+ + + - + - + - - -
- - - - - - - - - - - -
- 		+ + + + + + + + + + + +
+ 		  
- - - -
+ + + +
+ + + +
+ + - - + + diff --git a/web/skins/classic/views/zones.php b/web/skins/classic/views/zones.php index 2d29e13d9..f8f758f46 100644 --- a/web/skins/classic/views/zones.php +++ b/web/skins/classic/views/zones.php @@ -1,6 +1,6 @@ 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'));

-
+
-
- Width(), $monitor->Height()), translate('AddNewZone'), canEdit('Monitors')); ?> - -
- - - - - - - - - - - - - - - - - - - -
Width(), $monitor->Height()), validHtmlStr($zone['Name']), true, 'onclick="streamCmdQuit( true ); return( false );"'); ?> / Width()*$monitor->Height()) ) ?> disabled="disabled"/>
-
- - +
+ + - + data-window-width="ViewWidth() ?>" + data-window-height="ViewHeight() ?>" + /> Sorry, your browser does not support inline SVG
+
+ + + + + + + + + + + + + + + + + + + +
ViewWidth(), $monitor->ViewHeight()), validHtmlStr($zone['Name']), true, 'onclick="streamCmdQuit(true); return false;"'); ?> / ViewWidth()*$monitor->ViewHeight()) ) ?> disabled="disabled"/>
+
+ ViewWidth(), $monitor->ViewHeight()), translate('AddNewZone'), canEdit('Monitors')); ?> + +
+