Mirror/betaflight-configurator
1
0
Fork 0
mirror of https://github.com/betaflight/betaflight-configurator.git synced 2025-07-16 21:05:30 +03:00
Code Issues Wiki Activity

Added change heatmap to PIDs for the sliders

Browse source
This commit is contained in:
Andrew Young 2019-12-18 02:38:47 +00:00
parent 56fff56577
commit 10fb05efc8
6 changed files with 98 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/js/TuningSliders.js
View file

@ -185,7 +185,9 @@ TuningSliders.updatePidSlidersDisplay = function() {
this.pidSlidersUnavailable = true;
}
if (!this.pidSlidersUnavailable) {
if (this.pidSlidersUnavailable) {
TABS.pid_tuning.updatePIDColors(true);
} else {
this.cachedPidSliderValues = true;
}
@ -313,6 +315,8 @@ TuningSliders.calculateNewPids = function() {
$('.pid_tuning .ROLL input[name="f"]').val(ADVANCED_TUNING.feedforwardRoll);
$('.pid_tuning .PITCH input[name="f"]').val(ADVANCED_TUNING.feedforwardPitch);
$('.pid_tuning .YAW input[name="f"]').val(ADVANCED_TUNING.feedforwardYaw);
TABS.pid_tuning.updatePIDColors();
};
TuningSliders.calculateNewGyroFilters = function() {

5
src/js/fc.js
View file

@ -12,6 +12,7 @@ var LED_COLORS;
var LED_MODE_COLORS;
var PID;
var PID_names;
var PIDS_ACTIVE;
var PIDs;
var RC_MAP;
var RC;
@ -56,6 +57,7 @@ var GPS_RESCUE;
var RXFAIL_CONFIG;
var PID_ADVANCED_CONFIG;
var FILTER_CONFIG;
var ADVANCED_TUNING_ACTIVE;
var ADVANCED_TUNING;
var SENSOR_CONFIG;
var COPY_PROFILE;
@ -147,8 +149,10 @@ var FC = {
};
PID_names = [];
PIDS_ACTIVE = new Array(10);
PIDs = new Array(10);
for (var i = 0; i < 10; i++) {
PIDS_ACTIVE[i] = new Array(3);
PIDs[i] = new Array(3);
}
@ -453,6 +457,7 @@ var FC = {
useIntegratedYaw: 0,
integratedYawRelax: 0,
};
ADVANCED_TUNING_ACTIVE = { ...ADVANCED_TUNING };
SENSOR_CONFIG = {
acc_hardware: 0,

6
src/js/msp/MSPHelper.js
View file

@ -363,7 +363,8 @@ MspHelper.prototype.process_data = function(dataHandler) {
for (var i = 0, needle = 0; i < (data.byteLength / 3); i++, needle += 3) {
// main for loop selecting the pid section
for (var j = 0; j < 3; j++) {
PIDs[i][j] = data.readU8();
PIDS_ACTIVE[i][j] = data.readU8();
PIDs[i][j] = PIDS_ACTIVE[i][j];
}
}
break;
@ -587,6 +588,7 @@ MspHelper.prototype.process_data = function(dataHandler) {
break;
case MSPCodes.MSP_SET_PID:
console.log('PID settings saved');
PIDS_ACTIVE = PIDs.map(array => array.slice());
break;
case MSPCodes.MSP_SET_RC_TUNING:
console.log('RC Tuning saved');
@ -1053,6 +1055,7 @@ MspHelper.prototype.process_data = function(dataHandler) {
break;
case MSPCodes.MSP_SET_PID_ADVANCED:
console.log("Advanced PID settings saved");
ADVANCED_TUNING_ACTIVE = { ...ADVANCED_TUNING };
break;
case MSPCodes.MSP_PID_ADVANCED:
ADVANCED_TUNING.rollPitchItermIgnoreRate = data.readU16();
@ -1114,6 +1117,7 @@ MspHelper.prototype.process_data = function(dataHandler) {
}
}
}
ADVANCED_TUNING_ACTIVE = { ...ADVANCED_TUNING };
break;
case MSPCodes.MSP_SENSOR_CONFIG:
SENSOR_CONFIG.acc_hardware = data.readU8();

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

@ -606,6 +606,8 @@ TABS.pid_tuning.initialize = function (callback) {
$('input[id="dtermLowpassDynEnabled"]').prop('checked', FILTER_CONFIG.dterm_lowpass_dyn_min_hz != 0 && FILTER_CONFIG.dterm_lowpass_dyn_min_hz < FILTER_CONFIG.dterm_lowpass_dyn_max_hz).change();
$('input[id="dtermLowpass2Enabled"]').prop('checked', FILTER_CONFIG.dterm_lowpass2_hz != 0).change();
$('input[id="yawLowpassEnabled"]').prop('checked', FILTER_CONFIG.yaw_lowpass_hz != 0).change();
self.updatePIDColors();
}
function form_to_pid_and_rc() {
@ -1712,6 +1714,7 @@ TABS.pid_tuning.initialize = function (callback) {
}).then(function () {
return MSP.promise(MSPCodes.MSP_SET_PID_ADVANCED, mspHelper.crunch(MSPCodes.MSP_SET_PID_ADVANCED));
}).then(function () {
self.updatePIDColors();
return MSP.promise(MSPCodes.MSP_SET_FILTER_CONFIG, mspHelper.crunch(MSPCodes.MSP_SET_FILTER_CONFIG));
}).then(function () {
return MSP.promise(MSPCodes.MSP_SET_RC_TUNING, mspHelper.crunch(MSPCodes.MSP_SET_RC_TUNING));
@ -2126,4 +2129,33 @@ TABS.pid_tuning.updateFilterWarning = function() {
} else {
warningDynamicNotch_e.hide();
}
}
};
TABS.pid_tuning.updatePIDColors = function(clear = false) {
const setTuningElementColor = function(element, mspValue, currentValue) {
if (clear) {
element.css({ "background-color": "white" });
return;
}
if (currentValue === undefined || mspValue === undefined) {
return;
}
const change = (currentValue - mspValue) / 50;
element.css({ "background-color": cssUtil.getColorForPercentage(change, cssUtil.colorTables.pidSlider) });
};
PID_names.forEach(function(elementPid, indexPid) {
$(".pid_tuning ." + elementPid + " input").each(function(indexInput) {
setTuningElementColor($(this), PIDS_ACTIVE[indexPid][indexInput], PIDs[indexPid][indexInput]);
});
});
setTuningElementColor($('.pid_tuning input[name="dMinRoll"]'), ADVANCED_TUNING_ACTIVE.dMinRoll, ADVANCED_TUNING.dMinRoll);
setTuningElementColor($('.pid_tuning input[name="dMinPitch"]'), ADVANCED_TUNING_ACTIVE.dMinPitch, ADVANCED_TUNING.dMinPitch);
setTuningElementColor($('.pid_tuning input[name="dMinYaw"]'), ADVANCED_TUNING_ACTIVE.dMinYaw, ADVANCED_TUNING.dMinYaw);
setTuningElementColor($('.pid_tuning .ROLL input[name="f"]'), ADVANCED_TUNING_ACTIVE.feedforwardRoll, ADVANCED_TUNING.feedforwardRoll);
setTuningElementColor($('.pid_tuning .PITCH input[name="f"]'), ADVANCED_TUNING_ACTIVE.feedforwardPitch, ADVANCED_TUNING.feedforwardPitch);
setTuningElementColor($('.pid_tuning .YAW input[name="f"]'), ADVANCED_TUNING_ACTIVE.feedforwardYaw, ADVANCED_TUNING.feedforwardYaw);
};

48
src/js/utils/css.js Normal file
View file

@ -0,0 +1,48 @@
'use strict';
/*
This utility contains CSS helpers.
*/
const CSSUtil = function () {};
CSSUtil.prototype.colorTables = {
redWhiteGreen: [
{ percentage: -1, color: { r: 0xff, g: 0x00, b: 0x00 } },
{ percentage: 0, color: { r: 0xff, g: 0xff, b: 0xff } },
{ percentage: 1, color: { r: 0x00, g: 0xff, b: 0x00 } }
],
pidSlider: [
{ percentage: -1, color: { r: 0xc5, g: 0xc5, b: 0xc5 } },
{ percentage: 0, color: { r: 0xff, g: 0xff, b: 0xff } },
{ percentage: 1, color: { r: 0xff, g: 0x54, b: 0x0e } }
],
};
// Stack Overflow: https://stackoverflow.com/a/7128796/4107016
CSSUtil.prototype.getColorForPercentage = function(percentage, colorTable = null) {
colorTable = colorTable || cssUtil.colorTables.redWhiteGreen;
percentage = Math.min(1, Math.max(-1, percentage));
let index;
for (index = 1; index < colorTable.length - 1; index++) {
if (percentage < colorTable[index].percentage) {
break;
}
}
const lower = colorTable[index - 1];
const upper = colorTable[index];
const range = upper.percentage - lower.percentage;
const rangePercentage = (percentage - lower.percentage) / range;
const percentageLower = 1 - rangePercentage;
const percentageUpper = rangePercentage;
const color = {
r: Math.floor(lower.color.r * percentageLower + upper.color.r * percentageUpper),
g: Math.floor(lower.color.g * percentageLower + upper.color.g * percentageUpper),
b: Math.floor(lower.color.b * percentageLower + upper.color.b * percentageUpper)
};
return "rgb(" + [color.r, color.g, color.b].join(",") + ")";
};
const cssUtil = new CSSUtil();

3
src/main.html
View file

@ -1,4 +1,4 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
@ -63,6 +63,7 @@
<script type="text/javascript" src="./js/libraries/jquery.ba-throttle-debounce.min.js"></script>
<script type="text/javascript" src="./node_modules/inflection/inflection.min.js"></script>
<script type="text/javascript" src="./js/libraries/analytics.js"></script>
<script type="text/javascript" src="./js/utils/css.js"></script>
<script type="text/javascript" src="./js/utils/window_watchers.js"></script>
<script type="text/javascript" src="./js/injected_methods.js"></script>
<script type="text/javascript" src="./js/ConfigStorage.js"></script>