743 lines
27 KiB
JavaScript
743 lines
27 KiB
JavaScript
function validateForm( form )
|
|
{
|
|
var errors = new Array();
|
|
if ( selfIntersecting )
|
|
{
|
|
errors[errors.length] = selfIntersectingString;
|
|
}
|
|
if ( form.elements['newZone[Type]'].value != 'Inactive' && form.elements['newZone[Type]'].value != 'Privacy' )
|
|
{
|
|
if ( !form.newAlarmRgbR.value || !form.newAlarmRgbG.value || !form.newAlarmRgbB.value )
|
|
{
|
|
errors[errors.length] = alarmRGBUnsetString;
|
|
}
|
|
form.elements['newZone[AlarmRGB]'].value = (form.newAlarmRgbR.value<<16)|(form.newAlarmRgbG.value<<8)|form.newAlarmRgbB.value;
|
|
if ( !form.elements['newZone[MinPixelThreshold]'].value || (parseInt(form.elements['newZone[MinPixelThreshold]'].value) <= 0 ) )
|
|
{
|
|
errors[errors.length] = minPixelThresUnsetString;
|
|
}
|
|
else if ( (parseInt(form.elements['newZone[MinPixelThreshold]'].value) >= parseInt(form.elements['newZone[MaxPixelThreshold]'].value)) && (parseInt(form.elements['newZone[MaxPixelThreshold]'].value) > 0) )
|
|
{
|
|
errors[errors.length] = minPixelThresLtMaxString;
|
|
}
|
|
if ( form.elements['newZone[CheckMethod]'].value == 'FilteredPixels' || form.elements['newZone[CheckMethod]'].value == 'Blobs' )
|
|
{
|
|
if ( !form.elements['newZone[FilterX]'].value || !form.elements['newZone[FilterY]'].value )
|
|
{
|
|
errors[errors.length] = filterUnsetString;
|
|
}
|
|
}
|
|
if ( !form.elements['newZone[MinAlarmPixels]'].value || (parseFloat(form.elements['newZone[MinAlarmPixels]'].value) <= 0 ) )
|
|
{
|
|
errors[errors.length] = minAlarmAreaUnsetString;
|
|
}
|
|
else if ( (parseFloat(form.elements['newZone[MinAlarmPixels]'].value) >= parseFloat(form.elements['newZone[MaxAlarmPixels]'].value)) && (parseFloat(form.elements['newZone[MaxAlarmPixels]'].value) > 0) )
|
|
{
|
|
errors[errors.length] = minAlarmAreaLtMaxString;
|
|
}
|
|
if ( form.elements['newZone[CheckMethod]'].value == 'FilteredPixels' || form.elements['newZone[CheckMethod]'].value == 'Blobs' )
|
|
{
|
|
if ( !form.elements['newZone[MinFilterPixels]'].value || (parseFloat(form.elements['newZone[MinFilterPixels]'].value) <= 0 ) )
|
|
{
|
|
errors[errors.length] = minFilterAreaUnsetString;
|
|
}
|
|
else if ( (parseFloat(form.elements['newZone[MinFilterPixels]'].value) >= parseFloat(form.elements['newZone[MaxFilterPixels]'].value)) && (parseFloat(form.elements['newZone[MaxFilterPixels]'].value) > 0) )
|
|
{
|
|
errors[errors.length] = minFilterAreaLtMaxString;
|
|
}
|
|
else if ( parseFloat(form.elements['newZone[MinAlarmPixels]'].value) < parseFloat(form.elements['newZone[MinFilterPixels]'].value) )
|
|
{
|
|
errors[errors.length] = minFilterLtMinAlarmString;
|
|
}
|
|
if ( form.elements['newZone[CheckMethod]'].value == 'Blobs' )
|
|
{
|
|
if ( !form.elements['newZone[MinBlobPixels]'].value || (parseFloat(form.elements['newZone[MinBlobPixels]'].value) <= 0 ) )
|
|
{
|
|
errors[errors.length] = minBlobAreaUnsetString;
|
|
}
|
|
else if ( (parseFloat(form.elements['newZone[MinBlobPixels]'].value) >= parseFloat(form.elements['newZone[MaxBlobPixels]'].value)) && (parseFloat(form.elements['newZone[MaxBlobPixels]'].value) > 0) )
|
|
{
|
|
errors[errors.length] = minBlobAreaLtMaxString;
|
|
}
|
|
else if ( parseFloat(form.elements['newZone[MinFilterPixels]'].value) < parseFloat(form.elements['newZone[MinBlobPixels]'].value) )
|
|
{
|
|
errors[errors.length] = minBlobLtMinFilterString;
|
|
}
|
|
if ( !form.elements['newZone[MinBlobs]'].value || (parseInt(form.elements['newZone[MinBlobs]'].value) <= 0 ) )
|
|
{
|
|
errors[errors.length] = minBlobsUnsetString;
|
|
}
|
|
else if ( (parseInt(form.elements['newZone[MinBlobs]'].value) >= parseInt(form.elements['newZone[MaxBlobs]'].value)) && (parseInt(form.elements['newZone[MaxBlobs]'].value) > 0) )
|
|
{
|
|
errors[errors.length] = minBlobsLtMaxString;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if ( errors.length )
|
|
{
|
|
alert( errors.join( "\n" ) );
|
|
return( false );
|
|
}
|
|
return( true );
|
|
}
|
|
|
|
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();
|
|
form.elements['newZone[Area]'].value = zone.Area;
|
|
|
|
form.submit();
|
|
}
|
|
|
|
function applyZoneType()
|
|
{
|
|
var form = document.zoneForm;
|
|
if ( form.elements['newZone[Type]'].value == 'Inactive' || form.elements['newZone[Type]'].value == 'Privacy' )
|
|
{
|
|
form.presetSelector.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;
|
|
form.elements['newZone[MinBlobPixels]'].disabled = true;
|
|
form.elements['newZone[MaxBlobPixels]'].disabled = true;
|
|
form.elements['newZone[MinBlobs]'].disabled = true;
|
|
form.elements['newZone[MaxBlobs]'].disabled = true;
|
|
form.elements['newZone[OverloadFrames]'].disabled = true;
|
|
form.elements['newZone[ExtendAlarmFrames]'].disabled = true;
|
|
}
|
|
else if ( form.elements['newZone[Type]'].value == 'Preclusive' )
|
|
{
|
|
form.presetSelector.disabled = false;
|
|
form.newAlarmRgbR.disabled = true;
|
|
form.newAlarmRgbG.disabled = true;
|
|
form.newAlarmRgbB.disabled = true;
|
|
form.elements['newZone[CheckMethod]'].disabled = false;
|
|
form.elements['newZone[MinPixelThreshold]'].disabled = false;
|
|
form.elements['newZone[MaxPixelThreshold]'].disabled = false;
|
|
form.elements['newZone[MinAlarmPixels]'].disabled = false;
|
|
form.elements['newZone[MaxAlarmPixels]'].disabled = false;
|
|
form.elements['newZone[OverloadFrames]'].disabled = false;
|
|
form.elements['newZone[ExtendAlarmFrames]'].disabled = false;
|
|
applyCheckMethod();
|
|
}
|
|
else
|
|
{
|
|
form.presetSelector.disabled = false;
|
|
form.newAlarmRgbR.disabled = false;
|
|
form.newAlarmRgbG.disabled = false;
|
|
form.newAlarmRgbB.disabled = false;
|
|
form.elements['newZone[CheckMethod]'].disabled = false;
|
|
form.elements['newZone[MinPixelThreshold]'].disabled = false;
|
|
form.elements['newZone[MaxPixelThreshold]'].disabled = false;
|
|
form.elements['newZone[MinAlarmPixels]'].disabled = false;
|
|
form.elements['newZone[MaxAlarmPixels]'].disabled = false;
|
|
form.elements['newZone[OverloadFrames]'].disabled = false;
|
|
form.elements['newZone[ExtendAlarmFrames]'].disabled = true;
|
|
applyCheckMethod();
|
|
}
|
|
}
|
|
|
|
function applyCheckMethod()
|
|
{
|
|
var form = document.zoneForm;
|
|
if ( form.elements['newZone[CheckMethod]'].value == 'AlarmedPixels' )
|
|
{
|
|
form.elements['newZone[FilterX]'].disabled = true;
|
|
form.elements['newZone[FilterY]'].disabled = true;
|
|
form.elements['newZone[MinFilterPixels]'].disabled = true;
|
|
form.elements['newZone[MaxFilterPixels]'].disabled = true;
|
|
form.elements['newZone[MinBlobPixels]'].disabled = true;
|
|
form.elements['newZone[MaxBlobPixels]'].disabled = true;
|
|
form.elements['newZone[MinBlobs]'].disabled = true;
|
|
form.elements['newZone[MaxBlobs]'].disabled = true;
|
|
}
|
|
else if ( form.elements['newZone[CheckMethod]'].value == 'FilteredPixels' )
|
|
{
|
|
form.elements['newZone[FilterX]'].disabled = false;
|
|
form.elements['newZone[FilterY]'].disabled = false;
|
|
form.elements['newZone[MinFilterPixels]'].disabled = false;
|
|
form.elements['newZone[MaxFilterPixels]'].disabled = false;
|
|
form.elements['newZone[MinBlobPixels]'].disabled = true;
|
|
form.elements['newZone[MaxBlobPixels]'].disabled = true;
|
|
form.elements['newZone[MinBlobs]'].disabled = true;
|
|
form.elements['newZone[MaxBlobs]'].disabled = true;
|
|
}
|
|
else
|
|
{
|
|
form.elements['newZone[FilterX]'].disabled = false;
|
|
form.elements['newZone[FilterY]'].disabled = false;
|
|
form.elements['newZone[MinFilterPixels]'].disabled = false;
|
|
form.elements['newZone[MaxFilterPixels]'].disabled = false;
|
|
form.elements['newZone[MinBlobPixels]'].disabled = false;
|
|
form.elements['newZone[MaxBlobPixels]'].disabled = false;
|
|
form.elements['newZone[MinBlobs]'].disabled = false;
|
|
form.elements['newZone[MaxBlobs]'].disabled = false;
|
|
}
|
|
}
|
|
|
|
function applyPreset()
|
|
{
|
|
var form = document.zoneForm;
|
|
var presetId = $('presetSelector').get('value');
|
|
|
|
if ( presets[presetId] )
|
|
{
|
|
var preset = presets[presetId];
|
|
|
|
form.elements['newZone[Units]'].selectedIndex = preset['UnitsIndex'];
|
|
form.elements['newZone[CheckMethod]'].selectedIndex = preset['CheckMethodIndex'];
|
|
form.elements['newZone[MinPixelThreshold]'].value = preset['MinPixelThreshold'];
|
|
form.elements['newZone[MaxPixelThreshold]'].value = preset['MaxPixelThreshold'];
|
|
form.elements['newZone[FilterX]'].value = preset['FilterX'];
|
|
form.elements['newZone[FilterY]'].value = preset['FilterY'];
|
|
form.elements['newZone[MinAlarmPixels]'].value = preset['MinAlarmPixels'];
|
|
form.elements['newZone[MaxAlarmPixels]'].value = preset['MaxAlarmPixels'];
|
|
form.elements['newZone[MinFilterPixels]'].value = preset['MinFilterPixels'];
|
|
form.elements['newZone[MaxFilterPixels]'].value = preset['MaxFilterPixels'];
|
|
form.elements['newZone[MinBlobPixels]'].value = preset['MinBlobPixels'];
|
|
form.elements['newZone[MaxBlobPixels]'].value = preset['MaxBlobPixels'];
|
|
form.elements['newZone[MinBlobs]'].value = preset['MinBlobs'];
|
|
form.elements['newZone[MaxBlobs]'].value = preset['MaxBlobs'];
|
|
form.elements['newZone[OverloadFrames]'].value = preset['OverloadFrames'];
|
|
form.elements['newZone[ExtendAlarmFrames]'].value = preset['ExtendAlarmFrames'];
|
|
|
|
applyCheckMethod();
|
|
form.elements['newZone[TempArea]'].value = 100;
|
|
}
|
|
}
|
|
|
|
function toPixels( field, maxValue )
|
|
{
|
|
if ( field.value != '' )
|
|
field.value = Math.round((field.value*maxValue)/100);
|
|
}
|
|
|
|
function toPercent( field, maxValue )
|
|
{
|
|
if ( field.value != '' )
|
|
field.value = Math.round((100*100*field.value)/maxValue)/100;
|
|
}
|
|
|
|
function applyZoneUnits()
|
|
{
|
|
var area = zone.Area;
|
|
|
|
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 );
|
|
}
|
|
else
|
|
{
|
|
form.elements['newZone[TempArea]'].value = 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 )
|
|
{
|
|
field.value = constrainValue( parseInt(field.value), parseInt(minValue), parseInt(maxValue) );
|
|
}
|
|
|
|
function limitFilter( field )
|
|
{
|
|
field.value = (Math.floor((field.value-1)/2)*2) + 1;
|
|
field.value = constrainValue(parseInt(field.value), 3, 15);
|
|
}
|
|
|
|
function limitArea( field )
|
|
{
|
|
var minValue = 0;
|
|
var maxValue = zone.Area;
|
|
if ( document.zoneForm.elements['newZone[Units]'].value == "Percent" )
|
|
{
|
|
maxValue = 100;
|
|
}
|
|
limitRange( field, minValue, maxValue );
|
|
}
|
|
|
|
function highlightOn( index )
|
|
{
|
|
$('row'+index).addClass( 'highlight' );
|
|
$('point'+index).addClass( '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 unsetActivePoint( index )
|
|
{
|
|
$('row'+index).removeClass( 'active' );
|
|
$('point'+index).removeClass( 'active' );
|
|
}
|
|
|
|
function getCoordString()
|
|
{
|
|
var coords = new Array();
|
|
for ( var i = 0; i < zone['Points'].length; i++ )
|
|
coords[coords.length] = zone['Points'][i].x+','+zone['Points'][i].y;
|
|
return( coords.join( " " ) );
|
|
}
|
|
|
|
function updateZoneImage()
|
|
{
|
|
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 )
|
|
{
|
|
updateActivePoint( index );
|
|
unsetActivePoint( index );
|
|
updateZoneImage();
|
|
}
|
|
|
|
function constrainValue( value, loVal, hiVal )
|
|
{
|
|
if ( value < loVal ) {
|
|
return loVal;
|
|
}
|
|
if ( value > hiVal ) {
|
|
return hiVal;
|
|
}
|
|
return value;
|
|
}
|
|
|
|
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 );
|
|
|
|
$('newZone[Points]['+index+'][x]').value = x;
|
|
$('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 )
|
|
{
|
|
var nextIndex = index+1;
|
|
if ( index >= (zone['Points'].length-1) )
|
|
nextIndex = 0;
|
|
var newX = parseInt(Math.round((zone['Points'][index]['x']+zone['Points'][nextIndex]['x'])/2));
|
|
var newY = parseInt(Math.round((zone['Points'][index]['y']+zone['Points'][nextIndex]['y'])/2));
|
|
if ( nextIndex == 0 )
|
|
zone['Points'][zone['Points'].length] = { 'x': newX, 'y': newY };
|
|
else
|
|
zone['Points'].splice( nextIndex, 0, { 'x': newX, 'y': newY } );
|
|
drawZonePoints();
|
|
updateZoneImage();
|
|
//setActivePoint( nextIndex );
|
|
}
|
|
|
|
function delPoint( index )
|
|
{
|
|
zone['Points'].splice( index, 1 );
|
|
drawZonePoints();
|
|
}
|
|
|
|
function limitPointValue( point, loVal, hiVal )
|
|
{
|
|
point.value = constrainValue(point.value, loVal, hiVal)
|
|
}
|
|
|
|
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' );
|
|
zone['Points'][index].x = x;
|
|
var Point = $('zonePoly').points.getItem(index);
|
|
Point.x =x;
|
|
Point.y =y;
|
|
}
|
|
|
|
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' );
|
|
zone['Points'][index].y = y;
|
|
var Point = $('zonePoly').points.getItem(index);
|
|
Point.x =x;
|
|
Point.y =y;
|
|
}
|
|
|
|
function saveChanges( element )
|
|
{
|
|
var form = element.form;
|
|
if ( validateForm( form ) )
|
|
{
|
|
submitForm( form );
|
|
if ( form.elements['newZone[Type]'].value == 'Privacy' )
|
|
{
|
|
alert( 'Capture process for this monitor will be restarted for the Privacy zone changes to take effect.' );
|
|
}
|
|
return( true );
|
|
}
|
|
return( false );
|
|
}
|
|
|
|
function drawZonePoints()
|
|
{
|
|
$('imageFrame').getElements( 'div.zonePoint' ).each( function( element ) { element.destroy(); } );
|
|
for ( var i = 0; i < zone['Points'].length; i++ )
|
|
{
|
|
var div = new Element( 'div', { 'id': 'point'+i, 'class': 'zonePoint', 'title': 'Point '+(i+1), 'styles': { '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.makeDraggable( { 'container': $('imageFrame'), '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(); } );
|
|
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 );
|
|
|
|
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( 'change', 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( 'change', updateY.pass( i ) );
|
|
input.inject( cell );
|
|
cell.inject( row );
|
|
|
|
cell = new Element( 'td' );
|
|
new Element( 'a', { 'href': '#', 'events': { 'click': addPoint.pass( i ) } } ).set( 'text', '+' ).inject( cell );
|
|
if ( zone['Points'].length > 3 )
|
|
new Element( 'a', { 'id': 'delete'+i, 'href': '#', 'events': { 'click': delPoint.pass( i ) } } ).set( 'text', '-' ).inject( cell );
|
|
cell.inject( row );
|
|
|
|
row.inject( tables[i%tables.length].getElement( 'tbody' ) );
|
|
}
|
|
// Sets up the SVG polygon
|
|
updateZoneImage();
|
|
}
|
|
|
|
//
|
|
// 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;
|
|
//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;
|
|
form.elements['newZone[MinBlobPixels]'].disabled = true;
|
|
form.elements['newZone[MaxBlobPixels]'].disabled = true;
|
|
form.elements['newZone[MinBlobs]'].disabled = true;
|
|
form.elements['newZone[MaxBlobs]'].disabled = true;
|
|
form.elements['newZone[OverloadFrames]'].disabled = true;
|
|
|
|
applyZoneType();
|
|
|
|
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 );
|