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

Fix eslint violations (#2416) 

* Add more JS libraries to eslintignore

* eslint . --fix

Automatic fixes only

* frame.js: eslint fixes

* events.js: manual eslint fixes

* skin.js: manual eslint fixes

* watch.js: manual eslint fixes

* Remove some tabs used for indentation in JS

* state.js: Fix new-cap eslint violation

* Disable guard-for-in eslint rule to get everything passing
This commit is contained in:
Matt N 2019-01-18 07:00:55 -08:00 committed by Isaac Connor
parent 6bb5aa1b87
commit deaf651aad
19 changed files with 197 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
.eslintignore
View File

@ -1,4 +1,15 @@
*.min.js
# libraries
web/api/lib web/api/lib
web/skins/classic/js/jquery-1.11.3.js web/includes/csrf/csrf-magic.js
web/js/videojs.zoomrotate.js
web/skins/classic/js/bootstrap.js
web/skins/classic/js/chosen
web/skins/classic/js/dateTimePicker
web/skins/classic/js/jquery-*.js
web/skins/classic/js/jquery-ui-*
web/skins/classic/js/jquery.js web/skins/classic/js/jquery.js
web/skins/classic/js/moment.js
web/skins/classic/js/video.js
web/tools/mootools web/tools/mootools

1
.eslintrc.js
View File

@ -9,6 +9,7 @@ module.exports = {
"brace-style": "off", "brace-style": "off",
"camelcase": "off", "camelcase": "off",
"comma-dangle": "off", "comma-dangle": "off",
"guard-for-in": "off",
"key-spacing": "off", "key-spacing": "off",
"max-len": "off", "max-len": "off",
"new-cap": ["error", { "new-cap": ["error", {

4
web/js/Server.js
View File

@ -1,10 +1,10 @@
'use strict'; 'use strict';
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); var _createClass = function() { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function(Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Server = function () { var Server = function() {
function Server(json) { function Server(json) {
_classCallCheck(this, Server); _classCallCheck(this, Server);

36
web/skins/classic/js/skin.js
View File

@ -220,16 +220,16 @@ function refreshWindow() {
function refreshParentWindow() { function refreshParentWindow() {
if ( refreshParent ) { if ( refreshParent ) {
if ( window.opener ) { if ( window.opener ) {
if ( refreshParent == true ) if ( refreshParent == true )
window.opener.location.reload( true ); window.opener.location.reload( true );
else else
window.opener.location.href = refreshParent; window.opener.location.href = refreshParent;
} }
} }
} }
if ( currentView != 'none' && currentView != 'login' ) { if ( currentView != 'none' && currentView != 'login' ) {
$j.ajaxSetup ({timeout: AJAX_TIMEOUT }); //sets timeout for all getJSON. $j.ajaxSetup({timeout: AJAX_TIMEOUT }); //sets timeout for all getJSON.
$j(document).ready(function() { $j(document).ready(function() {
if ($j('.navbar').length) { if ($j('.navbar').length) {
@ -355,19 +355,19 @@ if ( closePopup ) {
window.addEvent( 'domready', checkSize ); window.addEvent( 'domready', checkSize );
function convertLabelFormat(LabelFormat, monitorName){ function convertLabelFormat(LabelFormat, monitorName) {
//convert label format from strftime to moment's format (modified from //convert label format from strftime to moment's format (modified from
//https://raw.githubusercontent.com/benjaminoakes/moment-strftime/master/lib/moment-strftime.js //https://raw.githubusercontent.com/benjaminoakes/moment-strftime/master/lib/moment-strftime.js
//added %f and %N below (TODO: add %Q) //added %f and %N below (TODO: add %Q)
var replacements = { a: 'ddd', A: 'dddd', b: 'MMM', B: 'MMMM', d: 'DD', e: 'D', F: 'YYYY-MM-DD', H: 'HH', I: 'hh', j: 'DDDD', k: 'H', l: 'h', m: 'MM', M: 'mm', p: 'A', S: 'ss', u: 'E', w: 'd', W: 'WW', y: 'YY', Y: 'YYYY', z: 'ZZ', Z: 'z', 'f': 'SS', 'N': "["+monitorName+"]", '%': '%' }; var replacements = { "a": 'ddd', "A": 'dddd', "b": 'MMM', "B": 'MMMM', "d": 'DD', "e": 'D', "F": 'YYYY-MM-DD', "H": 'HH', "I": 'hh', "j": 'DDDD', "k": 'H', "l": 'h', "m": 'MM', "M": 'mm', "p": 'A', "S": 'ss', "u": 'E', "w": 'd', "W": 'WW', "y": 'YY', "Y": 'YYYY', "z": 'ZZ', "Z": 'z', 'f': 'SS', 'N': "["+monitorName+"]", '%': '%' };
var momentLabelFormat = Object.keys(replacements).reduce(function (momentFormat, key) { var momentLabelFormat = Object.keys(replacements).reduce(function(momentFormat, key) {
var value = replacements[key]; var value = replacements[key];
return momentFormat.replace("%" + key, value); return momentFormat.replace("%" + key, value);
}, LabelFormat); }, LabelFormat);
return momentLabelFormat; return momentLabelFormat;
} }
function addVideoTimingTrack(video, LabelFormat, monitorName, duration, startTime){ function addVideoTimingTrack(video, LabelFormat, monitorName, duration, startTime) {
//This is a hacky way to handle changing the texttrack. If we ever upgrade vjs in a revamp replace this. Old method preserved because it's the right way. //This is a hacky way to handle changing the texttrack. If we ever upgrade vjs in a revamp replace this. Old method preserved because it's the right way.
var cues = vid.textTracks()[0].cues(); var cues = vid.textTracks()[0].cues();
var labelFormat = convertLabelFormat(LabelFormat, monitorName); var labelFormat = convertLabelFormat(LabelFormat, monitorName);
@ -409,14 +409,14 @@ function endOfResize(e) {
resizeTimer = setTimeout(changeScale, 250); resizeTimer = setTimeout(changeScale, 250);
} }
function scaleToFit (baseWidth, baseHeight, scaleEl, bottomEl) { function scaleToFit(baseWidth, baseHeight, scaleEl, bottomEl) {
$j(window).on('resize', endOfResize) //set delayed scaling when Scale to Fit is selected $j(window).on('resize', endOfResize); //set delayed scaling when Scale to Fit is selected
var ratio = baseWidth / baseHeight; var ratio = baseWidth / baseHeight;
var container = $j('#content'); var container = $j('#content');
var viewPort = $j(window); var viewPort = $j(window);
// jquery does not provide a bottom offet, and offset dows not include margins. outerHeight true minus false gives total vertical margins. // jquery does not provide a bottom offet, and offset dows not include margins. outerHeight true minus false gives total vertical margins.
var bottomLoc = bottomEl.offset().top + (bottomEl.outerHeight(true) - bottomEl.outerHeight()) + bottomEl.outerHeight(true); var bottomLoc = bottomEl.offset().top + (bottomEl.outerHeight(true) - bottomEl.outerHeight()) + bottomEl.outerHeight(true);
var newHeight = viewPort.height() - (bottomLoc - scaleEl.outerHeight(true)) var newHeight = viewPort.height() - (bottomLoc - scaleEl.outerHeight(true));
var newWidth = ratio * newHeight; var newWidth = ratio * newHeight;
if (newWidth > container.innerWidth()) { if (newWidth > container.innerWidth()) {
newWidth = container.innerWidth(); newWidth = container.innerWidth();
@ -426,7 +426,7 @@ function scaleToFit (baseWidth, baseHeight, scaleEl, bottomEl) {
var scales = $j('#scale option').map(function() {return parseInt($j(this).val());}).get(); var scales = $j('#scale option').map(function() {return parseInt($j(this).val());}).get();
scales.shift(); scales.shift();
var closest; var closest;
$j(scales).each(function () { //Set zms scale to nearest regular scale. Zoom does not like arbitrary scale values. $j(scales).each(function() { //Set zms scale to nearest regular scale. Zoom does not like arbitrary scale values.
if (closest == null || Math.abs(this - autoScale) < Math.abs(closest - autoScale)) { if (closest == null || Math.abs(this - autoScale) < Math.abs(closest - autoScale)) {
closest = this.valueOf(); closest = this.valueOf();
} }

6
web/skins/classic/views/js/add_monitors.js
View File

@ -36,7 +36,7 @@ function parseStreams( Streams ) {
} }
results_div.innerHTML = ''; results_div.innerHTML = '';
var html = ''; var html = '';
for( i in Streams ) { for( i in Streams ) {
var stream = Streams[i]; var stream = Streams[i];
if ( stream.url ) { if ( stream.url ) {
@ -53,7 +53,7 @@ function parseStreams( Streams ) {
//console.log(stream); //console.log(stream);
} }
} // end for eah Stream } // end for eah Stream
results_div.innerHTML = html; results_div.innerHTML = html;
} }
@ -77,7 +77,7 @@ function addMonitor(url) {
} }
createPopup( popup_url, 'zmMonitor'+mid, 'monitor' ); createPopup( popup_url, 'zmMonitor'+mid, 'monitor' );
} }
function import_csv( form ) { function import_csv( form ) {
var formData = new FormData( form ); var formData = new FormData( form );
console.log(formData); console.log(formData);

9
web/skins/classic/views/js/console.js
View File

@ -22,7 +22,7 @@ function setButtonStates( element ) {
form.deleteBtn.disabled = false; form.deleteBtn.disabled = false;
form.selectBtn.disabled = false; form.selectBtn.disabled = false;
if ( checked == 1 ) { if ( checked == 1 ) {
$j(form.cloneBtn).css('display','inline'); $j(form.cloneBtn).css('display', 'inline');
} else { } else {
form.cloneBtn.hide(); form.cloneBtn.hide();
} }
@ -39,7 +39,6 @@ function addMonitor(element) {
} }
function cloneMonitor(element) { function cloneMonitor(element) {
var form = element.form; var form = element.form;
var dupParam; var dupParam;
var monitorId=-1; var monitorId=-1;
@ -66,7 +65,7 @@ function editMonitor( element ) {
var monitorIds = Array(); var monitorIds = Array();
for ( var i = 0; i < form.elements.length; i++ ) { for ( var i = 0; i < form.elements.length; i++ ) {
if ( if (
form.elements[i].type == "checkbox" form.elements[i].type == "checkbox"
&& &&
form.elements[i].name == "markMids[]" form.elements[i].name == "markMids[]"
@ -82,8 +81,8 @@ function editMonitor( element ) {
} // end foreach checkboxes } // end foreach checkboxes
if ( monitorIds.length == 1 ) if ( monitorIds.length == 1 )
createPopup( '?view=monitor&mid='+monitorIds[0], 'zmMonitor'+monitorIds[0], 'monitor' ); createPopup( '?view=monitor&mid='+monitorIds[0], 'zmMonitor'+monitorIds[0], 'monitor' );
else if ( monitorIds.length > 1 ) else if ( monitorIds.length > 1 )
createPopup( '?view=monitors&'+(monitorIds.map(function(mid){return 'mids[]='+mid;}).join('&')), 'zmMonitors', 'monitors' ); createPopup( '?view=monitors&'+(monitorIds.map(function(mid) {return 'mids[]='+mid;}).join('&')), 'zmMonitors', 'monitors' );
} }
function deleteMonitor( element ) { function deleteMonitor( element ) {

34
web/skins/classic/views/js/event.js
View File

@ -25,7 +25,7 @@ function vjsReplay() {
var messageP = $j(".vjsMessage"); var messageP = $j(".vjsMessage");
var x = setInterval(function() { var x = setInterval(function() {
var now = new Date().getTime(); var now = new Date().getTime();
var remainder = new Date(Math.round(gapDuration - now)).toISOString().substr(11,8); var remainder = new Date(Math.round(gapDuration - now)).toISOString().substr(11, 8);
messageP.html(remainder + ' to next event.'); messageP.html(remainder + ' to next event.');
if (remainder < 0) { if (remainder < 0) {
clearInterval(x); clearInterval(x);
@ -40,21 +40,21 @@ function vjsReplay() {
} }
} }
$j.ajaxSetup ({timeout: AJAX_TIMEOUT }); //sets timeout for all getJSON. $j.ajaxSetup({timeout: AJAX_TIMEOUT }); //sets timeout for all getJSON.
var cueFrames = null; //make cueFrames available even if we don't send another ajax query var cueFrames = null; //make cueFrames available even if we don't send another ajax query
function initialAlarmCues (eventId) { function initialAlarmCues(eventId) {
$j.getJSON(thisUrl + '?view=request&request=status&entity=frames&id=' + eventId, setAlarmCues); //get frames data for alarmCues and inserts into html $j.getJSON(thisUrl + '?view=request&request=status&entity=frames&id=' + eventId, setAlarmCues); //get frames data for alarmCues and inserts into html
} }
function setAlarmCues (data) { function setAlarmCues(data) {
cueFrames = data.frames; cueFrames = data.frames;
alarmSpans = renderAlarmCues(vid ? $j("#videoobj") : $j("#evtStream"));//use videojs width or zms width alarmSpans = renderAlarmCues(vid ? $j("#videoobj") : $j("#evtStream"));//use videojs width or zms width
$j(".alarmCue").html(alarmSpans); $j(".alarmCue").html(alarmSpans);
} }
function renderAlarmCues (containerEl) { function renderAlarmCues(containerEl) {
if ( !( cueFrames && cueFrames.length ) ) { if ( !( cueFrames && cueFrames.length ) ) {
console.log("No cue frames for event"); console.log("No cue frames for event");
return; return;
@ -81,7 +81,7 @@ var num_cueFrames = cueFrames.length;
var pix = cueRatio * spanTime; var pix = cueRatio * spanTime;
pixSkew += pix - Math.round(pix);//average out the rounding errors. pixSkew += pix - Math.round(pix);//average out the rounding errors.
pix = Math.round(pix); pix = Math.round(pix);
if ((pixSkew > 1 || pixSkew < -1) && pix + Math.round(pixSkew) > 0) { //add skew if it's a pixel and won't zero out span. if ((pixSkew > 1 || pixSkew < -1) && pix + Math.round(pixSkew) > 0) { //add skew if it's a pixel and won't zero out span.
pix += Math.round(pixSkew); pix += Math.round(pixSkew);
pixSkew = pixSkew - Math.round(pixSkew); pixSkew = pixSkew - Math.round(pixSkew);
} }
@ -443,16 +443,16 @@ function streamNext(action) {
} }
} }
function vjsPanZoom (action, x, y) { //Pan and zoom with centering where the click occurs function vjsPanZoom(action, x, y) { //Pan and zoom with centering where the click occurs
var outer = $j('#videoobj'); var outer = $j('#videoobj');
var video = outer.children().first(); var video = outer.children().first();
var zoom = parseFloat($j('#zoomValue').html()); var zoom = parseFloat($j('#zoomValue').html());
var zoomRate = .5; var zoomRate = .5;
var matrix = video.css('transform').split(','); var matrix = video.css('transform').split(',');
var currentPanX = parseFloat(matrix[4]); var currentPanX = parseFloat(matrix[4]);
var currentPanY = parseFloat(matrix[5]); var currentPanY = parseFloat(matrix[5]);
var xDist = outer.width()/2 - x //Click distance from center of view var xDist = outer.width()/2 - x; //Click distance from center of view
var yDist = outer.height()/2 - y var yDist = outer.height()/2 - y;
if (action == 'zoomOut') { if (action == 'zoomOut') {
zoom -= zoomRate; zoom -= zoomRate;
if (x && y) { if (x && y) {
@ -479,8 +479,8 @@ function vjsPanZoom (action, x, y) { //Pan and zoom with centering where the cli
} }
var limitX = ((zoom*outer.width()) - outer.width())/2; //Calculate outer bounds of video var limitX = ((zoom*outer.width()) - outer.width())/2; //Calculate outer bounds of video
var limitY = ((zoom*outer.height()) - outer.height())/2; var limitY = ((zoom*outer.height()) - outer.height())/2;
x = Math.min(Math.max((x),-limitX),limitX); //Limit pan to outer bounds of video x = Math.min(Math.max((x), -limitX), limitX); //Limit pan to outer bounds of video
y = Math.min(Math.max((y),-limitY),limitY); y = Math.min(Math.max((y), -limitY), limitY);
video.css('transform', 'matrix('+zoom+', 0, 0, '+zoom+', '+x+', '+y+')'); video.css('transform', 'matrix('+zoom+', 0, 0, '+zoom+', '+x+', '+y+')');
} }
@ -965,11 +965,11 @@ function updateProgressBar() {
} // end function updateProgressBar() } // end function updateProgressBar()
// Handles seeking when clicking on the progress bar. // Handles seeking when clicking on the progress bar.
function progressBarNav (){ function progressBarNav() {
$j('#progressBar').click(function(e){ $j('#progressBar').click(function(e) {
var x = e.pageX - $j(this).offset().left; var x = e.pageX - $j(this).offset().left;
var seekTime = (x / $j('#progressBar').width()) * parseFloat(eventData.Length); var seekTime = (x / $j('#progressBar').width()) * parseFloat(eventData.Length);
streamSeek (seekTime); streamSeek(seekTime);
}); });
} }
@ -1002,8 +1002,8 @@ function initPage() {
vid.on('ended', vjsReplay); vid.on('ended', vjsReplay);
vid.on('play', vjsPlay); vid.on('play', vjsPlay);
vid.on('pause', vjsPause); vid.on('pause', vjsPause);
vid.on('click', function(event){handleClick(event);}); vid.on('click', function(event) {handleClick(event);});
vid.on('timeupdate', function (){$j('#progressValue').html(secsToTime(Math.floor(vid.currentTime())))}); vid.on('timeupdate', function() {$j('#progressValue').html(secsToTime(Math.floor(vid.currentTime())));});
if ( rate > 1 ) { if ( rate > 1 ) {
// rate should be 100 = 1x, etc. // rate should be 100 = 1x, etc.

4
web/skins/classic/views/js/events.js
View File

@ -121,7 +121,7 @@ function viewEvents( element, name ) {
} }
} }
if ( events.length > 0 ) { if ( events.length > 0 ) {
let filter = '&filter[Query][terms][0][attr]=Id&filter[Query][terms][0][op]=%3D%5B%5D&filter[Query][terms][0][val]='+events.join('%2C'); var filter = '&filter[Query][terms][0][attr]=Id&filter[Query][terms][0][op]=%3D%5B%5D&filter[Query][terms][0][val]='+events.join('%2C');
window.location.href = thisUrl+'?view=event&eid='+events[0]+filter+sortQuery+'&page=1&play=1'; window.location.href = thisUrl+'?view=event&eid='+events[0]+filter+sortQuery+'&page=1&play=1';
} }
} }
@ -148,7 +148,7 @@ if ( openFilterWindow ) {
location.replace( '?view='+currentView+'&page='+thisPage+filterQuery ); location.replace( '?view='+currentView+'&page='+thisPage+filterQuery );
} }
function initPage () { function initPage() {
if (window.history.length == 1) { if (window.history.length == 1) {
$j('#controls').children().eq(0).html(''); $j('#controls').children().eq(0).html('');
} }

19
web/skins/classic/views/js/filter.js
View File

@ -1,4 +1,4 @@
function validateForm ( form ) { function validateForm( form ) {
var rows = $j(form).find('tbody').eq(0).find('tr'); var rows = $j(form).find('tbody').eq(0).find('tr');
var obrCount = 0; var obrCount = 0;
var cbrCount = 0; var cbrCount = 0;
@ -58,7 +58,7 @@ function updateButtons(element) {
} }
} }
function checkValue ( element ) { function checkValue( element ) {
var rows = $j(element).closest('tbody').children(); var rows = $j(element).closest('tbody').children();
parseRows(rows); parseRows(rows);
//clearValue(element); //clearValue(element);
@ -102,7 +102,7 @@ function deleteFilter( element, name ) {
} }
} }
function parseRows (rows) { function parseRows(rows) {
for (var rowNum = 0; rowNum < rows.length; rowNum++) { //Each row is a term for (var rowNum = 0; rowNum < rows.length; rowNum++) { //Each row is a term
var queryPrefix = 'filter[Query][terms]['; var queryPrefix = 'filter[Query][terms][';
var inputTds = rows.eq(rowNum).children(); var inputTds = rows.eq(rowNum).children();
@ -111,7 +111,7 @@ function parseRows (rows) {
if (rowNum > 0) { //add and/or to 1+ if (rowNum > 0) { //add and/or to 1+
var cnjVal = inputTds.eq(0).children().val(); var cnjVal = inputTds.eq(0).children().val();
var conjSelect = $j('<select></select>').attr('name', queryPrefix + rowNum + '][cnj]').attr('id', queryPrefix + rowNum + '][cnj]'); var conjSelect = $j('<select></select>').attr('name', queryPrefix + rowNum + '][cnj]').attr('id', queryPrefix + rowNum + '][cnj]');
$j.each(conjTypes, function (i) { $j.each(conjTypes, function(i) {
conjSelect.append('<option value="' + i + '" >' + i + '</option>'); conjSelect.append('<option value="' + i + '" >' + i + '</option>');
}); });
inputTds.eq(0).html(conjSelect).children().val(cnjVal === undefined ? 'and' : cnjVal); inputTds.eq(0).html(conjSelect).children().val(cnjVal === undefined ? 'and' : cnjVal);
@ -152,7 +152,6 @@ function parseRows (rows) {
} }
var archiveVal = inputTds.eq(4).children().val(); var archiveVal = inputTds.eq(4).children().val();
inputTds.eq(4).html(archiveSelect).children().val(archiveVal).chosen({width: "101%"}); inputTds.eq(4).html(archiveSelect).children().val(archiveVal).chosen({width: "101%"});
} else if ( attr.indexOf('Weekday') >= 0 ) { //Weekday selection } else if ( attr.indexOf('Weekday') >= 0 ) { //Weekday selection
var weekdaySelect = $j('<select></select>').attr('name', queryPrefix + rowNum + '][val]').attr('id', queryPrefix + rowNum + '][val]'); var weekdaySelect = $j('<select></select>').attr('name', queryPrefix + rowNum + '][val]').attr('id', queryPrefix + rowNum + '][val]');
for (var i = 0; i < weekdays.length; i++) { for (var i = 0; i < weekdays.length; i++) {
@ -160,7 +159,6 @@ function parseRows (rows) {
} }
var weekdayVal = inputTds.eq(4).children().val(); var weekdayVal = inputTds.eq(4).children().val();
inputTds.eq(4).html(weekdaySelect).children().val(weekdayVal).chosen({width: "101%"}); inputTds.eq(4).html(weekdaySelect).children().val(weekdayVal).chosen({width: "101%"});
} else if ( attr == 'StateId' ) { //Run state } else if ( attr == 'StateId' ) { //Run state
var stateSelect = $j('<select></select>').attr('name', queryPrefix + rowNum + '][val]').attr('id', queryPrefix + rowNum + '][val]'); var stateSelect = $j('<select></select>').attr('name', queryPrefix + rowNum + '][val]').attr('id', queryPrefix + rowNum + '][val]');
for (var key in states) { for (var key in states) {
@ -168,7 +166,6 @@ function parseRows (rows) {
} }
var stateVal = inputTds.eq(4).children().val(); var stateVal = inputTds.eq(4).children().val();
inputTds.eq(4).html(stateSelect).children().val(stateVal).chosen({width: "101%"}); inputTds.eq(4).html(stateSelect).children().val(stateVal).chosen({width: "101%"});
} else if ( attr == 'ServerId' || attr == 'MonitorServerId' || attr == 'StorageServerId' || attr == 'FilterServerId' ) { //Select Server } else if ( attr == 'ServerId' || attr == 'MonitorServerId' || attr == 'StorageServerId' || attr == 'FilterServerId' ) { //Select Server
var serverSelect = $j('<select></select>').attr('name', queryPrefix + rowNum + '][val]').attr('id', queryPrefix + rowNum + '][val]'); var serverSelect = $j('<select></select>').attr('name', queryPrefix + rowNum + '][val]').attr('id', queryPrefix + rowNum + '][val]');
for (var key in servers) { for (var key in servers) {
@ -176,7 +173,6 @@ function parseRows (rows) {
} }
var serverVal = inputTds.eq(4).children().val(); var serverVal = inputTds.eq(4).children().val();
inputTds.eq(4).html(serverSelect).children().val(serverVal).chosen({width: "101%"}); inputTds.eq(4).html(serverSelect).children().val(serverVal).chosen({width: "101%"});
} else if ( attr == 'StorageId' ) { //Choose by storagearea } else if ( attr == 'StorageId' ) { //Choose by storagearea
var storageSelect = $j('<select></select>').attr('name', queryPrefix + rowNum + '][val]').attr('id', queryPrefix + rowNum + '][val]'); var storageSelect = $j('<select></select>').attr('name', queryPrefix + rowNum + '][val]').attr('id', queryPrefix + rowNum + '][val]');
for ( key in storageareas ) { for ( key in storageareas ) {
@ -184,7 +180,6 @@ function parseRows (rows) {
} }
var storageVal = inputTds.eq(4).children().val(); var storageVal = inputTds.eq(4).children().val();
inputTds.eq(4).html(storageSelect).children().val(storageVal).chosen({width: "101%"}); inputTds.eq(4).html(storageSelect).children().val(storageVal).chosen({width: "101%"});
} else if ( attr == 'MonitorName' ) { //Monitor names } else if ( attr == 'MonitorName' ) { //Monitor names
var monitorSelect = $j('<select></select>').attr('name', queryPrefix + rowNum + '][val]').attr('id', queryPrefix + rowNum + '][val]'); var monitorSelect = $j('<select></select>').attr('name', queryPrefix + rowNum + '][val]').attr('id', queryPrefix + rowNum + '][val]');
for (var key in monitors) { for (var key in monitors) {
@ -211,7 +206,7 @@ function parseRows (rows) {
inputTds.eq(4).children().timepicker({timeFormat: "HH:mm:ss", constrainInput: false}); inputTds.eq(4).children().timepicker({timeFormat: "HH:mm:ss", constrainInput: false});
} }
attr = inputTds.find("[name$='attr\\]']") // Set attr list id and name attr = inputTds.find("[name$='attr\\]']"); // Set attr list id and name
var term = attr.attr('name').split(/[[\]]{1,2}/); var term = attr.attr('name').split(/[[\]]{1,2}/);
term.length--; term.length--;
term.shift(); term.shift();
@ -222,7 +217,7 @@ function parseRows (rows) {
history.replaceState(null, null, '?view=filter&' + $j('#contentForm').serialize()); history.replaceState(null, null, '?view=filter&' + $j('#contentForm').serialize());
} }
function stringFilter (term) { function stringFilter(term) {
var termString = ''; var termString = '';
term.forEach(function(item) { term.forEach(function(item) {
termString += '[' + item + ']'; termString += '[' + item + ']';
@ -235,7 +230,7 @@ function addTerm( element ) {
row.find('select').chosen("destroy"); row.find('select').chosen("destroy");
var newRow = row.clone().insertAfter(row); var newRow = row.clone().insertAfter(row);
row.find('select').chosen({width: "101%"}); row.find('select').chosen({width: "101%"});
newRow.find('select').each( function () { //reset new row to default newRow.find('select').each( function() { //reset new row to default
this[0].selected = 'selected'; this[0].selected = 'selected';
}).chosen({width: "101%"}); }).chosen({width: "101%"});
newRow.find('input[type="text"]').val(''); newRow.find('input[type="text"]').val('');

23
web/skins/classic/views/js/frame.js
View File

@ -1,18 +1,18 @@
function changeScale() { function changeScale() {
let scale = $j('#scale').val(); var scale = $j('#scale').val();
let img = $j('#frameImg'); var img = $j('#frameImg');
let controlsLinks = { var controlsLinks = {
next: $j('#nextLink'), next: $j('#nextLink'),
prev: $j('#prevLink'), prev: $j('#prevLink'),
first: $j('#firstLink'), first: $j('#firstLink'),
last: $j('#lastLink') last: $j('#lastLink')
} };
if ( img ) { if ( img ) {
let baseWidth = $j('#base_width').val(); var baseWidth = $j('#base_width').val();
let baseHeight = $j('#base_height').val(); var baseHeight = $j('#base_height').val();
if ( scale == 'auto' ) { if ( scale == 'auto' ) {
let newSize = scaleToFit(baseWidth, baseHeight, img, $j('#controls')); var newSize = scaleToFit(baseWidth, baseHeight, img, $j('#controls'));
newWidth = newSize.width; newWidth = newSize.width;
newHeight = newSize.height; newHeight = newSize.height;
autoScale = newSize.autoScale; autoScale = newSize.autoScale;
@ -27,7 +27,6 @@ function changeScale() {
Cookie.write( 'zmWatchScale', scale, { duration: 10*365 } ); Cookie.write( 'zmWatchScale', scale, { duration: 10*365 } );
$j.each(controlsLinks, function(k, anchor) { //Make frames respect scale choices $j.each(controlsLinks, function(k, anchor) { //Make frames respect scale choices
anchor.prop('href', anchor.prop('href').replace(/scale=.*&/, 'scale=' + scale + '&')); anchor.prop('href', anchor.prop('href').replace(/scale=.*&/, 'scale=' + scale + '&'));
}); });
} }

2
web/skins/classic/views/js/group.js
View File

@ -13,7 +13,7 @@ function configureButtons( element ) {
if ( form.elements['newGroup[Name]'].value == '' ) { if ( form.elements['newGroup[Name]'].value == '' ) {
disabled = true; disabled = true;
} }
form.saveBtn.disabled = disabled; form.saveBtn.disabled = disabled;
} }
} }

3
web/skins/classic/views/js/log.js
View File

@ -61,7 +61,7 @@ function logResponse( respObj ) {
if ( ( !minLogTime ) || ( log.TimeKey < minLogTime ) ) if ( ( !minLogTime ) || ( log.TimeKey < minLogTime ) )
minLogTime = log.TimeKey; minLogTime = log.TimeKey;
var row = logTable.push( [{ content: log.DateTime, properties: { style: 'white-space: nowrap' }}, log.Component, log.Server, log.Pid, log.Code, log.Message, log.File, log.Line] ); var row = logTable.push( [{ content: log.DateTime, properties: { style: 'white-space: nowrap' }}, log.Component, log.Server, log.Pid, log.Code, log.Message, log.File, log.Line] );
delete log.Message; delete log.Message;
row.tr.store( 'log', log ); row.tr.store( 'log', log );
if ( log.Level <= -3 ) if ( log.Level <= -3 )
@ -256,7 +256,6 @@ function updateFilterSelectors() {
} }
if ( filter[key] ) if ( filter[key] )
selector.set('value', filter[key]); selector.set('value', filter[key]);
} }
); );
} }

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

@ -43,7 +43,7 @@ function Monitor( monitorData ) {
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);
} }
@ -132,7 +132,7 @@ function Monitor( monitorData ) {
} }
} // 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;
//} //}
@ -165,7 +165,6 @@ function Monitor( monitorData ) {
console.log("queueing for " + this.id + " " + this.connKey ); console.log("queueing for " + this.id + " " + this.connKey );
requestQueue.addRequest( "cmdReq"+this.id, this.streamCmdReq ); requestQueue.addRequest( "cmdReq"+this.id, this.streamCmdReq );
} }
} }
function selectLayout( element ) { function selectLayout( element ) {
@ -187,18 +186,18 @@ function selectLayout( element ) {
// 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 {
@ -221,7 +220,7 @@ if ( 1 ) {
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;
@ -246,7 +245,7 @@ function changeSize() {
for ( var x = 0; x < monitors.length; x++ ) { for ( var x = 0; x < monitors.length; x++ ) {
var monitor = monitors[x]; var monitor = monitors[x];
// Scale the frame // Scale the frame
monitor_frame = $j('#monitorFrame'+monitor.id); monitor_frame = $j('#monitorFrame'+monitor.id);
if ( ! monitor_frame ) { if ( ! monitor_frame ) {
@ -254,18 +253,18 @@ function changeSize() {
continue; continue;
} }
if ( width ) if ( width )
monitor_frame.css('width',width+'px'); monitor_frame.css('width', width+'px');
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 = $( '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;
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;
@ -308,9 +307,9 @@ function changeScale() {
continue; continue;
} }
if ( width ) if ( width )
monitor_frame.css('width',width+'px'); monitor_frame.css('width', width+'px');
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 ) {
@ -319,9 +318,9 @@ function changeScale() {
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,9 +340,8 @@ function toGrid(value) {
// Makes monitorFrames draggable. // Makes monitorFrames draggable.
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; i < monitors.length; i++ ) {
var monitor = monitors[i]; var monitor = monitors[i];
monitor_feed = $j('#imageFeed'+monitor.id)[0]; monitor_feed = $j('#imageFeed'+monitor.id)[0];
@ -366,7 +364,7 @@ function save_layout(button) {
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'),
@ -397,9 +395,8 @@ function reloadWebSite(ndx) {
var monitors = new Array(); var monitors = new Array();
function initPage() { function initPage() {
jQuery(document).ready(function() {
jQuery(document).ready(function(){ jQuery("#hdrbutton").click(function() {
jQuery("#hdrbutton").click(function(){
jQuery("#flipMontageHeader").slideToggle("slow"); jQuery("#flipMontageHeader").slideToggle("slow");
jQuery("#hdrbutton").toggleClass('glyphicon-menu-down').toggleClass('glyphicon-menu-up'); jQuery("#hdrbutton").toggleClass('glyphicon-menu-down').toggleClass('glyphicon-menu-up');
Cookie.write( 'zmMontageHeaderFlip', jQuery('#hdrbutton').hasClass('glyphicon-menu-up') ? 'up' : 'down', { duration: 10*365 } ); Cookie.write( 'zmMontageHeaderFlip', jQuery('#hdrbutton').hasClass('glyphicon-menu-up') ? 'up' : 'down', { duration: 10*365 } );
@ -418,7 +415,7 @@ function initPage() {
monitors[i].start( delay ); 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');

143
web/skins/classic/views/js/montagereview.js
View File

@ -8,7 +8,7 @@ function evaluateLoadTimes() {
if ( monitorName[i] > "" ) { if ( monitorName[i] > "" ) {
if ( monitorLoadEndTimems[i] == 0 ) return; // if we have a monitor with no time yet just wait if ( monitorLoadEndTimems[i] == 0 ) return; // if we have a monitor with no time yet just wait
if ( start == 0 || start > monitorLoadStartTimems[i] ) start = monitorLoadStartTimems[i]; if ( start == 0 || start > monitorLoadStartTimems[i] ) start = monitorLoadStartTimems[i];
if ( end == 0 || end < monitorLoadEndTimems[i] ) end = monitorLoadEndTimems[i]; if ( end == 0 || end < monitorLoadEndTimems[i] ) end = monitorLoadEndTimems[i];
} }
} }
if ( start == 0 || end == 0 ) return; // we really should not get here if ( start == 0 || end == 0 ) return; // we really should not get here
@ -25,18 +25,18 @@ function evaluateLoadTimes() {
avgFrac += freeTimeLastIntervals[i]; avgFrac += freeTimeLastIntervals[i];
avgFrac = avgFrac / imageLoadTimesEvaluated; avgFrac = avgFrac / imageLoadTimesEvaluated;
// The larger this is(positive) the faster we can go // The larger this is(positive) the faster we can go
if (avgFrac >= 0.9) currentDisplayInterval = (currentDisplayInterval * 0.50).toFixed(1); // we can go much faster if (avgFrac >= 0.9) currentDisplayInterval = (currentDisplayInterval * 0.50).toFixed(1); // we can go much faster
else if (avgFrac >= 0.8) currentDisplayInterval = (currentDisplayInterval * 0.55).toFixed(1); else if (avgFrac >= 0.8) currentDisplayInterval = (currentDisplayInterval * 0.55).toFixed(1);
else if (avgFrac >= 0.7) currentDisplayInterval = (currentDisplayInterval * 0.60).toFixed(1); else if (avgFrac >= 0.7) currentDisplayInterval = (currentDisplayInterval * 0.60).toFixed(1);
else if (avgFrac >= 0.6) currentDisplayInterval = (currentDisplayInterval * 0.65).toFixed(1); else if (avgFrac >= 0.6) currentDisplayInterval = (currentDisplayInterval * 0.65).toFixed(1);
else if (avgFrac >= 0.5) currentDisplayInterval = (currentDisplayInterval * 0.70).toFixed(1); else if (avgFrac >= 0.5) currentDisplayInterval = (currentDisplayInterval * 0.70).toFixed(1);
else if (avgFrac >= 0.4) currentDisplayInterval = (currentDisplayInterval * 0.80).toFixed(1); else if (avgFrac >= 0.4) currentDisplayInterval = (currentDisplayInterval * 0.80).toFixed(1);
else if (avgFrac >= 0.35) currentDisplayInterval = (currentDisplayInterval * 0.90).toFixed(1); else if (avgFrac >= 0.35) currentDisplayInterval = (currentDisplayInterval * 0.90).toFixed(1);
else if (avgFrac >= 0.3) currentDisplayInterval = (currentDisplayInterval * 1.00).toFixed(1); else if (avgFrac >= 0.3) currentDisplayInterval = (currentDisplayInterval * 1.00).toFixed(1);
else if (avgFrac >= 0.25) currentDisplayInterval = (currentDisplayInterval * 1.20).toFixed(1); else if (avgFrac >= 0.25) currentDisplayInterval = (currentDisplayInterval * 1.20).toFixed(1);
else if (avgFrac >= 0.2) currentDisplayInterval = (currentDisplayInterval * 1.50).toFixed(1); else if (avgFrac >= 0.2) currentDisplayInterval = (currentDisplayInterval * 1.50).toFixed(1);
else if (avgFrac >= 0.1) currentDisplayInterval = (currentDisplayInterval * 2.00).toFixed(1); else if (avgFrac >= 0.1) currentDisplayInterval = (currentDisplayInterval * 2.00).toFixed(1);
else currentDisplayInterval = (currentDisplayInterval * 2.50).toFixed(1); else currentDisplayInterval = (currentDisplayInterval * 2.50).toFixed(1);
// limit this from about 40fps to .1 fps // limit this from about 40fps to .1 fps
currentDisplayInterval = Math.min(Math.max(currentDisplayInterval, 40), 10000); currentDisplayInterval = Math.min(Math.max(currentDisplayInterval, 40), 10000);
imageLoadTimesEvaluated=0; imageLoadTimesEvaluated=0;
@ -51,7 +51,7 @@ function getFrame( monId, time ) {
Event = events[event_id]; Event = events[event_id];
if ( Event.MonitorId != monId || Event.StartTimeSecs > time || Event.EndTimeSecs < time ) if ( Event.MonitorId != monId || Event.StartTimeSecs > time || Event.EndTimeSecs < time )
continue; continue;
var duration = Event.EndTimeSecs - Event.StartTimeSecs; var duration = Event.EndTimeSecs - Event.StartTimeSecs;
if ( ! Event.FramesById ) { if ( ! Event.FramesById ) {
console.log("No FramesById for event " + event_id); console.log("No FramesById for event " + event_id);
@ -67,15 +67,15 @@ console.log("Found frame for time " + time );
console.log(Frame); console.log(Frame);
Frame = Event.FramesById[frame_id]; Frame = Event.FramesById[frame_id];
break; break;
} }
frame --; frame --;
continue; continue;
} }
if ( if (
Event.FramesById[frame_id].TimeStampSecs == time Event.FramesById[frame_id].TimeStampSecs == time
|| ( || (
Event.FramesById[frame_id].TimeStampSecs < time Event.FramesById[frame_id].TimeStampSecs < time
&& ( && (
(!Event.FramesById[frame_id].NextTimeStampSecs) (!Event.FramesById[frame_id].NextTimeStampSecs)
|| ||
(Event.FramesById[frame_id].NextTimeStampSecs > time) (Event.FramesById[frame_id].NextTimeStampSecs > time)
@ -110,7 +110,7 @@ function getImageSource( monId, time ) {
var Frame = getFrame(monId, time); var Frame = getFrame(monId, time);
if ( Frame ) { if ( Frame ) {
// Adjust for bulk frames // Adjust for bulk frames
var frame_id; var frame_id;
if ( Frame.NextFrameId ) { if ( Frame.NextFrameId ) {
var duration = Frame.NextTimeStampSecs - Frame.TimeStampSecs; var duration = Frame.NextTimeStampSecs - Frame.TimeStampSecs;
frame_id = Frame.FrameId + parseInt( (Frame.NextFrameId-Frame.FrameId) * ( time-Frame.TimeStampSecs )/duration ); frame_id = Frame.FrameId + parseInt( (Frame.NextFrameId-Frame.FrameId) * ( time-Frame.TimeStampSecs )/duration );
@ -124,9 +124,9 @@ function getImageSource( monId, time ) {
// monitorServerId may be 0, which gives us the default Server entry // monitorServerId may be 0, which gives us the default Server entry
var server = storage.ServerId ? Servers[storage.ServerId] : Servers[monitorServerId[monId]]; var server = storage.ServerId ? Servers[storage.ServerId] : Servers[monitorServerId[monId]];
return server.PathToIndex + return server.PathToIndex +
'?view=image&eid=' + Frame.EventId + '&fid='+Frame.FrameId + '?view=image&eid=' + Frame.EventId + '&fid='+Frame.FrameId +
"&width=" + monitorCanvasObj[monId].width + "&width=" + monitorCanvasObj[monId].width +
"&height=" + monitorCanvasObj[monId].height; "&height=" + monitorCanvasObj[monId].height;
} // end found Frame } // end found Frame
return ''; return '';
//return "no data"; //return "no data";
@ -182,7 +182,7 @@ function loadNoData( monId ) {
canvasCtx.font = "600 " + textSize.toString() + "px Arial"; canvasCtx.font = "600 " + textSize.toString() + "px Arial";
canvasCtx.fillStyle="black"; canvasCtx.fillStyle="black";
var textWidth = canvasCtx.measureText(text).width; var textWidth = canvasCtx.measureText(text).width;
canvasCtx.fillText(text,canvasObj.width/2 - textWidth/2,canvasObj.height/2); canvasCtx.fillText(text, canvasObj.width/2 - textWidth/2, canvasObj.height/2);
} else { } else {
console.log("No monId in loadNoData"); console.log("No monId in loadNoData");
} }
@ -197,13 +197,13 @@ function writeText( monId, text ) {
canvasCtx.font = "600 " + textSize.toString() + "px Arial"; canvasCtx.font = "600 " + textSize.toString() + "px Arial";
canvasCtx.fillStyle="white"; canvasCtx.fillStyle="white";
var textWidth = canvasCtx.measureText(text).width; var textWidth = canvasCtx.measureText(text).width;
canvasCtx.fillText(text,canvasObj.width/2 - textWidth/2,canvasObj.height/2); canvasCtx.fillText(text, canvasObj.width/2 - textWidth/2, canvasObj.height/2);
} else { } else {
console.log("No monId in loadNoData"); console.log("No monId in loadNoData");
} }
} }
// Either draws the // Either draws the
function loadImage2Monitor( monId, url ) { function loadImage2Monitor( monId, url ) {
if ( monitorLoading[monId] && monitorImageObject[monId].src != url ) { if ( monitorLoading[monId] && monitorImageObject[monId].src != url ) {
// never queue the same image twice (if it's loading it has to be defined, right? // never queue the same image twice (if it's loading it has to be defined, right?
@ -260,7 +260,7 @@ function drawSliderOnGraph(val) {
var labfont = labelpx + "px"; // set this like below row labels var labfont = labelpx + "px"; // set this like below row labels
if ( numMonitors > 0 ) { if ( numMonitors > 0 ) {
// if we have no data to display don't do the slider itself // if we have no data to display don't do the slider itself
var sliderX = parseInt( (val - minTimeSecs) / rangeTimeSecs * cWidth - sliderWidth/2); // position left side of slider var sliderX = parseInt( (val - minTimeSecs) / rangeTimeSecs * cWidth - sliderWidth/2); // position left side of slider
if ( sliderX < 0 ) sliderX = 0; if ( sliderX < 0 ) sliderX = 0;
if ( sliderX+sliderWidth > cWidth ) if ( sliderX+sliderWidth > cWidth )
@ -269,7 +269,7 @@ function drawSliderOnGraph(val) {
// If we have data already saved first restore it from LAST time // If we have data already saved first restore it from LAST time
if ( typeof underSlider !== 'undefined' ) { if ( typeof underSlider !== 'undefined' ) {
ctx.putImageData(underSlider,underSliderX, 0, 0, 0, sliderWidth, sliderHeight); ctx.putImageData(underSlider, underSliderX, 0, 0, 0, sliderWidth, sliderHeight);
underSlider = undefined; underSlider = undefined;
} }
if ( liveMode == 0 ) { if ( liveMode == 0 ) {
@ -280,7 +280,7 @@ function drawSliderOnGraph(val) {
ctx.lineWidth = sliderLineWidth; ctx.lineWidth = sliderLineWidth;
ctx.strokeStyle = 'black'; ctx.strokeStyle = 'black';
// looks like strokes are on the outside (or could be) so shrink it by the line width so we replace all the pixels // looks like strokes are on the outside (or could be) so shrink it by the line width so we replace all the pixels
ctx.strokeRect(sliderX+sliderLineWidth,sliderLineWidth,sliderWidth - 2*sliderLineWidth, sliderHeight - 2*sliderLineWidth); ctx.strokeRect(sliderX+sliderLineWidth, sliderLineWidth, sliderWidth - 2*sliderLineWidth, sliderHeight - 2*sliderLineWidth);
underSliderX = sliderX; underSliderX = sliderX;
} }
var o = $('scruboutput'); var o = $('scruboutput');
@ -341,7 +341,7 @@ function drawSliderOnGraph(val) {
} }
function drawGraph() { function drawGraph() {
var divWidth=$('timelinediv').clientWidth var divWidth=$('timelinediv').clientWidth;
canvas.width = cWidth = divWidth; // Let it float and determine width (it should be sized a bit smaller percentage of window) canvas.width = cWidth = divWidth; // Let it float and determine width (it should be sized a bit smaller percentage of window)
cHeight = parseInt(window.innerHeight * 0.10); cHeight = parseInt(window.innerHeight * 0.10);
if ( cHeight < numMonitors * 20 ) { if ( cHeight < numMonitors * 20 ) {
@ -356,7 +356,7 @@ function drawGraph() {
ctx.fillStyle="white"; ctx.fillStyle="white";
var t="No data found in range - choose differently"; var t="No data found in range - choose differently";
var l=ctx.measureText(t).width; var l=ctx.measureText(t).width;
ctx.fillText(t,(cWidth - l)/2, cHeight-10); ctx.fillText(t, (cWidth - l)/2, cHeight-10);
underSlider=undefined; underSlider=undefined;
return; return;
} }
@ -369,24 +369,24 @@ function drawGraph() {
// round low end down // round low end down
var x1 = parseInt((Event.StartTimeSecs - minTimeSecs) / rangeTimeSecs * cWidth); var x1 = parseInt((Event.StartTimeSecs - minTimeSecs) / rangeTimeSecs * cWidth);
var x2 = parseInt((Event.EndTimeSecs - minTimeSecs) / rangeTimeSecs * cWidth + 0.5 ) ; // round high end up to be sure consecutive ones connect var x2 = parseInt((Event.EndTimeSecs - minTimeSecs) / rangeTimeSecs * cWidth + 0.5 ); // round high end up to be sure consecutive ones connect
ctx.fillStyle = monitorColour[Event.MonitorId]; ctx.fillStyle = monitorColour[Event.MonitorId];
ctx.globalAlpha = 0.2; // light color for background ctx.globalAlpha = 0.2; // light color for background
ctx.clearRect(x1,monitorIndex[Event.MonitorId]*rowHeight,x2-x1,rowHeight); // Erase any overlap so it doesn't look artificially darker ctx.clearRect(x1, monitorIndex[Event.MonitorId]*rowHeight, x2-x1, rowHeight); // Erase any overlap so it doesn't look artificially darker
ctx.fillRect(x1,monitorIndex[Event.MonitorId]*rowHeight,x2-x1,rowHeight); ctx.fillRect(x1, monitorIndex[Event.MonitorId]*rowHeight, x2-x1, rowHeight);
for ( var frame_id in Event.FramesById ) { for ( var frame_id in Event.FramesById ) {
var Frame = Event.FramesById[frame_id]; var Frame = Event.FramesById[frame_id];
if ( ! Frame.Score ) if ( ! Frame.Score )
continue; continue;
// Now put in scored frames (if any) // Now put in scored frames (if any)
var x1=parseInt( (Frame.TimeStampSecs - minTimeSecs) / rangeTimeSecs * cWidth) ; // round low end down var x1=parseInt( (Frame.TimeStampSecs - minTimeSecs) / rangeTimeSecs * cWidth); // round low end down
var x2=parseInt( (Frame.TimeStampSecs - minTimeSecs) / rangeTimeSecs * cWidth + 0.5 ) ; // round up var x2=parseInt( (Frame.TimeStampSecs - minTimeSecs) / rangeTimeSecs * cWidth + 0.5 ); // round up
if(x2-x1 < 2) x2=x1+2; // So it is visible make them all at least this number of seconds wide if(x2-x1 < 2) x2=x1+2; // So it is visible make them all at least this number of seconds wide
ctx.fillStyle=monitorColour[Event.MonitorId]; ctx.fillStyle=monitorColour[Event.MonitorId];
ctx.globalAlpha = 0.4 + 0.6 * (1 - Frame.Score/maxScore); // Background is scaled but even lowest is twice as dark as the background ctx.globalAlpha = 0.4 + 0.6 * (1 - Frame.Score/maxScore); // Background is scaled but even lowest is twice as dark as the background
ctx.fillRect(x1,monitorIndex[Event.MonitorId]*rowHeight,x2-x1,rowHeight); ctx.fillRect(x1, monitorIndex[Event.MonitorId]*rowHeight, x2-x1, rowHeight);
} // end foreach frame } // end foreach frame
} // end foreach Event } // end foreach Event
@ -415,8 +415,7 @@ function redrawScreen() {
$('panleft').style.display="none"; $('panleft').style.display="none";
$('panright').style.display="none"; $('panright').style.display="none";
if ($('downloadVideo')) $('downloadVideo').style.display="none"; if ($('downloadVideo')) $('downloadVideo').style.display="none";
} else {
} else {
// switch out of liveview mode // switch out of liveview mode
$('DateTimeDiv').style.display="inline"; $('DateTimeDiv').style.display="inline";
$('DateTimeDiv').style.display="inline-flex"; $('DateTimeDiv').style.display="inline-flex";
@ -443,15 +442,15 @@ function redrawScreen() {
var vw=window.innerWidth; var vw=window.innerWidth;
var pos=$('monitors').getPosition(); var pos=$('monitors').getPosition();
var mh=(vh - pos.y - $('fps').getSize().y); var mh=(vh - pos.y - $('fps').getSize().y);
$('monitors').setStyle('height',mh.toString() + "px"); // leave a small gap at bottom $('monitors').setStyle('height', mh.toString() + "px"); // leave a small gap at bottom
if(maxfit2($('monitors').getSize().x,$('monitors').getSize().y) == 0) /// if we fail to fix we back out of fit mode -- ??? This may need some better handling if(maxfit2($('monitors').getSize().x, $('monitors').getSize().y) == 0) /// if we fail to fix we back out of fit mode -- ??? This may need some better handling
fitMode=1-fitMode; fitMode=1-fitMode;
} else { } else {
// switch out of fit mode // switch out of fit mode
// if we fit, then monitors were absolutely positioned already (or will be) otherwise release them to float // if we fit, then monitors were absolutely positioned already (or will be) otherwise release them to float
for( var i=0; i<numMonitors; i++ ) for( var i=0; i<numMonitors; i++ )
monitorCanvasObj[monitorPtr[i]].style.position=""; monitorCanvasObj[monitorPtr[i]].style.position="";
$('monitors').setStyle('height',"auto"); $('monitors').setStyle('height', "auto");
$('ScaleDiv').style.display="inline"; $('ScaleDiv').style.display="inline";
$('ScaleDiv').style.display="inline-flex"; $('ScaleDiv').style.display="inline-flex";
$('fit').innerHTML="Fit"; $('fit').innerHTML="Fit";
@ -464,15 +463,15 @@ function redrawScreen() {
function outputUpdate(time) { function outputUpdate(time) {
drawSliderOnGraph(time); drawSliderOnGraph(time);
for ( var i=0; i < numMonitors; i++ ) { for ( var i=0; i < numMonitors; i++ ) {
var src = getImageSource(monitorPtr[i],time); var src = getImageSource(monitorPtr[i], time);
//console.log("New image src: " + src); //console.log("New image src: " + src);
loadImage2Monitor(monitorPtr[i],src); loadImage2Monitor(monitorPtr[i], src);
} }
currentTimeSecs = time; currentTimeSecs = time;
} }
/// Found this here: http://stackoverflow.com/questions/55677/how-do-i-get-the-coordinates-of-a-mouse-click-on-a-canvas-element /// Found this here: http://stackoverflow.com/questions/55677/how-do-i-get-the-coordinates-of-a-mouse-click-on-a-canvas-element
function relMouseCoords(event){ function relMouseCoords(event) {
var totalOffsetX = 0; var totalOffsetX = 0;
var totalOffsetY = 0; var totalOffsetY = 0;
var canvasX = 0; var canvasX = 0;
@ -487,7 +486,7 @@ function relMouseCoords(event){
canvasX = event.pageX - totalOffsetX; canvasX = event.pageX - totalOffsetX;
canvasY = event.pageY - totalOffsetY; canvasY = event.pageY - totalOffsetY;
return {x:canvasX, y:canvasY} return {x:canvasX, y:canvasY};
} }
HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords; HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords;
@ -495,8 +494,8 @@ HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords;
var mouseisdown=false; var mouseisdown=false;
function mdown(event) {mouseisdown=true; mmove(event);} function mdown(event) {mouseisdown=true; mmove(event);}
function mup(event) {mouseisdown=false;} function mup(event) {mouseisdown=false;}
function mout(event) {mouseisdown=false;} // if we go outside treat it as release function mout(event) {mouseisdown=false;} // if we go outside treat it as release
function tmove(event) {mouseisdown=true; mmove(event);} function tmove(event) {mouseisdown=true; mmove(event);}
function mmove(event) { function mmove(event) {
@ -512,7 +511,7 @@ function secs2inputstr(s) {
console.log("Invalid value for " + s + " seconds"); console.log("Invalid value for " + s + " seconds");
return ''; return '';
} }
var m = moment(s*1000); var m = moment(s*1000);
if ( ! m ) { if ( ! m ) {
console.log("No valid date for " + s + " seconds"); console.log("No valid date for " + s + " seconds");
@ -582,7 +581,6 @@ function setLive(value) {
// The section below are to reload this program with new parameters // The section below are to reload this program with new parameters
function clicknav(minSecs, maxSecs, live) {// we use the current time if we can function clicknav(minSecs, maxSecs, live) {// we use the current time if we can
var date = new Date(); var date = new Date();
var now = Math.floor(date.getTime() / 1000); var now = Math.floor(date.getTime() / 1000);
var tz_difference = (-1 * date.getTimezoneOffset() * 60) - server_utc_offset; var tz_difference = (-1 * date.getTimezoneOffset() * 60) - server_utc_offset;
@ -641,33 +639,33 @@ function click_zoomin() {
rangeTimeSecs = parseInt(rangeTimeSecs / 2); rangeTimeSecs = parseInt(rangeTimeSecs / 2);
minTimeSecs = parseInt(currentTimeSecs - rangeTimeSecs/2); // this is the slider current time, we center on that minTimeSecs = parseInt(currentTimeSecs - rangeTimeSecs/2); // this is the slider current time, we center on that
maxTimeSecs = parseInt(currentTimeSecs + rangeTimeSecs/2); maxTimeSecs = parseInt(currentTimeSecs + rangeTimeSecs/2);
clicknav(minTimeSecs,maxTimeSecs,0); clicknav(minTimeSecs, maxTimeSecs, 0);
} }
function click_zoomout() { function click_zoomout() {
rangeTimeSecs = parseInt(rangeTimeSecs * 2); rangeTimeSecs = parseInt(rangeTimeSecs * 2);
minTimeSecs = parseInt(currentTimeSecs - rangeTimeSecs/2); // this is the slider current time, we center on that minTimeSecs = parseInt(currentTimeSecs - rangeTimeSecs/2); // this is the slider current time, we center on that
maxTimeSecs = parseInt(currentTimeSecs + rangeTimeSecs/2); maxTimeSecs = parseInt(currentTimeSecs + rangeTimeSecs/2);
clicknav(minTimeSecs,maxTimeSecs,0); clicknav(minTimeSecs, maxTimeSecs, 0);
} }
function click_panleft() { function click_panleft() {
minTimeSecs = parseInt(minTimeSecs - rangeTimeSecs/2); minTimeSecs = parseInt(minTimeSecs - rangeTimeSecs/2);
maxTimeSecs = minTimeSecs + rangeTimeSecs - 1; maxTimeSecs = minTimeSecs + rangeTimeSecs - 1;
clicknav(minTimeSecs,maxTimeSecs,0); clicknav(minTimeSecs, maxTimeSecs, 0);
} }
function click_panright() { function click_panright() {
minTimeSecs = parseInt(minTimeSecs + rangeTimeSecs/2); minTimeSecs = parseInt(minTimeSecs + rangeTimeSecs/2);
maxTimeSecs = minTimeSecs + rangeTimeSecs - 1; maxTimeSecs = minTimeSecs + rangeTimeSecs - 1;
clicknav(minTimeSecs,maxTimeSecs,0); clicknav(minTimeSecs, maxTimeSecs, 0);
} }
function click_download() { function click_download() {
createPopup( '?view=download', 'zmDownload', 'download' ); createPopup( '?view=download', 'zmDownload', 'download' );
} }
function click_all_events() { function click_all_events() {
clicknav(0,0,0); clicknav(0, 0, 0);
} }
function allnon() { function allnon() {
clicknav(0,0,0); clicknav(0, 0, 0);
} }
/// >>>>>>>>>>>>>>>>> handles packing different size/aspect monitors on screen <<<<<<<<<<<<<<<<<<<<<<<< /// >>>>>>>>>>>>>>>>> handles packing different size/aspect monitors on screen <<<<<<<<<<<<<<<<<<<<<<<<
@ -676,7 +674,7 @@ function compSize(a, b) { // sort array by some size parameter - height seems t
var b_value = monitorHeight[b] * monitorWidth[b] * monitorNormalizeScale[b] * monitorZoomScale[b] * monitorNormalizeScale[b] * monitorZoomScale[b]; var b_value = monitorHeight[b] * monitorWidth[b] * monitorNormalizeScale[b] * monitorZoomScale[b] * monitorNormalizeScale[b] * monitorZoomScale[b];
if ( a_value > b_value ) return -1; if ( a_value > b_value ) return -1;
else if ( a_value == b_value ) return 0; else if ( a_value == b_value ) return 0;
else return 1; else return 1;
} }
@ -694,7 +692,7 @@ function maxfit2(divW, divH) {
var borders=-1; var borders=-1;
//monitorPtr.sort(compSize); //Sorts monitors by size in viewport. If enabled makes captions not line up with graphs. //monitorPtr.sort(compSize); //Sorts monitors by size in viewport. If enabled makes captions not line up with graphs.
while(1) { while(1) {
if( maxScale - minScale < 0.01 ) break; if( maxScale - minScale < 0.01 ) break;
@ -710,7 +708,7 @@ function maxfit2(divW, divH) {
// this loop places each monitor (if it can) // this loop places each monitor (if it can)
var monId = monitorPtr[m]; var monId = monitorPtr[m];
function doesItFit(x,y,w,h,d) { // does block (w,h) fit at position (x,y) relative to edge and other nodes already done (0..d) function doesItFit(x, y, w, h, d) { // does block (w,h) fit at position (x,y) relative to edge and other nodes already done (0..d)
if(x+w>=divW) return 0; if(x+w>=divW) return 0;
if(y+h>=divH) return 0; if(y+h>=divH) return 0;
for(var i=0; i<=d; i++) for(var i=0; i<=d; i++)
@ -741,7 +739,7 @@ function maxfit2(divW, divH) {
} }
} }
if ( m == 0 ) { // note for the very first one there were no adjacents so the above loop didn't run if ( m == 0 ) { // note for the very first one there were no adjacents so the above loop didn't run
if ( doesItFit(0,0,monitorWidth[monId] * thisScale * monitorNormalizeScale[monId] * monitorZoomScale[monId] + borders, monitorHeight[monId] * thisScale * monitorNormalizeScale[monId] * monitorZoomScale[monId] + borders, -1) == 1 ) { if ( doesItFit(0, 0, monitorWidth[monId] * thisScale * monitorNormalizeScale[monId] * monitorZoomScale[monId] + borders, monitorHeight[monId] * thisScale * monitorNormalizeScale[monId] * monitorZoomScale[monId] + borders, -1) == 1 ) {
fitX = 0; fitX = 0;
fitY = 0; fitY = 0;
} }
@ -751,7 +749,7 @@ function maxfit2(divW, divH) {
break; // break out of monitor loop flagging we didn't fit break; // break out of monitor loop flagging we didn't fit
} }
thisX[m] =fitX; thisX[m] =fitX;
thisX2[m]=fitX + monitorWidth[monitorPtr[m]] * thisScale * monitorNormalizeScale[monitorPtr[m]] * monitorZoomScale[monitorPtr[m]] + borders; thisX2[m]=fitX + monitorWidth[monitorPtr[m]] * thisScale * monitorNormalizeScale[monitorPtr[m]] * monitorZoomScale[monitorPtr[m]] + borders;
thisY[m] =fitY; thisY[m] =fitY;
thisY2[m]=fitY + monitorHeight[monitorPtr[m]] * thisScale * monitorNormalizeScale[monitorPtr[m]] * monitorZoomScale[monitorPtr[m]] + borders; thisY2[m]=fitY + monitorHeight[monitorPtr[m]] * thisScale * monitorNormalizeScale[monitorPtr[m]] * monitorZoomScale[monitorPtr[m]] + borders;
thisArea += (thisX2[m] - thisX[m])*(thisY2[m] - thisY[m]); thisArea += (thisX2[m] - thisX[m])*(thisY2[m] - thisY[m]);
@ -807,7 +805,7 @@ function showOneMonitor(monId) {
} // end if live/events } // end if live/events
} }
function zoom(monId,scale) { function zoom(monId, scale) {
var lastZoomMonPriorScale = monitorZoomScale[monId]; var lastZoomMonPriorScale = monitorZoomScale[monId];
monitorZoomScale[monId] *= scale; monitorZoomScale[monId] *= scale;
if ( redrawScreen() == 0 ) {// failure here is probably because we zoomed too far if ( redrawScreen() == 0 ) {// failure here is probably because we zoomed too far
@ -817,14 +815,14 @@ function zoom(monId,scale) {
} }
} }
function clickMonitor(event,monId) { function clickMonitor(event, monId) {
var monitor_element = $("Monitor"+monId.toString()); var monitor_element = $("Monitor"+monId.toString());
var pos_x = event.offsetX ? (event.offsetX) : event.pageX - monitor_element.offsetLeft; var pos_x = event.offsetX ? (event.offsetX) : event.pageX - monitor_element.offsetLeft;
var pos_y = event.offsetY ? (event.offsetY) : event.pageY - monitor_element.offsetTop; var pos_y = event.offsetY ? (event.offsetY) : event.pageY - monitor_element.offsetTop;
if ( pos_x < monitor_element.width/4 && pos_y < monitor_element.height/4 ) if ( pos_x < monitor_element.width/4 && pos_y < monitor_element.height/4 )
zoom(monId,1.15); zoom(monId, 1.15);
else if ( pos_x > monitor_element.width * 3/4 && pos_y < monitor_element.height/4 ) else if ( pos_x > monitor_element.width * 3/4 && pos_y < monitor_element.height/4 )
zoom(monId,1/1.15); zoom(monId, 1/1.15);
else else
showOneMonitor(monId); showOneMonitor(monId);
return; return;
@ -858,12 +856,11 @@ function changeDateTime(e) {
window.location = uri; window.location = uri;
} }
// >>>>>>>>> Initialization that runs on window load by being at the bottom // >>>>>>>>> Initialization that runs on window load by being at the bottom
function initPage() { function initPage() {
jQuery(document).ready(function() {
jQuery(document).ready(function(){ jQuery("#hdrbutton").click(function() {
jQuery("#hdrbutton").click(function(){
jQuery("#flipMontageHeader").slideToggle("slow"); jQuery("#flipMontageHeader").slideToggle("slow");
jQuery("#hdrbutton").toggleClass('glyphicon-menu-down').toggleClass('glyphicon-menu-up'); jQuery("#hdrbutton").toggleClass('glyphicon-menu-down').toggleClass('glyphicon-menu-up');
}); });
@ -879,8 +876,8 @@ function initPage() {
monitorCanvasCtx[monId] = monitorCanvasObj[monId].getContext('2d'); monitorCanvasCtx[monId] = monitorCanvasObj[monId].getContext('2d');
var imageObject = monitorImageObject[monId] = new Image(); var imageObject = monitorImageObject[monId] = new Image();
imageObject.monId = monId; imageObject.monId = monId;
imageObject.onload = function() {imagedone(this, this.monId, true )}; imageObject.onload = function() {imagedone(this, this.monId, true );};
imageObject.onerror = function() {imagedone(this, this.monId, false )}; imageObject.onerror = function() {imagedone(this, this.monId, false );};
loadImage2Monitor( monId, monitorImageURL[monId] ); loadImage2Monitor( monId, monitorImageURL[monId] );
} }
} }
@ -890,7 +887,7 @@ function initPage() {
drawGraph(); drawGraph();
} }
setSpeed(speedIndex); setSpeed(speedIndex);
//setFit(fitMode); // will redraw //setFit(fitMode); // will redraw
//setLive(liveMode); // will redraw //setLive(liveMode); // will redraw
redrawScreen(); redrawScreen();
$j('#minTime').datetimepicker({ $j('#minTime').datetimepicker({
@ -898,7 +895,7 @@ function initPage() {
dateFormat: "yy-mm-dd", dateFormat: "yy-mm-dd",
maxDate: +0, maxDate: +0,
constrainInput: false, constrainInput: false,
onClose: function (newDate, oldData) { onClose: function(newDate, oldData) {
if (newDate !== oldData.lastVal) { if (newDate !== oldData.lastVal) {
changeDateTime(); changeDateTime();
} }
@ -910,13 +907,13 @@ function initPage() {
minDate: $j('#minTime').val(), minDate: $j('#minTime').val(),
maxDate: +0, maxDate: +0,
constrainInput: false, constrainInput: false,
onClose: function (newDate, oldData) { onClose: function(newDate, oldData) {
if (newDate !== oldData.lastVal) { if (newDate !== oldData.lastVal) {
changeDateTime(); changeDateTime();
} }
} }
}); });
} }
window.addEventListener("resize",redrawScreen,{passive:true}); window.addEventListener("resize", redrawScreen, {passive:true});
// Kick everything off // Kick everything off
window.addEvent( 'domready', initPage ); window.addEvent( 'domready', initPage );

4
web/skins/classic/views/js/report_event_audit.js
View File

@ -34,7 +34,7 @@ function initPage() {
dateFormat: "yy-mm-dd", dateFormat: "yy-mm-dd",
maxDate: +0, maxDate: +0,
constrainInput: false, constrainInput: false,
onClose: function (newDate, oldData) { onClose: function(newDate, oldData) {
if (newDate !== oldData.lastVal) { if (newDate !== oldData.lastVal) {
changeDateTime(); changeDateTime();
} }
@ -46,7 +46,7 @@ function initPage() {
minDate: $j('#minTime').val(), minDate: $j('#minTime').val(),
maxDate: +0, maxDate: +0,
constrainInput: false, constrainInput: false,
onClose: function (newDate, oldData) { onClose: function(newDate, oldData) {
if (newDate !== oldData.lastVal) { if (newDate !== oldData.lastVal) {
changeDateTime(); changeDateTime();
} }

12
web/skins/classic/views/js/state.js
View File

@ -20,25 +20,25 @@ $j(document).ready(function() {
$j("#btnSave").prop( "disabled", false ); $j("#btnSave").prop( "disabled", false );
} }
}); });
// Delete a state // Delete a state
$j("#btnDelete").click(function() { $j("#btnDelete").click(function() {
StateStuff( 'delete', $j("#runState").val( )); stateStuff( 'delete', $j("#runState").val( ));
}); });
// Save a new state // Save a new state
$j("#btnSave").click(function() { $j("#btnSave").click(function() {
StateStuff( 'save', undefined, $j("#newState").val() ); stateStuff( 'save', undefined, $j("#newState").val() );
}); });
// Change state // Change state
$j("#btnApply").click(function() { $j("#btnApply").click(function() {
StateStuff( 'state', $j("#runState").val() ); stateStuff( 'state', $j("#runState").val() );
}); });
function StateStuff( action, runState, newState ){ function stateStuff( action, runState, newState ) {
var formData = { var formData = {
'view' : 'console', 'view' : 'console',
'action' : action, 'action' : action,
@ -59,7 +59,5 @@ $j(document).ready(function() {
}).done(function(data) { }).done(function(data) {
location.reload(); location.reload();
}); });
} }
}); });

11
web/skins/classic/views/js/timeline.js
View File

@ -1,6 +1,6 @@
var events = {}; var events = {};
function showEvent( eid, fid, width, height ) { function showEvent( eid, fid, width, height ) {
var url = '?view=event&eid='+eid+'&fid='+fid; var url = '?view=event&eid='+eid+'&fid='+fid;
url += filterQuery; url += filterQuery;
window.location.href = url; window.location.href = url;
@ -89,7 +89,6 @@ function requestFrameData( eventId, frameId ) {
} }
function previewEvent(eventId, frameId) { function previewEvent(eventId, frameId) {
if ( events[eventId] ) { if ( events[eventId] ) {
var event = events[eventId]; var event = events[eventId];
if ( event['frames'] ) { if ( event['frames'] ) {
@ -111,7 +110,7 @@ function loadEventImage( imagePath, eid, fid, width, height, fps, videoName, dur
if ( videoName && vid ) { if ( videoName && vid ) {
vid.show(); vid.show();
imageSrc.hide(); imageSrc.hide();
var newsource=imagePath.slice(0,imagePath.lastIndexOf('/'))+'/'+videoName; var newsource=imagePath.slice(0, imagePath.lastIndexOf('/'))+'/'+videoName;
//console.log(newsource); //console.log(newsource);
//console.log(sources[0].src.slice(-newsource.length)); //console.log(sources[0].src.slice(-newsource.length));
if ( newsource != vid.currentSrc.slice(-newsource.length) || vid.readyState == 0 ) { if ( newsource != vid.currentSrc.slice(-newsource.length) || vid.readyState == 0 ) {
@ -120,11 +119,11 @@ function loadEventImage( imagePath, eid, fid, width, height, fps, videoName, dur
var sources = vid.getElementsByTagName('source'); var sources = vid.getElementsByTagName('source');
sources[0].src = newsource; sources[0].src = newsource;
var tracks = vid.getElementsByTagName('track'); var tracks = vid.getElementsByTagName('track');
if(tracks.length){ if(tracks.length) {
tracks[0].parentNode.removeChild(tracks[0]); tracks[0].parentNode.removeChild(tracks[0]);
} }
vid.load(); vid.load();
addVideoTimingTrack(vid, Monitor.LabelFormat, Monitor.Name, duration, startTime) addVideoTimingTrack(vid, Monitor.LabelFormat, Monitor.Name, duration, startTime);
vid.currentTime = fid/fps; vid.currentTime = fid/fps;
} else { } else {
if ( ! vid.seeking ) if ( ! vid.seeking )
@ -135,7 +134,7 @@ function loadEventImage( imagePath, eid, fid, width, height, fps, videoName, dur
imageSrc.show(); imageSrc.show();
imageSrc.setProperty('src', imagePath); imageSrc.setProperty('src', imagePath);
imageSrc.removeEvent('click'); imageSrc.removeEvent('click');
imageSrc.addEvent('click', showEvent.pass([ eid, fid, width, height ])); imageSrc.addEvent('click', showEvent.pass([eid, fid, width, height]));
} }
var eventData = $('eventData'); var eventData = $('eventData');

18
web/skins/classic/views/js/watch.js
View File

@ -30,7 +30,7 @@ function changeScale() {
var newWidth; var newWidth;
var newHeight; var newHeight;
if (scale == "auto") { if (scale == "auto") {
let newSize = scaleToFit(monitorWidth, monitorHeight, $j('#liveStream'+monitorId), $j('#replayStatus')); var newSize = scaleToFit(monitorWidth, monitorHeight, $j('#liveStream'+monitorId), $j('#replayStatus'));
newWidth = newSize.width; newWidth = newSize.width;
newHeight = newSize.height; newHeight = newSize.height;
autoScale = newSize.autoScale; autoScale = newSize.autoScale;
@ -123,7 +123,7 @@ if ( monitorType != 'WebSite' ) {
var streamStatus; var streamStatus;
function getStreamCmdError(text,error) { function getStreamCmdError(text, error) {
console.log(error); console.log(error);
// Error are normally due to failed auth. reload the page. // Error are normally due to failed auth. reload the page.
window.location.reload(); window.location.reload();
@ -231,7 +231,7 @@ function getStreamCmdResponse(respObj, respText) {
if ( 0 ) { if ( 0 ) {
var streamImg = $('liveStream'+monitorId); var streamImg = $('liveStream'+monitorId);
if ( streamImg ) { 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) ));
console.log("Changing livestream src to " + streamImg.src); console.log("Changing livestream src to " + streamImg.src);
} else { } else {
console.log("Unable to find streamImg liveStream"); console.log("Unable to find streamImg liveStream");
@ -501,26 +501,26 @@ function getEventCmdResponse( respObj, respText ) {
var cells = row.getElements( 'td' ); var cells = row.getElements( 'td' );
var link = new Element( 'a', { 'href': '#', 'events': { 'click': createEventPopup.pass( [ event.Id, '&filter[Query][terms][0][attr]=MonitorId&filter[Query][terms][0][op]=%3d&filter[Query][terms][0][val]='+monitorId+'&page=1&popup=1', event.Width, event.Height ] ) } }); var link = new Element( 'a', { 'href': '#', 'events': { 'click': createEventPopup.pass( [event.Id, '&filter[Query][terms][0][attr]=MonitorId&filter[Query][terms][0][op]=%3d&filter[Query][terms][0][val]='+monitorId+'&page=1&popup=1', event.Width, event.Height] ) } });
link.set( 'text', event.Id ); link.set( 'text', event.Id );
link.inject( row.getElement( 'td.colId' ) ); link.inject( row.getElement( 'td.colId' ) );
link = new Element( 'a', { 'href': '#', 'events': { 'click': createEventPopup.pass( [ event.Id, '&filter[Query][terms][0][attr]=MonitorId&filter[Query][terms][0][op]=%3d&filter[Query][terms][0][val]='+monitorId+'&page=1&popup=1', event.Width, event.Height ] ) } }); link = new Element( 'a', { 'href': '#', 'events': { 'click': createEventPopup.pass( [event.Id, '&filter[Query][terms][0][attr]=MonitorId&filter[Query][terms][0][op]=%3d&filter[Query][terms][0][val]='+monitorId+'&page=1&popup=1', event.Width, event.Height] ) } });
link.set( 'text', event.Name ); link.set( 'text', event.Name );
link.inject( row.getElement( 'td.colName' ) ); link.inject( row.getElement( 'td.colName' ) );
row.getElement( 'td.colTime' ).set( 'text', event.StartTime ); row.getElement( 'td.colTime' ).set( 'text', event.StartTime );
row.getElement( 'td.colSecs' ).set( 'text', event.Length ); row.getElement( 'td.colSecs' ).set( 'text', event.Length );
link = new Element( 'a', { 'href': '#', 'events': { 'click': createFramesPopup.pass( [ event.Id, event.Width, event.Height ] ) } }); link = new Element( 'a', { 'href': '#', 'events': { 'click': createFramesPopup.pass( [event.Id, event.Width, event.Height] ) } });
link.set( 'text', event.Frames+'/'+event.AlarmFrames ); link.set( 'text', event.Frames+'/'+event.AlarmFrames );
link.inject( row.getElement( 'td.colFrames' ) ); link.inject( row.getElement( 'td.colFrames' ) );
link = new Element( 'a', { 'href': '#', 'events': { 'click': createFramePopup.pass( [ event.Id, '0', event.Width, event.Height ] ) } }); link = new Element( 'a', { 'href': '#', 'events': { 'click': createFramePopup.pass( [event.Id, '0', event.Width, event.Height] ) } });
link.set( 'text', event.AvgScore+'/'+event.MaxScore ); link.set( 'text', event.AvgScore+'/'+event.MaxScore );
link.inject( row.getElement( 'td.colScore' ) ); link.inject( row.getElement( 'td.colScore' ) );
link = new Element( 'a', { 'href': '#', 'title': deleteString, 'events': { 'click': function( e ) { deleteEvent( e, event.Id ); }.bind( link ), 'mouseover': highlightRow.pass( row ), 'mouseout': highlightRow.pass( row ) } }); link = new Element( 'a', { 'href': '#', 'title': deleteString, 'events': { 'click': function( e ) { deleteEvent( e, event.Id ); }, 'mouseover': highlightRow.pass( row ), 'mouseout': highlightRow.pass( row ) } });
link.set( 'text', 'X' ); link.set( 'text', 'X' );
link.inject( row.getElement( 'td.colDelete' ) ); link.inject( row.getElement( 'td.colDelete' ) );
@ -628,7 +628,7 @@ function controlCmdImage( x, y ) {
} }
function fetchImage( streamImage ) { function fetchImage( streamImage ) {
streamImage.src = streamImage.src.replace(/rand=\d+/i,'rand='+Math.floor((Math.random() * 1000000) )); streamImage.src = streamImage.src.replace(/rand=\d+/i, 'rand='+Math.floor((Math.random() * 1000000) ));
} }
function handleClick( event ) { function handleClick( event ) {

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

@ -382,9 +382,9 @@ function drawZonePoints() {
div.addEvent( 'mouseover', highlightOn.pass( i ) ); div.addEvent( 'mouseover', highlightOn.pass( i ) );
div.addEvent( 'mouseout', highlightOff.pass( i ) ); div.addEvent( 'mouseout', highlightOff.pass( i ) );
div.inject( $('imageFrame') ); div.inject( $('imageFrame') );
div.makeDraggable( { div.makeDraggable( {
'container': $('imageFrame'), 'container': $('imageFrame'),
'onStart': setActivePoint.pass( i ), 'onStart': setActivePoint.pass( i ),
'onComplete': fixActivePoint.pass( i ), 'onComplete': fixActivePoint.pass( i ),
'onDrag': updateActivePoint.pass( i ) 'onDrag': updateActivePoint.pass( i )
} ); } );
@ -592,7 +592,7 @@ function statusCmdQuery() {
} }
function fetchImage( streamImage ) { function fetchImage( streamImage ) {
streamImage.src = streamImage.src.replace(/rand=\d+/i,'rand='+Math.floor((Math.random() * 1000000) )); streamImage.src = streamImage.src.replace(/rand=\d+/i, 'rand='+Math.floor((Math.random() * 1000000) ));
} }
function appletRefresh() { function appletRefresh() {