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

View File

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

View File

@ -41,15 +41,17 @@ function evaluateLoadTimes() {
$('fps').innerHTML="Display refresh rate is " + (1000 / currentDisplayInterval).toFixed(1) + " per second, avgFrac=" + avgFrac.toFixed(3) + "."; $('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 ) { if ( liveMode == 1 ) {
return monitorImageObject[monId].src.replace(/rand=\d+/i, 'rand='+Math.floor((Math.random() * 1000000) )); return monitorImageObject[monId].src.replace(/rand=\d+/i, 'rand='+Math.floor((Math.random() * 1000000) ));
} else { } else {
for ( var i=0, eIdlength = eId.length; i < eIdlength; i++ ) { for ( var i=0, eIdlength = eId.length; i < eIdlength; i++ ) {
// Search for a match // Search for the event matching this time. Would be more efficient if we had events indexed by monitor
if ( eMonId[i] == monId && val >= eStartSecs[i] && val <= eEndSecs[i] ) { if ( eMonId[i] == monId && time >= eStartSecs[i] && time <= eEndSecs[i] ) {
var frame = parseInt((val - eStartSecs[i])/(eEndSecs[i]-eStartSecs[i])*eventFrames[i])+1; 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; return "index.php?view=image&eid=" + eId[i] + '&fid='+frame + "&width=" + monitorCanvasObj[monId].width + "&height=" + monitorCanvasObj[monId].height;
} }
} // end for } // end for
@ -248,15 +250,14 @@ function drawGraph() {
cHeight = parseInt(window.innerHeight * 0.10); cHeight = parseInt(window.innerHeight * 0.10);
if ( cHeight < numMonitors * 20 ) { if ( cHeight < numMonitors * 20 ) {
cHeight = numMonitors * 20; cHeight = numMonitors * 20;
console.log( "Timeline height: " + cHeight );
} }
canvas.height = cHeight; canvas.height = cHeight;
if ( eId.length == 0 ) { if ( eId.length == 0 ) {
ctx.font="40px";
ctx.fillStyle="Black";
ctx.globalAlpha=1; ctx.globalAlpha=1;
ctx.font= "40px Georgia";
ctx.fillStyle="white";
var t="No data found in range - choose differently"; var t="No data found in range - choose differently";
var l=ctx.measureText(t).width; var l=ctx.measureText(t).width;
ctx.fillText(t,(cWidth - l)/2, cHeight-10); ctx.fillText(t,(cWidth - l)/2, cHeight-10);
@ -267,8 +268,8 @@ function drawGraph() {
// first fill in the bars for the events (not alarms) // first fill in the bars for the events (not alarms)
for(var i=0; i<eId.length; i++) // Display all we loaded 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 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 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.fillStyle=monitorColour[eMonId[i]];
@ -276,8 +277,8 @@ function drawGraph() {
ctx.clearRect(x1,monitorIndex[eMonId[i]]*rowHeight,x2-x1,rowHeight); // Erase any overlap so it doesn't look artificially darker 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); 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) 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 x1=parseInt( (fTimeFromSecs[i] - minTimeSecs) / rangeTimeSecs * cWidth) ; // round low end down
var x2=parseInt( (fTimeToSecs[i] - minTimeSecs) / rangeTimeSecs * cWidth + 0.5 ) ; // round up 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 if(x2-x1 < 2) x2=x1+2; // So it is visible make them all at least this number of seconds wide
@ -285,10 +286,10 @@ function drawGraph() {
ctx.globalAlpha = 0.4 + 0.6 * (1 - fScore[i]/maxScore); // Background is scaled but even lowest is twice as dark as the background 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); 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 for(var i=0; i<numMonitors; i++) {
{ // Note that this may be a sparse array
ctx.font= parseInt(rowHeight * timeLabelsFractOfRow).toString() + "px Georgia"; ctx.font= parseInt(rowHeight * timeLabelsFractOfRow).toString() + "px Georgia";
ctx.fillStyle="Black"; ctx.fillStyle="white";
ctx.globalAlpha=1; ctx.globalAlpha=1;
ctx.fillText(monitorName[monitorPtr[i]], 0, (i + 1 - (1 - timeLabelsFractOfRow)/2 ) * rowHeight ); // This should roughly center font in row ctx.fillText(monitorName[monitorPtr[i]], 0, (i + 1 - (1 - timeLabelsFractOfRow)/2 ) * rowHeight ); // This should roughly center font in row
} }

View File

@ -4,7 +4,9 @@ var liveMode=<?php echo $initialModeIsLive?>;
var fitMode=<?php echo $fitMode?>; var fitMode=<?php echo $fitMode?>;
var currentSpeed=<?php echo $speeds[$speedIndex]?>; // slider scale, which is only for replay and relative to real time var currentSpeed=<?php echo $speeds[$speedIndex]?>; // slider scale, which is only for replay and relative to real time
var speedIndex=<?php echo $speedIndex?>; 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 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 timerInterval; // milliseconds between interrupts
var timerObj; // object to hold timer interval; var timerObj; // object to hold timer interval;
@ -33,7 +35,7 @@ $anyAlarms=false;
$result = dbQuery( $eventsSql ); $result = dbQuery( $eventsSql );
if ( ! $result ) { if ( ! $result ) {
Fatal( "SQL-ERR"); Fatal('SQL-ERR');
return; return;
} }

View File

@ -252,7 +252,7 @@ xhtmlHeaders(__FILE__, translate('MontageReview') );
<?php <?php
// Monitor images - these had to be loaded after the monitors used were determined (after loading events) // Monitor images - these had to be loaded after the monitors used were determined (after loading events)
foreach ($monitors as $m) { 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> </div>

View File

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