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

whitespace, get rid of redundant ajax startup

This commit is contained in:
Isaac Connor 2018-10-16 17:20:10 -04:00
parent c2af380e29
commit b0078fb1d9
1 changed files with 112 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

225
web/skins/classic/views/js/montage.js
View File

@ -1,6 +1,9 @@
var requestQueue = new Request.Queue( { concurrent: monitorData.length, stopOnFailure: false } ); var requestQueue = new Request.Queue({
concurrent: monitorData.length,
stopOnFailure: false
});
function Monitor( monitorData ) { function Monitor(monitorData) {
this.id = monitorData.id; this.id = monitorData.id;
this.connKey = monitorData.connKey; this.connKey = monitorData.connKey;
this.url = monitorData.url; this.url = monitorData.url;
@ -14,36 +17,35 @@ function Monitor( monitorData ) {
this.streamCmdTimer = null; this.streamCmdTimer = null;
this.type = monitorData.type; this.type = monitorData.type;
this.refresh = monitorData.refresh; this.refresh = monitorData.refresh;
this.start = function( delay ) { this.start = function(delay) {
if ( this.streamCmdQuery ) if ( this.streamCmdQuery )
this.streamCmdTimer = this.streamCmdQuery.delay( delay, this ); this.streamCmdTimer = this.streamCmdQuery.delay(delay, this);
else else
console.log("No streamCmdQuery"); console.log("No streamCmdQuery");
}; };
this.setStateClass = function(element, stateClass) {
this.setStateClass = function( element, stateClass ) { if ( !element.hasClass(stateClass) ) {
if ( !element.hasClass( stateClass ) ) {
if ( stateClass != 'alarm' ) if ( stateClass != 'alarm' )
element.removeClass( 'alarm' ); element.removeClass('alarm');
if ( stateClass != 'alert' ) if ( stateClass != 'alert' )
element.removeClass( 'alert' ); element.removeClass('alert');
if ( stateClass != 'idle' ) if ( stateClass != 'idle' )
element.removeClass( 'idle' ); element.removeClass('idle');
element.addClass( stateClass ); element.addClass(stateClass);
} }
}; };
this.onError = function( text, error ) { this.onError = function(text, error) {
console.log('onerror: ' + text + ' error:'+error); console.log('onerror: ' + text + ' error:'+error);
// Requeue, but want to wait a while. // Requeue, but want to wait a while.
var streamCmdTimeout = 1000*statusRefreshTimeout; var streamCmdTimeout = 10*statusRefreshTimeout;
this.streamCmdTimer = this.streamCmdQuery.delay(streamCmdTimeout, this); this.streamCmdTimer = this.streamCmdQuery.delay(streamCmdTimeout, this);
}; };
this.onFailure = function( xhr ) { this.onFailure = function(xhr) {
console.log('onFailure: ' + this.connKey); console.log('onFailure: ' + this.connKey);
console.log(xhr); console.log(xhr);
if ( ! requestQueue.hasNext("cmdReq"+this.id) ) { if ( ! requestQueue.hasNext("cmdReq"+this.id) ) {
console.log("Not requeuing because there is one already"); console.log("Not requeuing because there is one already");
requestQueue.addRequest("cmdReq"+this.id, this.streamCmdReq); requestQueue.addRequest("cmdReq"+this.id, this.streamCmdReq);
} }
@ -58,9 +60,9 @@ function Monitor( monitorData ) {
console.log("done failure"); console.log("done failure");
}; };
this.getStreamCmdResponse = function( respObj, respText ) { this.getStreamCmdResponse = function(respObj, respText) {
if ( this.streamCmdTimer ) if ( this.streamCmdTimer )
this.streamCmdTimer = clearTimeout( this.streamCmdTimer ); this.streamCmdTimer = clearTimeout(this.streamCmdTimer);
var stream = $j('#liveStream'+this.id)[0]; var stream = $j('#liveStream'+this.id)[0];
@ -78,11 +80,11 @@ function Monitor( monitorData ) {
stateClass = "idle"; stateClass = "idle";
if ( (!COMPACT_MONTAGE) && (this.type != 'WebSite') ) { if ( (!COMPACT_MONTAGE) && (this.type != 'WebSite') ) {
$('fpsValue'+this.id).set( 'text', this.status.fps ); $('fpsValue'+this.id).set('text', this.status.fps);
$('stateValue'+this.id).set( 'text', stateStrings[this.alarmState] ); $('stateValue'+this.id).set('text', stateStrings[this.alarmState]);
this.setStateClass( $('monitorState'+this.id), stateClass ); this.setStateClass($('monitorState'+this.id), stateClass);
} }
this.setStateClass( $('monitor'+this.id), stateClass ); this.setStateClass($('monitor'+this.id), stateClass);
/*Stream could be an applet so can't use moo tools*/ /*Stream could be an applet so can't use moo tools*/
stream.className = stateClass; stream.className = stateClass;
@ -96,7 +98,7 @@ function Monitor( monitorData ) {
if ( newAlarm ) { if ( newAlarm ) {
if ( false && SOUND_ON_ALARM ) { if ( false && SOUND_ON_ALARM ) {
// Enable the alarm sound // Enable the alarm sound
$('alarmSound').removeClass( 'hidden' ); $('alarmSound').removeClass('hidden');
} }
if ( POPUP_ON_ALARM ) { if ( POPUP_ON_ALARM ) {
windowToFront(); windowToFront();
@ -105,49 +107,51 @@ function Monitor( monitorData ) {
if ( false && SOUND_ON_ALARM ) { if ( false && SOUND_ON_ALARM ) {
if ( oldAlarm ) { if ( oldAlarm ) {
// Disable alarm sound // Disable alarm sound
$('alarmSound').addClass( 'hidden' ); $('alarmSound').addClass('hidden');
} }
} }
if ( this.status.auth ) { if ( this.status.auth ) {
if ( this.status.auth != auth_hash ) { if ( this.status.auth != auth_hash ) {
// Try to reload the image stream. // Try to reload the image stream.
if ( stream ) if ( stream )
stream.src = stream.src.replace( /auth=\w+/i, 'auth='+this.status.auth ); stream.src = stream.src.replace(/auth=\w+/i, 'auth='+this.status.auth);
console.log("Changed auth from " + auth_hash + " to " + this.status.auth ); console.log("Changed auth from " + auth_hash + " to " + this.status.auth);
auth_hash = this.status.auth; auth_hash = this.status.auth;
} }
} // end if have a new auth hash } // end if have a new auth hash
} // end if has state } // end if has state
} else { } else {
console.error( respObj.message ); console.error(respObj.message);
// Try to reload the image stream. // Try to reload the image stream.
if ( stream ) { if ( stream ) {
if ( stream.src ) { if ( stream.src ) {
console.log('Reloading stream: ' + stream.src ); console.log('Reloading stream: ' + stream.src);
stream.src = stream.src.replace(/rand=\d+/i, 'rand='+Math.floor((Math.random() * 1000000) )); stream.src = stream.src.replace(/rand=\d+/i, 'rand='+Math.floor((Math.random() * 1000000) ));
} else { } else {
} }
} else { } else {
console.log( 'No stream to reload?' ); console.log('No stream to reload?');
} }
} // end if Ok or not } // end if Ok or not
var streamCmdTimeout = statusRefreshTimeout; var streamCmdTimeout = statusRefreshTimeout;
// The idea here is if we are alarmed, do updates faster. However, there is a timeout in the php side which isn't getting modified, so this may cause a problem. Also the server may only be able to update so fast. // The idea here is if we are alarmed, do updates faster.
// However, there is a timeout in the php side which isn't getting modified,
// so this may cause a problem. Also the server may only be able to update so fast.
//if ( this.alarmState == STATE_ALARM || this.alarmState == STATE_ALERT ) { //if ( this.alarmState == STATE_ALARM || this.alarmState == STATE_ALERT ) {
//streamCmdTimeout = streamCmdTimeout/5; //streamCmdTimeout = streamCmdTimeout/5;
//} //}
this.streamCmdTimer = this.streamCmdQuery.delay( streamCmdTimeout, this ); this.streamCmdTimer = this.streamCmdQuery.delay(streamCmdTimeout, this);
this.lastAlarmState = this.alarmState; this.lastAlarmState = this.alarmState;
}; };
this.streamCmdQuery = function( resent ) { this.streamCmdQuery = function(resent) {
if ( resent ) { if ( resent ) {
console.log( this.connKey+": Resending" ); console.log(this.connKey+": timeout: Resending");
this.streamCmdReq.cancel(); this.streamCmdReq.cancel();
} }
//console.log("Starting CmdQuery for " + this.connKey ); //console.log("Starting CmdQuery for " + this.connKey );
if ( this.type != 'WebSite' ) { if ( this.type != 'WebSite' ) {
this.streamCmdReq.send( this.streamCmdParms+"&command="+CMD_QUERY ); this.streamCmdReq.send(this.streamCmdParms+"&command="+CMD_QUERY);
} }
}; };
@ -155,51 +159,50 @@ function Monitor( monitorData ) {
this.streamCmdReq = new Request.JSON( { this.streamCmdReq = new Request.JSON( {
url: this.url, url: this.url,
method: 'get', method: 'get',
timeout: 1000+AJAX_TIMEOUT, timeout: AJAX_TIMEOUT,
onSuccess: this.getStreamCmdResponse.bind( this ), onSuccess: this.getStreamCmdResponse.bind(this),
onTimeout: this.streamCmdQuery.bind( this, true ), onTimeout: this.streamCmdQuery.bind(this, true),
onError: this.onError.bind(this), onError: this.onError.bind(this),
onFailure: this.onFailure.bind(this), onFailure: this.onFailure.bind(this),
link: 'cancel' link: 'cancel'
} ); } );
console.log("queueing for " + this.id + " " + this.connKey ); console.log("queueing for " + this.id + " " + this.connKey + " timeout is: " + AJAX_TIMEOUT);
requestQueue.addRequest( "cmdReq"+this.id, this.streamCmdReq ); requestQueue.addRequest("cmdReq"+this.id, this.streamCmdReq);
} }
} // end function Monitor
} function selectLayout(element) {
function selectLayout( element ) {
layout = $j(element).val(); layout = $j(element).val();
if ( layout_id = parseInt(layout) ) { if ( layout_id = parseInt(layout) ) {
layout = layouts[layout]; layout = layouts[layout];
console.log(layout); console.log(layout);
for ( var i = 0; i < monitors.length; i++ ) { for ( var i = 0, length = monitors.length; i < length; i++ ) {
monitor = monitors[i]; monitor = monitors[i];
// Need to clear the current positioning, and apply the new // Need to clear the current positioning, and apply the new
monitor_frame = $j('#monitorFrame'+monitor.id); monitor_frame = $j('#monitorFrame'+monitor.id);
if ( ! monitor_frame ) { if ( ! monitor_frame ) {
console.log("Error finding frame for " + monitor.id ); console.log("Error finding frame for " + monitor.id);
continue; continue;
} }
// Apply default layout options, like float left // Apply default layout options, like float left
if ( layout.Positions['default'] ) { if ( layout.Positions['default'] ) {
styles = layout.Positions['default']; styles = layout.Positions['default'];
for ( style in styles ) { for ( style in styles ) {
monitor_frame.css(style, styles[style]); monitor_frame.css(style, styles[style]);
} }
} else { } else {
console.log("No default styles to apply" + layout.Positions); console.log("No default styles to apply" + layout.Positions);
} // end if default styles } // end if default styles
if ( layout.Positions['mId'+monitor.id] ) { if ( layout.Positions['mId'+monitor.id] ) {
styles = layout.Positions['mId'+monitor.id]; styles = layout.Positions['mId'+monitor.id];
for ( style in styles ) { for ( style in styles ) {
monitor_frame.css(style, styles[style]); monitor_frame.css(style, styles[style]);
console.log("Applying " + style + ' : ' + styles[style] ); console.log("Applying " + style + ' : ' + styles[style]);
} }
} else { } else {
console.log("No Monitor styles to apply"); console.log("No Monitor styles to apply");
@ -209,21 +212,20 @@ function selectLayout( element ) {
if ( ! layout ) { if ( ! layout ) {
return; return;
} }
Cookie.write( 'zmMontageLayout', layout_id, { duration: 10*365 } ); Cookie.write('zmMontageLayout', layout_id, { duration: 10*365 });
if ( layouts[layout_id].Name != 'Freeform' ) { // 'montage_freeform.css' ) { if ( layouts[layout_id].Name != 'Freeform' ) { // 'montage_freeform.css' ) {
Cookie.write( 'zmMontageScale', '', { duration: 10*365 } ); Cookie.write( 'zmMontageScale', '', { duration: 10*365 } );
$('scale').set('value', '' ); $('scale').set('value', '');
$('width').set('value', ''); $('width').set('value', '');
if ( 1 ) { for ( var i = 0, length = monitors.length; i < length; i++ ) {
for ( var x = 0; x < monitors.length; x++ ) { var monitor = monitors[i];
var monitor = monitors[x]; var streamImg = $('liveStream'+monitor.id);
var streamImg = $( 'liveStream'+monitor.id );
if ( streamImg ) { if ( streamImg ) {
if ( streamImg.nodeName == 'IMG' ) { if ( streamImg.nodeName == 'IMG' ) {
var src = streamImg.src; var src = streamImg.src;
src = src.replace(/width=[\.\d]+/i,'width=0' ); src = src.replace(/width=[\.\d]+/i,'width=0' );
if ( src != streamImg.src ) { if ( src != streamImg.src ) {
streamImg.src=''; streamImg.src = '';
streamImg.src = src; streamImg.src = src;
} }
} else if ( streamImg.nodeName == 'APPLET' || streamImg.nodeName == 'OBJECT' ) { } else if ( streamImg.nodeName == 'APPLET' || streamImg.nodeName == 'OBJECT' ) {
@ -236,37 +238,39 @@ if ( 1 ) {
zonesSVG.style.width = ''; zonesSVG.style.width = '';
} }
} // end foreach monitor } // end foreach monitor
}
} }
} } // end function selectLayout(element)
function changeSize() { function changeSize() {
var width = $('width').get('value'); var width = $('width').get('value');
var height = $('height').get('value'); var height = $('height').get('value');
for ( var x = 0; x < monitors.length; x++ ) { for ( var i = 0, length = monitors.length; i < length; i++ ) {
var monitor = monitors[x]; var monitor = monitors[i];
// Scale the frame // Scale the frame
monitor_frame = $j('#monitorFrame'+monitor.id); monitor_frame = $j('#monitorFrame'+monitor.id);
if ( ! monitor_frame ) { if ( !monitor_frame ) {
console.log("Error finding frame for " + monitor.id ); console.log("Error finding frame for " + monitor.id);
continue; continue;
} }
monitor_frame.css('width',width?width+'px':''); if ( width )
monitor_frame.css('height',height?height+'px':''); monitor_frame.css('width', width+'px');
/*Stream could be an applet so can't use moo tools*/ if ( height )
var streamImg = $( 'liveStream'+monitor.id ); monitor_frame.css('height', height+'px');
/*Stream could be an applet so can't use moo tools*/
var streamImg = $('liveStream'+monitor.id);
if ( streamImg ) { if ( streamImg ) {
if ( streamImg.nodeName == 'IMG' ) { if ( streamImg.nodeName == 'IMG' ) {
var src = streamImg.src; var src = streamImg.src;
streamImg.src=''; streamImg.src = '';
src = src.replace(/width=[\.\d]+/i,'width='+width ); src = src.replace(/width=[\.\d]+/i,'width='+width);
src = src.replace(/height=[\.\d]+/i,'height='+height ); src = src.replace(/height=[\.\d]+/i,'height='+height);
src = src.replace(/rand=\d+/i,'rand='+Math.floor((Math.random() * 1000000) )); src = src.replace(/rand=\d+/i,'rand='+Math.floor((Math.random() * 1000000) ));
streamImg.src = src; streamImg.src = src;
} }
streamImg.style.width = width? width + "px" : null; streamImg.style.width = width ? width + "px" : null;
streamImg.style.height = height ? height + "px" : null; streamImg.style.height = height ? height + "px" : null;
//streamImg.style.height = ''; //streamImg.style.height = '';
} }
@ -276,10 +280,10 @@ function changeSize() {
zonesSVG.style.height = height + "px"; zonesSVG.style.height = height + "px";
} }
} }
$('scale').set('value', '' ); $('scale').set('value', '');
Cookie.write( 'zmMontageScale', '', { duration: 10*365 } ); Cookie.write('zmMontageScale', '', { duration: 10*365 });
Cookie.write( 'zmMontageWidth', width, { duration: 10*365 } ); Cookie.write('zmMontageWidth', width, { duration: 10*365 });
Cookie.write( 'zmMontageHeight', height, { duration: 10*365 } ); Cookie.write('zmMontageHeight', height, { duration: 10*365 });
selectLayout('#zmMontageLayout'); selectLayout('#zmMontageLayout');
} // end function changeSize() } // end function changeSize()
@ -287,22 +291,22 @@ function changeScale() {
var scale = $('scale').get('value'); var scale = $('scale').get('value');
$('width').set('value', ''); $('width').set('value', '');
$('height').set('value', ''); $('height').set('value', '');
Cookie.write( 'zmMontageScale', scale, { duration: 10*365 } ); Cookie.write('zmMontageScale', scale, { duration: 10*365 });
Cookie.write( 'zmMontageWidth', '', { duration: 10*365 } ); Cookie.write('zmMontageWidth', '', { duration: 10*365 });
Cookie.write( 'zmMontageHeight', '', { duration: 10*365 } ); Cookie.write('zmMontageHeight', '', { duration: 10*365 });
if ( ! scale ) { if ( !scale ) {
selectLayout('#zmMontageLayout'); selectLayout('#zmMontageLayout');
return; return;
} }
for ( var x = 0; x < monitors.length; x++ ) { for ( var i = 0, length = monitors.length; i < length; i++ ) {
var monitor = monitors[x]; var monitor = monitors[i];
var newWidth = ( monitorData[x].width * scale ) / SCALE_BASE; var newWidth = ( monitorData[i].width * scale ) / SCALE_BASE;
var newHeight = ( monitorData[x].height * scale ) / SCALE_BASE; var newHeight = ( monitorData[i].height * scale ) / SCALE_BASE;
// Scale the frame // Scale the frame
monitor_frame = $j('#monitorFrame'+monitor.id); monitor_frame = $j('#monitorFrame'+monitor.id);
if ( ! monitor_frame ) { if ( !monitor_frame ) {
console.log("Error finding frame for " + monitor.id ); console.log("Error finding frame for " + monitor.id);
continue; continue;
} }
if ( width ) if ( width )
@ -310,16 +314,16 @@ function changeScale() {
if ( height ) if ( height )
monitor_frame.css('height',height+'px'); monitor_frame.css('height',height+'px');
/*Stream could be an applet so can't use moo tools*/ /*Stream could be an applet so can't use moo tools*/
var streamImg = $j('#liveStream'+monitor.id )[0]; var streamImg = $j('#liveStream'+monitor.id)[0];
if ( streamImg ) { if ( streamImg ) {
if ( streamImg.nodeName == 'IMG' ) { if ( streamImg.nodeName == 'IMG' ) {
var src = streamImg.src; var src = streamImg.src;
streamImg.src=''; streamImg.src = '';
//src = src.replace(/rand=\d+/i,'rand='+Math.floor((Math.random() * 1000000) )); //src = src.replace(/rand=\d+/i,'rand='+Math.floor((Math.random() * 1000000) ));
src = src.replace(/scale=[\.\d]+/i,'scale='+ scale ); src = src.replace(/scale=[\.\d]+/i, 'scale='+scale);
src = src.replace(/width=[\.\d]+/i,'width='+newWidth ); src = src.replace(/width=[\.\d]+/i, 'width='+newWidth);
src = src.replace(/height=[\.\d]+/i,'height='+newHeight ); src = src.replace(/height=[\.\d]+/i, 'height='+newHeight);
streamImg.src = src; streamImg.src = src;
} }
streamImg.style.width = newWidth + "px"; streamImg.style.width = newWidth + "px";
@ -341,11 +345,11 @@ function toGrid(value) {
function edit_layout(button) { function edit_layout(button) {
// Turn off the onclick on the image. // Turn off the onclick on the image.
for ( var i = 0; i < monitors.length; i++ ) { for ( var i = 0, length = monitors.length; i < length; i++ ) {
var monitor = monitors[i]; var monitor = monitors[i];
monitor_feed = $j('#imageFeed'+monitor.id)[0]; monitor_feed = $j('#imageFeed'+monitor.id)[0];
monitor_feed.click(''); monitor_feed.onclick = '';
}; };
$j('#monitors .monitorFrame').draggable({ $j('#monitors .monitorFrame').draggable({
@ -360,11 +364,11 @@ function save_layout(button) {
var form = button.form; var form = button.form;
// In fixed positioning, order doesn't matter. In floating positioning, it does. // In fixed positioning, order doesn't matter. In floating positioning, it does.
var Positions = {}; var Positions = {};
for ( var i = 0; i < monitors.length; i++ ) { for ( var i = 0, length = monitors.length; i < lenth; i++ ) {
var monitor = monitors[i]; var monitor = monitors[i];
monitor_frame = $j('#monitorFrame'+monitor.id); monitor_frame = $j('#monitorFrame'+monitor.id);
Positions['mId'+monitor.id] = { Positions['mId'+monitor.id] = {
width: monitor_frame.css('width'), width: monitor_frame.css('width'),
height: monitor_frame.css('height'), height: monitor_frame.css('height'),
top: monitor_frame.css('top'), top: monitor_frame.css('top'),
@ -375,22 +379,23 @@ function save_layout(button) {
float: monitor_frame.css('float'), float: monitor_frame.css('float'),
}; };
} // end foreach monitor } // end foreach monitor
form.Positions.value = JSON.stringify( Positions ); form.Positions.value = JSON.stringify(Positions);
form.submit(); form.submit();
} } // end function save_layout
function cancel_layout(button) { function cancel_layout(button) {
$j('#SaveLayout').hide(); $j('#SaveLayout').hide();
$j('#EditLayout').show(); $j('#EditLayout').show();
for ( var i = 0; i < monitors.length; i++ ) { for ( var i = 0, length = monitors.length; i < length; i++ ) {
var monitor = monitors[i]; var monitor = monitors[i];
monitor_feed = $j('#imageFeed'+monitor.id); monitor_feed = $j('#imageFeed'+monitor.id);
monitor_feed.click( monitor.onclick ); monitor_feed.click(monitor.onclick);
}; };
selectLayout('#zmMontageLayout'); selectLayout('#zmMontageLayout');
} }
function reloadWebSite(ndx) { function reloadWebSite(ndx) {
document.getElementById('imageFeed'+ndx).innerHTML = document.getElementById('imageFeed'+ndx).innerHTML; document.getElementById('imageFeed'+ndx).innerHTML = document.getElementById('imageFeed'+ndx).innerHTML;
} }
var monitors = new Array(); var monitors = new Array();
@ -409,25 +414,19 @@ function initPage() {
jQuery("#hdrbutton").toggleClass('glyphicon-menu-down').toggleClass('glyphicon-menu-up'); jQuery("#hdrbutton").toggleClass('glyphicon-menu-down').toggleClass('glyphicon-menu-up');
} }
for ( var i = 0; i < monitorData.length; i++ ) { for ( var i = 0, length = monitorData.length; i < length; i++ ) {
monitors[i] = new Monitor(monitorData[i]); monitors[i] = new Monitor(monitorData[i]);
// Start the fps and status updates. give a random delay so that we don't assault the server
var delay = Math.round( (Math.random()+0.5)*statusRefreshTimeout ); var delay = Math.round( (Math.random()+0.5)*statusRefreshTimeout );
monitors[i].start(delay);
var interval = monitors[i].refresh; var interval = monitors[i].refresh;
monitors[i].start( delay );
if ( monitors[i].type == 'WebSite' && interval > 0 ) { if ( monitors[i].type == 'WebSite' && interval > 0 ) {
setInterval(reloadWebSite, interval*1000, i); setInterval(reloadWebSite, interval*1000, i);
} }
} }
selectLayout('#zmMontageLayout'); selectLayout('#zmMontageLayout');
for ( var i = 0; i < monitorData.length; i++ ) {
if ( monitors[i].type == 'WebSite' )
continue;
var delay = Math.round( (Math.random()+0.75)*statusRefreshTimeout );
console.log("Delay for monitor " + monitorData[i].id + " is " + delay );
monitors[i].streamCmdQuery.delay( delay, monitors[i] );
//monitors[i].zm_startup(delay);
}
} }
// Kick everything off // Kick everything off
window.addEvent( 'domready', initPage ); window.addEvent('domready', initPage);