Skip to content

LED strip: add rainbow overlay GUI controls - #2714

Open
HereComesWhitey wants to merge 2 commits into
iNavFlight:masterfrom
HereComesWhitey:rgb-sweep
Open

LED strip: add rainbow overlay GUI controls#2714
HereComesWhitey wants to merge 2 commits into
iNavFlight:masterfrom
HereComesWhitey:rgb-sweep

Conversation

@HereComesWhitey

Copy link
Copy Markdown

Adds GUI support for the new rainbow overlay ('V') introduced in the companion FC PR.

Changes:

  • Adds rainbow overlay toggle to the overlays section
  • Adds Rainbow Overlay Settings panel with sweep rate and colour delta inputs, enabled only when the rainbow overlay is active
  • Registers 'V' in the overlay letters array in msp.js

Companion FC PR: iNavFlight/inav#11816

Testing: Verified with SKYSTARSH743HD running the companion firmware build.

@qodo-code-review

Copy link
Copy Markdown
Contributor

ⓘ Qodo reviews are paused because the subscription is no longer active. Ask your workspace admin to reactivate the subscription to resume reviews. Manage billing

@github-actions

Copy link
Copy Markdown

Branch Targeting Suggestion

You've targeted the master branch with this PR. Please consider if a version branch might be more appropriate:

  • maintenance-9.x - If your change is backward-compatible and won't create compatibility issues between INAV firmware and Configurator 9.x versions. This will allow your PR to be included in the next 9.x release.

  • maintenance-10.x - If your change introduces compatibility requirements between firmware and configurator that would break 9.x compatibility. This is for PRs which will be included in INAV 10.x

If master is the correct target for this change because it should never be included in any release, no action is needed.


This is an automated suggestion to help route contributions to the appropriate branch.

@qodo-free-for-open-source-projects

Copy link
Copy Markdown

PR Summary by Qodo

LED strip: add Rainbow ('V') overlay toggle and settings controls

✨ Enhancement 🕐 20-40 Minutes

Grey Divider

AI Description

• Add Rainbow overlay ('V') to LED strip overlay selection.
• Provide Sweep Rate and Color Delta inputs, enabled only when Rainbow is active.
• Load/save rainbow overlay settings via MSP settings and persist on EEPROM save.
Diagram

sequenceDiagram
  actor U as "User"
  participant H as "led_strip.html"
  participant C as "led_strip.js"
  participant M as "mspHelper"
  participant F as "FC firmware"

  U->>H: "Toggle Rainbow (V)"
  H->>C: "change event (.function-v)"
  C->>H: "Enable/disable inputs"

  C->>M: "getSetting(sweep_rate, delta_deg)"
  M->>F: "MSP setting read"
  F-->>M: "Setting values"
  M-->>C: "Promise resolve"
  C->>H: "Populate inputs"

  U->>H: "Click Save"
  H->>C: "save handler"
  C->>M: "send LED strip config/colors/mode colors"
  M->>F: "MSP config writes"
  C->>M: "setSetting(sweep_rate, delta_deg)"
  M->>F: "MSP setting write"
  C->>F: "MSP EEPROM write"
Loading
High-Level Assessment

The approach fits the existing LED strip tab model: expose the overlay letter in the UI, read initial values via getSetting(), and persist changes as part of the existing Save→EEPROM flow. Alternatives like autosaving on input change were considered but would diverge from the tab’s established save semantics and increase risk of partial updates.

Files changed (4) +104 / -12

Enhancement (4) +104 / -12
msp.jsRegister 'v' as a supported LED overlay letter +1/-1

Register 'v' as a supported LED overlay letter

• Extends the MSP LED overlay letters array to include 'v', enabling GUI/FC overlay mapping for the Rainbow overlay bit.

js/msp.js

messages.jsonAdd English strings for Rainbow overlay and settings fields +18/-0

Add English strings for Rainbow overlay and settings fields

• Introduces i18n message keys for the Rainbow overlay label and its Sweep Rate/Color Delta input labels and units.

locale/en/messages.json

led_strip.htmlAdd Rainbow overlay checkbox and settings panel UI +17/-1

Add Rainbow overlay checkbox and settings panel UI

• Adds a new overlay toggle (function-v) plus a settings section containing numeric inputs for Sweep Rate (1–255) and Color Delta (0–359), initially disabled.

tabs/led_strip.html

led_strip.jsWire Rainbow overlay UI state + load/save rainbow settings via MSP +68/-10

Wire Rainbow overlay UI state + load/save rainbow settings via MSP

• Adds 'v' to the overlay list, loads rainbow sweep rate/delta settings on tab init, and toggles input enabled state based on overlay selection. Hooks rainbow setting persistence into the existing Save pipeline using mspHelper.setSetting() before EEPROM write; also updates import specifiers to explicit .js paths.

tabs/led_strip.js

@sonarqubecloud

Copy link
Copy Markdown

Quality Gate Failed Quality Gate failed

Failed conditions
C Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

@qodo-free-for-open-source-projects

Copy link
Copy Markdown

Code Review by Qodo

🐞 Bugs (4) 📘 Rule violations (0) 📜 Skill insights (0)

Grey Divider


Action required

1. NaN rainbow delta saved 🐞 Bug ≡ Correctness
Description
On Save, led_strip.js parses the rainbow delta with parseInt(...) without a default/clamp, so an
empty/disabled input becomes NaN and is encoded as 0 when sent via MSPHelper.setSetting, overwriting
the FC setting unexpectedly. This can silently reset ledstrip_rainbow_delta_deg (and potentially
write out-of-range values) even when the overlay isn’t active.
Code

tabs/led_strip.js[R830-833]

+                var freq = Math.max(1, Math.min(255, parseInt($('#rainbowFreqInput').val(), 10) || 1));
+                var delta = parseInt($('#rainbowDeltaInput').val(), 10);
+
+                mspHelper.setSetting('ledstrip_rainbow_sweep_rate', freq, function () {
Evidence
The Save path always calls save_rainbow_settings, where delta may be NaN. MSPHelper encodes settings
using push8/push16, and these use bitwise operators that coerce NaN to 0, causing an unintended
write of 0.

tabs/led_strip.js[811-836]
js/msp/MSPHelper.js[3459-3499]
js/injected_methods.js[21-33]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
Saving the LED strip always writes `ledstrip_rainbow_delta_deg` using `parseInt(...)` with no fallback/clamp. When the input is empty/disabled, `parseInt('')` yields `NaN`, and the MSP encoding bitwise-coerces it to `0`, unintentionally resetting the FC setting.

### Issue Context
- `save_rainbow_settings()` runs on every Save click.
- `MSPHelper.encodeSetting()` uses `data.push8/push16`, which uses bitwise ops that convert `NaN` to `0`.

### Fix Focus Areas
- tabs/led_strip.js[829-836]
- js/msp/MSPHelper.js[3459-3499]
- js/injected_methods.js[21-33]

### Suggested fix
- Compute `delta` with a safe numeric fallback and clamp, e.g.:
 - `const deltaRaw = Number($('#rainbowDeltaInput').val());`
 - `const delta = Number.isFinite(deltaRaw) ? clamp(deltaRaw, 0, 359) : /* keep existing */ 0;`
- Prefer skipping `setSetting('ledstrip_rainbow_delta_deg', ...)` when the input is disabled or not finite.
- Clamp `delta` to the FC-supported range (0–359) before sending.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools



Remediation recommended

2. Debug logs left in UI 🐞 Bug ⚙ Maintainability
Description
The PR adds a console.log that prints rainbow setting results on every tab load, and a console.error
for failures, which will create noisy logs in production use. This makes real issues harder to spot
during troubleshooting.
Code

tabs/led_strip.js[R235-238]

+            console.log('[Rainbow] ledstrip_rainbow_delta_deg =', result);
+            if (result && result.value !== null && result.value !== undefined) {
+                $('#rainbowDeltaInput').val(result.value);
+            }
Evidence
The new rainbow setting load path includes an unconditional console.log and an error log in the
promise catch.

tabs/led_strip.js[221-244]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
A persistent `console.log` and `console.error` were added for rainbow setting reads. This produces unnecessary noise for every user session and can drown out actionable logs.

### Issue Context
The LED strip tab runs these calls on load in `process_html()`.

### Fix Focus Areas
- tabs/led_strip.js[228-241]

### Suggested fix
- Remove the `console.log` entirely.
- Consider handling errors consistently (either silent like the sweep-rate call, or via a UI-visible warning), but avoid unconditional console spam.
- If logging is desired, gate it behind an explicit debug flag.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


3. Unlocalized title string 🐞 Bug ⚙ Maintainability
Description
The HTML hardcodes the “Rainbow Overlay Settings” title text even though an i18n key
(ledStripRainbowSettingsTitle) was added. This breaks localization and leaves dead/unused locale
content.
Code

tabs/led_strip.html[R143-145]

+                    <div class="rainbowSettings" id="rainbowSettings" style="margin-top: 8px; margin-left: 4px;">
+                        <div style="font-weight: bold; margin-bottom: 6px; color: #1dacf2;">Rainbow Overlay Settings</div>
+                        <div class="rainbowSettingRow" style="display: flex; align-items: center; margin-bottom: 4px;">
Evidence
messages.json defines a new localization entry for the title, but the HTML still uses a literal
string instead of referencing that key.

locale/en/messages.json[5949-5956]
tabs/led_strip.html[143-145]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
The rainbow settings title is hardcoded in English, but a localization key was added and is unused.

### Issue Context
The project uses `i18n="..."` attributes for UI text.

### Fix Focus Areas
- tabs/led_strip.html[143-145]
- locale/en/messages.json[5949-5955]

### Suggested fix
Replace the hardcoded title with a localized element, e.g.:
- `<div ...><span i18n="ledStripRainbowSettingsTitle"></span></div>`
(or apply `i18n` directly to the div if supported by your localization loader).

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


4. Redundant updateBulkCmd call 🐞 Bug ➹ Performance
Description
The selection handler now calls updateBulkCmd twice back-to-back, rebuilding FC.LED_STRIP twice for
a single selection change. This adds unnecessary work on a UI-hot path and can degrade
responsiveness.
Code

tabs/led_strip.js[635]

+                updateBulkCmd();
Evidence
The same handler triggers updateBulkCmd at line 623 and again at line 635 with no intervening grid
mutation that requires a second rebuild.

tabs/led_strip.js[591-636]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
`updateBulkCmd()` is invoked twice consecutively in the LED selection callback, causing redundant DOM scanning and reconstruction of `FC.LED_STRIP`.

### Issue Context
`updateBulkCmd()` clears and rebuilds `FC.LED_STRIP` by iterating over `.gPoint` elements, so repeating it is unnecessarily expensive.

### Fix Focus Areas
- tabs/led_strip.js[623-636]

### Suggested fix
Remove one of the two consecutive calls and keep a single `updateBulkCmd()` at the correct point after all UI state changes that affect the grid are complete.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


Grey Divider

Tip of the day
💡 Did you know, you can switch off images and animations for a plain-text comment

More tips ↗ | Customize Qodo ↗ | Qodo docs ↗

Grey Divider

Qodo Logo

Comment thread tabs/led_strip.js
Comment on lines +830 to +833
var freq = Math.max(1, Math.min(255, parseInt($('#rainbowFreqInput').val(), 10) || 1));
var delta = parseInt($('#rainbowDeltaInput').val(), 10);

mspHelper.setSetting('ledstrip_rainbow_sweep_rate', freq, function () {

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Action required

1. Nan rainbow delta saved 🐞 Bug ≡ Correctness

On Save, led_strip.js parses the rainbow delta with parseInt(...) without a default/clamp, so an
empty/disabled input becomes NaN and is encoded as 0 when sent via MSPHelper.setSetting, overwriting
the FC setting unexpectedly. This can silently reset ledstrip_rainbow_delta_deg (and potentially
write out-of-range values) even when the overlay isn’t active.
Agent Prompt
### Issue description
Saving the LED strip always writes `ledstrip_rainbow_delta_deg` using `parseInt(...)` with no fallback/clamp. When the input is empty/disabled, `parseInt('')` yields `NaN`, and the MSP encoding bitwise-coerces it to `0`, unintentionally resetting the FC setting.

### Issue Context
- `save_rainbow_settings()` runs on every Save click.
- `MSPHelper.encodeSetting()` uses `data.push8/push16`, which uses bitwise ops that convert `NaN` to `0`.

### Fix Focus Areas
- tabs/led_strip.js[829-836]
- js/msp/MSPHelper.js[3459-3499]
- js/injected_methods.js[21-33]

### Suggested fix
- Compute `delta` with a safe numeric fallback and clamp, e.g.:
  - `const deltaRaw = Number($('#rainbowDeltaInput').val());`
  - `const delta = Number.isFinite(deltaRaw) ? clamp(deltaRaw, 0, 359) : /* keep existing */ 0;`
- Prefer skipping `setSetting('ledstrip_rainbow_delta_deg', ...)` when the input is disabled or not finite.
- Clamp `delta` to the FC-supported range (0–359) before sending.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

Comment thread tabs/led_strip.js
Comment on lines +235 to +238
console.log('[Rainbow] ledstrip_rainbow_delta_deg =', result);
if (result && result.value !== null && result.value !== undefined) {
$('#rainbowDeltaInput').val(result.value);
}

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remediation recommended

2. Debug logs left in ui 🐞 Bug ⚙ Maintainability

The PR adds a console.log that prints rainbow setting results on every tab load, and a console.error
for failures, which will create noisy logs in production use. This makes real issues harder to spot
during troubleshooting.
Agent Prompt
### Issue description
A persistent `console.log` and `console.error` were added for rainbow setting reads. This produces unnecessary noise for every user session and can drown out actionable logs.

### Issue Context
The LED strip tab runs these calls on load in `process_html()`.

### Fix Focus Areas
- tabs/led_strip.js[228-241]

### Suggested fix
- Remove the `console.log` entirely.
- Consider handling errors consistently (either silent like the sweep-rate call, or via a UI-visible warning), but avoid unconditional console spam.
- If logging is desired, gate it behind an explicit debug flag.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

Comment thread tabs/led_strip.html
Comment on lines +143 to +145
<div class="rainbowSettings" id="rainbowSettings" style="margin-top: 8px; margin-left: 4px;">
<div style="font-weight: bold; margin-bottom: 6px; color: #1dacf2;">Rainbow Overlay Settings</div>
<div class="rainbowSettingRow" style="display: flex; align-items: center; margin-bottom: 4px;">

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remediation recommended

3. Unlocalized title string 🐞 Bug ⚙ Maintainability

The HTML hardcodes the “Rainbow Overlay Settings” title text even though an i18n key
(ledStripRainbowSettingsTitle) was added. This breaks localization and leaves dead/unused locale
content.
Agent Prompt
### Issue description
The rainbow settings title is hardcoded in English, but a localization key was added and is unused.

### Issue Context
The project uses `i18n="..."` attributes for UI text.

### Fix Focus Areas
- tabs/led_strip.html[143-145]
- locale/en/messages.json[5949-5955]

### Suggested fix
Replace the hardcoded title with a localized element, e.g.:
- `<div ...><span i18n="ledStripRainbowSettingsTitle"></span></div>`
(or apply `i18n` directly to the div if supported by your localization loader).

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

Comment thread tabs/led_strip.js
$('#rainbowFreqInput, #rainbowDeltaInput').prop('disabled', !rainbowEnabled).css('pointer-events', rainbowEnabled ? 'auto' : '');


updateBulkCmd();

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remediation recommended

4. Redundant updatebulkcmd call 🐞 Bug ➹ Performance

The selection handler now calls updateBulkCmd twice back-to-back, rebuilding FC.LED_STRIP twice for
a single selection change. This adds unnecessary work on a UI-hot path and can degrade
responsiveness.
Agent Prompt
### Issue description
`updateBulkCmd()` is invoked twice consecutively in the LED selection callback, causing redundant DOM scanning and reconstruction of `FC.LED_STRIP`.

### Issue Context
`updateBulkCmd()` clears and rebuilds `FC.LED_STRIP` by iterating over `.gPoint` elements, so repeating it is unnecessarily expensive.

### Fix Focus Areas
- tabs/led_strip.js[623-636]

### Suggested fix
Remove one of the two consecutive calls and keep a single `updateBulkCmd()` at the correct point after all UI state changes that affect the grid are complete.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant