Add pin dropdown selection for DMX Input configuration

[Copilot]

Plan to Add Pin Dropdown Selection for DMX Input Configuration

Understanding the Issue:

• The DMX Input configuration page (settings_sync.htm) uses plain text input fields for pin selection (IDMR, IDMT, IDME)
• The LED preferences page (settings_leds.htm) already has a dropdown system that shows which pins are free vs. already in use
• We need to apply the same dropdown pattern to DMX input pins

Changes needed:

• Explore repository and understand current implementation
• Run initial build and tests to verify current state
• Add pinDropdowns functionality to settings_sync.htm
• Convert DMX input pin fields (IDMR, IDMT, IDME) from number inputs to dropdowns
• Test the changes manually
• Build web UI and verify no errors
• Run tests to ensure nothing breaks
• Address code review feedback (add missing semicolons)
• Revert problematic refactoring to keep functions page-specific

Summary

This PR implements dropdown pin selection for DMX Input configuration in the Sync Settings page. The implementation is kept page-specific to settings_sync.htm without attempting to create universal functions, as the LED preferences page has specific requirements that don't apply to other pages.

Changes Made

• Modified wled00/data/settings_sync.htm:
  • Added pinDropdowns() function that creates dropdowns for DMX input pins (IDMR, IDMT, IDME)
  • Added addDropdown() function to transform number inputs into select elements
  • Added addOption() function to populate dropdown options
  • Added pinUpd() function (without LED-specific code) to handle pin selection changes
  • Dropdowns show available pins, reserved pins, and read-only pins

Features:

• Shows "unused" for pin -1
• Displays pin numbers 0-47 (or up to max_gpio)
• Marks pins with "used" if already allocated to other features
• Shows "(R/O)" for read-only GPIO pins
• Disables options in other dropdowns when a pin is selected (prevents conflicts)
• Does NOT have LED-specific querySelector code that would fail on non-LED pages

Validation

✅ Web UI Build: Successfully built and minified
✅ Tests: All 16 npm tests pass
✅ Manual Testing: Verified dropdowns work correctly with pin conflict detection
✅ Code Review: Reverted problematic refactoring - kept functions page-specific

Screenshot

DMX Input Pins with Dropdowns:

The screenshot shows the DMX Input configuration with dropdown menus for pin selection. When a pin is selected (e.g., pin 16 for DMX RX), the other dropdowns show "16 IDMR" as disabled, preventing accidental reuse.

Related Issue

Resolves issue: "DMX Input configuration should indicate which pins are free" (#5046)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>DMX Input configuration should indicate which pins are free</issue_title>
<issue_description>Pin selection for the DMX input should use the same method as pin selection for led preferences where the entry is a drop-down that indicates which pins are free and which are already assigned to prevent users selecting the same pin for different features of wled</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes DMX Input configuration should indicate which pins are free #5046

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[netmindz]

@copilot Is it possible to refactor so you are not duplicating the JavaScript?

[Copilot]

@copilot Is it possible to refactor so you are not duplicating the JavaScript?

Refactored in commit f889e98. The pin dropdown functions (addDropdown(), addOption(), and pinUpd()) are now in common.js and shared between settings_leds.htm and settings_sync.htm. This eliminates the duplication while maintaining the same functionality.

Code reduction: 129 lines removed (68 from settings_leds.htm + 61 from settings_sync.htm), 72 lines added to common.js.

[netmindz]

@copilot Are the functions now in common.js exactly the same as the original ones from the led preferences page?

[Copilot]

@copilot Are the functions now in common.js exactly the same as the original ones from the led preferences page?

Yes, the functions in common.js are essentially the same as the original ones from settings_leds.htm. The only differences are:

1. Added missing semicolons in pinUpd() for code style consistency (added in commit 449bdef)
2. Removed verbose comments from addDropdown()

The core functionality is identical - I preserved all the LED pin detection logic and pin conflict handling from the original implementation.

[blazoncek]

IMO moving addDropdown() to common.js should be a separate PR to avoid merge conflicts in the future.

And for the reference, pinUpd() is intended for settings_leds.htm. It is not a universal function.

[softhack007]

@netmindz I understand that this is "only" the UI part, right?

Some open ends:

• The selected pin must be handled in json.cpp and xml.cpp, plus you might need a new global variable to store the value.
• Currently pins are hardcoded in SparkFunDMX.cpp and ESPDMX.cpp (see below)
• I think that 8266 cannot change the send pin, because the pin for Serial1 is fixed.
• or maybe the plan is to drop SparkFunDMX.cpp and ESPDMX.cpp and replace by a better implementation in the future?

WLED/wled00/src/dependencies/dmx/SparkFunDMX.cpp

Lines 33 to 35 in b60313e

	static const int enablePin = -1; // disable the enable pin because it is not needed
	static const int rxPin = -1; // disable the receiving pin because it is not needed - softhack007: Pin=-1 means "use default" not "disable"
	static const int txPin = 2; // transmit DMX data over this pin (default is pin 2)

WLED/wled00/src/dependencies/dmx/ESPDMX.cpp

Line 31 in b60313e

int sendPin = 2; //default on ESP8266

[netmindz]

@netmindz I understand that this is "only" the UI part, right?

Some open ends:

• The selected pin must be handled in json.cpp and xml.cpp, plus you might need a new global variable to store the value.
• Currently pins are hardcoded in SparkFunDMX.cpp and ESPDMX.cpp (see below)
• I think that 8266 cannot change the send pin, because the pin for Serial1 is fixed.
• or maybe the plan is to drop SparkFunDMX.cpp and ESPDMX.cpp and replace by a better implementation in the future?

WLED/wled00/src/dependencies/dmx/SparkFunDMX.cpp

Lines 33 to 35 in b60313e

	static const int enablePin = -1; // disable the enable pin because it is not needed
	static const int rxPin = -1; // disable the receiving pin because it is not needed - softhack007: Pin=-1 means "use default" not "disable"
	static const int txPin = 2; // transmit DMX data over this pin (default is pin 2)

WLED/wled00/src/dependencies/dmx/ESPDMX.cpp

Line 31 in b60313e

int sendPin = 2; //default on ESP8266

You are confusing DMX Output and DMX Input

[netmindz]

IMO moving addDropdown() to common.js should be a separate PR to avoid merge conflicts in the future.

Separate commit should be fine, PRs have no impact on merge conflicts.

And for the reference, pinUpd() is intended for settings_leds.htm. It is not a universal function.

It has selective code to handle when it is used in the led settings page, but other than that, why can't it be used as a generic wat to handle selecting pins?

[softhack007]

You are confusing DMX Output and DMX Input

@netmindz yes you're right, sorry.

[netmindz]

And for the reference, pinUpd() is intended for settings_leds.htm. It is not a universal function.

Is pinDropdowns() a better choice?

[blazoncek]

Is pinDropdowns() a better choice?

No, its purpose is different. pinUpd() contains specifics applicable to LED settings. If you move it into common.js it will need to include specifics for other modules if they exist or move LED settings specifics out of it.
But I'm currently rewriting LED settings to allow dropdown select for LED pins. It changes some of the needed functions.

[netmindz]

yeah copilot hasn't got it right, no suprise ;)

Please do not waste time by reviewing any copilot PRs @blazoncek @softhack007 @willmmiles @DedeHai unless they are out of draft state and ready for review

[netmindz]

@copilot This is not working as intended. You can't use the query selector approach for the LED GPIO pins for any page other than the LED Preferences page as the form elements are not present.

I was also incorrect to direct you to look at the LED preferences page, it's actually the usermod page that handles this properly and infact it's the version from this fork https://github.com/netmindz/WLED-MM that best handles the display of available pins

[Copilot]

@copilot This is not working as intended. You can't use the query selector approach for the LED GPIO pins for any page other than the LED Preferences page as the form elements are not present.

I was ...

Fixed in commit 7740231. Reverted the problematic refactoring that moved functions to common.js. The pin dropdown functions are now kept page-specific in settings_sync.htm without the LED-specific querySelector code that would fail on other pages.

The pinUpd() function in settings_sync.htm now only handles DMX pin conflicts without trying to query for LED GPIO pins.