Skip to content

Commit 2406205

Browse files
ASDosjaniASDosjani
authored
Add LED Strip sliders (#3550)
1 parent e9f4b8f commit 2406205

File tree

7 files changed

+194
-8
lines changed

7 files changed

+194
-8
lines changed

‎locales/en/messages.json

+24-1
Original file line numberDiff line numberDiff line change
@@ -3663,6 +3663,29 @@
36633663
"ledStripVtxOverlay": {
36643664
"message": "VTX (uses vtx frequency to assign color)"
36653665
},
3666+
"ledStripBrightnessSliderTitle": {
3667+
"message": "Brightness",
3668+
"description": "Brightness of the LED Strip"
3669+
},
3670+
"ledStripBrightnessSliderHelp": {
3671+
"message": "Maximum brightness percent of the LEDs."
3672+
},
3673+
"ledStripRainbowDeltaSliderTitle": {
3674+
"message": "Delta",
3675+
"description": "LED Strip rainbow effect delta"
3676+
},
3677+
"ledStripRainbowDeltaSliderHelp": {
3678+
"message": "Hue difference between each LEDs.",
3679+
"description": "Hint on LED Strip tab for rainbow delta"
3680+
},
3681+
"ledStripRainbowFreqSliderTitle": {
3682+
"message": "Frequency",
3683+
"description": "LED Strip rainbow effect frequency"
3684+
},
3685+
"ledStripRainbowFreqSliderHelp": {
3686+
"message": "Frequency of the color change, in other terms the speed of the effect.",
3687+
"description": "Hint on LED Strip tab for rainbow frequency"
3688+
},
36663689
"ledStripFunctionSection": {
36673690
"message": "LED Functions"
36683691
},
@@ -3820,7 +3843,7 @@
38203843
},
38213844
"ledStripRainbowOverlay": {
38223845
"message": "Rainbow",
3823-
"description": "Rainbow effect switch label on LED Strip tab"
3846+
"description": "Label of rainbow effect switch on LED Strip tab"
38243847
},
38253848
"ledStripOverlayTitle": {
38263849
"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
@@ -196,6 +196,8 @@ const MSPCodes = {
196196
MSP2_GET_OSD_WARNINGS: 0x3005,
197197
MSP2_GET_TEXT: 0x3006,
198198
MSP2_SET_TEXT: 0x3007,
199+
MSP2_GET_LED_STRIP_CONFIG_VALUES: 0x3008,
200+
MSP2_SET_LED_STRIP_CONFIG_VALUES: 0x3009,
199201

200202
// MSP2_GET_TEXT and MSP2_SET_TEXT variable types
201203
PILOT_NAME: 1,

‎src/js/msp/MSPHelper.js

+23-6
Original file line numberDiff line numberDiff line change
@@ -854,6 +854,12 @@ MspHelper.prototype.process_data = function(dataHandler) {
854854

855855
break;
856856

857+
case MSPCodes.MSP2_GET_LED_STRIP_CONFIG_VALUES:
858+
FC.LED_CONFIG_VALUES.brightness = data.readU8();
859+
FC.LED_CONFIG_VALUES.rainbow_delta = data.readU16();
860+
FC.LED_CONFIG_VALUES.rainbow_freq = data.readU16();
861+
break;
862+
857863
case MSPCodes.MSP_SET_CHANNEL_FORWARDING:
858864
console.log('Channel forwarding saved');
859865
break;
@@ -1165,7 +1171,7 @@ MspHelper.prototype.process_data = function(dataHandler) {
11651171

11661172
let ledCount = (data.byteLength - 2) / 4;
11671173

1168-
// The 32 bit config of each LED contains these in LSB:
1174+
// The 32 bit config of each LED contains the following in LSB:
11691175
// +----------------------------------------------------------------------------------------------------------+
11701176
// | Directions - 6 bit | Color ID - 4 bit | Overlays - 10 bit | Function ID - 4 bit | X - 4 bit | Y - 4 bit |
11711177
// +----------------------------------------------------------------------------------------------------------+
@@ -1216,9 +1222,8 @@ MspHelper.prototype.process_data = function(dataHandler) {
12161222

12171223
FC.LED_STRIP.push(led);
12181224
}
1219-
}
1220-
else {
1221-
ledOverlayLetters = ledOverlayLetters.filter(x => x !== 'y');
1225+
} else {
1226+
ledOverlayLetters = ledOverlayLetters.filter(x => x !== 'y'); //remove rainbow because it's only supported after API 1.46
12221227

12231228
for (let i = 0; i < ledCount; i++) {
12241229

@@ -1567,6 +1572,8 @@ MspHelper.prototype.process_data = function(dataHandler) {
15671572
case MSPCodes.MSP2_SET_TEXT:
15681573
console.log('Text set');
15691574
break;
1575+
case MSPCodes.MSP2_SET_LED_STRIP_CONFIG_VALUES:
1576+
break;
15701577
case MSPCodes.MSP_SET_FILTER_CONFIG:
15711578
// removed as this fires a lot with firmware sliders console.log('Filter config set');
15721579
break;
@@ -2117,6 +2124,9 @@ MspHelper.prototype.crunch = function(code, modifierCode = undefined) {
21172124
}
21182125
break;
21192126

2127+
case MSPCodes.MSP2_SET_LED_STRIP_CONFIG_VALUES:
2128+
break;
2129+
21202130
case MSPCodes.MSP_SET_BLACKBOX_CONFIG:
21212131
buffer.push8(FC.BLACKBOX.blackboxDevice)
21222132
.push8(FC.BLACKBOX.blackboxRateNum)
@@ -2560,8 +2570,7 @@ MspHelper.prototype.sendLedStripConfig = function(onCompleteCallback) {
25602570
}
25612571

25622572
buffer.push32(mask);
2563-
}
2564-
else {
2573+
} else {
25652574
for (let overlayLetterIndex = 0; overlayLetterIndex < led.functions.length; overlayLetterIndex++) {
25662575
const bitIndex = ledOverlayLetters.indexOf(led.functions[overlayLetterIndex]);
25672576
if (bitIndex >= 0) {
@@ -2638,6 +2647,14 @@ MspHelper.prototype.sendLedStripModeColors = function(onCompleteCallback) {
26382647
}
26392648
};
26402649

2650+
MspHelper.prototype.sendLedStripConfigValues = function(onCompleteCallback) {
2651+
const buffer = [];
2652+
buffer.push8(FC.LED_CONFIG_VALUES.brightness);
2653+
buffer.push16(FC.LED_CONFIG_VALUES.rainbow_delta);
2654+
buffer.push16(FC.LED_CONFIG_VALUES.rainbow_freq);
2655+
MSP.send_message(MSPCodes.MSP2_SET_LED_STRIP_CONFIG_VALUES, buffer, false, onCompleteCallback);
2656+
};
2657+
26412658
MspHelper.prototype.serialPortFunctionMaskToFunctions = function(functionMask) {
26422659
const self = this;
26432660
const functions = [];

‎src/js/tabs/led_strip.js

+86-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, semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_46) ? load_led_config_values : load_html);
45+
}
46+
47+
function load_led_config_values() {
48+
MSP.send_message(MSPCodes.MSP2_GET_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

@@ -786,6 +869,8 @@ led_strip.initialize = function (callback, scrollPosition) {
786869

787870
$('.vtxOverlay').toggle(isVtxActive(activeFunction));
788871

872+
$('.brightnessSliderDiv').toggle(semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_46));
873+
789874
// set mode colors visibility
790875
if (activeFunction === "function-f") {
791876
$('.mode_colors').show();

‎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)