Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add LED strip sliders #3531

Merged
merged 4 commits into from
Aug 18, 2023
Merged

Add LED strip sliders #3531

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6e86c1d
Add LED strip sliders
ASDosjani Jul 28, 2023
55a346b
Update src/js/msp/MSPHelper.js
ASDosjani Jul 28, 2023
86d4923
descriptions
ASDosjani Aug 4, 2023
011baf9
higher rainbow frequency
ASDosjani Aug 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
25 changes: 24 additions & 1 deletion locales/en/messages.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down Expand Up @@ -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"
Expand Down
35 changes: 35 additions & 0 deletions src/css/tabs/led_strip.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions src/js/fc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 2 additions & 0 deletions src/js/msp/MSPCodes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
18 changes: 17 additions & 1 deletion src/js/msp/MSPHelper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1297,7 +1297,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();
Expand Down Expand Up @@ -2631,6 +2639,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 = [];
Expand Down
85 changes: 84 additions & 1 deletion src/js/tabs/led_strip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,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() {
Expand Down Expand Up @@ -377,6 +381,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
}
});

Expand Down Expand Up @@ -503,6 +509,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)) {
Expand Down Expand Up @@ -554,6 +565,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);

Expand Down
23 changes: 23 additions & 0 deletions src/tabs/led_strip.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
haslinghuis marked this conversation as resolved.
Show resolved Hide resolved
<div class="helpicon cf_tip" i18n_title="ledStripRainbowFreqSliderHelp"></div>
</div>
</div>
</div>
</div>

Expand Down Expand Up @@ -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>
haslinghuis marked this conversation as resolved.
Show resolved Hide resolved
<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>
Expand Down