Add LED strip sliders (#3531)

* Add LED strip sliders

* Update src/js/msp/MSPHelper.js

Co-authored-by: Mark Haslinghuis <mark@numloq.nl>

* descriptions

* higher rainbow frequency

---------

Co-authored-by: Mark Haslinghuis <mark@numloq.nl>

tested today

locales/en/messages.json

@@ -3670,6 +3670,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"
     },
@@ -3827,7 +3850,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

@@ -168,6 +168,8 @@ const MSPCodes = {
 
     MSP_MULTIPLE_MSP:               230,
 
+    MSP_SET_LED_STRIP_CONFIG_VALUES:231,
+    MSP_LED_STRIP_CONFIG_VALUES:    232,
     MSP_MODE_RANGES_EXTRA:          238,
     MSP_SET_ACC_TRIM:               239,
     MSP_ACC_TRIM:                   240,

src/js/msp/MSPHelper.js

@@ -1298,7 +1298,15 @@ MspHelper.prototype.process_data = function(dataHandler) {
             case MSPCodes.MSP_SET_LED_STRIP_MODECOLOR:
                 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(),
+                };
+                break;
+            case MSPCodes.MSP_SET_LED_STRIP_CONFIG_VALUES:
+                break;
             case MSPCodes.MSP_DATAFLASH_SUMMARY:
                 if (data.byteLength >= 13) {
                     flags = data.readU8();
@@ -2632,6 +2640,14 @@ 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);
+};
+
 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, load_led_config_values);
+    }
+
+    function load_led_config_values() {
+        MSP.send_message(MSPCodes.MSP_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);
 

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>