Added change heatmap to PIDs for the sliders

src/js/TuningSliders.js

@@ -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() {

src/js/fc.js

@@ -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,

src/js/msp/MSPHelper.js

@@ -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();

src/js/tabs/pid_tuning.js

@@ -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);
+};

src/js/utils/css.js

@@ -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();

src/main.html

@@ -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>