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

Tidy up

This commit is contained in:
Isaac Connor 2017-10-17 11:50:47 -04:00
parent 4cd59611da
commit 92ff3d9606
5 changed files with 66 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/skins/classic/css/flat/views/montagereview.css
View File

@ -38,3 +38,7 @@
input[type=range]::-ms-tooltip {
display: none;
}
#timeline {
color: white;
font-size: 40px;
}

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

@ -5,7 +5,7 @@ function evaluateLoadTimes() {
if ( liveMode != 1 && currentSpeed == 0 ) return; // don't evaluate when we are not moving as we can do nothing really fast.
for ( var i = 0; i < monitorIndex.length; 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 ( end == 0 || end < monitorLoadEndTimems[i] ) end = monitorLoadEndTimems[i];
}
@ -17,7 +17,7 @@ function evaluateLoadTimes() {
monitorLoadEndTimems[monId] = 0;
}
freeTimeLastIntervals[imageLoadTimesEvaluated++] = 1 - ((end - start)/currentDisplayInterval);
if( imageLoadTimesEvaluated < imageLoadTimesNeeded ) return;
if ( imageLoadTimesEvaluated < imageLoadTimesNeeded ) return;
var avgFrac=0;
for ( var i=0; i < imageLoadTimesEvaluated; i++ )
avgFrac += freeTimeLastIntervals[i];
@ -41,15 +41,17 @@ function evaluateLoadTimes() {
$('fps').innerHTML="Display refresh rate is " + (1000 / currentDisplayInterval).toFixed(1) + " per second, avgFrac=" + avgFrac.toFixed(3) + ".";
}
function SetImageSource( monId, val ) {
// time is seconds since epoch
function SetImageSource( monId, time ) {
if ( liveMode == 1 ) {
return monitorImageObject[monId].src.replace(/rand=\d+/i, 'rand='+Math.floor((Math.random() * 1000000) ));
} else {
for ( var i=0, eIdlength = eId.length; i < eIdlength; i++ ) {
// Search for a match
if ( eMonId[i] == monId && val >= eStartSecs[i] && val <= eEndSecs[i] ) {
var frame = parseInt((val - eStartSecs[i])/(eEndSecs[i]-eStartSecs[i])*eventFrames[i])+1;
// Search for the event matching this time. Would be more efficient if we had events indexed by monitor
if ( eMonId[i] == monId && time >= eStartSecs[i] && time <= eEndSecs[i] ) {
var duration = eEndSecs[i]-eStartSecs[i];
var frame = parseInt((time - eStartSecs[i])/(duration)*eventFrames[i])+1;
return "index.php?view=image&eid=" + eId[i] + '&fid='+frame + "&width=" + monitorCanvasObj[monId].width + "&height=" + monitorCanvasObj[monId].height;
}
} // end for
@ -216,10 +218,10 @@ function drawSliderOnGraph(val) {
o.style.bottom=labbottom;
o.style.font=labfont;
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;
// 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
o.style.display="none";
} else {
@ -248,53 +250,52 @@ function drawGraph() {
cHeight = parseInt(window.innerHeight * 0.10);
if ( cHeight < numMonitors * 20 ) {
cHeight = numMonitors * 20;
console.log( "Timeline height: " + cHeight );
}
canvas.height = cHeight;
if ( eId.length == 0 ) {
ctx.font="40px";
ctx.fillStyle="Black";
ctx.globalAlpha=1;
var t="No data found in range - choose differently";
var l=ctx.measureText(t).width;
ctx.fillText(t,(cWidth - l)/2, cHeight-10);
underSlider=undefined;
return;
}
var rowHeight=parseInt(cHeight / (numMonitors + 1) ); // Leave room for a scale of some sort
// first fill in the bars for the events (not alarms)
for(var i=0; i<eId.length; i++) // Display all we loaded
{
var x1=parseInt( (eStartSecs[i] - minTimeSecs) / rangeTimeSecs * cWidth) ; // round low end down
var x2=parseInt( (eEndSecs[i] - minTimeSecs) / rangeTimeSecs * cWidth + 0.5 ) ; // round high end up to be sure consecutive ones connect
ctx.fillStyle=monitorColour[eMonId[i]];
ctx.globalAlpha = 0.2; // light color for background
ctx.clearRect(x1,monitorIndex[eMonId[i]]*rowHeight,x2-x1,rowHeight); // Erase any overlap so it doesn't look artificially darker
ctx.fillRect (x1,monitorIndex[eMonId[i]]*rowHeight,x2-x1,rowHeight);
}
for(var i=0; (i<fScore.length) && (maxScore>0); i++) // Now put in scored frames (if any)
{
var x1=parseInt( (fTimeFromSecs[i] - minTimeSecs) / rangeTimeSecs * cWidth) ; // round low end down
var x2=parseInt( (fTimeToSecs[i] - 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
ctx.fillStyle=monitorColour[fMonId[i]];
ctx.globalAlpha = 0.4 + 0.6 * (1 - fScore[i]/maxScore); // Background is scaled but even lowest is twice as dark as the background
ctx.fillRect(x1,monitorIndex[fMonId[i]]*rowHeight,x2-x1,rowHeight);
}
for(var i=0; i<numMonitors; i++) // Note that this may be a sparse array
{
ctx.font= parseInt(rowHeight * timeLabelsFractOfRow).toString() + "px Georgia";
ctx.fillStyle="Black";
ctx.globalAlpha=1;
ctx.fillText(monitorName[monitorPtr[i]], 0, (i + 1 - (1 - timeLabelsFractOfRow)/2 ) * rowHeight ); // This should roughly center font in row
}
underSlider=undefined; // flag we don't have a slider cached
drawSliderOnGraph(currentTimeSecs);
ctx.globalAlpha=1;
ctx.font= "40px Georgia";
ctx.fillStyle="white";
var t="No data found in range - choose differently";
var l=ctx.measureText(t).width;
ctx.fillText(t,(cWidth - l)/2, cHeight-10);
underSlider=undefined;
return;
}
var rowHeight=parseInt(cHeight / (numMonitors + 1) ); // Leave room for a scale of some sort
// first fill in the bars for the events (not alarms)
for(var i=0; i<eId.length; i++) { // Display all we loaded
var x1=parseInt( (eStartSecs[i] - minTimeSecs) / rangeTimeSecs * cWidth) ; // round low end down
var x2=parseInt( (eEndSecs[i] - minTimeSecs) / rangeTimeSecs * cWidth + 0.5 ) ; // round high end up to be sure consecutive ones connect
ctx.fillStyle=monitorColour[eMonId[i]];
ctx.globalAlpha = 0.2; // light color for background
ctx.clearRect(x1,monitorIndex[eMonId[i]]*rowHeight,x2-x1,rowHeight); // Erase any overlap so it doesn't look artificially darker
ctx.fillRect (x1,monitorIndex[eMonId[i]]*rowHeight,x2-x1,rowHeight);
}
for(var i=0; (i<fScore.length) && (maxScore>0); i++) {
// Now put in scored frames (if any)
var x1=parseInt( (fTimeFromSecs[i] - minTimeSecs) / rangeTimeSecs * cWidth) ; // round low end down
var x2=parseInt( (fTimeToSecs[i] - 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
ctx.fillStyle=monitorColour[fMonId[i]];
ctx.globalAlpha = 0.4 + 0.6 * (1 - fScore[i]/maxScore); // Background is scaled but even lowest is twice as dark as the background
ctx.fillRect(x1,monitorIndex[fMonId[i]]*rowHeight,x2-x1,rowHeight);
}
for(var i=0; i<numMonitors; i++) {
// Note that this may be a sparse array
ctx.font= parseInt(rowHeight * timeLabelsFractOfRow).toString() + "px Georgia";
ctx.fillStyle="white";
ctx.globalAlpha=1;
ctx.fillText(monitorName[monitorPtr[i]], 0, (i + 1 - (1 - timeLabelsFractOfRow)/2 ) * rowHeight ); // This should roughly center font in row
}
underSlider=undefined; // flag we don't have a slider cached
drawSliderOnGraph(currentTimeSecs);
return;
}
function redrawScreen() {

14
web/skins/classic/views/js/montagereview.js.php
View File

@ -4,10 +4,12 @@ var liveMode=<?php echo $initialModeIsLive?>;
var fitMode=<?php echo $fitMode?>;
var currentSpeed=<?php echo $speeds[$speedIndex]?>; // slider scale, which is only for replay and relative to real time
var speedIndex=<?php echo $speedIndex?>;
var currentDisplayInterval=<?php echo $initialDisplayInterval?>; // will be set based on performance, this is the display interval in milliseconds for history, and fps for live, and dynamically determined (in ms)
// will be set based on performance, this is the display interval in milliseconds for history, and fps for live, and dynamically determined (in ms)
var currentDisplayInterval=<?php echo $initialDisplayInterval?>;
var playSecsperInterval=1; // How many seconds of recorded image we play per refresh determined by speed (replay rate) and display interval; (default=1 if coming from live)
var timerInterval; // milliseconds between interrupts
var timerObj; // object to hold timer interval;
var timerObj; // object to hold timer interval;
var freeTimeLastIntervals=[]; // Percentage of current interval used in loading most recent image
var imageLoadTimesEvaluated=0; // running count
var imageLoadTimesNeeded=15; // and how many we need
@ -28,12 +30,12 @@ $maxTimeSecs = strtotime('1950-01-01 01:01:01');
// This builds the list of events that are eligible from this range
$index=0;
$anyAlarms=false;
$index = 0;
$anyAlarms = false;
$result = dbQuery( $eventsSql );
if ( ! $result ) {
Fatal( "SQL-ERR");
Fatal('SQL-ERR');
return;
}
@ -159,7 +161,7 @@ if ( $numMonitors > 0 ) $avgArea = $avgArea / $numMonitors;
$numMonitors = 0;
foreach ( $monitors as $m ) {
echo " monitorLoading[" . $m->Id() . "]=false;\n";
echo " monitorImageURL[" . $m->Id() . "]='".$m->getStreamSrc( array('mode'=>'single','scale'=>$defaultScale*100), '&' )."';\n";
echo " monitorImageURL[" . $m->Id() . "]='".$m->getStreamSrc( array('mode'=>'single','scale'=>$defaultScale*100), '&' )."';\n";
echo " monitorLoadingStageURL[" . $m->Id() . "] = '';\n";
echo " monitorColour[" . $m->Id() . "]=\"" . $m->WebColour() . "\";\n";
echo " monitorWidth[" . $m->Id() . "]=" . $m->Width() . ";\n";

2
web/skins/classic/views/montagereview.php
View File

@ -252,7 +252,7 @@ xhtmlHeaders(__FILE__, translate('MontageReview') );
<?php
// Monitor images - these had to be loaded after the monitors used were determined (after loading events)
foreach ($monitors as $m) {
echo '<canvas width="' . $m->Width() * $defaultScale . '" height="' . $m->Height() * $defaultScale . '" id="Monitor' . $m->Id() . '" style="border:3px solid ' . $m->WebColour() . '" onclick="clickMonitor(event,' . $m->Id() . ')">No Canvas Support!!</canvas>';
echo '<canvas width="' . $m->Width() * $defaultScale . '" height="' . $m->Height() * $defaultScale . '" id="Monitor' . $m->Id() . '" style="border:1px solid ' . $m->WebColour() . '" onclick="clickMonitor(event,' . $m->Id() . ')">No Canvas Support!!</canvas>';
}
?>
</div>

5
web/skins/classic/views/timeline.php
View File

@ -359,7 +359,9 @@ if ( $event ) {
$currEventSlots[$i]['count']++;
}
}
if ( $event['MaxScore'] > 0 ) {
Warning("Has max Scoer");
if ( $startIndex == $endIndex ) {
$framesSql = 'SELECT FrameId,Score FROM Frames WHERE EventId = ? AND Score > 0 ORDER BY Score DESC LIMIT 1';
$frame = dbFetchOne( $framesSql, NULL, array($event['Id']) );
@ -447,7 +449,6 @@ foreach ( array_keys($monitorIds) as $monitorId ) {
$maxHeight = $monitors[$monitorId]['Height'];
}
//print_r( $monEventSlots );
// Optimise boxes
foreach( array_keys($monEventSlots) as $monitorId ) {
unset( $currEventSlots );
@ -751,7 +752,7 @@ if ( $mode == 'overlay' ) {
echo drawYGrid( $chart, $majYScale, 'majLabelY', 'majTickY', 'majGridY graphWidth' );
}
echo drawXGrid( $chart, $majXScale, 'majLabelX', 'majTickX', 'majGridX graphHeight', 'zoom graphHeight' );
Warning("Mode: $mode");
if ( $mode == 'overlay' ) {
?>
<div id="activity" class="activitySize">