Mirror/betaflight-configurator
1
0
Fork 0
mirror of https://github.com/betaflight/betaflight-configurator.git synced 2025-07-20 06:45:12 +03:00
Code Issues Wiki Activity

draw throttle position in tuning tab

Browse source
This commit is contained in:
Károly Kiripolszky 2019-10-18 12:07:42 +02:00
parent d7e65b86e1
commit b5f65495a8
1 changed files with 87 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

125
src/js/tabs/pid_tuning.js
View file

@ -1302,48 +1302,85 @@ TABS.pid_tuning.initialize = function (callback) {
$('input.feature').on('input change', updateRates);
$('.pid_tuning').on('input change', updateRates).trigger('input');
$('.throttle input').on('input change', function () {
setTimeout(function () { // let global validation trigger and adjust the values first
var throttleMidE = $('.throttle input[name="mid"]'),
throttleExpoE = $('.throttle input[name="expo"]'),
mid = parseFloat(throttleMidE.val()),
expo = parseFloat(throttleExpoE.val()),
throttleCurve = $('.throttle .throttle_curve canvas').get(0),
context = throttleCurve.getContext("2d");
function redrawThrottleCurve(forced) {
if (!forced && !TABS.pid_tuning.checkThrottle()) {
return;
}
// local validation to deal with input event
if (mid >= parseFloat(throttleMidE.prop('min')) &&
mid <= parseFloat(throttleMidE.prop('max')) &&
expo >= parseFloat(throttleExpoE.prop('min')) &&
expo <= parseFloat(throttleExpoE.prop('max'))) {
// continue
} else {
return;
}
/*
Quadratic curve formula taken from:
https://stackoverflow.com/a/9195706/176210
*/
var canvasHeight = throttleCurve.height;
var canvasWidth = throttleCurve.width;
function getQBezierValue(t, p1, p2, p3) {
var iT = 1 - t;
return iT * iT * p1 + 2 * iT * t * p2 + t * t * p3;
}
// math magic by englishman
var midx = canvasWidth * mid,
midxl = midx * 0.5,
midxr = (((canvasWidth - midx) * 0.5) + midx),
midy = canvasHeight - (midx * (canvasHeight / canvasWidth)),
midyl = canvasHeight - ((canvasHeight - midy) * 0.5 *(expo + 1)),
midyr = (midy / 2) * (expo + 1);
function getQuadraticCurvePoint(startX, startY, cpX, cpY, endX, endY, position) {
return {
x: getQBezierValue(position, startX, cpX, endX),
y: getQBezierValue(position, startY, cpY, endY),
};
}
// draw
context.clearRect(0, 0, canvasWidth, canvasHeight);
context.beginPath();
context.moveTo(0, canvasHeight);
context.quadraticCurveTo(midxl, midyl, midx, midy);
context.moveTo(midx, midy);
context.quadraticCurveTo(midxr, midyr, canvasWidth, 0);
context.lineWidth = 2;
context.strokeStyle = '#ffbb00';
context.stroke();
}, 0);
}).trigger('input');
/* --- */
// let global validation trigger and adjust the values first
var throttleMidE = $('.throttle input[name="mid"]'),
throttleExpoE = $('.throttle input[name="expo"]'),
mid = parseFloat(throttleMidE.val()),
expo = parseFloat(throttleExpoE.val()),
throttleCurve = $('.throttle .throttle_curve canvas').get(0),
context = throttleCurve.getContext("2d");
// local validation to deal with input event
if (mid >= parseFloat(throttleMidE.prop('min')) &&
mid <= parseFloat(throttleMidE.prop('max')) &&
expo >= parseFloat(throttleExpoE.prop('min')) &&
expo <= parseFloat(throttleExpoE.prop('max'))) {
// continue
} else {
return;
}
var canvasHeight = throttleCurve.height;
var canvasWidth = throttleCurve.width;
// math magic by englishman
var midx = canvasWidth * mid,
midxl = midx * 0.5,
midxr = (((canvasWidth - midx) * 0.5) + midx),
midy = canvasHeight - (midx * (canvasHeight / canvasWidth)),
midyl = canvasHeight - ((canvasHeight - midy) * 0.5 *(expo + 1)),
midyr = (midy / 2) * (expo + 1);
let thrPercent = (RC.channels[3] - 1000) / 1000,
thrpos = thrPercent <= mid
? getQuadraticCurvePoint(0, canvasHeight, midxl, midyl, midx, midy, thrPercent * (1.0 / mid))
: getQuadraticCurvePoint(midx, midy, midxr, midyr, canvasWidth, 0, (thrPercent - mid) * (1.0 / (1.0 - mid)));
// draw
context.clearRect(0, 0, canvasWidth, canvasHeight);
context.beginPath();
context.moveTo(0, canvasHeight);
context.quadraticCurveTo(midxl, midyl, midx, midy);
context.moveTo(midx, midy);
context.quadraticCurveTo(midxr, midyr, canvasWidth, 0);
context.lineWidth = 2;
context.strokeStyle = '#ffbb00';
context.stroke();
context.beginPath();
context.arc(thrpos.x, thrpos.y, 4, 0, 2 * Math.PI);
context.fillStyle = context.strokeStyle;
context.fill();
}
$('.throttle input')
.on('input change', () => setTimeout(() => redrawThrottleCurve(true), 0))
.trigger('input');
TABS.pid_tuning.throttleDrawInterval = setInterval(redrawThrottleCurve, 100);
$('a.refresh').click(function () {
self.refresh(function () {
@ -1736,6 +1773,7 @@ TABS.pid_tuning.cleanup = function (callback) {
self.keepRendering = false;
clearInterval(TABS.pid_tuning.throttleDrawInterval);
if (callback) callback();
};
@ -1833,6 +1871,17 @@ TABS.pid_tuning.checkRC = function() {
return rateCurveUpdateRequired;
};
TABS.pid_tuning.checkThrottle = function() {
// Function monitors for change in the received rc throttle data and returns true if a change is detected.
if (!this.oldThrottle) {
this.oldThrottle = RC.channels[3];
return true;
}
var updateRequired = this.oldThrottle != RC.channels[3];
this.oldThrottle = RC.channels[3];
return updateRequired;
};
TABS.pid_tuning.updatePidControllerParameters = function () {
if (semver.gte(CONFIG.apiVersion, "1.20.0") && semver.lt(CONFIG.apiVersion, "1.31.0") && $('.tab-pid_tuning select[name="controller"]').val() === '0') {
$('.pid_tuning .YAW_JUMP_PREVENTION').show();