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

replace mootools in montagereview.js

This commit is contained in:
Andrew Bauer 2021-01-03 11:45:53 -06:00
parent 0dd98855cc
commit 49a535abaa
1 changed files with 77 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -42,7 +42,7 @@ function evaluateLoadTimes() {
currentDisplayInterval = Math.min(Math.max(currentDisplayInterval, 40), 10000); currentDisplayInterval = Math.min(Math.max(currentDisplayInterval, 40), 10000);
imageLoadTimesEvaluated=0; imageLoadTimesEvaluated=0;
setSpeed(speedIndex); setSpeed(speedIndex);
$('fps').innerHTML="Display refresh rate is " + (1000 / currentDisplayInterval).toFixed(1) + " per second, avgFrac=" + avgFrac.toFixed(3) + "."; $j('#fps').text("Display refresh rate is " + (1000 / currentDisplayInterval).toFixed(1) + " per second, avgFrac=" + avgFrac.toFixed(3) + ".");
} // end evaluateLoadTimes() } // end evaluateLoadTimes()
function getFrame(monId, time, last_Frame) { function getFrame(monId, time, last_Frame) {
@ -337,7 +337,7 @@ function drawSliderOnGraph(val) {
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 = document.getElementById('scruboutput');
if ( liveMode == 1 ) { if ( liveMode == 1 ) {
o.innerHTML = "Live Feed @ " + (1000 / currentDisplayInterval).toFixed(1) + " fps"; o.innerHTML = "Live Feed @ " + (1000 / currentDisplayInterval).toFixed(1) + " fps";
o.style.color = "red"; o.style.color = "red";
@ -363,41 +363,41 @@ function drawSliderOnGraph(val) {
// Because these change widths if the slider is too close, use the slider width as an estimate for the left/right label length (i.e. don't recalculate len from above) // Because these change widths if the slider is too close, use the slider width as an estimate for the left/right label length (i.e. don't recalculate len from above)
// If this starts to collide increase some of the extra space // If this starts to collide increase some of the extra space
var o = $('scrubleft'); var o = document.getElementById('scrubleft');
o.innerHTML=secs2dbstr(minTimeSecs); o.innerHTML = secs2dbstr(minTimeSecs);
o.style.position="absolute"; o.style.position = "absolute";
o.style.bottom=labbottom; o.style.bottom = labbottom;
o.style.font=labfont; o.style.font = labfont;
o.style.left="5px"; o.style.left = "5px";
if ( numMonitors == 0 ) { // we need a len calculation if we skipped the slider if ( numMonitors == 0 ) { // we need a len calculation if we skipped the slider
len = o.offsetWidth; len = o.offsetWidth;
} }
// If the slider will overlay part of this suppress (this is the left side) // If the slider will overlay part of this suppress (this is the left side)
if ( len + 10 > sliderX || cWidth < len * 4 ) { if ( len + 10 > sliderX || cWidth < len * 4 ) {
// that last check is for very narrow browsers // that last check is for very narrow browsers
o.style.display="none"; o.style.display = "none";
} else { } else {
o.style.display="inline"; o.style.display = "inline";
o.style.display="inline-flex"; // safari won't take this but will just ignore o.style.display = "inline-flex"; // safari won't take this but will just ignore
} }
var o = $('scrubright'); var o = document.getElementById('scrubright');
o.innerHTML=secs2dbstr(maxTimeSecs); o.innerHTML = secs2dbstr(maxTimeSecs);
o.style.position="absolute"; o.style.position = "absolute";
o.style.bottom=labbottom; o.style.bottom = labbottom;
o.style.font=labfont; o.style.font = labfont;
// If the slider will overlay part of this suppress (this is the right side) // If the slider will overlay part of this suppress (this is the right side)
o.style.left=(cWidth - len - 15).toString() + "px"; o.style.left=(cWidth - len - 15).toString() + "px";
if ( sliderX > cWidth - len - 20 || cWidth < len * 4 ) { if ( sliderX > cWidth - len - 20 || cWidth < len * 4 ) {
o.style.display="none"; o.style.display = "none";
} else { } else {
o.style.display="inline"; o.style.display = "inline";
o.style.display="inline-flex"; o.style.display = "inline-flex";
} }
} }
function drawGraph() { function drawGraph() {
var divWidth = $('timelinediv').clientWidth; var divWidth = document.getElementById('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 ) {
@ -461,46 +461,55 @@ function drawGraph() {
} // end function drawGraph } // end function drawGraph
function redrawScreen() { function redrawScreen() {
var dateTimeDiv = $j('#DateTimeDiv');
var speedDiv = $j('#SpeedDiv');
var timeLineDiv = $j('#timelinediv');
var liveButton = $j('#liveButton');
var zoomIn = $j('#zoomin');
var zoomOut = $j('#zoomout');
var panLeft = $j('#panleft');
var panRight = $j('#panright');
var downloadVideo = $j('#downloadVideo');
var scaleDiv = $j('#ScaleDiv');
var fit = $j('#fit');
if ( liveMode == 1 ) { if ( liveMode == 1 ) {
// if we are not in live view switch to history -- this has to come before fit in case we re-establish the timeline // if we are not in live view switch to history -- this has to come before fit in case we re-establish the timeline
$('DateTimeDiv').style.display="none"; dateTimeDiv.hide();
$('SpeedDiv').style.display="none"; speedDiv.hide();
var timelinediv= $('timelinediv'); timeLineDiv.hide();
if ( timelinediv ) timelinediv.style.display="none"; liveButton.text('History');
$('liveButton').innerHTML="History"; zoomIn.hide();
$('zoomin').style.display="none"; zoomOut.hide();
$('zoomout').style.display="none"; panLeft.hide();
$('panleft').style.display="none"; panRight.hide();
$('panright').style.display="none"; downloadVideo.hide();
if ($('downloadVideo')) $('downloadVideo').style.display="none";
} else { } else {
// switch out of liveview mode // switch out of liveview mode
$('DateTimeDiv').style.display="inline"; dateTimeDiv.show();
$('DateTimeDiv').style.display="inline-flex"; speedDiv.show();
$('SpeedDiv').style.display="inline"; timeLineDiv.show();
$('SpeedDiv').style.display="inline-flex"; liveButton.text('Live');
$('timelinediv').style.display=null; zoomIn.show();
$('liveButton').innerHTML="Live"; zoomOut.show();
$('zoomin').style.display="inline"; panLeft.show();
$('zoomin').style.display="inline-flex"; panRight.show();
$('zoomout').style.display="inline"; downloadVideo.show();
$('zoomout').style.display="inline-flex";
$('panleft').style.display="inline";
$('panleft').style.display="inline-flex";
$('panright').style.display="inline";
$('panright').style.display="inline-flex";
if ($('downloadVideo')) $('downloadVideo').style.display="inline";
drawGraph(); drawGraph();
} }
if ( fitMode == 1 ) { if ( fitMode == 1 ) {
$('ScaleDiv').style.display="none"; var monitors = $j('#monitors');
$('fit').innerHTML="Scale"; var fps = $j('#fps');
var vh=window.innerHeight; var vh = window.innerHeight;
var pos=$('monitors').getPosition(); var mh = (vh - monitors.position().top - fps.outerHeight());
var mh=(vh - pos.y - $('fps').getSize().y);
$('monitors').setStyle('height', mh.toString() + "px"); // leave a small gap at bottom scaleDiv.hide();
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 fit.text('Scale');
monitors.height(mh.toString() + "px"); // leave a small gap at bottom
if (maxfit2(monitors.outerWidth(), monitors.outerHeight()) == 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 {
@ -509,10 +518,9 @@ function redrawScreen() {
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.height('auto');
$('ScaleDiv').style.display="inline"; scaleDiv.show();
$('ScaleDiv').style.display="inline-flex"; fit.text('fit');
$('fit').innerHTML="Fit";
setScale(currentScale); setScale(currentScale);
} }
outputUpdate(currentTimeSecs); outputUpdate(currentTimeSecs);
@ -609,7 +617,7 @@ function setFit(value) {
function showScale(newscale) { function showScale(newscale) {
// updates slider only // updates slider only
$('scaleslideroutput').innerHTML = parseFloat(newscale).toFixed(2).toString() + " x"; $j('#scaleslideroutput').text(parseFloat(newscale).toFixed(2).toString() + " x");
return; return;
} }
@ -625,7 +633,7 @@ function setScale(newscale) {
function showSpeed(val) { function showSpeed(val) {
// updates slider only // updates slider only
$('speedslideroutput').innerHTML = parseFloat(speeds[val]).toFixed(2).toString() + " x"; $j('#speedslideroutput').text(parseFloat(speeds[val]).toFixed(2).toString() + " x");
} }
function setSpeed(speed_index) { function setSpeed(speed_index) {
@ -666,10 +674,10 @@ function clicknav(minSecs, maxSecs, live) {// we use the current time if we can
maxSecs = parseInt(now); maxSecs = parseInt(now);
} }
maxStr = "&maxTime=" + secs2inputstr(maxSecs); maxStr = "&maxTime=" + secs2inputstr(maxSecs);
$('maxTime').value = secs2inputstr(maxSecs); $j('#maxTime').val(secs2inputstr(maxSecs));
} }
if ( minSecs > 0 ) { if ( minSecs > 0 ) {
$('minTime').value = secs2inputstr(minSecs); $j('#minTime').val(secs2inputstr(minSecs));
minStr = "&minTime=" + secs2inputstr(minSecs); minStr = "&minTime=" + secs2inputstr(minSecs);
} }
if ( maxSecs == 0 && minSecs == 0 ) { if ( maxSecs == 0 && minSecs == 0 ) {
@ -801,7 +809,7 @@ function maxfit2(divW, divH) {
} }
if ( borders <= 0 ) { if ( borders <= 0 ) {
borders=$("Monitor"+monId).getStyle("border").toInt() * 2; borders = parseInt($j('#Monitor'+monId).css('border')) * 2;
} // assume fixed size border, and added to both sides and top/bottom } // assume fixed size border, and added to both sides and top/bottom
// try fitting over first, then down. Each new one must land at either upper right or lower left corner of last (try in that order) // try fitting over first, then down. Each new one must land at either upper right or lower left corner of last (try in that order)
// Pick the one with the smallest Y, then smallest X if Y equal // Pick the one with the smallest Y, then smallest X if Y equal
@ -856,12 +864,12 @@ function maxfit2(divW, divH) {
} }
if ( bestFitArea > 0 ) { // only rearrange if we could fit -- otherwise just do nothing, let them start coming out, whatever if ( bestFitArea > 0 ) { // only rearrange if we could fit -- otherwise just do nothing, let them start coming out, whatever
for ( m = 0; m < numMonitors; m++ ) { for ( m = 0; m < numMonitors; m++ ) {
c = $("Monitor" + monitorPtr[m]); c = document.getElementById('Monitor' + monitorPtr[m]);
c.style.position="absolute"; c.style.position = "absolute";
c.style.left=bestFitX[m].toString() + "px"; c.style.left = bestFitX[m].toString() + "px";
c.style.top=bestFitY[m].toString() + "px"; c.style.top = bestFitY[m].toString() + "px";
c.width = bestFitX2[m] - bestFitX[m] + 1 - borders; c.width = bestFitX2[m] - bestFitX[m] + 1 - borders;
c.height= bestFitY2[m] - bestFitY[m] + 1 - borders; c.height = bestFitY2[m] - bestFitY[m] + 1 - borders;
} }
return 1; return 1;
} else { } else {
@ -902,7 +910,7 @@ function zoom(monId, scale) {
function clickMonitor(event) { function clickMonitor(event) {
var element = event.target; var element = event.target;
//var monitor_element = $("Monitor"+monId.toString()); //var monitor_element = document.getElementById('Monitor'+monId.toString());
var monId = element.getAttribute('monitor_id'); var monId = element.getAttribute('monitor_id');
var pos_x = event.offsetX ? (event.offsetX) : event.pageX - element.offsetLeft; var pos_x = event.offsetX ? (event.offsetX) : event.pageX - element.offsetLeft;
var pos_y = event.offsetY ? (event.offsetY) : event.pageY - element.offsetTop; var pos_y = event.offsetY ? (event.offsetY) : event.pageY - element.offsetTop;
@ -963,7 +971,7 @@ function initPage() {
for ( var i = 0, len = monitorPtr.length; i < len; i += 1 ) { for ( var i = 0, len = monitorPtr.length; i < len; i += 1 ) {
var monId = monitorPtr[i]; var monId = monitorPtr[i];
if ( !monId ) continue; if ( !monId ) continue;
monitorCanvasObj[monId] = $('Monitor'+monId); monitorCanvasObj[monId] = document.getElementById('Monitor'+monId);
if ( !monitorCanvasObj[monId] ) { if ( !monitorCanvasObj[monId] ) {
alert("Couldn't find DOM element for Monitor" + monId + "monitorPtr.length=" + len); alert("Couldn't find DOM element for Monitor" + monId + "monitorPtr.length=" + len);
} else { } else {
@ -982,7 +990,7 @@ function initPage() {
} // end foreach monitor } // end foreach monitor
if ( !liveMode ) { if ( !liveMode ) {
canvas = $("timeline"); canvas = document.getElementById('timeline');
canvas.addEventListener('mousemove', mmove, false); canvas.addEventListener('mousemove', mmove, false);
canvas.addEventListener('touchmove', tmove, false); canvas.addEventListener('touchmove', tmove, false);