alarmCues fixes

use evtStream for width.  progressBar isn't always fully loaded in time.  Combine skewNone and skewAlarm.  Does a more accurate job of keeping everything in line.
This commit is contained in:
digital-gnome 2017-10-11 20:49:52 -04:00
parent 067f8a8089
commit 99dd469a1c
1 changed files with 10 additions and 11 deletions

View File

@ -61,14 +61,13 @@ function setAlarmCues (data) {
function renderAlarmCues () { function renderAlarmCues () {
if (cueFrames) { if (cueFrames) {
var cueRatio = (vid ? $j("#videoobj").width() : $j("#progressBar").width()) / (cueFrames[cueFrames.length - 1].Delta * 100);//use videojs width or nph-zms width var cueRatio = (vid ? $j("#videoobj").width() : $j("#evtStream").width()) / (cueFrames[cueFrames.length - 1].Delta * 100);//use videojs width or nph-zms width
var minAlarm = Math.ceil(1/cueRatio); var minAlarm = Math.ceil(1/cueRatio);
var spanTimeStart = 0; var spanTimeStart = 0;
var spanTimeEnd = 0; var spanTimeEnd = 0;
var alarmed = 0; var alarmed = 0;
var alarmHtml = ""; var alarmHtml = "";
var pixSkewNone = 0; var pixSkew = 0;
var pixSkewAlarm = 0;
var skip = 0; var skip = 0;
for (let i = 0; i < cueFrames.length; i++) { for (let i = 0; i < cueFrames.length; i++) {
skip = 0; skip = 0;
@ -79,11 +78,11 @@ function renderAlarmCues () {
spanTimeEnd = frame.Delta * 100; spanTimeEnd = frame.Delta * 100;
spanTime = spanTimeEnd - spanTimeStart; spanTime = spanTimeEnd - spanTimeStart;
let pix = cueRatio * spanTime; let pix = cueRatio * spanTime;
pixSkewNone += 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 ((pixSkewNone > 1 || pixSkewNone < -1) && pix + Math.round(pixSkewNone) > 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(pixSkewNone); pix += Math.round(pixSkew);
pixSkewNone = pixSkewNone - Math.round(pixSkewNone); pixSkew = pixSkew - Math.round(pixSkew);
} }
alarmHtml += '<span class="alarmCue noneCue" style="width: ' + pix + 'px;"></span>'; alarmHtml += '<span class="alarmCue noneCue" style="width: ' + pix + 'px;"></span>';
spanTimeStart = spanTimeEnd; spanTimeStart = spanTimeEnd;
@ -106,11 +105,11 @@ function renderAlarmCues () {
spanTime = spanTimeEnd - spanTimeStart; spanTime = spanTimeEnd - spanTimeStart;
alarmed = 0; alarmed = 0;
pix = cueRatio * spanTime; pix = cueRatio * spanTime;
pixSkewAlarm += pix - Math.round(pix); pixSkew += pix - Math.round(pix);
pix = Math.round(pix); pix = Math.round(pix);
if ((pixSkewAlarm > 1 || pixSkewAlarm < -1) && pix + Math.round(pixSkewAlarm) > 0) { if ((pixSkew > 1 || pixSkew < -1) && pix + Math.round(pixSkew) > 0) {
pix += Math.round(pixSkewAlarm); pix += Math.round(pixSkew);
pixSkewAlarm = pixSkewAlarm - Math.round(pixSkewAlarm); pixSkew = pixSkew - Math.round(pixSkew);
} }
alarmHtml += '<span class="alarmCue" style="width: ' + pix + 'px;"></span>'; alarmHtml += '<span class="alarmCue" style="width: ' + pix + 'px;"></span>';
spanTimeStart = spanTimeEnd; spanTimeStart = spanTimeEnd;