add monitor alarm state and fps to zone edit view

2026-03-20 14:53:27 -04:00 · 2016-04-09 21:34:30 -05:00
parent 6d27a857aa
commit e7d35d16bc
3 changed files with 295 additions and 4 deletions
--- a/web/skins/classic/views/js/zone.js
+++ b/web/skins/classic/views/js/zone.js
@@ -475,8 +475,216 @@ function drawZonePoints()
    updateZoneImage();
 }

-function initPage()
+//
+// Imported from watch.js and modified for new zone edit view
+//
+
+function setButtonState( element, butClass ) {
+    element.className = butClass;
+    element.disabled = (butClass != 'inactive');
+}
+
+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;
@@ -503,13 +711,37 @@ function initPage()

    applyZoneType();

-    if ( form.elements['newZone[Units]'].value == 'Percent' )
-    {
+    if ( form.elements['newZone[Units]'].value == 'Percent' ) {
        applyZoneUnits();
    }

    applyCheckMethod();
    drawZonePoints();
+
+//
+// Imported from watch.js and modified for new zone edit view
+//
+
+    if ( streamMode == "single" ) {
+        statusCmdTimer = statusCmdQuery.delay( (Math.random()+0.1)*statusRefreshTimeout );
+        watchdogCheck.pass('status').periodical(statusRefreshTimeout*2);
+    } else {
+        streamCmdTimer = streamCmdQuery.delay( (Math.random()+0.1)*statusRefreshTimeout );
+        watchdogCheck.pass('stream').periodical(statusRefreshTimeout*2);
+    }
+
+    if ( canStreamNative || streamMode == "single" ) {
+        var streamImg = $('imageFrame').getElement('img');
+        if ( !streamImg )
+            streamImg = $('imageFrame').getElement('object');
+        if ( streamMode == "single" ) {
+            streamImg.addEvent( 'click', fetchImage.pass( streamImg ) );
+            fetchImage.pass( streamImg ).periodical( imageRefreshTimeout );
+        }
+    }
+
+    if ( refreshApplet && appletRefreshTime )
+        appletRefresh.delay( appletRefreshTime*1000 );
 }

 window.addEvent( 'domready', initPage );
--- a/web/skins/classic/views/js/zone.js.php
+++ b/web/skins/classic/views/js/zone.js.php
@@ -65,3 +65,55 @@ var minBlobAreaLtMaxString = '<?php echo addslashes(translate('MinBlobAreaLtMax'
 var minBlobLtMinFilterString = '<?php echo addslashes(translate('MinBlobLtMinFilter')) ?>';
 var minBlobsUnsetString = '<?php echo addslashes(translate('MinBlobsUnset')) ?>';
 var minBlobsLtMaxString = '<?php echo addslashes(translate('MinBlobsLtMax')) ?>';
+
+//
+// Imported from watch.js.php and modified for new zone edit view
+//
+
+var STATE_IDLE = <?php echo STATE_IDLE ?>;
+var STATE_PREALARM = <?php echo STATE_PREALARM ?>;
+var STATE_ALARM = <?php echo STATE_ALARM ?>;
+var STATE_ALERT = <?php echo STATE_ALERT ?>;
+var STATE_TAPE = <?php echo STATE_TAPE ?>;
+
+var stateStrings = new Array();
+stateStrings[STATE_IDLE] = "<?php echo translate('Idle') ?>";
+stateStrings[STATE_PREALARM] = "<?php echo translate('Idle') ?>";
+stateStrings[STATE_ALARM] = "<?php echo translate('Alarm') ?>";
+stateStrings[STATE_ALERT] = "<?php echo translate('Alert') ?>";
+stateStrings[STATE_TAPE] = "<?php echo translate('Record') ?>";
+
+var pauseString = "<?php echo translate('Pause') ?>";
+var playString = "<?php echo translate('Play') ?>";
+
+var deleteString = "<?php echo translate('Delete') ?>";
+
+var CMD_PAUSE = <?php echo CMD_PAUSE ?>;
+var CMD_PLAY = <?php echo CMD_PLAY ?>;
+var CMD_STOP = <?php echo CMD_STOP ?>;
+var CMD_QUERY = <?php echo CMD_QUERY ?>;
+
+var SCALE_BASE = <?php echo SCALE_BASE ?>;
+
+var SOUND_ON_ALARM = <?php echo ZM_WEB_SOUND_ON_ALARM ?>;
+
+var streamMode = "<?php echo $streamMode ?>";
+
+var connKey = '<?php echo $connkey ?>';
+
+var monitorId = <?php echo $monitor->Id() ?>;
+var monitorUrl = '<?php echo ( $monitor->Server()->Url() ) ?>';
+
+var streamSrc = "<?php echo preg_replace( '/&amp;/', '&', $streamSrc ) ?>";
+
+var statusRefreshTimeout = <?php echo 1000*ZM_WEB_REFRESH_STATUS ?>;
+var imageRefreshTimeout = <?php echo 1000*ZM_WEB_REFRESH_IMAGE ?>;
+
+var canEditMonitors = <?php echo canEdit( 'Monitors' )?'true':'false' ?>;
+var canStreamNative = <?php echo canStreamNative()?'true':'false' ?>;
+
+var canPlayPauseAudio = Browser.ie;
+
+var refreshApplet = <?php echo (canStreamApplet() && $streamMode == "jpeg")?'true':'false' ?>;
+var appletRefreshTime = <?php echo ZM_RELOAD_CAMBOZOLA ?>;
+
--- a/web/skins/classic/views/zone.php
+++ b/web/skins/classic/views/zone.php
@@ -117,6 +117,7 @@ $newZone['Area'] = getPolyArea( $newZone['Points'] );
 $selfIntersecting = isSelfIntersecting( $newZone['Points'] );

 $focusWindow = true;
+$connkey = generateConnKey();

 xhtmlHeaders(__FILE__, translate('Zone') );
 ?>
@@ -217,6 +218,12 @@ xhtmlHeaders(__FILE__, translate('Zone') );
                </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 style="border-style: solid;border-width: 1px;">
+            <div id="barLevel" style="width: 25%;background-color: green;text-align: center;"><span id=barLevelVal>4</span>%</div>
+          </div>
+-->
          <table id="zonePoints" cellspacing="0">
            <tbody>
              <tr>
@@ -265,7 +272,7 @@ for ( $i = 0; $i < $pointCols; $i++ )
              </tr>
            </tbody>
          </table>
-          <input type="submit" id="submitBtn" name="submitBtn" value="<?php echo translate('Save') ?>" onclick="return saveChanges( this )"<?php if (!canEdit( 'Monitors' ) || (false && $selfIntersecting)) { ?> disabled="disabled"<?php } ?>/><input type="button" value="<?php echo translate('Cancel') ?>" onclick="closeWindow()"/>
+          <input id="pauseBtn" type="button" value="<?php echo translate('Pause') ?>" onclick="streamCmdPauseToggle()"/><input type="submit" id="submitBtn" name="submitBtn" value="<?php echo translate('Save') ?>" onclick="return saveChanges( this )"<?php if (!canEdit( 'Monitors' ) || (false && $selfIntersecting)) { ?> disabled="disabled"<?php } ?>/><input type="button" value="<?php echo translate('Cancel') ?>" onclick="closeWindow()"/>
        </div>
      </form>
    </div>