quick for to make MontageReview work

This commit is contained in:
Isaac Connor 2016-10-11 17:35:28 -04:00
parent e1c91bb5fd
commit 0903ef294f
1 changed files with 131 additions and 163 deletions

View File

@ -151,7 +151,7 @@ if ( !empty($user['MonitorIds']) )
$eventsSql .= $monFilterSql; $eventsSql .= $monFilterSql;
$monitorsSQL .= $monFilterSql; $monitorsSQL .= $monFilterSql;
$frameSql .= $monFilterSql; $frameSql .= ' AND e.MonitorId IN ('.$user['MonitorIds'].')';
} }
// Parse input parameters -- note for future, validate/clean up better in case we don't get called from self. // Parse input parameters -- note for future, validate/clean up better in case we don't get called from self.
@ -224,12 +224,12 @@ if( isset($minTime) && isset($maxTime) )
$eventsSql .= "having CalcEndTimeSecs > '" . $minTimeSecs . "' and StartTimeSecs < '" . $maxTimeSecs . "'"; $eventsSql .= "having CalcEndTimeSecs > '" . $minTimeSecs . "' and StartTimeSecs < '" . $maxTimeSecs . "'";
$frameSql .= "and TimeStamp > '" . $minTime . "' and TimeStamp < '" . $maxTime . "'"; $frameSql .= "and TimeStamp > '" . $minTime . "' and TimeStamp < '" . $maxTime . "'";
} }
$frameSql .= "group by E.Id, E.MonitorId, F.TimeStamp order by E.MonitorId, F.TimeStamp asc"; $frameSql .= "group by E.Id, E.MonitorId, F.TimeStamp, F.Delta order by E.MonitorId, F.TimeStamp asc";
// This loads all monitors the user can see - even if we don't have data for one we still show all for switch to live. // This loads all monitors the user can see - even if we don't have data for one we still show all for switch to live.
$monitors = array(); $monitors = array();
$monitorsSql .= " order by Sequence asc "; $monitorsSql .= ' ORDER BY Sequence ASC ';
$index=0; $index=0;
foreach( dbFetchAll( $monitorsSql ) as $row ) foreach( dbFetchAll( $monitorsSql ) as $row )
{ {
@ -256,43 +256,40 @@ input[type=range]::-ms-tooltip {
</div> </div>
<h2><?php echo translate('MontageReview') ?></h2> <h2><?php echo translate('MontageReview') ?></h2>
</div> </div>
<div id='ScaleDiv' style='display: inline-flex; border: 1px solid black;'> <div id="ScaleDiv" style="display: inline-flex; border: 1px solid black;">
<label style='margin:5px;' for=scaleslider><?php echo translate('Scale')?></label> <label style="margin:5px;" for="scaleslider"><?php echo translate('Scale')?></label>
<input id=scaleslider type=range min=0.1 max=1.0 value=<?php echo $defaultScale ?> step=0.10 width=20% onchange='setScale(this.value)' oninput='showScale(this.value)'/> <input id=scaleslider type=range min=0.1 max=1.0 value=<?php echo $defaultScale ?> step=0.10 width=20% onchange='setScale(this.value)' oninput='showScale(this.value)'/>
<span style='margin:5px;' id=scaleslideroutput><?php echo number_format((float)$defaultScale,2,'.','')?> x</span> <span style='margin:5px;' id=scaleslideroutput><?php echo number_format((float)$defaultScale,2,'.','')?> x</span>
</div> </div>
<div id='SpeedDiv' style='display: inline-flex; border: 1px solid black;'> <div id="SpeedDiv" style='display: inline-flex; border: 1px solid black;'>
<label style='margin:5px;' for=speedslider><?php echo translate('Speed') ?></label> <label style='margin:5px;' for=speedslider><?php echo translate('Speed') ?></label>
<input id=speedslider type=range min=0 max=<?php echo count($speeds)-1?> value=<?php echo $speedIndex ?> step=1 wdth=20% onchange='setSpeed(this.value)' oninput='showSpeed(this.value)'/> <input id=speedslider type=range min=0 max=<?php echo count($speeds)-1?> value=<?php echo $speedIndex ?> step=1 wdth=20% onchange='setSpeed(this.value)' oninput='showSpeed(this.value)'/>
<span style='margin:5px;' id=speedslideroutput><?php echo $speeds[$speedIndex] ?> fps</span> <span style='margin:5px;' id=speedslideroutput><?php echo $speeds[$speedIndex] ?> fps</span>
</div> </div>
<div style='display: inline-flex; border: 1px solid black; flex-flow: row wrap;'> <div style='display: inline-flex; border: 1px solid black; flex-flow: row wrap;'>
<button type='button' id=panleft onclick='panleft() '>&lt; <?php echo translate('Pan') ?></button> <button type="button" id=panleft onclick='panleft() '>&lt; <?php echo translate('Pan') ?></button>
<button type='button' id=zoomin onclick='zoomin() '><?php echo translate('In +') ?></button> <button type="button" id=zoomin onclick='zoomin() '><?php echo translate('In +') ?></button>
<button type='button' id=zoomout onclick='zoomout() '><?php echo translate('Out -') ?></button> <button type="button" id=zoomout onclick='zoomout() '><?php echo translate('Out -') ?></button>
<button type='button' id=lasteight onclick='lastEight() '><?php echo translate('8 Hour') ?></button> <button type="button" id=lasteight onclick='lastEight() '><?php echo translate('8 Hour') ?></button>
<button type='button' id=lasthour onclick='lastHour() '><?php echo translate('1 Hour') ?></button> <button type="button" id=lasthour onclick='lastHour() '><?php echo translate('1 Hour') ?></button>
<button type='button' id=allof onclick='allof() '><?php echo translate('All Events') ?></button> <button type="button" id=allof onclick='allof() '><?php echo translate('All Events') ?></button>
<button type='button' id=live onclick='setLive(1-liveMode)'><?php echo translate('Live') ?></button> <button type="button" id=live onclick='setLive(1-liveMode)'><?php echo translate('Live') ?></button>
<button type='button' id=fit onclick='setFit(1-fitMode) '><?php echo translate('Fit') ?></button> <button type="button" id=fit onclick='setFit(1-fitMode) '><?php echo translate('Fit') ?></button>
<button type='button' id=panright onclick='panright() '><?php echo translate('Pan') ?> &gt;</button> <button type="button" id=panright onclick='panright() '><?php echo translate('Pan') ?> &gt;</button>
</div> </div>
<div id=timelinediv style='position:relative; width:93%;'> <div id="timelinediv" style="position:relative; width:93%;">
<canvas id=timeline style='border:1px solid;' onmousemove='mmove(event)' ontouchmove='tmove(event)' onmousedown='mdown(event)' onmouseup='mup(event)' onmouseout='mout(event)' ></canvas> <canvas id="timeline" style="border:1px solid;" onmousemove="mmove(event);" ontouchmove="tmove(event);" onmousedown="mdown(event);" onmouseup="mup(event);" onmouseout="mout(event);"></canvas>
<span id=scrubleft ></span> <span id="scrubleft"></span>
<span id=scrubright ></span> <span id="scrubright"></span>
<span id=scruboutput ></span> <span id="scruboutput"></span>
</div> </div>
<?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)
echo "<div id='monitors' style='position:relative; background-color:black;' width='100%' height='100%'>\n"; echo "<div id='monitors' style='position:relative; background-color:black;' width='100%' height='100%'>\n";
foreach ($monitors as $m) foreach ($monitors as $m) {
{
{
echo "<canvas width='" . $m['Width'] * $defaultScale . "px' height='" . $m['Height'] * $defaultScale . "px' id='Monitor" . $m['Id'] . "' style='border:3px solid " . $m['WebColour'] . "' onclick='clickMonitor(event," . $m['Id'] . ")'>No Canvas Support!!</canvas>\n"; echo "<canvas width='" . $m['Width'] * $defaultScale . "px' height='" . $m['Height'] * $defaultScale . "px' id='Monitor" . $m['Id'] . "' style='border:3px solid " . $m['WebColour'] . "' onclick='clickMonitor(event," . $m['Id'] . ")'>No Canvas Support!!</canvas>\n";
} }
}
echo "</div>\n"; echo "</div>\n";
echo "<p id='fps'>evaluating fps</p>\n"; echo "<p id='fps'>evaluating fps</p>\n";
echo "<script>\n"; echo "<script>\n";
@ -331,8 +328,7 @@ $maxTimeSecs = strtotime("1950-01-01 01:01:01");
$index=0; $index=0;
$anyAlarms=false; $anyAlarms=false;
foreach( dbFetchAll( $eventsSql ) as $event ) foreach( dbFetchAll( $eventsSql ) as $event ) {
{
if( $minTimeSecs > $event['StartTimeSecs']) $minTimeSecs=$event['StartTimeSecs']; if( $minTimeSecs > $event['StartTimeSecs']) $minTimeSecs=$event['StartTimeSecs'];
if( $maxTimeSecs < $event['CalcEndTimeSecs']) $maxTimeSecs=$event['CalcEndTimeSecs']; if( $maxTimeSecs < $event['CalcEndTimeSecs']) $maxTimeSecs=$event['CalcEndTimeSecs'];
echo "eMonId[$index]=" . $event['MonitorId'] . "; eId[$index]=" . $event['Id'] . "; "; echo "eMonId[$index]=" . $event['MonitorId'] . "; eId[$index]=" . $event['Id'] . "; ";
@ -349,28 +345,23 @@ foreach( dbFetchAll( $eventsSql ) as $event )
echo "\n"; echo "\n";
} }
if($index == 0) // if there is no data set the min/max to the passed in values // if there is no data set the min/max to the passed in values
{ if($index == 0) {
if(isset($minTime) && isset($maxTime)) if(isset($minTime) && isset($maxTime)) {
{
$minTimeSecs = strtotime($minTime); $minTimeSecs = strtotime($minTime);
$maxTimeSecs = strtotime($maxTime); $maxTimeSecs = strtotime($maxTime);
} } else {
else // this is the case of no passed in times AND no data -- just set something arbitrary // this is the case of no passed in times AND no data -- just set something arbitrary
{
$minTimeSecs=strtotime('1950-06-01 01:01:01'); // random time so there's something to display $minTimeSecs=strtotime('1950-06-01 01:01:01'); // random time so there's something to display
$maxTimeSecs=strtotime('2020-06-02 02:02:02'); $maxTimeSecs=strtotime('2020-06-02 02:02:02');
} }
} }
// We only reset the calling time if there was no calling time // We only reset the calling time if there was no calling time
if(!isset($minTime) || !isset($maxTime)) if(!isset($minTime) || !isset($maxTime)) {
{
$maxTime = strftime($maxTimeSecs); $maxTime = strftime($maxTimeSecs);
$minTime = strftime($minTimeSecs); $minTime = strftime($minTimeSecs);
} } else {
else
{
$minTimeSecs = strtotime($minTime); $minTimeSecs = strtotime($minTime);
$maxTimeSecs = strtotime($maxTime); $maxTimeSecs = strtotime($maxTime);
} }
@ -389,18 +380,15 @@ $fromSecs=-1;
$toSecs=-1; $toSecs=-1;
$maxScore=-1; $maxScore=-1;
if($anyAlarms) if($anyAlarms) {
foreach( dbFetchAll ($frameSql) as $frame ) foreach( dbFetchAll ($frameSql) as $frame ) {
{ if($mId<0) {
if($mId<0)
{
$mId=$frame['MonitorId']; $mId=$frame['MonitorId'];
$fromSecs=$frame['TimeStampSecs']; $fromSecs=$frame['TimeStampSecs'];
$toSecs=$frame['TimeStampSecs']; $toSecs=$frame['TimeStampSecs'];
$maxScore=$frame['Score']; $maxScore=$frame['Score'];
} } else if ($mId != $frame['MonitorId'] || $frame['TimeStampSecs'] - $toSecs > 10) {
else if ($mId != $frame['MonitorId'] || $frame['TimeStampSecs'] - $toSecs > 10) // dump this one start a new // dump this one start a new
{
$index++; $index++;
echo " fMonId[$index]=" . $mId . ";"; echo " fMonId[$index]=" . $mId . ";";
echo " fTimeFromSecs[$index]=" . $fromSecs . ";"; echo " fTimeFromSecs[$index]=" . $fromSecs . ";";
@ -410,15 +398,14 @@ if($anyAlarms)
$fromSecs=$frame['TimeStampSecs']; $fromSecs=$frame['TimeStampSecs'];
$toSecs=$frame['TimeStampSecs']; $toSecs=$frame['TimeStampSecs'];
$maxScore=$frame['Score']; $maxScore=$frame['Score'];
} } else {
else // just add this one on // just add this one on
{
$toSecs=$frame['TimeStampSecs']; $toSecs=$frame['TimeStampSecs'];
if($maxScore < $frame['Score']) $maxScore=$frame['Score']; if($maxScore < $frame['Score']) $maxScore=$frame['Score'];
} }
} }
if($mId>0) }
{ if($mId>0) {
echo " fMonId[$index]=" . $mId . ";"; echo " fMonId[$index]=" . $mId . ";";
echo " fTimeFromSecs[$index]=" . $fromSecs . ";"; echo " fTimeFromSecs[$index]=" . $fromSecs . ";";
echo " fTimeToSecs[$index]=" . $toSecs . ";"; echo " fTimeToSecs[$index]=" . $toSecs . ";";
@ -446,8 +433,7 @@ echo "var monitorPtr = []; // monitorName[monitorPtr[0]] is first monitor\n";
$numMonitors=0; // this array is indexed by the monitor ID for faster access later, so it may be sparse $numMonitors=0; // this array is indexed by the monitor ID for faster access later, so it may be sparse
$avgArea=floatval(0); // Calculations the normalizing scale $avgArea=floatval(0); // Calculations the normalizing scale
foreach ($monitors as $m) foreach ($monitors as $m) {
{
$avgArea = $avgArea + floatval($m['Width'] * $m['Height']); $avgArea = $avgArea + floatval($m['Width'] * $m['Height']);
$numMonitors++; $numMonitors++;
} }
@ -455,8 +441,7 @@ foreach ($monitors as $m)
if($numMonitors>0) $avgArea= $avgArea / $numMonitors; if($numMonitors>0) $avgArea= $avgArea / $numMonitors;
$numMonitors=0; $numMonitors=0;
foreach ($monitors as $m) foreach ($monitors as $m) {
{
echo " monitorLoading[" . $m['Id'] . "]=false; "; echo " monitorLoading[" . $m['Id'] . "]=false; ";
echo " monitorImageObject[" . $m['Id'] . "]=null; "; echo " monitorImageObject[" . $m['Id'] . "]=null; ";
echo " monitorLoadingStageURL[" . $m['Id'] . "] = ''; "; echo " monitorLoadingStageURL[" . $m['Id'] . "] = ''; ";
@ -543,34 +528,28 @@ 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) function SetImageSource(monId,val) {
{ if(liveMode==1) {
if(liveMode==1) // This uses the standard php routine to set up the url and authentication, but because it is called repeatedly the built in random number is not usable, so one is appended below for two total (yuck)
{ // This uses the standard php routine to set up the url and authentication, but because it is called repeatedly the built in random number is not usable, so one is appended below for two total (yuck)
var effectiveScale = (100.0 * monitorCanvasObj[monId].width) / monitorWidth[monId]; var effectiveScale = (100.0 * monitorCanvasObj[monId].width) / monitorWidth[monId];
var $x = "<?php echo getStreamSrc( array("mode=single"),"&" )?>" + "&monitor=" + monId.toString() + "&scale=" + effectiveScale + Math.random().toString() ; var $x = "<?php echo getStreamSrc( array("mode=single"),"&" )?>" + "&monitor=" + monId.toString() + "&scale=" + effectiveScale + Math.random().toString() ;
return $x; return $x;
} } else {
else
{
var zeropad = <?php echo sprintf("\"%0" . ZM_EVENT_IMAGE_DIGITS . "d\"",0); ?>; var zeropad = <?php echo sprintf("\"%0" . ZM_EVENT_IMAGE_DIGITS . "d\"",0); ?>;
for(var i=0, var eIdlength = eId.length; i<eIdlength; i++) // Search for a match for(var i=0, eIdlength = eId.length; i<eIdlength; i++) {
{ // Search for a match
if(eMonId[i]==monId && val >= eStartSecs[i] && val <= eEndSecs[i]) if(eMonId[i]==monId && val >= eStartSecs[i] && val <= eEndSecs[i]) {
{
var frame=parseInt((val - eStartSecs[i])/(eEndSecs[i]-eStartSecs[i])*eventFrames[i])+1; var frame=parseInt((val - eStartSecs[i])/(eEndSecs[i]-eStartSecs[i])*eventFrames[i])+1;
img = "index.php?view=image&eid=" + eId[i] + '&fid='+frame + "&width=" + monitorCanvasObj[monId].width + "&height=" + monitorCanvasObj[monId].height; img = "index.php?view=image&eid=" + eId[i] + '&fid='+frame + "&width=" + monitorCanvasObj[monId].width + "&height=" + monitorCanvasObj[monId].height;
return img; return img;
} }
} } // end for
return "no data"; return "no data";
} }
} }
function imagedone(obj, monId, success) function imagedone(obj, monId, success) {
{ if(success) {
if(success)
{
monitorCanvasCtx[monId].drawImage( monitorImageObject[monId], 0, 0, monitorCanvasObj[monId].width, monitorCanvasObj[monId].height); monitorCanvasCtx[monId].drawImage( monitorImageObject[monId], 0, 0, monitorCanvasObj[monId].width, monitorCanvasObj[monId].height);
var iconSize=(Math.max(monitorCanvasObj[monId].width,monitorCanvasObj[monId].height) * 0.10); var iconSize=(Math.max(monitorCanvasObj[monId].width,monitorCanvasObj[monId].height) * 0.10);
monitorCanvasCtx[monId].font = "600 " + iconSize.toString() + "px Arial"; monitorCanvasCtx[monId].font = "600 " + iconSize.toString() + "px Arial";
@ -583,10 +562,10 @@ function imagedone(obj, monId, success)
evaluateLoadTimes(); evaluateLoadTimes();
} }
monitorLoading[monId]=false; monitorLoading[monId]=false;
if(!success) // if we had a failrue queue up the no-data image if(!success) {
// if we had a failrue queue up the no-data image
loadImage2Monitor(monId,"no data"); // leave the staged URL if there is one, just ignore it here. loadImage2Monitor(monId,"no data"); // leave the staged URL if there is one, just ignore it here.
else } else {
{
if(monitorLoadingStageURL[monId]=="") return; if(monitorLoadingStageURL[monId]=="") return;
loadImage2Monitor(monId,monitorLoadingStageURL[monId]); loadImage2Monitor(monId,monitorLoadingStageURL[monId]);
monitorLoadingStageURL[monId]=""; monitorLoadingStageURL[monId]="";
@ -594,24 +573,19 @@ function imagedone(obj, monId, success)
return; return;
} }
function loadImage2Monitor(monId,url) function loadImage2Monitor(monId,url) {
{ if(monitorLoading[monId] && monitorImageObject[monId].src != url ) {
if(monitorLoading[monId] && monitorImageObject[monId].src != url ) // never queue the same image twice (if it's loading it has to be defined, right? // never queue the same image twice (if it's loading it has to be defined, right?
{
monitorLoadingStageURL[monId]=url; // we don't care if we are overriting, it means it didn't change fast enough monitorLoadingStageURL[monId]=url; // we don't care if we are overriting, it means it didn't change fast enough
} } else {
else
{
var skipthis=0; var skipthis=0;
if( typeof monitorImageObject[monId] !== "undefined" && monitorImageObject[monId] != null && monitorImageObject[monId].src == url ) return; // do nothing if it's the same if( typeof monitorImageObject[monId] !== "undefined" && monitorImageObject[monId] != null && monitorImageObject[monId].src == url ) return; // do nothing if it's the same
if( monitorImageObject[monId] == null ) if( monitorImageObject[monId] == null ) {
{
monitorImageObject[monId]=new Image(); monitorImageObject[monId]=new Image();
monitorImageObject[monId].onload = function() {imagedone(this, monId,true )}; monitorImageObject[monId].onload = function() {imagedone(this, monId,true )};
monitorImageObject[monId].onerror = function() {imagedone(this, monId,false)}; monitorImageObject[monId].onerror = function() {imagedone(this, monId,false)};
} }
if(url=='no data') if(url=='no data') {
{
monitorCanvasCtx[monId].fillStyle="white"; monitorCanvasCtx[monId].fillStyle="white";
monitorCanvasCtx[monId].fillRect(0,0,monitorCanvasObj[monId].width,monitorCanvasObj[monId].height); monitorCanvasCtx[monId].fillRect(0,0,monitorCanvasObj[monId].width,monitorCanvasObj[monId].height);
var textSize=monitorCanvasObj[monId].width * 0.15; var textSize=monitorCanvasObj[monId].width * 0.15;
@ -620,20 +594,17 @@ function loadImage2Monitor(monId,url)
monitorCanvasCtx[monId].fillStyle="black"; monitorCanvasCtx[monId].fillStyle="black";
var textWidth = monitorCanvasCtx[monId].measureText(text).width; var textWidth = monitorCanvasCtx[monId].measureText(text).width;
monitorCanvasCtx[monId].fillText(text,monitorCanvasObj[monId].width/2 - textWidth/2,monitorCanvasObj[monId].height/2); monitorCanvasCtx[monId].fillText(text,monitorCanvasObj[monId].width/2 - textWidth/2,monitorCanvasObj[monId].height/2);
} } else {
else
{
monitorLoading[monId]=true; monitorLoading[monId]=true;
monitorLoadStartTimems[monId]=new Date().getTime(); monitorLoadStartTimems[monId]=new Date().getTime();
monitorImageObject[monId].src=url; // starts a load but doesn't refresh yet, wait until ready monitorImageObject[monId].src=url; // starts a load but doesn't refresh yet, wait until ready
} }
} }
} }
function timerFire() function timerFire() {
{
// See if we need to reschedule // See if we need to reschedule
if(currentDisplayInterval != timerInterval || currentSpeed == 0) // zero just turn off interrupts if(currentDisplayInterval != timerInterval || currentSpeed == 0) {
{ // zero just turn off interrupts
clearInterval(timerObj); clearInterval(timerObj);
timerInterval=currentDisplayInterval; timerInterval=currentDisplayInterval;
if(currentSpeed>0 || liveMode!=0) timerObj=setInterval(timerFire,timerInterval); // don't fire out of live mode if speed is zero if(currentSpeed>0 || liveMode!=0) timerObj=setInterval(timerFire,timerInterval); // don't fire out of live mode if speed is zero
@ -649,14 +620,12 @@ function timerFire()
return; return;
} }
function drawSliderOnGraph(val) function drawSliderOnGraph(val) {
{
var sliderWidth=10; var sliderWidth=10;
var sliderLineWidth=1; var sliderLineWidth=1;
var sliderHeight=cHeight; var sliderHeight=cHeight;
if(liveMode==1) if(liveMode==1) {
{
val=Math.floor( Date.now() / 1000); val=Math.floor( Date.now() / 1000);
} }
// Set some sizes // Set some sizes
@ -665,8 +634,8 @@ function drawSliderOnGraph(val)
var labbottom=parseInt(cHeight * 0.2 / (numMonitors+1)).toString() + "px"; // This is positioning same as row labels below, but from bottom so 1-position var labbottom=parseInt(cHeight * 0.2 / (numMonitors+1)).toString() + "px"; // This is positioning same as row labels below, but from bottom so 1-position
var labfont=labelpx + "px Georgia"; // set this like below row labels var labfont=labelpx + "px Georgia"; // set this like below row labels
if(numMonitors>0) // if we have no data to display don't do the slider itself if(numMonitors>0) {
{ // if we have no data to display don't do the slider itself
var sliderX=parseInt( (val - minTimeSecs) / rangeTimeSecs * cWidth - sliderWidth/2); // position left side of slider var sliderX=parseInt( (val - minTimeSecs) / rangeTimeSecs * cWidth - sliderWidth/2); // position left side of slider
if(sliderX < 0) sliderX=0; if(sliderX < 0) sliderX=0;
if(sliderX+sliderWidth > cWidth) sliderX=cWidth-sliderWidth-1; if(sliderX+sliderWidth > cWidth) sliderX=cWidth-sliderWidth-1;
@ -896,15 +865,14 @@ HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords;
// These are the functions for mouse movement in the timeline. Note that touch is treated as a mouse move with mouse down // These are the functions for mouse movement in the timeline. Note that touch is treated as a mouse move with mouse down
var mouseisdown=false; var mouseisdown=false;
function mdown(event) {mouseisdown=true; mmove(event)} function mdown(event) {mouseisdown=true; mmove(event);}
function mup(event) {mouseisdown=false;} function mup(event) {mouseisdown=false;}
function mout(event) {mouseisdown=false;} // if we go outside treat it as release function mout(event) {mouseisdown=false;} // if we go outside treat it as release
function tmove(event) {mouseisdown=true; mmove(event);} function tmove(event) {mouseisdown=true; mmove(event);}
function mmove(event) function mmove(event) {
{ if(mouseisdown) {
if(mouseisdown) // only do anything if the mouse is depressed while on the sheet // only do anything if the mouse is depressed while on the sheet
{
var sec = minTimeSecs + rangeTimeSecs / event.target.width * event.target.relMouseCoords(event).x; var sec = minTimeSecs + rangeTimeSecs / event.target.width * event.target.relMouseCoords(event).x;
outputUpdate(sec); outputUpdate(sec);
} }