From 7bca5f9b83bcb4c8b64c6b91f4f7af24664f29ab Mon Sep 17 00:00:00 2001 From: ASDosjani <62965528+ASDosjani@users.noreply.github.com> Date: Fri, 18 Aug 2023 03:53:37 +0200 Subject: [PATCH] Add LED strip sliders (#3531) * Add LED strip sliders * Update src/js/msp/MSPHelper.js Co-authored-by: Mark Haslinghuis * descriptions * higher rainbow frequency --------- Co-authored-by: Mark Haslinghuis tested today --- locales/en/messages.json | 25 ++++++++++- src/css/tabs/led_strip.less | 35 +++++++++++++++ src/js/fc.js | 1 + src/js/msp/MSPCodes.js | 2 + src/js/msp/MSPHelper.js | 18 +++++++- src/js/tabs/led_strip.js | 85 ++++++++++++++++++++++++++++++++++++- src/tabs/led_strip.html | 23 ++++++++++ 7 files changed, 186 insertions(+), 3 deletions(-) diff --git a/locales/en/messages.json b/locales/en/messages.json index 0c2d11da..d31dafa1 100755 --- a/locales/en/messages.json +++ b/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" diff --git a/src/css/tabs/led_strip.less b/src/css/tabs/led_strip.less index d25c61df..5ce70a45 100644 --- a/src/css/tabs/led_strip.less +++ b/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; diff --git a/src/js/fc.js b/src/js/fc.js index 2dcc0f2c..c9b72b5b 100644 --- a/src/js/fc.js +++ b/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, diff --git a/src/js/msp/MSPCodes.js b/src/js/msp/MSPCodes.js index 02ba9e7b..9fdfd977 100644 --- a/src/js/msp/MSPCodes.js +++ b/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, diff --git a/src/js/msp/MSPHelper.js b/src/js/msp/MSPHelper.js index b80b7594..d651e190 100644 --- a/src/js/msp/MSPHelper.js +++ b/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 = []; diff --git a/src/js/tabs/led_strip.js b/src/js/tabs/led_strip.js index aca38c19..7c547fe6 100644 --- a/src/js/tabs/led_strip.js +++ b/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); diff --git a/src/tabs/led_strip.html b/src/tabs/led_strip.html index 9d8d1748..3b6b7060 100644 --- a/src/tabs/led_strip.html +++ b/src/tabs/led_strip.html @@ -88,6 +88,20 @@
+
+ +
+ + +
+
+ +
+ + +
+
+
@@ -186,6 +200,15 @@ +
+ +
+ + +
+
+
+