Tidy up

web/skins/classic/css/flat/views/montagereview.css

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

web/skins/classic/views/js/montagereview.js

@@ -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
@@ -248,15 +250,14 @@ 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;
+    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);
@@ -267,8 +268,8 @@ function drawGraph() {
 
   // 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 x2=parseInt( (eEndSecs[i]   - minTimeSecs) / rangeTimeSecs * cWidth + 0.5 ) ; // round high end up to be sure consecutive ones connect
     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.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 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
@@ -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.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.fillStyle="Black";
+    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
   }

web/skins/classic/views/js/montagereview.js.php

@@ -4,7 +4,9 @@ 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;
@@ -33,7 +35,7 @@ $anyAlarms=false;
 
 $result = dbQuery( $eventsSql );
 if ( ! $result ) {
-  Fatal( "SQL-ERR");
+  Fatal('SQL-ERR');
   return;
 }
 

web/skins/classic/views/montagereview.php

@@ -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>

web/skins/classic/views/timeline.php

@@ -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">