Skip to content

Commit 3608843

Browse files
Gary KeebleGary Keeble
Gary Keeble
authored and
Gary Keeble
committed
Add Stick Trails Option
Show stick movement trails.
1 parent 05ae855 commit 3608843

File tree

3 files changed

+120
-50
lines changed

3 files changed

+120
-50
lines changed

‎index.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1123,6 +1123,9 @@ <h4 class="modal-title">Advanced User Settings</h4>
11231123
<div class="spacer_box">
11241124
<div>
11251125
<label class="option">Units<input class="stick-units ios-switch" type="checkbox"/><div><div></div></div><span>Display actual units on stick display.</span></label>
1126+
</div>
1127+
<div>
1128+
<label class="option">Stick Trails<input class="stick-trails ios-switch" type="checkbox"/><div><div></div></div><span>Show strick trails.</span></label>
11261129
</div>
11271130
<div class="stick-mode-group">
11281131
<table>

‎js/grapher.js

Lines changed: 107 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -245,103 +245,150 @@ function FlightLogGrapher(flightLog, graphConfig, canvas, craftCanvas, analyserC
245245
lapTimer.refresh(windowCenterTime, (3600*1000000/*a long time*/), blackboxLogViewer.getBookmarkTimes());
246246
lapTimer.drawCanvas(canvas, options);
247247
}
248-
249-
function drawCommandSticks(frame) {
250-
251-
canvasContext.save();
252248

253-
var
254-
// The total width available to draw both sticks in:
255-
sticksDisplayWidth = canvas.width * parseInt(options.sticks.size) / 100.0,
256-
257-
// Use that plus the inter-stick spacing that has been determined already to decide how big each stick should be:
258-
stickSurroundRadius = Math.min((sticksDisplayWidth - drawingParams.stickSpacing) / 4, canvas.height / 10),
259-
yawStickMax = 500,
260-
261-
stickColor = "rgba(255,102,102,1.0)",
262-
stickAreaColor = "rgba(76,76,76,0.2)",
263-
crosshairColor = "rgba(191,191,191,0.5)";
264-
249+
function getStickValues(frame, stickPositions, stickLabel, config) {
265250
var
266251
stickIndex,
267-
rcCommand = [], rcCommandLabels = [],
268-
stickPositions = [],
269-
stickLabel = [];
270-
271-
var currentFlightMode = frame[flightLog.getMainFieldIndexByName("flightModeFlags")];
252+
rcCommand = [], rcCommandLabels = [];
272253

273254
for (stickIndex = 0; stickIndex < 4; stickIndex++) {
274255
//Check that stick data is present to be drawn:
275256
if (idents.rcCommandFields[stickIndex] === undefined)
276257
return;
277258

278-
rcCommand[stickIndex] = frame[idents.rcCommandFields[stickIndex]];
279-
rcCommandLabels[stickIndex] = (rcCommand[stickIndex] * ((stickIndex==2)?-1:1)) + ""; // correct the value for Yaw being inverted
280-
if(options.stickUnits!=null) {
281-
if(options.stickUnits) {
282-
rcCommandLabels[stickIndex] = FlightLogFieldPresenter.decodeFieldToFriendly(flightLog, flightLog.getMainFieldNames()[idents.rcCommandFields[stickIndex]], frame[idents.rcCommandFields[stickIndex]], currentFlightMode);
259+
rcCommand[stickIndex] = frame[idents.rcCommandFields[stickIndex]];
260+
if(stickLabel!=null) {
261+
rcCommandLabels[stickIndex] = (rcCommand[stickIndex] * ((stickIndex==2)?-1:1)) + ""; // correct the value for Yaw being inverted
262+
if(options.stickUnits!=null) {
263+
if(options.stickUnits) {
264+
var currentFlightMode = frame[flightLog.getMainFieldIndexByName("flightModeFlags")];
265+
rcCommandLabels[stickIndex] = FlightLogFieldPresenter.decodeFieldToFriendly(flightLog, flightLog.getMainFieldNames()[idents.rcCommandFields[stickIndex]], frame[idents.rcCommandFields[stickIndex]], currentFlightMode);
266+
}
283267
}
284-
}
268+
}
285269
}
286270

287271
// map the stick positions based upon selected stick mode (default is mode 2)
288272

289273
//Compute the position of the sticks in the range [-1..1] (left stick x, left stick y, right stick x, right stick y)
290274
switch(options.stickMode) {
291275
case STICK_MODE_1:
292-
stickPositions[0] = -rcCommand[2] / yawStickMax; //Yaw
276+
stickPositions[0] = -rcCommand[2] / config.yawStickMax; //Yaw
293277
stickPositions[1] = pitchStickCurve.lookup(-rcCommand[1]); //Pitch
294278
stickPositions[2] = pitchStickCurve.lookup(rcCommand[0]); //Roll
295279
stickPositions[3] = (1500 - rcCommand[3]) / 500; //Throttle
296-
297-
stickLabel[0] = rcCommandLabels[2];
298-
stickLabel[1] = rcCommandLabels[1];
299-
stickLabel[2] = rcCommandLabels[0];
300-
stickLabel[3] = rcCommandLabels[3];
280+
281+
if(stickLabel!=null) {
282+
stickLabel[0] = rcCommandLabels[2];
283+
stickLabel[1] = rcCommandLabels[1];
284+
stickLabel[2] = rcCommandLabels[0];
285+
stickLabel[3] = rcCommandLabels[3];
286+
}
301287

302288
break;
303289
case STICK_MODE_3:
304290
stickPositions[0] = pitchStickCurve.lookup(rcCommand[0]); //Roll
305291
stickPositions[1] = pitchStickCurve.lookup(-rcCommand[1]); //Pitch
306-
stickPositions[2] = -rcCommand[2] / yawStickMax; //Yaw
292+
stickPositions[2] = -rcCommand[2] / config.yawStickMax; //Yaw
307293
stickPositions[3] = (1500 - rcCommand[3]) / 500; //Throttle
308294

309-
stickLabel[0] = rcCommandLabels[0];
310-
stickLabel[1] = rcCommandLabels[1];
311-
stickLabel[2] = rcCommandLabels[2];
312-
stickLabel[3] = rcCommandLabels[3];
295+
if(stickLabel!=null) {
296+
stickLabel[0] = rcCommandLabels[0];
297+
stickLabel[1] = rcCommandLabels[1];
298+
stickLabel[2] = rcCommandLabels[2];
299+
stickLabel[3] = rcCommandLabels[3];
300+
}
313301

314302
break;
315303
case STICK_MODE_4:
316304
stickPositions[0] = pitchStickCurve.lookup(rcCommand[0]); //Roll
317305
stickPositions[1] = (1500 - rcCommand[3]) / 500; //Throttle
318-
stickPositions[2] = -rcCommand[2] / yawStickMax; //Yaw
306+
stickPositions[2] = -rcCommand[2] / config.yawStickMax; //Yaw
319307
stickPositions[3] = pitchStickCurve.lookup(-rcCommand[1]); //Pitch
320308

321-
stickLabel[0] = rcCommandLabels[0];
322-
stickLabel[1] = rcCommandLabels[3];
323-
stickLabel[2] = rcCommandLabels[2];
324-
stickLabel[3] = rcCommandLabels[1];
309+
if(stickLabel!=null) {
310+
stickLabel[0] = rcCommandLabels[0];
311+
stickLabel[1] = rcCommandLabels[3];
312+
stickLabel[2] = rcCommandLabels[2];
313+
stickLabel[3] = rcCommandLabels[1];
314+
}
325315

326316
break;
327317
default: // Mode 2
328-
stickPositions[0] = -rcCommand[2] / yawStickMax; //Yaw
318+
stickPositions[0] = -rcCommand[2] / config.yawStickMax; //Yaw
329319
stickPositions[1] = (1500 - rcCommand[3]) / 500; //Throttle
330320
stickPositions[2] = pitchStickCurve.lookup(rcCommand[0]); //Roll
331321
stickPositions[3] = pitchStickCurve.lookup(-rcCommand[1]); //Pitch
332322

333-
stickLabel[0] = rcCommandLabels[2];
334-
stickLabel[1] = rcCommandLabels[3];
335-
stickLabel[2] = rcCommandLabels[0];
336-
stickLabel[3] = rcCommandLabels[1];
323+
if(stickLabel!=null) {
324+
stickLabel[0] = rcCommandLabels[2];
325+
stickLabel[1] = rcCommandLabels[3];
326+
stickLabel[2] = rcCommandLabels[0];
327+
stickLabel[3] = rcCommandLabels[1];
328+
}
337329
}
338330

339331
for (stickIndex = 0; stickIndex < 4; stickIndex++) {
340332
//Clamp to [-1..1]
341333
stickPositions[stickIndex] = stickPositions[stickIndex] > 1 ? 1 : (stickPositions[stickIndex] < -1 ? -1 : stickPositions[stickIndex]);
342334

343335
//Scale to our stick size
344-
stickPositions[stickIndex] *= stickSurroundRadius;
336+
stickPositions[stickIndex] *= config.stickSurroundRadius;
337+
}
338+
339+
}
340+
341+
function drawCommandSticks(frame, chunks, startFrameIndex) {
342+
343+
canvasContext.save();
344+
345+
var
346+
// The total width available to draw both sticks in:
347+
sticksDisplayWidth = canvas.width * parseInt(options.sticks.size) / 100.0,
348+
349+
// Use that plus the inter-stick spacing that has been determined already to decide how big each stick should be:
350+
stickSurroundRadius = Math.min((sticksDisplayWidth - drawingParams.stickSpacing) / 4, canvas.height / 10),
351+
yawStickMax = 500,
352+
353+
stickColor = "rgba(255,102,102,1.0)",
354+
stickAreaColor = "rgba(76,76,76,0.2)",
355+
crosshairColor = "rgba(191,191,191,0.5)";
356+
357+
var
358+
stickIndex,
359+
stickPositions = [],
360+
stickLabel = [];
361+
362+
// Get the stick values
363+
getStickValues(frame, stickPositions, stickLabel, {stickSurroundRadius:stickSurroundRadius, yawStickMax:yawStickMax});
364+
365+
if(options.stickTrails) {
366+
// Get the stick trail data
367+
var stickPositionsTrail = [];
368+
if(chunks && startFrameIndex) {
369+
// we have the data for the stick trails
370+
371+
//We may start partway through the first chunk:
372+
var frameIndex = startFrameIndex;
373+
stickLoop:
374+
for (var chunkIndex = 0; chunkIndex < chunks.length; chunkIndex++) {
375+
var
376+
chunk = chunks[chunkIndex];
377+
378+
for (; frameIndex < chunk.frames.length; frameIndex++) {
379+
var
380+
frameTime = chunk.frames[frameIndex][FlightLogParser.prototype.FLIGHT_LOG_FIELD_INDEX_TIME],
381+
frameStickPositions = [];
382+
383+
if(frameTime > windowCenterTime - 500000) { // only go back 500ms
384+
getStickValues(chunk.frames[frameIndex], frameStickPositions, null, {stickSurroundRadius:stickSurroundRadius, yawStickMax:yawStickMax});
385+
stickPositionsTrail.push(frameStickPositions);
386+
}
387+
if(frameTime >= windowCenterTime) break stickLoop; // we only get the trail up to the center line
388+
}
389+
frameIndex = 0;
390+
}
391+
}
345392
}
346393

347394
// Move origin to center of left stick
@@ -395,6 +442,16 @@ function FlightLogGrapher(flightLog, graphConfig, canvas, craftCanvas, analyserC
395442

396443
}
397444

445+
if(options.stickTrails) {
446+
//Draw circle to represent stick position trail
447+
for(var j=0; j<stickPositionsTrail.length; j++) {
448+
canvasContext.beginPath();
449+
canvasContext.fillStyle = "rgba(255,255,255," + (j/stickPositionsTrail.length * 0.05) + ")";
450+
canvasContext.arc(stickPositionsTrail[j][i * 2 + 0], stickPositionsTrail[j][i * 2 + 1], stickSurroundRadius / 20, 0, 2 * Math.PI);
451+
canvasContext.fill();
452+
}
453+
}
454+
398455
//Draw circle to represent stick position
399456
canvasContext.beginPath();
400457
canvasContext.fillStyle = stickColor;
@@ -967,7 +1024,7 @@ function FlightLogGrapher(flightLog, graphConfig, canvas, craftCanvas, analyserC
9671024

9681025
canvasContext.translate(canvas.width * parseInt(options.sticks.left) / 100.0, canvas.height * parseInt(options.sticks.top) / 100.0);
9691026

970-
drawCommandSticks(centerFrame);
1027+
drawCommandSticks(centerFrame, chunks, startFrameIndex);
9711028

9721029
canvasContext.restore();
9731030
}

‎js/user_settings_dialog.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ function UserSettingsDialog(dialog, onLoad, onSave) {
4141
customMix : null, // Default to no mixer configuration
4242
stickMode : 2, // Default to Mode 2
4343
stickUnits : false, // Show units on stick display?
44+
stickTrails : false, // Show stick trails?
4445
gapless : false,
4546
drawCraft : "3D",
4647
drawPidTable : true,
@@ -277,6 +278,11 @@ function UserSettingsDialog(dialog, onLoad, onSave) {
277278
currentSettings.stickUnits = $(this).is(":checked");
278279
});
279280

281+
282+
$(".stick-trails").click(function() {
283+
currentSettings.stickTrails = $(this).is(":checked");
284+
});
285+
280286
// Load Custom Logo
281287
function readURL(input) {
282288
if (input.files && input.files[0]) {
@@ -327,6 +333,10 @@ function UserSettingsDialog(dialog, onLoad, onSave) {
327333
// set the toggle switch
328334
$(".stick-units").prop('checked', currentSettings.stickUnits);
329335
}
336+
if(currentSettings.stickTrails!=null) {
337+
// set the toggle switch
338+
$(".stick-trails").prop('checked', currentSettings.stickTrails);
339+
}
330340

331341
mixerListSelection(currentSettings.mixerConfiguration); // select current mixer configuration
332342
stickModeSelection(currentSettings.stickMode);

0 commit comments

Comments
 (0)