From 3920420aa9266fd860f17af942d52eeb359c0aeb Mon Sep 17 00:00:00 2001 From: digital-gnome <31593470+digital-gnome@users.noreply.github.com> Date: Mon, 20 Nov 2017 13:36:45 -0500 Subject: [PATCH 01/23] Convert scaleToFit to shared function --- web/skins/classic/js/skin.js | 35 +++++++++++++++++++++++++++++ web/skins/classic/views/js/event.js | 34 +--------------------------- 2 files changed, 36 insertions(+), 33 deletions(-) diff --git a/web/skins/classic/js/skin.js b/web/skins/classic/js/skin.js index c3d225aa8..ef3845108 100644 --- a/web/skins/classic/js/skin.js +++ b/web/skins/classic/js/skin.js @@ -333,3 +333,38 @@ function changeFilter( e ) { Cookie.write( e.name, e.value, { duration: 10*365 } ); window.location = window.location; } + +var resizeTimer; + +function endOfResize(e) { + clearTimeout(resizeTimer); + resizeTimer = setTimeout(changeScale, 250); +} + +function scaleToFit (baseWidth, baseHeight, feed) { + $j(window).on('resize', endOfResize) //set delayed scaling when Scale to Fit is selected + let ratio = baseWidth / baseHeight; + let container = $j('#content'); + let viewPort = $j(window); + let bottomDiv = $j('#replayStatus'); +// jquery does not provide a bottom offet, and offset dows not include margins. outerHeight true minus false gives total vertical margins. + let bottomLoc = bottomDiv.offset().top + (bottomDiv.outerHeight(true) - bottomDiv.outerHeight()) + bottomDiv.outerHeight(true); + let newHeight = viewPort.height() - (bottomLoc - feed.outerHeight(true)) +// let newHeight = viewPort.height() - (container.outerHeight(true) - feed.outerHeight(true)); + let newWidth = ratio * newHeight; + if (newWidth > container.innerWidth()) { + newWidth = container.innerWidth(); + newHeight = newWidth / ratio; + } + let autoScale = Math.round(newWidth / baseWidth * SCALE_BASE); + let scales = $j('#scale option').map(function() {return parseInt($j(this).val());}).get(); + scales.shift(); + let closest; + $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)) { + closest = this.valueOf(); + } + }); + autoScale = closest; + return {width: Math.floor(newWidth), height: Math.floor(newHeight), autoScale: autoScale}; +} diff --git a/web/skins/classic/views/js/event.js b/web/skins/classic/views/js/event.js index 95460a8f1..4cf2c6dd8 100644 --- a/web/skins/classic/views/js/event.js +++ b/web/skins/classic/views/js/event.js @@ -134,45 +134,13 @@ function setButtonState( element, butClass ) { } } -var resizeTimer; - -function endOfResize(e) { - clearTimeout(resizeTimer); - resizeTimer = setTimeout(changeScale, 250); -} - -function scaleToFit () { - $j(window).on('resize', endOfResize) //set delayed scaling when Scale to Fit is selected - let ratio = eventData.Width/eventData.Height; - let container = $j('#content'); - let feed = $j(vid ? '#videoobj' : '#evtStream'); - let viewPort = $j(window); - let newHeight = viewPort.height() - (container.outerHeight(true) - feed.outerHeight(true)); - let newWidth = ratio * newHeight; - if (newWidth > container.innerWidth()) { - newWidth = container.innerWidth(); - newHeight = newWidth / ratio; - } - let autoScale = Math.round(newWidth / eventData.Width * SCALE_BASE); - let scales = $j('#scale option').map(function() {return parseInt($j(this).val());}).get(); - scales.shift(); - let closest = null; - $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)) { - closest = this.valueOf(); - } - }); - autoScale = closest; - return {width: Math.floor(newWidth), height: Math.floor(newHeight), autoScale: autoScale}; -} - function changeScale() { let scale = $j('#scale').val(); let newWidth = null; let newHeight = null; let autoScale = null; if (scale == "auto") { - let newSize = scaleToFit(); + let newSize = scaleToFit(eventData.Width, eventData.Height, $j(vid ? '#videoobj' : '#evtStream')); newWidth = newSize.width; newHeight = newSize.height; autoScale = newSize.autoScale; From 68e54400e24a64ad9e8a0628f109c7abb92986a6 Mon Sep 17 00:00:00 2001 From: digital-gnome <31593470+digital-gnome@users.noreply.github.com> Date: Mon, 20 Nov 2017 14:25:13 -0500 Subject: [PATCH 02/23] Add scaleToFit to watch view --- web/skins/classic/views/js/watch.js | 18 +++++++++++++++--- web/skins/classic/views/js/watch.js.php | 2 +- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/web/skins/classic/views/js/watch.js b/web/skins/classic/views/js/watch.js index 57ad9d86c..db0455fd4 100644 --- a/web/skins/classic/views/js/watch.js +++ b/web/skins/classic/views/js/watch.js @@ -25,8 +25,19 @@ function showPtzControls() { function changeScale() { var scale = $('scale').get('value'); - var newWidth = ( monitorWidth * scale ) / SCALE_BASE; - var newHeight = ( monitorHeight * scale ) / SCALE_BASE; + var newWidth; + var newHeight; + if (scale == "auto") { + let newSize = scaleToFit(monitorWidth, monitorHeight, $j('#liveStream'+monitorId)); + newWidth = newSize.width; + newHeight = newSize.height; + autoScale = newSize.autoScale; + } else { + $j(window).off('resize', endOfResize); //remove resize handler when Scale to Fit is not active + newWidth = monitorWidth * scale / SCALE_BASE; + newHeight = monitorHeight * scale / SCALE_BASE; + } + Cookie.write( 'zmWatchScale'+monitorId, scale, { duration: 10*365 } ); @@ -36,7 +47,7 @@ function changeScale() { streamImg.style.width = newWidth + "px"; streamImg.style.height = newHeight + "px"; - streamImg.src = streamImg.src.replace(/scale=\d+/i, 'scale='+scale); + streamImg.src = streamImg.src.replace(/scale=\d+/i, 'scale='+(scale== 'auto' ? autoScale : scale)); } else { console.error("No element found for liveStream."); } @@ -655,6 +666,7 @@ function initPage() { if ( refreshApplet && appletRefreshTime ) appletRefresh.delay( appletRefreshTime*1000 ); + if (scale == "auto") changeScale(); } // Kick everything off diff --git a/web/skins/classic/views/js/watch.js.php b/web/skins/classic/views/js/watch.js.php index 35a2debca..c0c8ab590 100644 --- a/web/skins/classic/views/js/watch.js.php +++ b/web/skins/classic/views/js/watch.js.php @@ -50,7 +50,7 @@ var monitorWidth = Width() ?>; var monitorHeight = Height() ?>; var monitorUrl = 'Server()->Url() ) ?>'; -var scale = ; +var scale = ''; var statusRefreshTimeout = ; var eventsRefreshTimeout = ; From f52306ff56f01b3d407b020c4f371277049b371f Mon Sep 17 00:00:00 2001 From: digital-gnome <31593470+digital-gnome@users.noreply.github.com> Date: Mon, 20 Nov 2017 14:26:01 -0500 Subject: [PATCH 03/23] Fix scales to only use fixed width/height on montage --- web/skins/classic/includes/config.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/skins/classic/includes/config.php b/web/skins/classic/includes/config.php index 763a2b8cc..54ab872b9 100644 --- a/web/skins/classic/includes/config.php +++ b/web/skins/classic/includes/config.php @@ -45,7 +45,7 @@ $scales = array( '12.5' => '1/8x', ); -if (isset($_REQUEST['view'])) unset($scales[$_REQUEST['view'] == 'event' ? '' : 'auto']); //Remove the option we aren't using on montage or event +if (isset($_REQUEST['view'])) unset($scales[$_REQUEST['view'] == 'montage' ? 'auto' : '']); //Only use fixed width/Height on montage $bandwidth_options = array( 'high' => translate('High'), From 55699a9b9b327a1a8cce60d36da8f817a451aa8e Mon Sep 17 00:00:00 2001 From: digital-gnome <31593470+digital-gnome@users.noreply.github.com> Date: Tue, 21 Nov 2017 22:46:45 -0500 Subject: [PATCH 04/23] Change scaleToFit to choose what to fit Adds 4th input to choose what element is the last thing to fit. --- web/skins/classic/js/skin.js | 8 +++----- web/skins/classic/views/js/event.js | 2 +- web/skins/classic/views/js/watch.js | 2 +- 3 files changed, 5 insertions(+), 7 deletions(-) diff --git a/web/skins/classic/js/skin.js b/web/skins/classic/js/skin.js index ef3845108..3eeb21c8d 100644 --- a/web/skins/classic/js/skin.js +++ b/web/skins/classic/js/skin.js @@ -341,16 +341,14 @@ function endOfResize(e) { resizeTimer = setTimeout(changeScale, 250); } -function scaleToFit (baseWidth, baseHeight, feed) { +function scaleToFit (baseWidth, baseHeight, scaleEl, bottomEl) { $j(window).on('resize', endOfResize) //set delayed scaling when Scale to Fit is selected let ratio = baseWidth / baseHeight; let container = $j('#content'); let viewPort = $j(window); - let bottomDiv = $j('#replayStatus'); // jquery does not provide a bottom offet, and offset dows not include margins. outerHeight true minus false gives total vertical margins. - let bottomLoc = bottomDiv.offset().top + (bottomDiv.outerHeight(true) - bottomDiv.outerHeight()) + bottomDiv.outerHeight(true); - let newHeight = viewPort.height() - (bottomLoc - feed.outerHeight(true)) -// let newHeight = viewPort.height() - (container.outerHeight(true) - feed.outerHeight(true)); + let bottomLoc = bottomEl.offset().top + (bottomEl.outerHeight(true) - bottomEl.outerHeight()) + bottomEl.outerHeight(true); + let newHeight = viewPort.height() - (bottomLoc - scaleEl.outerHeight(true)) let newWidth = ratio * newHeight; if (newWidth > container.innerWidth()) { newWidth = container.innerWidth(); diff --git a/web/skins/classic/views/js/event.js b/web/skins/classic/views/js/event.js index 4cf2c6dd8..74ab389eb 100644 --- a/web/skins/classic/views/js/event.js +++ b/web/skins/classic/views/js/event.js @@ -140,7 +140,7 @@ function changeScale() { let newHeight = null; let autoScale = null; if (scale == "auto") { - let newSize = scaleToFit(eventData.Width, eventData.Height, $j(vid ? '#videoobj' : '#evtStream')); + let newSize = scaleToFit(eventData.Width, eventData.Height, $j(vid ? '#videoobj' : '#evtStream'), $j('#replayStatus')); newWidth = newSize.width; newHeight = newSize.height; autoScale = newSize.autoScale; diff --git a/web/skins/classic/views/js/watch.js b/web/skins/classic/views/js/watch.js index db0455fd4..6f33a97db 100644 --- a/web/skins/classic/views/js/watch.js +++ b/web/skins/classic/views/js/watch.js @@ -28,7 +28,7 @@ function changeScale() { var newWidth; var newHeight; if (scale == "auto") { - let newSize = scaleToFit(monitorWidth, monitorHeight, $j('#liveStream'+monitorId)); + let newSize = scaleToFit(monitorWidth, monitorHeight, $j('#liveStream'+monitorId), $j('#replayStatus')); newWidth = newSize.width; newHeight = newSize.height; autoScale = newSize.autoScale; From b5db885a3149721e9703c0e1f66514cec6a2ff9d Mon Sep 17 00:00:00 2001 From: digital-gnome <31593470+digital-gnome@users.noreply.github.com> Date: Tue, 21 Nov 2017 22:49:27 -0500 Subject: [PATCH 05/23] Add scaleToFit to frame view Changes navigation to use flexbox because absolute positioning was messing with scaletofit. Also makes frame view respect scale choice --- web/skins/classic/css/classic/views/frame.css | 23 ++--------- web/skins/classic/css/dark/views/frame.css | 23 ++--------- web/skins/classic/css/flat/views/frame.css | 22 +---------- web/skins/classic/views/frame.php | 2 +- web/skins/classic/views/js/event.js.php | 1 + web/skins/classic/views/js/frame.js | 38 ++++++++++++++----- web/skins/classic/views/js/frame.js.php | 1 + 7 files changed, 40 insertions(+), 70 deletions(-) diff --git a/web/skins/classic/css/classic/views/frame.css b/web/skins/classic/css/classic/views/frame.css index 85c8cd11c..c9cb1846c 100644 --- a/web/skins/classic/css/classic/views/frame.css +++ b/web/skins/classic/css/classic/views/frame.css @@ -1,33 +1,16 @@ #scaleControl { float: right; } + #controls { width: 80%; text-align: center; margin: 0 auto; + display: flex; + justify-content: space-between; } #controls a { width: 40px; margin-left: -20px; } - -#firstLink { - position: absolute; - left: 13%; -} - -#prevLink { - position: absolute; - left: 37%; -} - -#nextLink { - position: absolute; - left: 63%; -} - -#lastLink { - position: absolute; - left: 87%; -} diff --git a/web/skins/classic/css/dark/views/frame.css b/web/skins/classic/css/dark/views/frame.css index 85c8cd11c..c9cb1846c 100644 --- a/web/skins/classic/css/dark/views/frame.css +++ b/web/skins/classic/css/dark/views/frame.css @@ -1,33 +1,16 @@ #scaleControl { float: right; } + #controls { width: 80%; text-align: center; margin: 0 auto; + display: flex; + justify-content: space-between; } #controls a { width: 40px; margin-left: -20px; } - -#firstLink { - position: absolute; - left: 13%; -} - -#prevLink { - position: absolute; - left: 37%; -} - -#nextLink { - position: absolute; - left: 63%; -} - -#lastLink { - position: absolute; - left: 87%; -} diff --git a/web/skins/classic/css/flat/views/frame.css b/web/skins/classic/css/flat/views/frame.css index 9e3e94da1..c9cb1846c 100644 --- a/web/skins/classic/css/flat/views/frame.css +++ b/web/skins/classic/css/flat/views/frame.css @@ -6,29 +6,11 @@ width: 80%; text-align: center; margin: 0 auto; + display: flex; + justify-content: space-between; } #controls a { width: 40px; margin-left: -20px; } - -#firstLink { - position: absolute; - left: 13%; -} - -#prevLink { - position: absolute; - left: 37%; -} - -#nextLink { - position: absolute; - left: 63%; -} - -#lastLink { - position: absolute; - left: 87%; -} diff --git a/web/skins/classic/views/frame.php b/web/skins/classic/views/frame.php index 4d526b683..2e6bfb7b8 100644 --- a/web/skins/classic/views/frame.php +++ b/web/skins/classic/views/frame.php @@ -51,7 +51,7 @@ $lastFid = $maxFid; $alarmFrame = $Frame->Type()=='Alarm'; if ( isset( $_REQUEST['scale'] ) ) { - $scale = validInt($_REQUEST['scale']); + $scale = $_REQUEST['scale']; } else if ( isset( $_COOKIE['zmWatchScale'.$Monitor->Id()] ) ) { $scale = $_COOKIE['zmWatchScale'.$Monitor->Id()]; } else if ( isset( $_COOKIE['zmWatchScale'] ) ) { diff --git a/web/skins/classic/views/js/event.js.php b/web/skins/classic/views/js/event.js.php index 4187b4be1..dbdc5c514 100644 --- a/web/skins/classic/views/js/event.js.php +++ b/web/skins/classic/views/js/event.js.php @@ -48,6 +48,7 @@ var canEditEvents = ; var streamTimeout = ; var canStreamNative = ; +var streamMode = ''; // // Strings diff --git a/web/skins/classic/views/js/frame.js b/web/skins/classic/views/js/frame.js index 0705032bc..bff17a7ac 100644 --- a/web/skins/classic/views/js/frame.js +++ b/web/skins/classic/views/js/frame.js @@ -1,15 +1,35 @@ function changeScale() { - var scale = $('scale').get('value'); - var img = $('frameImg'); - if ( img ) { - var baseWidth = $('base_width').value; - var baseHeight = $('base_height').value; - var newWidth = ( baseWidth * scale ) / SCALE_BASE; - var newHeight = ( baseHeight * scale ) / SCALE_BASE; + let scale = $j('#scale').val(); + let img = $j('#frameImg'); + let controlsLinks = { + next: $j('#nextLink'), + prev: $j('#prevLink'), + first: $j('#firstLink'), + last: $j('#lastLink') + } - img.style.width = newWidth + "px"; - img.style.height = newHeight + "px"; + if (img) { + let baseWidth = $j('#base_width').val(); + let baseHeight = $j('#base_height').val(); + if (scale == "auto") { + let newSize = scaleToFit(baseWidth, baseHeight, img, $j('#controls')); + newWidth = newSize.width; + newHeight = newSize.height; + autoScale = newSize.autoScale; + } else { + $j(window).off('resize', endOfResize); //remove resize handler when Scale to Fit is not active + newWidth = baseWidth * scale / SCALE_BASE; + newHeight = baseHeight * scale / SCALE_BASE; + } + img.css('width', newWidth + "px"); + img.css('height', newHeight + "px"); } Cookie.write( 'zmWatchScale', scale, { duration: 10*365 } ); + $j.each(controlsLinks, function(k, anchor) { //Make frames respect scale choices + anchor.prop('href', anchor.prop('href').replace(/scale=.*&/, 'scale=' + scale + '&')); + + }); } +if (scale == "auto") $j(document).ready(changeScale); + diff --git a/web/skins/classic/views/js/frame.js.php b/web/skins/classic/views/js/frame.js.php index dff39cdab..3964ef436 100644 --- a/web/skins/classic/views/js/frame.js.php +++ b/web/skins/classic/views/js/frame.js.php @@ -1,2 +1,3 @@ +var scale = ""; var SCALE_BASE = ; From ac3dbfbc23beeb7953e8ce2e39e61e63f7ca77c5 Mon Sep 17 00:00:00 2001 From: digital-gnome <31593470+digital-gnome@users.noreply.github.com> Date: Tue, 21 Nov 2017 22:56:22 -0500 Subject: [PATCH 06/23] Fix Typo --- web/skins/classic/css/classic/views/event.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/skins/classic/css/classic/views/event.css b/web/skins/classic/css/classic/views/event.css index 100f53266..8f67cc50d 100644 --- a/web/skins/classic/css/classic/views/event.css +++ b/web/skins/classic/css/classic/views/event.css @@ -45,7 +45,7 @@ span.noneCue { #eventVideo { display: inline-block; - postion: relative; + position: relative; } #menuBar1 { From b01fed111a4f72d0dc4492c278b5398bb5dd1721 Mon Sep 17 00:00:00 2001 From: digital-gnome <31593470+digital-gnome@users.noreply.github.com> Date: Wed, 22 Nov 2017 22:44:56 -0500 Subject: [PATCH 07/23] Add zoom transition --- web/skins/classic/js/video-js-skin.css | 1 + 1 file changed, 1 insertion(+) diff --git a/web/skins/classic/js/video-js-skin.css b/web/skins/classic/js/video-js-skin.css index f83729e00..71ee696bf 100644 --- a/web/skins/classic/js/video-js-skin.css +++ b/web/skins/classic/js/video-js-skin.css @@ -1,5 +1,6 @@ .vjs-tech { pointer-events: none; + transition: transform .25s; } .vjs-captions-button { From abba086d08f2ca680cb10b3f6081df2a4d65c34e Mon Sep 17 00:00:00 2001 From: digital-gnome <31593470+digital-gnome@users.noreply.github.com> Date: Wed, 22 Nov 2017 22:52:52 -0500 Subject: [PATCH 08/23] Progressbox transition --- web/skins/classic/css/classic/views/event.css | 1 + web/skins/classic/css/dark/views/event.css | 1 + web/skins/classic/css/flat/views/event.css | 1 + 3 files changed, 3 insertions(+) diff --git a/web/skins/classic/css/classic/views/event.css b/web/skins/classic/css/classic/views/event.css index 8f67cc50d..73dbe9400 100644 --- a/web/skins/classic/css/classic/views/event.css +++ b/web/skins/classic/css/classic/views/event.css @@ -190,6 +190,7 @@ span.noneCue { } #progressBar .progressBox { + transition: width .1s; height: 1.5em; background: rgba(170, 170, 170, .7); } diff --git a/web/skins/classic/css/dark/views/event.css b/web/skins/classic/css/dark/views/event.css index b206535d4..adb7dcef4 100644 --- a/web/skins/classic/css/dark/views/event.css +++ b/web/skins/classic/css/dark/views/event.css @@ -172,6 +172,7 @@ span.noneCue { } #progressBar .progressBox { + transition: width .1s; height: 1.5em; background: rgba(170, 170, 170, .7); } diff --git a/web/skins/classic/css/flat/views/event.css b/web/skins/classic/css/flat/views/event.css index 41cad61dd..22b33d4d8 100644 --- a/web/skins/classic/css/flat/views/event.css +++ b/web/skins/classic/css/flat/views/event.css @@ -183,6 +183,7 @@ span.noneCue { } #progressBar .progressBox { + transition: width .1s; height: 1.5em; background: rgba(170, 170, 170, .7); } From b506466a70a5ee3cf37319024f5806409332f3c6 Mon Sep 17 00:00:00 2001 From: digital-gnome <31593470+digital-gnome@users.noreply.github.com> Date: Thu, 23 Nov 2017 16:24:57 -0500 Subject: [PATCH 09/23] Change alarmcues to accept arbitrary containing element --- web/skins/classic/css/classic/views/event.css | 6 ++++-- web/skins/classic/css/dark/views/event.css | 6 ++++-- web/skins/classic/css/flat/views/event.css | 6 ++++-- web/skins/classic/views/event.php | 2 +- web/skins/classic/views/js/event.js | 8 ++++---- 5 files changed, 17 insertions(+), 11 deletions(-) diff --git a/web/skins/classic/css/classic/views/event.css b/web/skins/classic/css/classic/views/event.css index 73dbe9400..ed1800db2 100644 --- a/web/skins/classic/css/classic/views/event.css +++ b/web/skins/classic/css/classic/views/event.css @@ -12,15 +12,17 @@ .alarmCue { background-color: #222222; - height: 1.5em; + height: 1.25em; text-align: left; margin: 0 auto 0 auto; + border-radius: 0 0 .3em .3em; } .alarmCue span { background-color:red; - height: 1.5em; + height: 100%; display: inline-block; + border-radius: 0; } span.noneCue { diff --git a/web/skins/classic/css/dark/views/event.css b/web/skins/classic/css/dark/views/event.css index adb7dcef4..17a9007df 100644 --- a/web/skins/classic/css/dark/views/event.css +++ b/web/skins/classic/css/dark/views/event.css @@ -12,15 +12,17 @@ .alarmCue { background-color: #222222; - height: 1.5em; + height: 1.25em; text-align: left; margin: 0 auto 0 auto; + border-radius: 0 0 .3em .3em; } .alarmCue span { background-color:red; - height: 1.5em; + height: 100%; display: inline-block; + border-radius: 0; } span.noneCue { diff --git a/web/skins/classic/css/flat/views/event.css b/web/skins/classic/css/flat/views/event.css index 22b33d4d8..6db2f7f37 100644 --- a/web/skins/classic/css/flat/views/event.css +++ b/web/skins/classic/css/flat/views/event.css @@ -12,15 +12,17 @@ .alarmCue { background-color: #222222; - height: 1.5em; + height: 1.25em; text-align: left; margin: 0 auto 0 auto; + border-radius: 0 0 .3em .3em; } .alarmCue span { background-color:red; - height: 1.5em; + height: 100%; display: inline-block; + border-radius: 0; } span.noneCue { diff --git a/web/skins/classic/views/event.php b/web/skins/classic/views/event.php index 2167b510b..96ca3d755 100644 --- a/web/skins/classic/views/event.php +++ b/web/skins/classic/views/event.php @@ -180,7 +180,7 @@ Warning("Streamsrc: $streamSrc"); } } // end if stream method ?> -
+
diff --git a/web/skins/classic/views/js/event.js b/web/skins/classic/views/js/event.js index 74ab389eb..d18b90153 100644 --- a/web/skins/classic/views/js/event.js +++ b/web/skins/classic/views/js/event.js @@ -50,13 +50,13 @@ function initialAlarmCues (eventId) { function setAlarmCues (data) { cueFrames = data.frames; - alarmSpans = renderAlarmCues(); + alarmSpans = renderAlarmCues(vid ? $j("#videoobj") : $j("#evtStream"));//use videojs width or zms width $j(".alarmCue").html(alarmSpans); } -function renderAlarmCues () { +function renderAlarmCues (containerEl) { if (cueFrames) { - var cueRatio = (vid ? $j("#videoobj").width() : $j("#evtStream").width()) / (cueFrames[cueFrames.length - 1].Delta * 100);//use videojs width or zms width + var cueRatio = containerEl.width() / (cueFrames[cueFrames.length - 1].Delta * 100); var minAlarm = Math.ceil(1/cueRatio); var spanTimeStart = 0; var spanTimeEnd = 0; @@ -158,7 +158,7 @@ function changeScale() { alarmCue.width(newWidth); drawProgressBar(); } - alarmCue.html(renderAlarmCues());//just re-render alarmCues. skip ajax call + alarmCue.html(renderAlarmCues(vid ? $j("#videoobj") : $j("#evtStream")));//just re-render alarmCues. skip ajax call if (scale == "auto") { Cookie.write('zmEventScaleAuto', 'auto', {duration: 10*365}); }else{ From 136f0e90f53663dddab0b9a37852590d14293179 Mon Sep 17 00:00:00 2001 From: digital-gnome <31593470+digital-gnome@users.noreply.github.com> Date: Fri, 24 Nov 2017 20:26:48 -0500 Subject: [PATCH 10/23] Fix autoscale on stills view Switching from stills view and changing the window would make stream view go crazy. Changed to autoscale on switch --- web/skins/classic/views/js/event.js | 32 +++++++++++++++++++---------- 1 file changed, 21 insertions(+), 11 deletions(-) diff --git a/web/skins/classic/views/js/event.js b/web/skins/classic/views/js/event.js index d18b90153..cf8a46de4 100644 --- a/web/skins/classic/views/js/event.js +++ b/web/skins/classic/views/js/event.js @@ -136,11 +136,19 @@ function setButtonState( element, butClass ) { function changeScale() { let scale = $j('#scale').val(); - let newWidth = null; - let newHeight = null; - let autoScale = null; + let newWidth; + let newHeight; + let autoScale; + let eventViewer; + let alarmCue = $j('div.alarmCue'); + let bottomEl = streamMode == 'stills' ? $j('#eventImageNav') : $j('#replayStatus'); + if (streamMode == 'stills') { + eventViewer = $j('#eventThumbs'); + } else { + eventViewer = $j(vid ? '#videoobj' : '#evtStream'); + } if (scale == "auto") { - let newSize = scaleToFit(eventData.Width, eventData.Height, $j(vid ? '#videoobj' : '#evtStream'), $j('#replayStatus')); + let newSize = scaleToFit(eventData.Width, eventData.Height, eventViewer, bottomEl); newWidth = newSize.width; newHeight = newSize.height; autoScale = newSize.autoScale; @@ -149,16 +157,18 @@ function changeScale() { newWidth = eventData.Width * scale / SCALE_BASE; newHeight = eventData.Height * scale / SCALE_BASE; } - let alarmCue = $j('div.alarmCue'); - let eventViewer = $j(vid ? '#videoobj' : '#evtStream') - eventViewer.width(newWidth); + if (!(streamMode == 'stills')) eventViewer.width(newWidth); //stills handles its own width eventViewer.height(newHeight); if ( !vid ) { // zms needs extra sizing streamScale(scale == "auto" ? autoScale : scale); - alarmCue.width(newWidth); drawProgressBar(); } - alarmCue.html(renderAlarmCues(vid ? $j("#videoobj") : $j("#evtStream")));//just re-render alarmCues. skip ajax call + if (streamMode == 'stills') { + slider.autosize(); + alarmCue.html(renderAlarmCues($j('#thumbsSliderPanel'))); + } else { + alarmCue.html(renderAlarmCues(eventViewer));//just re-render alarmCues. skip ajax call + } if (scale == "auto") { Cookie.write('zmEventScaleAuto', 'auto', {duration: 10*365}); }else{ @@ -671,8 +681,6 @@ function resetEventStills() { } } ).set( 0 ); } - if ( $('eventThumbs').getStyle( 'height' ).match( /^\d+/ ) < (parseInt(eventData.Height)+80) ) - $('eventThumbs').setStyle( 'height', ($j(vid ? '#videoobj' : '#evtStream').height())+'px' ); } function getFrameResponse( respObj, respText ) { @@ -861,6 +869,7 @@ function showStream() { $('streamEvent').addClass( 'hidden' ); streamMode = 'video'; + if (scale == 'auto') changeScale(); } function showStills() { @@ -892,6 +901,7 @@ function showStills() { ); } resetEventStills(); + if (scale == 'auto') changeScale(); } function showFrameStats() { From 18dc515ba4a75217c9a7525f982e41d75d197564 Mon Sep 17 00:00:00 2001 From: digital-gnome <31593470+digital-gnome@users.noreply.github.com> Date: Fri, 24 Nov 2017 20:28:08 -0500 Subject: [PATCH 11/23] stills view loads image when slider used Stills view now loads the selected image if an image is being viewed and the slider is used. --- web/skins/classic/css/classic/views/event.css | 1 + web/skins/classic/css/dark/views/event.css | 1 + web/skins/classic/css/flat/views/event.css | 1 + web/skins/classic/views/js/event.js | 3 ++- 4 files changed, 5 insertions(+), 1 deletion(-) diff --git a/web/skins/classic/css/classic/views/event.css b/web/skins/classic/css/classic/views/event.css index ed1800db2..dc6bec9c4 100644 --- a/web/skins/classic/css/classic/views/event.css +++ b/web/skins/classic/css/classic/views/event.css @@ -226,6 +226,7 @@ span.noneCue { } #eventImagePanel { + display: none; position: absolute; top: 0; left: 0; diff --git a/web/skins/classic/css/dark/views/event.css b/web/skins/classic/css/dark/views/event.css index 17a9007df..f0bbdac24 100644 --- a/web/skins/classic/css/dark/views/event.css +++ b/web/skins/classic/css/dark/views/event.css @@ -209,6 +209,7 @@ span.noneCue { } #eventImagePanel { + display: none; position: absolute; top: 0; left: 0; diff --git a/web/skins/classic/css/flat/views/event.css b/web/skins/classic/css/flat/views/event.css index 6db2f7f37..eab558994 100644 --- a/web/skins/classic/css/flat/views/event.css +++ b/web/skins/classic/css/flat/views/event.css @@ -220,6 +220,7 @@ span.noneCue { } #eventImagePanel { + display: none; position: absolute; top: 0; left: 0; diff --git a/web/skins/classic/views/js/event.js b/web/skins/classic/views/js/event.js index cf8a46de4..2fbb3e68a 100644 --- a/web/skins/classic/views/js/event.js +++ b/web/skins/classic/views/js/event.js @@ -483,6 +483,7 @@ function streamQuery() { var slider = null; var scroll = null; +var currEventId = null; var CurEventDefVideoPath = null; function getEventResponse( respObj, respText ) { @@ -676,7 +677,7 @@ function resetEventStills() { fid = 1; else if ( fid > eventData.Frames ) fid = eventData.Frames; - checkFrames( eventData.Id, fid ); + checkFrames( eventData.Id, fid, ($j('#eventImagePanel').css('display')=='none'?'':'true')); scroll.toElement( 'eventThumb'+fid ); } } ).set( 0 ); From a81c35d377064ccef5052434740fbbf5a25a9e88 Mon Sep 17 00:00:00 2001 From: digital-gnome <31593470+digital-gnome@users.noreply.github.com> Date: Fri, 24 Nov 2017 20:56:07 -0500 Subject: [PATCH 12/23] Cleanup unused code event.css --- web/skins/classic/css/flat/views/event.css | 58 ---------------------- 1 file changed, 58 deletions(-) diff --git a/web/skins/classic/css/flat/views/event.css b/web/skins/classic/css/flat/views/event.css index eab558994..88aec52ad 100644 --- a/web/skins/classic/css/flat/views/event.css +++ b/web/skins/classic/css/flat/views/event.css @@ -295,61 +295,3 @@ span.noneCue { display: inline-block; position: relative; } - -#video-controls { - position: absolute; - bottom: 0; - left: 0; - right: 0; - padding: 5px; - opacity: 0; - -webkit-transition: opacity .3s; - -moz-transition: opacity .3s; - -o-transition: opacity .3s; - -ms-transition: opacity .3s; - transition: opacity .3s; - background-image: linear-gradient(bottom, rgb(3,113,168) 13%, rgb(0,136,204) 100%); - background-image: -o-linear-gradient(bottom, rgb(3,113,168) 13%, rgb(0,136,204) 100%); - background-image: -moz-linear-gradient(bottom, rgb(3,113,168) 13%, rgb(0,136,204) 100%); - background-image: -webkit-linear-gradient(bottom, rgb(3,113,168) 13%, rgb(0,136,204) 100%); - background-image: -ms-linear-gradient(bottom, rgb(3,113,168) 13%, rgb(0,136,204) 100%); - - background-image: -webkit-gradient( - linear, - left bottom, - left top, - color-stop(0.13, rgb(3,113,168)), - color-stop(1, rgb(0,136,204)) - ); -} - -#eventVideo:hover #video-controls { - opacity: .9; -} - -button { - background: rgba(0,0,0,.5); - border: 0; - color: #EEE; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - -o-border-radius: 3px; - border-radius: 3px; - padding: 0; -} - -button:hover { - cursor: pointer; -} - -#seekbar { - width: 360px; - border: 0; - padding: 0; -} - -#volume-bar { - width: 60px; - border: 0; - padding: 0; -} From c92b3a94084826839cd4f4c82d286d56cb9bf440 Mon Sep 17 00:00:00 2001 From: digital-gnome <31593470+digital-gnome@users.noreply.github.com> Date: Fri, 24 Nov 2017 21:07:46 -0500 Subject: [PATCH 13/23] Converge stills view and stream view Make the stills view look more like stream view. Moved slider up to be like a scrub bar, added alarmcues. --- web/skins/classic/css/classic/views/event.css | 31 ++++++++++--------- web/skins/classic/css/dark/views/event.css | 31 ++++++++++--------- web/skins/classic/css/flat/views/event.css | 31 ++++++++++--------- web/skins/classic/views/event.php | 13 ++++---- 4 files changed, 55 insertions(+), 51 deletions(-) diff --git a/web/skins/classic/css/classic/views/event.css b/web/skins/classic/css/classic/views/event.css index dc6bec9c4..92c5169b1 100644 --- a/web/skins/classic/css/classic/views/event.css +++ b/web/skins/classic/css/classic/views/event.css @@ -186,15 +186,16 @@ span.noneCue { #progressBar { position: relative; - top: -1.5em; - height: 1.5em; - margin: 0 auto -1.5em auto; + top: -1.25em; + height: 1.25em; + margin: 0 auto -1.25em auto; } #progressBar .progressBox { transition: width .1s; - height: 1.5em; + height: 100%; background: rgba(170, 170, 170, .7); + border-radius: 0 0 .3em .3em; } #eventStills { @@ -271,7 +272,7 @@ span.noneCue { #eventImageNav { position: relative; - margin: 4px 0 0 0; + margin: 0 0 4px 0; } #eventImageNav input { @@ -280,20 +281,20 @@ span.noneCue { } #thumbsSliderPanel { - width: 400px; - margin: 4px auto 0; - background: #888888; - padding: 1px; + width: 80%; + margin: 0px auto 4px auto; } #thumbsSlider { - width: 400px; - height: 10px; - background: #dddddd; + width: 100%; + height: 1.25em; + position: relative; + top: -1.25em; + margin: 0 0 -1.25em 0; } #thumbsKnob { - width: 8px; - height: 10px; - background-color: #444444; + width: 1em; + height: 100%; + background-color: #999999; } diff --git a/web/skins/classic/css/dark/views/event.css b/web/skins/classic/css/dark/views/event.css index f0bbdac24..21f186f37 100644 --- a/web/skins/classic/css/dark/views/event.css +++ b/web/skins/classic/css/dark/views/event.css @@ -168,15 +168,16 @@ span.noneCue { #progressBar { position: relative; - top: -1.5em; - height: 1.5em; - margin: 0 auto -1.5em auto; + top: -1.25em; + height: 1.25em; + margin: 0 auto -1.25em auto; } #progressBar .progressBox { transition: width .1s; - height: 1.5em; + height: 100%; background: rgba(170, 170, 170, .7); + border-radius: 0 0 .3em .3em; } #eventStills { @@ -254,7 +255,7 @@ span.noneCue { #eventImageNav { position: relative; - margin: 4px 0 0 0; + margin: 0 0 4px 0; } #eventImageNav input { @@ -263,16 +264,16 @@ span.noneCue { } #thumbsSliderPanel { - width: 400px; - margin: 4px auto 0; - background: #888888; - padding: 1px; + width: 80%; + margin: 0px auto 4px auto; } #thumbsSlider { - width: 400px; - height: 10px; - background: #dddddd; + width: 100%; + height: 1.25em; + position: relative; + top: -1.25em; + margin: 0 0 -1.25em 0; } #eventVideo { @@ -281,7 +282,7 @@ span.noneCue { } #thumbsKnob { - width: 8px; - height: 10px; - background-color: #444444; + width: 1em; + height: 100%; + background-color: #999999; } diff --git a/web/skins/classic/css/flat/views/event.css b/web/skins/classic/css/flat/views/event.css index 88aec52ad..242cf04b1 100644 --- a/web/skins/classic/css/flat/views/event.css +++ b/web/skins/classic/css/flat/views/event.css @@ -179,15 +179,16 @@ span.noneCue { #progressBar { position: relative; - top: -1.5em; - height: 1.5em; - margin: 0 auto -1.5em auto; + top: -1.25em; + height: 1.25em; + margin: 0 auto -1.25em auto; } #progressBar .progressBox { transition: width .1s; - height: 1.5em; + height: 100%; background: rgba(170, 170, 170, .7); + border-radius: 0 0 .3em .3em; } #eventStills { @@ -265,7 +266,7 @@ span.noneCue { #eventImageNav { position: relative; - margin: 4px 0 0 0; + margin: 0 0 4px 0; } #eventImageNav input { @@ -274,22 +275,22 @@ span.noneCue { } #thumbsSliderPanel { - width: 400px; - margin: 4px auto 0; - background: #888888; - padding: 1px; + width: 80%; + margin: 0px auto 4px auto; } #thumbsSlider { - width: 400px; - height: 10px; - background: #dddddd; + width: 100%; + height: 1.25em; + position: relative; + top: -1.25em; + margin: 0 0 -1.25em 0; } #thumbsKnob { - width: 8px; - height: 10px; - background-color: #444444; + width: 1em; + height: 100%; + background-color: #999999; } #eventVideo { display: inline-block; diff --git a/web/skins/classic/views/event.php b/web/skins/classic/views/event.php index 96ca3d755..ead8e9c9c 100644 --- a/web/skins/classic/views/event.php +++ b/web/skins/classic/views/event.php @@ -220,6 +220,13 @@ Warning("Streamsrc: $streamSrc");
+
+
+
+
+
+
+
@@ -230,12 +237,6 @@ Warning("Streamsrc: $streamSrc");
-
-
-
-
-
-
Date: Tue, 28 Nov 2017 12:11:07 -0500 Subject: [PATCH 14/23] Cleanup css Remove repeated block, move eventVideo to the same location in all files --- web/skins/classic/css/classic/views/event.css | 10 +++++----- web/skins/classic/css/dark/views/event.css | 8 ++++---- web/skins/classic/css/flat/views/event.css | 20 ++++++------------- 3 files changed, 15 insertions(+), 23 deletions(-) diff --git a/web/skins/classic/css/classic/views/event.css b/web/skins/classic/css/classic/views/event.css index 92c5169b1..dbcc30835 100644 --- a/web/skins/classic/css/classic/views/event.css +++ b/web/skins/classic/css/classic/views/event.css @@ -45,11 +45,6 @@ span.noneCue { padding: 2px; } -#eventVideo { - display: inline-block; - position: relative; -} - #menuBar1 { width: 100%; padding: 3px 0; @@ -119,6 +114,11 @@ span.noneCue { float: right; } +#eventVideo { + display: inline-block; + position: relative; +} + #imageFeed { display: inline-block; position: relative; diff --git a/web/skins/classic/css/dark/views/event.css b/web/skins/classic/css/dark/views/event.css index 21f186f37..6b5709633 100644 --- a/web/skins/classic/css/dark/views/event.css +++ b/web/skins/classic/css/dark/views/event.css @@ -29,10 +29,6 @@ span.noneCue { background: none; } -#eventVideo { - display: inline-block; -} - #dataBar { width: 100%; margin: 2px auto; @@ -101,6 +97,10 @@ span.noneCue { visibility: hidden; } +#eventVideo { + display: inline-block; +} + #imageFeed { display: inline-block; position: relative; diff --git a/web/skins/classic/css/flat/views/event.css b/web/skins/classic/css/flat/views/event.css index 242cf04b1..30758b573 100644 --- a/web/skins/classic/css/flat/views/event.css +++ b/web/skins/classic/css/flat/views/event.css @@ -52,7 +52,6 @@ span.noneCue { clear: both; } - #menuBar1 #nameControl { float: left; } @@ -87,15 +86,6 @@ span.noneCue { float: right; text-align: right; } -#menuBar1:after, -#menuBar2:after { - content: "."; - display: block; - height: 0; - font-size: 0; - clear: both; - visibility: hidden; -} #menuBar1:after, #menuBar2:after { @@ -106,6 +96,12 @@ span.noneCue { clear: both; visibility: hidden; } + +#eventVideo { + display: inline-block; + position: relative; +} + #imageFeed { display: inline-block; position: relative; @@ -292,7 +288,3 @@ span.noneCue { height: 100%; background-color: #999999; } -#eventVideo { - display: inline-block; - position: relative; -} From 07b0bf81c13b8eb048cfa555fa96c69ee6443005 Mon Sep 17 00:00:00 2001 From: digital-gnome <31593470+digital-gnome@users.noreply.github.com> Date: Tue, 28 Nov 2017 12:30:00 -0500 Subject: [PATCH 15/23] More cleanup --- web/skins/classic/css/dark/views/event.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/web/skins/classic/css/dark/views/event.css b/web/skins/classic/css/dark/views/event.css index 6b5709633..a156c2438 100644 --- a/web/skins/classic/css/dark/views/event.css +++ b/web/skins/classic/css/dark/views/event.css @@ -276,11 +276,6 @@ span.noneCue { margin: 0 0 -1.25em 0; } -#eventVideo { - display: inline-block; - position: relative; -} - #thumbsKnob { width: 1em; height: 100%; From 3cdb965c4aa90fb5f5e83dfca5d39480d88f2b18 Mon Sep 17 00:00:00 2001 From: digital-gnome <31593470+digital-gnome@users.noreply.github.com> Date: Tue, 28 Nov 2017 21:27:46 -0500 Subject: [PATCH 16/23] Fix dark theme console Hover was using the mostly white from classic and flat. Added the striped look from classic and flat. --- web/skins/classic/css/dark/skin.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/web/skins/classic/css/dark/skin.css b/web/skins/classic/css/dark/skin.css index 799a2ba7c..d8115a41b 100644 --- a/web/skins/classic/css/dark/skin.css +++ b/web/skins/classic/css/dark/skin.css @@ -534,8 +534,10 @@ input[type=submit]:disabled { margin-left: 0; } - .table-striped > tbody > tr:nth-of-type(2n+1) { - background: none; + background-color: #333333; } +.table-hover>tbody>tr:hover { + background-color: #444444; +} From f8c3e5573e5bcf55f488927ac23bf01401d925f6 Mon Sep 17 00:00:00 2001 From: digital-gnome <31593470+digital-gnome@users.noreply.github.com> Date: Tue, 28 Nov 2017 21:39:31 -0500 Subject: [PATCH 17/23] Change dark theme buttons to match original colors --- web/skins/classic/css/dark/skin.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/web/skins/classic/css/dark/skin.css b/web/skins/classic/css/dark/skin.css index d8115a41b..3bd2ad1e3 100644 --- a/web/skins/classic/css/dark/skin.css +++ b/web/skins/classic/css/dark/skin.css @@ -460,9 +460,9 @@ th.table-th-sort-rev span.table-th-sort-span { button, input[type=button], input[type=submit] { - background-color: #3498db; - color: #fff; - border-color: #3498db; + background-color: #444444; + color: #eeeeee; + border-color: #444444; text-transform: uppercase; font-weight: 200; padding: 5px 10px; @@ -472,7 +472,7 @@ input[type=submit] { button:hover, input[type=button]:hover, input[type=submit]:hover { - background-color: #34a2ee; + background-color: #555555; } @@ -482,9 +482,9 @@ button:disabled, input[disabled], input[type=button]:disabled, input[type=submit]:disabled { - color: #ffffff; - background-color: #aaaaaa; - border-color: #bbbbbb; + color: #888888; + background-color: #666666; + border-color: #666666; } /* From 83a37732ce1a8c77e008881c35e17162dd97313a Mon Sep 17 00:00:00 2001 From: digital-gnome <31593470+digital-gnome@users.noreply.github.com> Date: Thu, 30 Nov 2017 09:44:34 -0500 Subject: [PATCH 18/23] Fix montage view jumping Need to override bootstrap styling --- web/skins/classic/css/classic/views/montage.css | 4 ++++ web/skins/classic/css/dark/views/montage.css | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/web/skins/classic/css/classic/views/montage.css b/web/skins/classic/css/classic/views/montage.css index d2eb33ec2..ae56ebc9b 100644 --- a/web/skins/classic/css/classic/views/montage.css +++ b/web/skins/classic/css/classic/views/montage.css @@ -19,6 +19,10 @@ #monitors .alert { color: #ffa500; + margin: 0; + padding: 0; + border-radius: 0; + border: none; } #monitors .imageFeed { diff --git a/web/skins/classic/css/dark/views/montage.css b/web/skins/classic/css/dark/views/montage.css index 85306393d..005569117 100644 --- a/web/skins/classic/css/dark/views/montage.css +++ b/web/skins/classic/css/dark/views/montage.css @@ -16,6 +16,10 @@ #monitors .alert { color: #ffa500; + margin: 0; + padding: 0; + border-radius: 0; + border: none; } #monitors .imageFeed { From 0a995aea78a2fcc65c172d27ef5a9cb791dc4f4c Mon Sep 17 00:00:00 2001 From: digital-gnome <31593470+digital-gnome@users.noreply.github.com> Date: Wed, 29 Nov 2017 23:04:38 -0500 Subject: [PATCH 19/23] Add navbar refresh to all pages that use it --- .../lib/ZoneMinder/ConfigData.pm.in | 30 +++++++++++++++++++ web/ajax/status.php | 4 +++ web/skins/classic/includes/config.php | 3 ++ web/skins/classic/includes/functions.php | 9 ++++-- web/skins/classic/js/skin.js | 14 +++++++++ web/skins/classic/js/skin.js.php | 2 ++ web/skins/classic/views/js/event.js | 2 -- 7 files changed, 59 insertions(+), 5 deletions(-) diff --git a/scripts/ZoneMinder/lib/ZoneMinder/ConfigData.pm.in b/scripts/ZoneMinder/lib/ZoneMinder/ConfigData.pm.in index 820a5d980..238eae2e7 100644 --- a/scripts/ZoneMinder/lib/ZoneMinder/ConfigData.pm.in +++ b/scripts/ZoneMinder/lib/ZoneMinder/ConfigData.pm.in @@ -2933,6 +2933,16 @@ our @options = ( type => $types{integer}, category => 'highband', }, + { + name => 'ZM_WEB_H_REFRESH_NAVBAR', + default => '5', + description => 'How often (in seconds) the navigation header should refresh itself', + help => q` + The navigation header contains the general status information about server load and storage space. + `, + type => $types{integer}, + category => 'highband', + }, { name => 'ZM_WEB_H_REFRESH_CYCLE', default => '10', @@ -3196,6 +3206,16 @@ our @options = ( `, category => 'medband', }, + { + name => 'ZM_WEB_M_REFRESH_NAVBAR', + default => '15', + description => 'How often (in seconds) the navigation header should refresh itself', + help => q` + The navigation header contains the general status information about server load and storage space. + `, + type => $types{integer}, + category => 'medband', + }, { name => 'ZM_WEB_M_REFRESH_CYCLE', default => '20', @@ -3459,6 +3479,16 @@ our @options = ( type => $types{integer}, category => 'lowband', }, + { + name => 'ZM_WEB_L_REFRESH_NAVBAR', + default => '35', + description => 'How often (in seconds) the navigation header should refresh itself', + help => q` + The navigation header contains the general status information about server load and storage space. + `, + type => $types{integer}, + category => 'lowband', + }, { name => 'ZM_WEB_L_REFRESH_CYCLE', default => '30', diff --git a/web/ajax/status.php b/web/ajax/status.php index 3941a5645..a51669d15 100644 --- a/web/ajax/status.php +++ b/web/ajax/status.php @@ -1,4 +1,8 @@ array( diff --git a/web/skins/classic/includes/config.php b/web/skins/classic/includes/config.php index 763a2b8cc..6128d534f 100644 --- a/web/skins/classic/includes/config.php +++ b/web/skins/classic/includes/config.php @@ -56,6 +56,7 @@ $bandwidth_options = array( switch ( $_COOKIE['zmBandwidth'] ) { case 'high' : { define( 'ZM_WEB_REFRESH_MAIN', ZM_WEB_H_REFRESH_MAIN ); // How often (in seconds) the main console window refreshes + define( 'ZM_WEB_REFRESH_NAVBAR', ZM_WEB_H_REFRESH_NAVBAR ); // How often (in seconds) the nav header refreshes define( 'ZM_WEB_REFRESH_CYCLE', ZM_WEB_H_REFRESH_CYCLE ); // How often the cycle watch windows swaps to the next monitor define( 'ZM_WEB_REFRESH_IMAGE', ZM_WEB_H_REFRESH_IMAGE ); // How often the watched image is refreshed (if not streaming) define( 'ZM_WEB_REFRESH_STATUS', ZM_WEB_H_REFRESH_STATUS ); // How often the little status frame refreshes itself in the watch window @@ -73,6 +74,7 @@ switch ( $_COOKIE['zmBandwidth'] ) { break; } case 'medium' : { define( 'ZM_WEB_REFRESH_MAIN', ZM_WEB_M_REFRESH_MAIN ); // How often (in seconds) the main console window refreshes + define( 'ZM_WEB_REFRESH_NAVBAR', ZM_WEB_M_REFRESH_NAVBAR ); // How often (in seconds) the nav header refreshes define( 'ZM_WEB_REFRESH_CYCLE', ZM_WEB_M_REFRESH_CYCLE ); // How often the cycle watch windows swaps to the next monitor define( 'ZM_WEB_REFRESH_IMAGE', ZM_WEB_M_REFRESH_IMAGE ); // How often the watched image is refreshed (if not streaming) define( 'ZM_WEB_REFRESH_STATUS', ZM_WEB_M_REFRESH_STATUS ); // How often the little status frame refreshes itself in the watch window @@ -90,6 +92,7 @@ switch ( $_COOKIE['zmBandwidth'] ) { break; } case 'low' : { define( 'ZM_WEB_REFRESH_MAIN', ZM_WEB_L_REFRESH_MAIN ); // How often (in seconds) the main console window refreshes + define( 'ZM_WEB_REFRESH_NAVBAR', ZM_WEB_L_REFRESH_NAVBAR ); // How often (in seconds) the nav header refreshes define( 'ZM_WEB_REFRESH_CYCLE', ZM_WEB_L_REFRESH_CYCLE ); // How often the cycle watch windows swaps to the next monitor define( 'ZM_WEB_REFRESH_IMAGE', ZM_WEB_L_REFRESH_IMAGE ); // How often the watched image is refreshed (if not streaming) define( 'ZM_WEB_REFRESH_STATUS', ZM_WEB_L_REFRESH_STATUS ); // How often the little status frame refreshes itself in the watch window diff --git a/web/skins/classic/includes/functions.php b/web/skins/classic/includes/functions.php index 450cf63b3..e3d9f8110 100644 --- a/web/skins/classic/includes/functions.php +++ b/web/skins/classic/includes/functions.php @@ -159,7 +159,7 @@ if ( file_exists( "skins/$skin/css/$css/graphics/favicon.ico" ) ) { - +
@@ -279,7 +282,7 @@ if ( ZM_OPT_X10 && canView( 'Devices' ) ) { ?>
-
+
var AJAX_TIMEOUT = ; +var navBarRefresh = ; + var currentView = ''; var thisUrl = ""; var skinPath = ""; diff --git a/web/skins/classic/views/js/event.js b/web/skins/classic/views/js/event.js index 95460a8f1..f3f4752a7 100644 --- a/web/skins/classic/views/js/event.js +++ b/web/skins/classic/views/js/event.js @@ -40,8 +40,6 @@ function vjsReplay() { } } -$j.ajaxSetup ({timeout: AJAX_TIMEOUT }); //sets timeout for all getJSON. - var cueFrames = null; //make cueFrames availaible even if we don't send another ajax query function initialAlarmCues (eventId) { From 5e953cefeaa8e8133e8d16dddfe4f6aec132dd57 Mon Sep 17 00:00:00 2001 From: Isaac Connor Date: Fri, 1 Dec 2017 12:30:07 -0800 Subject: [PATCH 20/23] fix old cookie causing errors loading layouts --- web/skins/classic/views/montage.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/skins/classic/views/montage.php b/web/skins/classic/views/montage.php index ea2e0a588..30f7d0420 100644 --- a/web/skins/classic/views/montage.php +++ b/web/skins/classic/views/montage.php @@ -78,7 +78,7 @@ if ( isset($_COOKIE['zmMontageLayout']) ) { $options = array(); $Layout = ''; $Positions = ''; -if ( $layout_id ) { +if ( $layout_id and is_numeric($layout_id) and isset($layoutsById[$layout_id]) ) { $Layout = $layoutsById[$layout_id]; $Positions = json_decode( $Layout->Positions(), true ); } From ca3d6546bd5b7fdb613dd84d4c7ebd6732938b57 Mon Sep 17 00:00:00 2001 From: Isaac Connor Date: Fri, 1 Dec 2017 12:30:21 -0800 Subject: [PATCH 21/23] sorty by name when listing monitors by name --- web/skins/classic/views/filter.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/skins/classic/views/filter.php b/web/skins/classic/views/filter.php index 8b8961f8b..dcde7aa19 100644 --- a/web/skins/classic/views/filter.php +++ b/web/skins/classic/views/filter.php @@ -231,7 +231,7 @@ for ( $i = 0; $i < count($terms); $i++ ) { Date: Fri, 1 Dec 2017 10:34:37 -0500 Subject: [PATCH 22/23] Fix timeline by adding StartDateTime --- web/skins/classic/includes/timeline_functions.php | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/web/skins/classic/includes/timeline_functions.php b/web/skins/classic/includes/timeline_functions.php index 6a98a28f7..a1c84f4f3 100644 --- a/web/skins/classic/includes/timeline_functions.php +++ b/web/skins/classic/includes/timeline_functions.php @@ -104,6 +104,10 @@ function parseFilterToTree( $filter ) { $sqlValue = "E.StartTime"; $dtAttr = true; break; + case 'StartDateTime': + $sqlValue = "E.StartTime"; + $dtAttr = true; + break; case 'Date': $sqlValue = "to_days( E.StartTime )"; $dtAttr = true; @@ -196,6 +200,9 @@ function parseFilterToTree( $filter ) { case 'DateTime': $value = "'".strftime( STRF_FMT_DATETIME_DB, strtotime( $value ) )."'"; break; + case 'StartDateTime': + $value = "'".strftime( STRF_FMT_DATETIME_DB, strtotime( $value ) )."'"; + break; case 'Date': $value = "to_days( '".strftime( STRF_FMT_DATETIME_DB, strtotime( $value ) )."' )"; break; From 53f886edc4c3c92abc439ba4b72ec70a0c41783e Mon Sep 17 00:00:00 2001 From: digital-gnome <31593470+digital-gnome@users.noreply.github.com> Date: Fri, 1 Dec 2017 22:15:29 -0500 Subject: [PATCH 23/23] Make navbar refresh not change header links --- web/skins/classic/includes/functions.php | 27 ++++++++++++------------ web/skins/classic/js/skin.js | 2 +- 2 files changed, 15 insertions(+), 14 deletions(-) diff --git a/web/skins/classic/includes/functions.php b/web/skins/classic/includes/functions.php index e3d9f8110..b2e6d17c9 100644 --- a/web/skins/classic/includes/functions.php +++ b/web/skins/classic/includes/functions.php @@ -162,26 +162,21 @@ if ( file_exists( "skins/$skin/css/$css/graphics/favicon.ico" ) ) { function getNavBarHTML($reload = null) { $versionClass = (ZM_DYN_DB_VERSION&&(ZM_DYN_DB_VERSION!=ZM_VERSION))?'errorText':''; - - - ob_start(); global $running; - if ( $running == null ) - $running = daemonCheck(); - $status = $running?translate('Running'):translate('Stopped'); global $user; global $bandwidth_options; global $view; if ($reload === null) { + ob_start(); + if ( $running == null ) + $running = daemonCheck(); + $status = $running?translate('Running'):translate('Stopped'); ?> -
@@ -246,7 +241,11 @@ if ( ZM_OPT_X10 && canView( 'Devices' ) ) { ?>
-
+ +
@@ -280,9 +279,11 @@ if ( ZM_OPT_X10 && canView( 'Devices' ) ) { ?> echo ' ' . ZM_PATH_MAP .': '. getDiskPercent(ZM_PATH_MAP).'%'; ?> -
- -
+ + +