From c39cf77a9cf9bdfe9ea3c7bcf538caca2b1a3003 Mon Sep 17 00:00:00 2001 From: digital-gnome <31593470+digital-gnome@users.noreply.github.com> Date: Sun, 8 Oct 2017 21:42:12 -0400 Subject: [PATCH 1/5] removealarmcuesPHP removed the PHP rendering and placement code --- web/skins/classic/views/event.php | 8 +-- web/skins/classic/views/js/event.js.php | 77 ------------------------- 2 files changed, 1 insertion(+), 84 deletions(-) diff --git a/web/skins/classic/views/event.php b/web/skins/classic/views/event.php index 1be8c378d..4f4242e81 100644 --- a/web/skins/classic/views/event.php +++ b/web/skins/classic/views/event.php @@ -219,7 +219,7 @@ if ( ZM_WEB_STREAM_METHOD == 'mpeg' && ZM_MPEG_LIVE_FORMAT ) {
-
+
@@ -265,11 +265,5 @@ if ( ZM_WEB_STREAM_METHOD == 'mpeg' && ZM_MPEG_LIVE_FORMAT ) { } // end if Event exists ?> - - diff --git a/web/skins/classic/views/js/event.js.php b/web/skins/classic/views/js/event.js.php index 23e6eb827..b8dbd8d94 100644 --- a/web/skins/classic/views/js/event.js.php +++ b/web/skins/classic/views/js/event.js.php @@ -47,80 +47,3 @@ var canStreamNative = ; // var deleteString = ""; var causeString = ""; - -// -// AlarmCues -// -Width(), $scale); - $lastFrame = end($frames); - $lastTime = $lastFrame['Delta'] * 100; - $ratio = $width / $lastTime; - $minAlarm = ceil(1 / $ratio); - $spanTimeStart = 0; - $spanTimeEnd = 0; - $alarmed = 0; - $alarmHtml = ""; - $pixSkewNone = 0; - $pixSkewAlarm = 0; - $skip = 0; - foreach ($frames as $key => $frame) { - if ($frame['Type'] == "Alarm" && $alarmed == 0) { //From nothing to alarm. End nothing and start alarm. - if ($skip > $key) continue; - $alarmed = 1; - if ($frame['Delta'] == 0) continue; //If event starts with alarm - $spanTimeEnd = $frame['Delta'] * 100; - $spanTime = $spanTimeEnd - $spanTimeStart; - $pix = $ratio * $spanTime; - $pixSkewNone += $pix - round($pix); - $pix = round($pix); - if (($pixSkewNone > 1 || $pixSkewNone < -1) && $pix + round($pixSkewNone) > 0) { //add skew if it's a pixel and won't zero span - $pix += round($pixSkewNone); - $pixSkewNone = $pixSkewNone - round($pixSkewNone); - } - $alarmHtml .= ""; - $spanTimeStart = $spanTimeEnd; - } elseif ($frame['Type'] !== "Alarm" && $alarmed == 1) { //from Alarm to nothing. End alarm and start nothing. - if ($skip > $key) continue; - $futNone = 0; - $keyPlus = $key + 1; - while ($futNone < $minAlarm) { //check ahead to see if there's enough for a none. - if (!array_key_exists($keyPlus, $frames )) break; //check if end of event - $futNone = ($frames[$keyPlus]['Delta'] * 100) - ($frame['Delta'] * 100); - if ($frames[$keyPlus]['Type'] == "Alarm") { - $skip = $keyPlus; - continue 2; - } - $keyPlus +=1; - } - if ((($frame['Delta'] * 100) - $spanTimeStart) < $minAlarm && (array_key_exists($keyPlus, $frames))) continue; //alarm short and more event - $spanTimeEnd = $frame['Delta'] * 100; - $spanTime = $spanTimeEnd - $spanTimeStart; - $alarmed = 0; - $pix = $ratio * $spanTime; - $pixSkewAlarm += $pix - round($pix); - $pix = round($pix); - if (($pixSkewAlarm > 1 || $pixSkewAlarm < -1) && $pix + round($pixSkewAlarm) > 0) { - $pix += round($pixSkewAlarm); - $pixSkewAlarm = $pixSkewAlarm - round($pixSkewAlarm); - } - $alarmHtml .= ""; - $spanTimeStart = $spanTimeEnd; - } elseif ($frame['Type'] == "Alarm" && $alarmed == 1 && !array_key_exists($key+1, $frames)) { // event ends on alarm - $spanTimeEnd = $frame['Delta'] * 100; - $spanTime = $spanTimeEnd - $spanTimeStart; - $alarmed = 0; - $pix = round($ratio * $spanTime); - $alarmHtml .= ""; - } - } - echo $alarmHtml; - } -} -?> -var alarmHtml = ''; From c41ef177c26eeb27f3af0a8bd300879f5b397867 Mon Sep 17 00:00:00 2001 From: digital-gnome <31593470+digital-gnome@users.noreply.github.com> Date: Sun, 8 Oct 2017 21:45:05 -0400 Subject: [PATCH 2/5] JS alarmCues --- web/skins/classic/views/js/event.js | 83 +++++++++++++++++++++++++++++ 1 file changed, 83 insertions(+) diff --git a/web/skins/classic/views/js/event.js b/web/skins/classic/views/js/event.js index 29ca7aedf..5a24121a3 100644 --- a/web/skins/classic/views/js/event.js +++ b/web/skins/classic/views/js/event.js @@ -31,6 +31,88 @@ function vjsReplay(endTime) { }); } +$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 () { + $j.getJSON("api/events/"+eventData.Id+".json", setAlarmCues); //get frames data for alarmCues and inserts into html +} + +function setAlarmCues (data) { + cueFrames = data.event.Frame; + alarmHtml = '
' + renderAlarmCues() + '
'; + $j(".vjs-progress-control").append(alarmHtml); + $j(".vjs-control-bar").addClass("vjs-zm"); +} + +function renderAlarmCues () { + if (cueFrames) { + var cueRatio = $j("#videoobj").width() / (cueFrames[cueFrames.length - 1].Delta * 100); + var minAlarm = Math.ceil(1/cueRatio); + var spanTimeStart = 0; + var spanTimeEnd = 0; + var alarmed = 0; + var alarmHtml = ""; + var pixSkewNone = 0; + var pixSkewAlarm = 0; + var skip = 0; + for (let i = 0; i < cueFrames.length; i++) { + skip = 0; + frame = cueFrames[i]; + if (frame.Type == "Alarm" && alarmed == 0) { //From nothing to alarm. End nothing and start alarm. + alarmed = 1; + if (frame.Delta == 0) continue; //If event starts with an alarm or too few for a nonespan + spanTimeEnd = frame.Delta * 100; + spanTime = spanTimeEnd - spanTimeStart; + let pix = cueRatio * spanTime; + pixSkewNone += pix - Math.round(pix);//average out the rounding errors. + pix = Math.round(pix); + if ((pixSkewNone > 1 || pixSkewNone < -1) && pix + Math.round(pixSkewNone) > 0) { //add skew if it's a pixel and won't zero out span. + pix += Math.round(pixSkewNone); + pixSkewNone = pixSkewNone - Math.round(pixSkewNone); + } + alarmHtml += ''; + spanTimeStart = spanTimeEnd; + } else if (frame.Type !== "Alarm" && alarmed == 1) { //from alarm to nothing. End alarm and start nothing. + futNone = 0; + indexPlus = i+1; + if (((frame.Delta * 100) - spanTimeStart) < minAlarm && indexPlus < cueFrames.length) continue; //alarm is too short and there is more event + while (futNone < minAlarm) { //check ahead to see if there's enough for a nonespan + if (indexPlus >= cueFrames.length) break; //check if end of event. + futNone = (cueFrames[indexPlus].Delta *100) - (frame.Delta *100); + if (cueFrames[indexPlus].Type == "Alarm") { + i = --indexPlus; + skip = 1; + break; + } + indexPlus++; + } + if (skip == 1) continue; //javascript doesn't support continue 2; + spanTimeEnd = frame.Delta *100; + spanTime = spanTimeEnd - spanTimeStart; + alarmed = 0; + pix = cueRatio * spanTime; + pixSkewAlarm += pix - Math.round(pix); + pix = Math.round(pix); + if ((pixSkewAlarm > 1 || pixSkewAlarm < -1) && pix + Math.round(pixSkewAlarm) > 0) { + pix += Math.round(pixSkewAlarm); + pixSkewAlarm = pixSkewAlarm - Math.round(pixSkewAlarm); + } + alarmHtml += ''; + spanTimeStart = spanTimeEnd; + } else if (frame.Type == "Alarm" && alarmed == 1 && i + 1 >= cueFrames.length) { //event ends on an alarm + spanTimeEnd = frame.Delta * 100; + spanTime = spanTimeEnd - spanTimeStart; + alarmed = 0; + pix = Math.round(cueRatio * spanTime); + alarmHtml += ''; + } + } + return alarmHtml; + } +} + function setButtonState( element, butClass ) { if ( element ) { element.className = butClass; @@ -841,6 +923,7 @@ function initPage() { //FIXME prevent blocking...not sure what is happening or best way to unblock if ( $('videoobj') ) { vid = videojs("videoobj"); + initialAlarmCues(); //call ajax+renderAlarmCues after videojs is. should be only call to initialAlarmCues } if ( vid ) { /* From 65ce6df6227868ad1a1b1635a3646ea1550e8875 Mon Sep 17 00:00:00 2001 From: digital-gnome <31593470+digital-gnome@users.noreply.github.com> Date: Sun, 8 Oct 2017 21:46:26 -0400 Subject: [PATCH 3/5] scalingfix changing the scale now works with video.js and alarmcues. some whitespace fixes --- web/skins/classic/views/js/event.js | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/web/skins/classic/views/js/event.js b/web/skins/classic/views/js/event.js index 5a24121a3..4fbf32a07 100644 --- a/web/skins/classic/views/js/event.js +++ b/web/skins/classic/views/js/event.js @@ -128,16 +128,17 @@ function changeScale() { var baseHeight = eventData.Height; var newWidth = ( baseWidth * scale ) / SCALE_BASE; var newHeight = ( baseHeight * scale ) / SCALE_BASE; - - if ( vid ) { - // Using video.js - vid.width = newWidth; - vid.height = newHeight; - } else { + if ( vid ) { + // Using video.js + $j("#videoobj").width(newWidth); + $j("#videoobj").height(newHeight); + $j("div.alarmCue").html(renderAlarmCues());//just re-render alarmCues. skip ajax call + Cookie.write( 'zmEventScale'+eventData.MonitorId, scale, { duration: 10*365 } ); + } else { streamScale( scale ); - var streamImg = document.getElementById('evtStream'); - streamImg.style.width = newWidth + "px"; - streamImg.style.height = newHeight + "px"; + var streamImg = document.getElementById('evtStream'); + streamImg.style.width = newWidth + "px"; + streamImg.style.height = newHeight + "px"; Cookie.write( 'zmEventScale'+eventData.MonitorId, scale, { duration: 10*365 } ); } } From d4d2c64974994290744975518c86a8353009d137 Mon Sep 17 00:00:00 2001 From: digital-gnome <31593470+digital-gnome@users.noreply.github.com> Date: Sun, 8 Oct 2017 21:49:34 -0400 Subject: [PATCH 4/5] nav buttons inactive should have been this from the start --- web/skins/classic/views/event.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/skins/classic/views/event.php b/web/skins/classic/views/event.php index 4f4242e81..6e52dfadc 100644 --- a/web/skins/classic/views/event.php +++ b/web/skins/classic/views/event.php @@ -174,8 +174,8 @@ if ( $Event->DefaultVideo() ) {

- - + +

Date: Sun, 8 Oct 2017 22:36:15 -0400 Subject: [PATCH 5/5] nph-zms alarmcues --- web/skins/classic/views/js/event.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/web/skins/classic/views/js/event.js b/web/skins/classic/views/js/event.js index 4fbf32a07..ce62c09f5 100644 --- a/web/skins/classic/views/js/event.js +++ b/web/skins/classic/views/js/event.js @@ -41,14 +41,18 @@ function initialAlarmCues () { function setAlarmCues (data) { cueFrames = data.event.Frame; - alarmHtml = '
' + renderAlarmCues() + '
'; - $j(".vjs-progress-control").append(alarmHtml); - $j(".vjs-control-bar").addClass("vjs-zm"); + alarmSpans = renderAlarmCues(); + if ( vid ) { + $j(".vjs-progress-control").append('
' + alarmSpans + '
'); + $j(".vjs-control-bar").addClass("vjs-zm"); + } else { + $j("#alarmCueJpeg").html(alarmSpans); + } } function renderAlarmCues () { if (cueFrames) { - var cueRatio = $j("#videoobj").width() / (cueFrames[cueFrames.length - 1].Delta * 100); + var cueRatio = (vid ? $j("#videoobj").width() : $j("#progressBar").width()) / (cueFrames[cueFrames.length - 1].Delta * 100);//use videojs width or nph-zms width var minAlarm = Math.ceil(1/cueRatio); var spanTimeStart = 0; var spanTimeEnd = 0; @@ -947,6 +951,7 @@ function initPage() { } else { streamCmdTimer = streamQuery.delay( 250 ); eventQuery.pass( eventData.Id ).delay( 500 ); + initialAlarmCues(); //call ajax+renderAlarmCues for nph-zms. should be only call to initialAlarmCues if ( canStreamNative ) { var streamImg = $('imageFeed').getElement('img');