Mirror/betaflight-configurator
1
0
Fork 0
mirror of https://github.com/betaflight/betaflight-configurator.git synced 2025-07-23 16:25:22 +03:00
Code Issues Wiki Activity

Add LED strip sliders (#3531)

Browse source 
* 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
This commit is contained in:
ASDosjani 2023-08-18 03:53:37 +02:00 • committed by GitHub
parent 40c243fe47
commit 7bca5f9b83
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 186 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

25
locales/en/messages.json
View file

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

35
src/css/tabs/led_strip.less
View file

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

1
src/js/fc.js
View file

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

2
src/js/msp/MSPCodes.js
View file

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

18
src/js/msp/MSPHelper.js
View file

@ -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 = [];

85
src/js/tabs/led_strip.js
View file

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

23
src/tabs/led_strip.html
View file

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