Add LED strip sliders

[ASDosjani]

This PR add sliders to LED Strip tab for easier and quicker configuration with help icons. Brightness slider is always visible, Rainbow related slider only when the option is turned on.
From FC side here is the PR: betaflight/betaflight#12995

[haslinghuis]

LGTM!

[blckmn]

AUTOMERGE: (FAIL)

• github identifies PR as mergeable -> PASS
• assigned to a milestone -> PASS
• cooling off period lapsed -> PASS
• commit count less or equal to three -> FAIL
• Don't merge label NOT found -> PASS
• at least one RN: label found -> PASS
• Tested label found -> FAIL
• assigned to an approver -> FAIL
• approver count at least three -> FAIL

[McGiverGim]

Approved. I would like more consistency in the descriptions of the messages file, but it's ok.

For the future: the description must show the "context" to the translator. For example, for "Brightness", now you have"Brightness slider label" is better something like "Element of the LED Strip" or "Brightness of the LED Strip". With the context (LED Strip) the translator can give a more precise translation, when there are different translations on his language. The translator only sees the "message" and must look for the best translation.

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[github-actions]

Do you want to test this code? Here you have an automated build:
Betaflight-Configurator-Android
Betaflight-Configurator-Linux
Betaflight-Configurator-macOS
Betaflight-Configurator-Windows
WARNING: It may be unstable and result in corrupted configurations or data loss. Use only for testing!

[nerdCopter]

if merging this broke usage of master 4.5, then does it also break all old firmware??

is semver checking not applied here?

[nerdCopter]

I think this would be the semver checks, but this may be wrong or incomplete or more than required.
I would like @haslinghuis to verify.
Diff:

diff --git a/src/js/msp/MSPHelper.js b/src/js/msp/MSPHelper.js
index a1ab13b1..45218316 100644
--- a/src/js/msp/MSPHelper.js
+++ b/src/js/msp/MSPHelper.js
@@ -1298,13 +1298,18 @@ MspHelper.prototype.process_data = function(dataHandler) {
                 console.log('Led strip mode colors saved');
                 break;
             case MSPCodes.MSP_LED_STRIP_CONFIG_VALUES:
-                FC.LED_CONFIG_VALUES = {
-                    brightness: data.readU8(),
-                    rainbow_delta: data.readU8(),
-                    rainbow_freq: data.readU16(),
-                };
+                if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_46)) {
+                    FC.LED_CONFIG_VALUES = {
+                        brightness: data.readU8(),
+                        rainbow_delta: data.readU8(),
+                        rainbow_freq: data.readU16(),
+                    };
+                }
                 break;
             case MSPCodes.MSP_SET_LED_STRIP_CONFIG_VALUES:
+                if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_46)) {
+                    //future?
+                }
                 break;
             case MSPCodes.MSP_DATAFLASH_SUMMARY:
                 if (data.byteLength >= 13) {
@@ -2640,11 +2645,13 @@ MspHelper.prototype.sendLedStripModeColors = function(onCompleteCallback) {
 };
 
 MspHelper.prototype.sendLedStripConfigValues = function(onCompleteCallback) {
-    const buffer = [];
-    buffer.push8(FC.LED_CONFIG_VALUES.brightness);
-    buffer.push8(FC.LED_CONFIG_VALUES.rainbow_delta);
-    buffer.push16(FC.LED_CONFIG_VALUES.rainbow_freq);
-    MSP.send_message(MSPCodes.MSP_SET_LED_STRIP_CONFIG_VALUES, buffer, false, onCompleteCallback);
+    if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_46)) {
+        const buffer = [];
+        buffer.push8(FC.LED_CONFIG_VALUES.brightness);
+        buffer.push8(FC.LED_CONFIG_VALUES.rainbow_delta);
+        buffer.push16(FC.LED_CONFIG_VALUES.rainbow_freq);
+        MSP.send_message(MSPCodes.MSP_SET_LED_STRIP_CONFIG_VALUES, buffer, false, onCompleteCallback);
+    }
 };
 
 MspHelper.prototype.serialPortFunctionMaskToFunctions = function(functionMask) {
diff --git a/src/js/tabs/led_strip.js b/src/js/tabs/led_strip.js
index 8ab1c18b..48e69928 100644
--- a/src/js/tabs/led_strip.js
+++ b/src/js/tabs/led_strip.js
@@ -636,6 +636,11 @@ led_strip.initialize = function (callback, scrollPosition) {
             $('div.rainbowFreqSlider label').first().text(val);
         });
 
+        if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_46)) {
+            $('div.rainbowFreqSlider input').show();
+        } else {
+            $('div.rainbowFreqSlider input').hide();
+        }
 
         $('a.save').on('click', function () {
             mspHelper.sendLedStripConfig(send_led_strip_colors);

[haslinghuis]

is not needed as handled in

If this code is called often we might use the semver on the consumer of the MSP message instead.