Skip to content

Commit 7bca5f9

Browse files
ASDosjaniASDosjani
authored
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
1 parent 40c243f commit 7bca5f9

File tree

7 files changed

+186
-3
lines changed

7 files changed

+186
-3
lines changed

‎locales/en/messages.json

+24-1
Original file line numberDiff line numberDiff line change
@@ -3670,6 +3670,29 @@
36703670
"ledStripVtxOverlay": {
36713671
"message": "VTX (uses vtx frequency to assign color)"
36723672
},
3673+
"ledStripBrightnessSliderTitle": {
3674+
"message": "Brightness",
3675+
"description": "Brightness of the LED Strip"
3676+
},
3677+
"ledStripBrightnessSliderHelp": {
3678+
"message": "Maximum brightness percent of the LEDs."
3679+
},
3680+
"ledStripRainbowDeltaSliderTitle": {
3681+
"message": "Delta",
3682+
"description": "LED Strip rainbow effect delta"
3683+
},
3684+
"ledStripRainbowDeltaSliderHelp": {
3685+
"message": "Hue difference between each LEDs.",
3686+
"description": "Hint on LED Strip tab for rainbow delta"
3687+
},
3688+
"ledStripRainbowFreqSliderTitle": {
3689+
"message": "Frequency",
3690+
"description": "LED Strip rainbow effect frequency"
3691+
},
3692+
"ledStripRainbowFreqSliderHelp": {
3693+
"message": "Frequency of the color change, in other terms the speed of the effect.",
3694+
"description": "Hint on LED Strip tab for rainbow frequency"
3695+
},
36733696
"ledStripFunctionSection": {
36743697
"message": "LED Functions"
36753698
},
@@ -3827,7 +3850,7 @@
38273850
},
38283851
"ledStripRainbowOverlay": {
38293852
"message": "Rainbow",
3830-
"description": "Rainbow effect switch label on LED Strip tab"
3853+
"description": "Label of rainbow effect switch on LED Strip tab"
38313854
},
38323855
"ledStripOverlayTitle": {
38333856
"message": "Overlay"

‎src/css/tabs/led_strip.less

+35
Original file line numberDiff line numberDiff line change
@@ -250,7 +250,42 @@
250250
background: var(--boxBackground);
251251
color: var(--defaultText);
252252
}
253+
.rainbowSlidersDiv {
254+
display: none;
255+
margin-top: 5px;
256+
.rainbowDeltaSlider, .rainbowFreqSlider {
257+
display: flex;
258+
align-items: center;
259+
input {
260+
width: 150px;
261+
margin-right: 5px;
262+
margin-top: 5px;
263+
}
264+
label {
265+
margin-right: 10px;
266+
margin-top: 5px;
267+
}
268+
}
269+
}
270+
}
271+
272+
.brightnessSliderDiv {
273+
margin-top: -15px;
274+
.brightnessSlider{
275+
display: flex;
276+
align-items: center;
277+
input {
278+
width: 150px;
279+
margin-right: 5px;
280+
margin-top: 5px;
281+
}
282+
label {
283+
margin-right: 10px;
284+
margin-top: 5px;
285+
}
286+
}
253287
}
288+
254289
.colorDefineSliders {
255290
display: inline-block;
256291
position: absolute;

‎src/js/fc.js

+1
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@ const FC = {
127127
LED_COLORS: null,
128128
LED_MODE_COLORS: null,
129129
LED_STRIP: null,
130+
LED_CONFIG_VALUES: [],
130131
MISC: null, // DEPRECATED
131132
MIXER_CONFIG: null,
132133
MODE_RANGES: null,

‎src/js/msp/MSPCodes.js

+2
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,8 @@ const MSPCodes = {
168168

169169
MSP_MULTIPLE_MSP: 230,
170170

171+
MSP_SET_LED_STRIP_CONFIG_VALUES:231,
172+
MSP_LED_STRIP_CONFIG_VALUES: 232,
171173
MSP_MODE_RANGES_EXTRA: 238,
172174
MSP_SET_ACC_TRIM: 239,
173175
MSP_ACC_TRIM: 240,

‎src/js/msp/MSPHelper.js

+17-1
Original file line numberDiff line numberDiff line change
@@ -1298,7 +1298,15 @@ MspHelper.prototype.process_data = function(dataHandler) {
12981298
case MSPCodes.MSP_SET_LED_STRIP_MODECOLOR:
12991299
console.log('Led strip mode colors saved');
13001300
break;
1301-
1301+
case MSPCodes.MSP_LED_STRIP_CONFIG_VALUES:
1302+
FC.LED_CONFIG_VALUES = {
1303+
brightness: data.readU8(),
1304+
rainbow_delta: data.readU8(),
1305+
rainbow_freq: data.readU16(),
1306+
};
1307+
break;
1308+
case MSPCodes.MSP_SET_LED_STRIP_CONFIG_VALUES:
1309+
break;
13021310
case MSPCodes.MSP_DATAFLASH_SUMMARY:
13031311
if (data.byteLength >= 13) {
13041312
flags = data.readU8();
@@ -2632,6 +2640,14 @@ MspHelper.prototype.sendLedStripModeColors = function(onCompleteCallback) {
26322640
}
26332641
};
26342642

2643+
MspHelper.prototype.sendLedStripConfigValues = function(onCompleteCallback) {
2644+
const buffer = [];
2645+
buffer.push8(FC.LED_CONFIG_VALUES.brightness);
2646+
buffer.push8(FC.LED_CONFIG_VALUES.rainbow_delta);
2647+
buffer.push16(FC.LED_CONFIG_VALUES.rainbow_freq);
2648+
MSP.send_message(MSPCodes.MSP_SET_LED_STRIP_CONFIG_VALUES, buffer, false, onCompleteCallback);
2649+
};
2650+
26352651
MspHelper.prototype.serialPortFunctionMaskToFunctions = function(functionMask) {
26362652
const self = this;
26372653
const functions = [];

‎src/js/tabs/led_strip.js

+84-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,11 @@ led_strip.initialize = function (callback, scrollPosition) {
4141
}
4242

4343
function load_led_mode_colors() {
44-
MSP.send_message(MSPCodes.MSP_LED_STRIP_MODECOLOR, false, false, load_html);
44+
MSP.send_message(MSPCodes.MSP_LED_STRIP_MODECOLOR, false, false, load_led_config_values);
45+
}
46+
47+
function load_led_config_values() {
48+
MSP.send_message(MSPCodes.MSP_LED_STRIP_CONFIG_VALUES, false, false, load_html);
4549
}
4650

4751
function load_html() {
@@ -378,6 +382,8 @@ led_strip.initialize = function (callback, scrollPosition) {
378382
if (feature_o.is(':checked') !== newVal) {
379383
feature_o.prop('checked', newVal);
380384
feature_o.trigger('change');
385+
386+
$('.rainbowSlidersDiv').toggle($('.checkbox.rainbowOverlay').find('input').is(':checked')); //rainbow slider visibility
381387
}
382388
});
383389

@@ -504,6 +510,11 @@ led_strip.initialize = function (callback, scrollPosition) {
504510
}
505511
}
506512

513+
//Change Rainbow slider visibility
514+
if (that.is('.function-y')) {
515+
$('.rainbowSlidersDiv').toggle(that.is(':checked'));
516+
}
517+
507518
if ($('.ui-selected').length > 0) {
508519
TABS.led_strip.overlays.forEach(function(letter) {
509520
if ($(that).is(functionTag + letter)) {
@@ -555,6 +566,78 @@ led_strip.initialize = function (callback, scrollPosition) {
555566
$(this).addClass(`color-${led.color}`);
556567
});
557568

569+
//default slider values
570+
$('div.brightnessSlider input').first().prop('value', FC.LED_CONFIG_VALUES.brightness);
571+
$('div.brightnessSlider label').first().text($('div.brightnessSlider input').first().val());
572+
$('div.rainbowDeltaSlider input').first().prop('value', FC.LED_CONFIG_VALUES.rainbow_delta);
573+
$('div.rainbowDeltaSlider label').first().text($('div.rainbowDeltaSlider input').first().val());
574+
$('div.rainbowFreqSlider input').first().prop('value', FC.LED_CONFIG_VALUES.rainbow_freq);
575+
$('div.rainbowFreqSlider label').first().text($('div.rainbowFreqSlider input').first().val());
576+
577+
//Brightness slider
578+
let bufferingBrightness = [],
579+
buffer_delay_brightness = false;
580+
581+
$('div.brightnessSlider input').on('input', function () {
582+
const val = $(this).val();
583+
bufferingBrightness.push(val);
584+
585+
if (!buffer_delay_brightness) {
586+
buffer_delay_brightness = setTimeout(function () {
587+
FC.LED_CONFIG_VALUES.brightness = bufferingBrightness.pop();
588+
mspHelper.sendLedStripConfigValues();
589+
590+
bufferingBrightness = [];
591+
buffer_delay_brightness = false;
592+
}, 10);
593+
}
594+
595+
$('div.brightnessSlider label').first().text(val);
596+
});
597+
598+
//Rainbow Delta slider
599+
let bufferingRainbowDelta = [],
600+
buffer_delay_rainbow_delta = false;
601+
602+
$('div.rainbowDeltaSlider input').on('input', function () {
603+
const val = $(this).val();
604+
bufferingRainbowDelta.push(val);
605+
606+
if (!buffer_delay_rainbow_delta) {
607+
buffer_delay_rainbow_delta = setTimeout(function () {
608+
FC.LED_CONFIG_VALUES.rainbow_delta = bufferingRainbowDelta.pop();
609+
mspHelper.sendLedStripConfigValues();
610+
611+
bufferingRainbowDelta = [];
612+
buffer_delay_rainbow_delta = false;
613+
}, 10);
614+
}
615+
616+
$('div.rainbowDeltaSlider label').first().text(val);
617+
});
618+
619+
//Rainbow Frequency slider
620+
let bufferingRainbowFreq = [],
621+
buffer_delay_rainbow_freq = false;
622+
623+
$('div.rainbowFreqSlider input').on('input', function () {
624+
const val = $(this).val();
625+
bufferingRainbowFreq.push(val);
626+
627+
if (!buffer_delay_rainbow_freq) {
628+
buffer_delay_rainbow_freq = setTimeout(function () {
629+
FC.LED_CONFIG_VALUES.rainbow_freq = bufferingRainbowFreq.pop();
630+
mspHelper.sendLedStripConfigValues();
631+
632+
bufferingRainbowFreq = [];
633+
buffer_delay_rainbow_freq = false;
634+
}, 10);
635+
}
636+
637+
$('div.rainbowFreqSlider label').first().text(val);
638+
});
639+
640+
558641
$('a.save').on('click', function () {
559642
mspHelper.sendLedStripConfig(send_led_strip_colors);
560643

‎src/tabs/led_strip.html

+23
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,20 @@
8888
<div class="checkbox rainbowOverlay">
8989
<input type="checkbox" name="Rainbow" class="toggle function-y" />
9090
<label> <span i18n="ledStripRainbowOverlay"></span></label>
91+
<div class="rainbowSlidersDiv">
92+
<span i18n="ledStripRainbowDeltaSliderTitle"></span>
93+
<div class="rainbowDeltaSlider">
94+
<input type="range" min="0" max="359"/>
95+
<label></label>
96+
<div class="helpicon cf_tip" i18n_title="ledStripRainbowDeltaSliderHelp"></div>
97+
</div>
98+
<span i18n="ledStripRainbowFreqSliderTitle"></span>
99+
<div class="rainbowFreqSlider">
100+
<input type="range" min="1" max="360"/>
101+
<label></label>
102+
<div class="helpicon cf_tip" i18n_title="ledStripRainbowFreqSliderHelp"></div>
103+
</div>
104+
</div>
91105
</div>
92106
</div>
93107

@@ -186,6 +200,15 @@
186200
<button class="mode_color-6-7" i18n_title="colorGreen" i18n="ledStripModeColorsModeGPSLocked"></button>
187201
</div>
188202

203+
<div class="brightnessSliderDiv">
204+
<span i18n="ledStripBrightnessSliderTitle"></span>
205+
<div class="brightnessSlider">
206+
<input type="range" min="5" max="100"/>
207+
<label></label>
208+
<div class="helpicon cf_tip" i18n_title="ledStripBrightnessSliderHelp"></div>
209+
</div>
210+
</div>
211+
189212
<div class="section" i18n="ledStripWiring"></div>
190213
<div class="wiringMode">
191214
<button class="funcWire w100" i18n="ledStripWiringMode"></button>

0 commit comments

Comments
 (0)