Skip to content

Commit

Permalink
Merge branch 'LapTimer'
Browse files Browse the repository at this point in the history
  • Loading branch information
Gary Keeble authored and Gary Keeble committed Jul 21, 2016
2 parents d1d84a2 + 9ddee4d commit d7b5643
Show file tree
Hide file tree
Showing 7 changed files with 340 additions and 44 deletions.
43 changes: 42 additions & 1 deletion css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -514,6 +514,14 @@ html:not(has-analyser) .view-analyser-fullscreen {
vertical-align: top;
}

html.has-log .video-top-controls > li.log-view-panel, html.has-log .video-top-controls > li.log-chart-zoom-panel, html.has-log .video-top-controls > li.log-chart-time-panel {
display: inline-block;
}

.video-top-controls > li.log-view-panel, .video-top-controls > li.log-chart-zoom-panel, .video-top-controls > li.log-chart-time-panel {
display: none;
}

.video-top-controls > .log-sync-panel {
display:none;
}
Expand Down Expand Up @@ -919,4 +927,37 @@ html.isBF input[type="checkbox"].ios-switch:checked + div > div {
border-radius: 5px;
margin-right:3px;
background-image: linear-gradient(to bottom,#fff8e9 0,#ffbb00 100%);
}
}

div#lap-timer {
position: absolute;
background-color: rgb(34, 34, 34);
z-index: 10;
top: 5%;
left: calc(90% - 233px);
border-radius: 5px;
padding: 5px;
color: #bbb;
border-style: solid;
border-width: thin;
}

tr.lap-timer-heading td {
font-style: italic;
border-bottom-color: white;
border-bottom-width: thin;
/* text-decoration: underline; */
border-bottom-style: solid;
}

table#lap-timer-laps {
display: none;
}

html.hasLaps table#lap-timer-laps {
display: table;
}

div#lap-timer td:first-child {
padding-right: 10px;
}
46 changes: 44 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -304,9 +304,8 @@ <h2>Legend <span class="log-close-legend-dialog glyphicon glyphicon-remove"></sp
</table>
</div>
<div class="configuration-file" id="configuration-file">
<!-- auto filled bu configuration function -->
<!-- auto filled by configuration function -->
</div>
</div>
<!-- Status Bar -->
<div id="status-bar">
<div>
Expand Down Expand Up @@ -1254,6 +1253,48 @@ <h4 class="modal-title">Advanced User Settings</h4>
</div>
</div>
</div>
<div class="gui_box grey top-spacer laptimer-settings">
<div class="gui_box_titlebar">
<div class="spacer_box_title">Lap Timer Settings</div>
</div>
<div class="spacer_box">
<div>
<label class="option">Lap Timer<input class="laptimer ios-switch" type="checkbox"/><div><div></div></div><span>Show the lap timer.</span></label>
</div>
<div class="laptimer-group">
<table>
<tr>
<td>
<label>Position</label>
</td>
<td class="position">
<label>Top</label><input name="laptimer-top" type="number" step="1" min="0" max="100"/><p>%</p>
</td>
<td class="position">
<label>Left</label><input name="laptimer-left" type="number" step="1" min="0" max="100"/><p>%</p>
</td>
<td class="position">
</td>
</tr>
<tr>
<td>
<label>Transparency</label>
</td>
<td class="position">
<input name="laptimer-transparency" type="number" step="1" min="0" max="100"/><p>%</p>
</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<p>To use the lap timer feature, you MUST set a "start time" bookmark at the beginning
of the log/video (where the race starts for example) plus additional bookmarks to mark the start of each lap.
Bookmark the video frames where you actually cross the start/finish line for best results.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="clear-both"></div>
Expand Down Expand Up @@ -1301,6 +1342,7 @@ <h4 class="modal-title">Advanced User Settings</h4>
<script src="js/flightlog_video_renderer.js"></script>
<script src="js/graph_config.js"></script>
<script src="js/configuration.js"></script>
<script src="js/laptimer.js"></script>
<script src="js/main.js"></script>
</body>
</html>
56 changes: 20 additions & 36 deletions js/grapher.js
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,8 @@ function FlightLogGrapher(flightLog, graphConfig, canvas, craftCanvas, analyserC
analyser = null, /* define a new spectrum analyser */

watermarkLogo, /* Watermark feature */

lapTimer, /* LapTimer feature */

that = this;

Expand Down Expand Up @@ -226,40 +228,6 @@ function FlightLogGrapher(flightLog, graphConfig, canvas, craftCanvas, analyserC
}
}

function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
if (typeof stroke == 'undefined') {
stroke = true;
}
if (typeof radius === 'undefined') {
radius = 5;
}
if (typeof radius === 'number') {
radius = {tl: radius, tr: radius, br: radius, bl: radius};
} else {
var defaultRadius = {tl: 0, tr: 0, br: 0, bl: 0};
for (var side in defaultRadius) {
radius[side] = radius[side] || defaultRadius[side];
}
}
ctx.beginPath();
ctx.moveTo(x + radius.tl, y);
ctx.lineTo(x + width - radius.tr, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius.tr);
ctx.lineTo(x + width, y + height - radius.br);
ctx.quadraticCurveTo(x + width, y + height, x + width - radius.br, y + height);
ctx.lineTo(x + radius.bl, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - radius.bl);
ctx.lineTo(x, y + radius.tl);
ctx.quadraticCurveTo(x, y, x + radius.tl, y);
ctx.closePath();
if (fill) {
ctx.fill();
}
if (stroke) {
ctx.stroke();
}
}

function drawWaterMark() {

canvasContext.save();
Expand All @@ -271,7 +239,12 @@ function FlightLogGrapher(flightLog, graphConfig, canvas, craftCanvas, analyserC
canvasContext.restore();

}


function drawLapTimer() {
// Update the Lap Timer
lapTimer.refresh(windowCenterTime, (3600*1000000/*a long time*/), blackboxLogViewer.getBookmarkTimes());
lapTimer.drawCanvas(canvas, options);
}

function drawCommandSticks(frame) {

Expand Down Expand Up @@ -927,7 +900,9 @@ function FlightLogGrapher(flightLog, graphConfig, canvas, craftCanvas, analyserC
}

// Draw events
drawEvents(chunks);
if(options.drawEvents) {
drawEvents(chunks);
}

// Draw details at the current time
var
Expand Down Expand Up @@ -971,6 +946,12 @@ function FlightLogGrapher(flightLog, graphConfig, canvas, craftCanvas, analyserC
if (options.drawWatermark && watermarkLogo) {
drawWaterMark();
}

//Draw Lap Timer
if (options.drawLapTimer && lapTimer) {
drawLapTimer();
}

}

drawInOutRegion();
Expand Down Expand Up @@ -1122,6 +1103,9 @@ function FlightLogGrapher(flightLog, graphConfig, canvas, craftCanvas, analyserC
/* Create the FlightLogAnalyser object */
analyser = new FlightLogAnalyser(flightLog, graphConfig, canvas, analyserCanvas, options);

/* Create the Lap Timer object */
lapTimer = new LapTimer();

//Handle dragging events
$(canvas).on("mousedown",onMouseDown);

Expand Down
157 changes: 157 additions & 0 deletions js/laptimer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,157 @@
"use strict";

function LapTimer() {

var lapTime = {
current: null,
last: null,
best: null,
laps: [],
};

this.currentLapTime = function() {
return lapTime.current || '00:00.000';
};

this.lastLapTime = function() {
return lapTime.last || '00:00.000';
};

this.bestLapTime = function() {
return lapTime.best || '00:00.000';
};

this.laps = function() {
return lapTime.laps;
};

this.drawCanvas = function(canvas, options) {
// Draw the LapTimes using a canvas
var ctx = canvas.getContext("2d");

var

lineHeight = 14, //px
DEFAULT_FONT_FACE = "8pt Verdana, Arial, sans-serif",

fgColor = "rgba(191,191,191,1.0)", // Text and highlights color
bgColor = "rgba(76,76,76," + parseInt(options.laptimer.transparency) / 100.0 + ")", // background color

left = canvas.width * parseInt(options.laptimer.left) / 100.0,
top = canvas.height * parseInt(options.laptimer.top) / 100.0,
margin = 4, // pixels
rows = 5 + ((lapTime.laps.length>0)?(1+lapTime.laps.length):0);

ctx.save(); // Store the current canvas configuration


var firstColumnWidth = ctx.measureText("Current").width,
secondColumn = ctx.measureText("XX:XX.XXX").width,
width = margin + firstColumnWidth + margin + secondColumn + margin; // get the size of the box


// move to the top left of the Lap Timer
ctx.translate(left, top);

ctx.lineWidth = 1;

ctx.fillStyle = bgColor;
ctx.strokeStyle = fgColor;

//Fill in background
roundRect(ctx, 0, 0, width, lineHeight * (rows - 0.5) , 7, true, true); // draw the bounding box with border

// Add Title, and current values
var currentRow = 1;
ctx.textAlign = 'left';
ctx.fillStyle = fgColor;

// Title
ctx.font = "italic " + DEFAULT_FONT_FACE;
ctx.fillText('Lap Timer', margin, lineHeight * currentRow);
// Underline
ctx.beginPath();
ctx.strokeStyle = fgColor;
ctx.moveTo(margin, (lineHeight * currentRow) + 2 /*px*/);
ctx.lineTo(width-margin, (lineHeight * currentRow) + 2 /*px*/);
ctx.stroke();

currentRow++;

// Summary
ctx.font = DEFAULT_FONT_FACE;
ctx.fillText('Current' , margin, lineHeight * currentRow); ctx.fillText(formatTime(lapTime.current, true) , margin + firstColumnWidth + margin, lineHeight * currentRow++);
ctx.fillText('Last' , margin, lineHeight * currentRow); ctx.fillText(formatTime(lapTime.last , true) , margin + firstColumnWidth + margin, lineHeight * currentRow++);
ctx.fillText('Best' , margin, lineHeight * currentRow); ctx.fillText(formatTime(lapTime.best , true) , margin + firstColumnWidth + margin, lineHeight * currentRow++);

// Laps
if(lapTime.laps.length>0) {
// Title
ctx.font = "italic " + DEFAULT_FONT_FACE;
ctx.fillText('Laps', margin, lineHeight * currentRow);
// Underline
ctx.beginPath();
ctx.strokeStyle = fgColor;
ctx.moveTo(margin, (lineHeight * currentRow) + 2 /*px*/);
ctx.lineTo(width-margin, (lineHeight * currentRow) + 2 /*px*/);
ctx.stroke();
currentRow++;

// Each Lap
ctx.font = DEFAULT_FONT_FACE;
for(var i=0; i<lapTime.laps.length; i++) {
ctx.fillText('Lap ' + (i+1), margin, lineHeight * currentRow); ctx.fillText(formatTime(lapTime.laps[i] , true) , margin + firstColumnWidth + margin, lineHeight * currentRow++);
}
}

ctx.restore();
};

this.refresh = function(currentTime, maxTime, bookmarkTimes) {
// Update the lapTimeTable with the current information

if(currentTime!=null && bookmarkTimes!=null) if(bookmarkTimes.length>0) {

var bookmarkTimesSorted = bookmarkTimes.slice(0);
bookmarkTimesSorted.push(maxTime); // add end time
bookmarkTimesSorted.sort((a,b)=>a-b); // sort on value (rather than default alphabetically)

lapTime.laps = []; // Clear the array

for(var i=0; i<bookmarkTimesSorted.length - 1; i++) {
if(i>0 && currentTime >= bookmarkTimesSorted[0]) { // Calculate all the laps so far
lapTime.laps.push((bookmarkTimesSorted[i] - bookmarkTimesSorted[i-1])/1000);
}
if(currentTime < bookmarkTimesSorted[i+1] && currentTime >= bookmarkTimesSorted[i]) {
// We have found the current lap
lapTime.current = (currentTime - bookmarkTimesSorted[i])/1000;
if(i>0) {
lapTime.last = (bookmarkTimesSorted[i] - bookmarkTimesSorted[i-1])/1000;
} else {
lapTime.last = 0; // we are in the first lap, there is no last or best value
lapTime.best = 0;
}

break;
} else { // We are before the first bookmark (i.e. the start of the race)
lapTime.current = 0;
lapTime.last = 0;
};
}

if(lapTime.laps.length > 0 && currentTime > bookmarkTimesSorted[0]) {
lapTime.best=maxTime;
for(var i=0; i<lapTime.laps.length; i++) {
if(lapTime.laps[i] < lapTime.best) {
lapTime.best = lapTime.laps[i];
};
};
};

};
};

// Initialisation Code

// None
};
Loading

0 comments on commit d7b5643

Please sign in to comment.