Add LED Strip sliders (#3550)

Author: ASDosjani

locales/en/messages.json

@@ -3663,6 +3663,29 @@
     "ledStripVtxOverlay": {
         "message": "VTX (uses vtx frequency to assign color)"
     },
+    "ledStripBrightnessSliderTitle": {
+        "message": "Brightness",
+        "description": "Brightness of the LED Strip"
+    },
+    "ledStripBrightnessSliderHelp": {
+        "message": "Maximum brightness percent of the LEDs."
+    },
+    "ledStripRainbowDeltaSliderTitle": {
+        "message": "Delta",
+        "description": "LED Strip rainbow effect delta"
+    },
+    "ledStripRainbowDeltaSliderHelp": {
+        "message": "Hue difference between each LEDs.",
+        "description": "Hint on LED Strip tab for rainbow delta"
+    },
+    "ledStripRainbowFreqSliderTitle": {
+        "message": "Frequency",
+        "description": "LED Strip rainbow effect frequency"
+    },
+    "ledStripRainbowFreqSliderHelp": {
+        "message": "Frequency of the color change, in other terms the speed of the effect.",
+        "description": "Hint on LED Strip tab for rainbow frequency"
+    },
     "ledStripFunctionSection": {
         "message": "LED Functions"
     },
@@ -3820,7 +3843,7 @@
     },
     "ledStripRainbowOverlay": {
         "message": "Rainbow",
-        "description": "Rainbow effect switch label on LED Strip tab"
+        "description": "Label of rainbow effect switch on LED Strip tab"
     },
     "ledStripOverlayTitle": {
         "message": "Overlay"

src/css/tabs/led_strip.less

@@ -250,7 +250,42 @@
 			background: var(--boxBackground);
 			color: var(--defaultText);
 		}
+		.rainbowSlidersDiv {
+			display: none;
+			margin-top: 5px;
+			.rainbowDeltaSlider, .rainbowFreqSlider {
+				display: flex;
+				align-items: center;
+				input {
+					width: 150px;
+					margin-right: 5px;
+					margin-top: 5px;
+				}
+				label {
+					margin-right: 10px;
+					margin-top: 5px;
+				}
+			}
+		}
+	}
+
+	.brightnessSliderDiv {
+		margin-top: -15px;
+		.brightnessSlider{
+			display: flex;
+			align-items: center;
+			input {
+				width: 150px;
+				margin-right: 5px;
+				margin-top: 5px;
+			}
+			label {
+				margin-right: 10px;
+				margin-top: 5px;
+			}
+		}
 	}
+
 	.colorDefineSliders {
 		display: inline-block;
 		position: absolute;

src/js/fc.js

@@ -127,6 +127,7 @@ const FC = {
     LED_COLORS: null,
     LED_MODE_COLORS: null,
     LED_STRIP: null,
+    LED_CONFIG_VALUES: [],
     MISC: null, // DEPRECATED
     MIXER_CONFIG: null,
     MODE_RANGES: null,

src/js/msp/MSPCodes.js

@@ -196,6 +196,8 @@ const MSPCodes = {
     MSP2_GET_OSD_WARNINGS:          0x3005,
     MSP2_GET_TEXT:                  0x3006,
     MSP2_SET_TEXT:                  0x3007,
+    MSP2_GET_LED_STRIP_CONFIG_VALUES: 0x3008,
+    MSP2_SET_LED_STRIP_CONFIG_VALUES: 0x3009,
 
     // MSP2_GET_TEXT and MSP2_SET_TEXT variable types
     PILOT_NAME:                     1,

src/js/msp/MSPHelper.js

@@ -854,6 +854,12 @@ MspHelper.prototype.process_data = function(dataHandler) {
 
                 break;
 
+            case MSPCodes.MSP2_GET_LED_STRIP_CONFIG_VALUES:
+                FC.LED_CONFIG_VALUES.brightness = data.readU8();
+                FC.LED_CONFIG_VALUES.rainbow_delta = data.readU16();
+                FC.LED_CONFIG_VALUES.rainbow_freq = data.readU16();
+                break;
+
             case MSPCodes.MSP_SET_CHANNEL_FORWARDING:
                 console.log('Channel forwarding saved');
                 break;
@@ -1165,7 +1171,7 @@ MspHelper.prototype.process_data = function(dataHandler) {
 
                 let ledCount = (data.byteLength - 2) / 4;
 
-                // The 32 bit config of each LED contains these in LSB:
+                // The 32 bit config of each LED contains the following in LSB:
                 // +----------------------------------------------------------------------------------------------------------+
                 // | Directions - 6 bit | Color ID - 4 bit | Overlays - 10 bit | Function ID - 4 bit  | X - 4 bit | Y - 4 bit |
                 // +----------------------------------------------------------------------------------------------------------+
@@ -1216,9 +1222,8 @@ MspHelper.prototype.process_data = function(dataHandler) {
 
                         FC.LED_STRIP.push(led);
                     }
-                }
-                else {
-                    ledOverlayLetters = ledOverlayLetters.filter(x => x !== 'y');
+                } else {
+                    ledOverlayLetters = ledOverlayLetters.filter(x => x !== 'y'); //remove rainbow because it's only supported after API 1.46
 
                     for (let i = 0; i < ledCount; i++) {
 
@@ -1567,6 +1572,8 @@ MspHelper.prototype.process_data = function(dataHandler) {
             case MSPCodes.MSP2_SET_TEXT:
                 console.log('Text set');
                 break;
+            case MSPCodes.MSP2_SET_LED_STRIP_CONFIG_VALUES:
+                break;
             case MSPCodes.MSP_SET_FILTER_CONFIG:
                 // removed as this fires a lot with firmware sliders console.log('Filter config set');
                 break;
@@ -2117,6 +2124,9 @@ MspHelper.prototype.crunch = function(code, modifierCode = undefined) {
             }
             break;
 
+        case MSPCodes.MSP2_SET_LED_STRIP_CONFIG_VALUES:
+            break;
+
         case MSPCodes.MSP_SET_BLACKBOX_CONFIG:
             buffer.push8(FC.BLACKBOX.blackboxDevice)
                 .push8(FC.BLACKBOX.blackboxRateNum)
@@ -2560,8 +2570,7 @@ MspHelper.prototype.sendLedStripConfig = function(onCompleteCallback) {
             }
 
             buffer.push32(mask);
-        }
-        else {
+        } else {
             for (let overlayLetterIndex = 0; overlayLetterIndex < led.functions.length; overlayLetterIndex++) {
                 const bitIndex = ledOverlayLetters.indexOf(led.functions[overlayLetterIndex]);
                 if (bitIndex >= 0) {
@@ -2638,6 +2647,14 @@ MspHelper.prototype.sendLedStripModeColors = function(onCompleteCallback) {
     }
 };
 
+MspHelper.prototype.sendLedStripConfigValues = function(onCompleteCallback) {
+    const buffer = [];
+    buffer.push8(FC.LED_CONFIG_VALUES.brightness);
+    buffer.push16(FC.LED_CONFIG_VALUES.rainbow_delta);
+    buffer.push16(FC.LED_CONFIG_VALUES.rainbow_freq);
+    MSP.send_message(MSPCodes.MSP2_SET_LED_STRIP_CONFIG_VALUES, buffer, false, onCompleteCallback);
+};
+
 MspHelper.prototype.serialPortFunctionMaskToFunctions = function(functionMask) {
     const self = this;
     const functions = [];

src/js/tabs/led_strip.js

@@ -41,7 +41,11 @@ led_strip.initialize = function (callback, scrollPosition) {
     }
 
     function load_led_mode_colors() {
-        MSP.send_message(MSPCodes.MSP_LED_STRIP_MODECOLOR, false, false, load_html);
+        MSP.send_message(MSPCodes.MSP_LED_STRIP_MODECOLOR, false, false,  semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_46) ? load_led_config_values : load_html);
+    }
+
+    function load_led_config_values() {
+        MSP.send_message(MSPCodes.MSP2_GET_LED_STRIP_CONFIG_VALUES, false, false, load_html);
     }
 
     function load_html() {
@@ -378,6 +382,8 @@ led_strip.initialize = function (callback, scrollPosition) {
                         if (feature_o.is(':checked') !== newVal) {
                             feature_o.prop('checked', newVal);
                             feature_o.trigger('change');
+
+                            $('.rainbowSlidersDiv').toggle($('.checkbox.rainbowOverlay').find('input').is(':checked')); //rainbow slider visibility
                         }
                     });
 
@@ -504,6 +510,11 @@ led_strip.initialize = function (callback, scrollPosition) {
                     }
                 }
 
+                //Change Rainbow slider visibility
+                if (that.is('.function-y')) {
+                    $('.rainbowSlidersDiv').toggle(that.is(':checked'));
+                }
+
                 if ($('.ui-selected').length > 0) {
                     TABS.led_strip.overlays.forEach(function(letter) {
                         if ($(that).is(functionTag + letter)) {
@@ -555,6 +566,78 @@ led_strip.initialize = function (callback, scrollPosition) {
             $(this).addClass(`color-${led.color}`);
         });
 
+        //default slider values
+        $('div.brightnessSlider input').first().prop('value', FC.LED_CONFIG_VALUES.brightness);
+        $('div.brightnessSlider label').first().text($('div.brightnessSlider input').first().val());
+        $('div.rainbowDeltaSlider input').first().prop('value', FC.LED_CONFIG_VALUES.rainbow_delta);
+        $('div.rainbowDeltaSlider label').first().text($('div.rainbowDeltaSlider input').first().val());
+        $('div.rainbowFreqSlider input').first().prop('value', FC.LED_CONFIG_VALUES.rainbow_freq);
+        $('div.rainbowFreqSlider label').first().text($('div.rainbowFreqSlider input').first().val());
+
+        //Brightness slider
+        let bufferingBrightness = [],
+        buffer_delay_brightness = false;
+
+        $('div.brightnessSlider input').on('input', function () {
+            const val = $(this).val();
+            bufferingBrightness.push(val);
+
+            if (!buffer_delay_brightness) {
+                buffer_delay_brightness = setTimeout(function () {
+                    FC.LED_CONFIG_VALUES.brightness = bufferingBrightness.pop();
+                    mspHelper.sendLedStripConfigValues();
+
+                    bufferingBrightness = [];
+                    buffer_delay_brightness = false;
+                }, 10);
+            }
+
+            $('div.brightnessSlider label').first().text(val);
+        });
+
+        //Rainbow Delta slider
+        let bufferingRainbowDelta = [],
+        buffer_delay_rainbow_delta = false;
+
+        $('div.rainbowDeltaSlider input').on('input', function () {
+            const val = $(this).val();
+            bufferingRainbowDelta.push(val);
+
+            if (!buffer_delay_rainbow_delta) {
+                buffer_delay_rainbow_delta = setTimeout(function () {
+                    FC.LED_CONFIG_VALUES.rainbow_delta = bufferingRainbowDelta.pop();
+                    mspHelper.sendLedStripConfigValues();
+
+                    bufferingRainbowDelta = [];
+                    buffer_delay_rainbow_delta = false;
+                }, 10);
+            }
+
+            $('div.rainbowDeltaSlider label').first().text(val);
+        });
+
+        //Rainbow Frequency slider
+        let bufferingRainbowFreq = [],
+        buffer_delay_rainbow_freq = false;
+
+        $('div.rainbowFreqSlider input').on('input', function () {
+            const val = $(this).val();
+            bufferingRainbowFreq.push(val);
+
+            if (!buffer_delay_rainbow_freq) {
+                buffer_delay_rainbow_freq = setTimeout(function () {
+                    FC.LED_CONFIG_VALUES.rainbow_freq = bufferingRainbowFreq.pop();
+                    mspHelper.sendLedStripConfigValues();
+
+                    bufferingRainbowFreq = [];
+                    buffer_delay_rainbow_freq = false;
+                }, 10);
+            }
+
+            $('div.rainbowFreqSlider label').first().text(val);
+        });
+
+
         $('a.save').on('click', function () {
             mspHelper.sendLedStripConfig(send_led_strip_colors);
 
@@ -786,6 +869,8 @@ led_strip.initialize = function (callback, scrollPosition) {
 
         $('.vtxOverlay').toggle(isVtxActive(activeFunction));
 
+        $('.brightnessSliderDiv').toggle(semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_46));
+
         // set mode colors visibility
         if (activeFunction === "function-f") {
             $('.mode_colors').show();

src/tabs/led_strip.html

@@ -88,6 +88,20 @@
                 <div class="checkbox rainbowOverlay">
                     <input type="checkbox" name="Rainbow" class="toggle function-y" />
                     <label> <span i18n="ledStripRainbowOverlay"></span></label>
+                    <div class="rainbowSlidersDiv">
+                        <span i18n="ledStripRainbowDeltaSliderTitle"></span>
+                        <div class="rainbowDeltaSlider">
+                            <input type="range" min="0" max="359"/>
+                            <label></label>
+                            <div class="helpicon cf_tip" i18n_title="ledStripRainbowDeltaSliderHelp"></div>
+                        </div>
+                        <span i18n="ledStripRainbowFreqSliderTitle"></span>
+                        <div class="rainbowFreqSlider">
+                            <input type="range" min="1" max="360"/>
+                            <label></label>
+                            <div class="helpicon cf_tip" i18n_title="ledStripRainbowFreqSliderHelp"></div>
+                        </div>
+                    </div>
                 </div>
             </div>
 
@@ -186,6 +200,15 @@
                 <button class="mode_color-6-7" i18n_title="colorGreen" i18n="ledStripModeColorsModeGPSLocked"></button>
             </div>
 
+            <div class="brightnessSliderDiv">
+                <span i18n="ledStripBrightnessSliderTitle"></span>
+                <div class="brightnessSlider">
+                    <input type="range" min="5" max="100"/>
+                    <label></label>
+                    <div class="helpicon cf_tip" i18n_title="ledStripBrightnessSliderHelp"></div>
+                </div>
+            </div>
+
             <div class="section" i18n="ledStripWiring"></div>
             <div class="wiringMode">
                 <button class="funcWire w100" i18n="ledStripWiringMode"></button>