Skip to content

Improvements to UI settings readability #5328

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

Merged
DedeHai merged 11 commits into from
Feb 19, 2026
+254 −163
Merged

Improvements to UI settings readability #5328

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
6f69bee
improved readability of lettings_leds.htm
DedeHai Jan 29, 2026
055c55b
left shifted indentation to preserve "blame" history but still have i…
DedeHai Jan 30, 2026
6754f54
update all config pages with sections
DedeHai Jan 30, 2026
1657913
revert debug change
DedeHai Jan 30, 2026
5542e93
move ID's
DedeHai Jan 30, 2026
93a2967
reordered LED settings with more natural "workflow"
DedeHai Feb 5, 2026
4672dec
Merge branch 'main' into UI_readability
DedeHai Feb 8, 2026
1c84ab0
Merge branch 'main' into UI_readability
DedeHai Feb 8, 2026
741867b
Merge branch 'main' into UI_readability
DedeHai Feb 19, 2026
f7e5ed7
fix merge conflict
DedeHai Feb 19, 2026
b1414c2
Fix header
DedeHai Feb 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions wled00/data/settings.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,8 @@
</head>
<body>
<button type=submit id="b" onclick="window.location=getURL('/')">Back</button>
<button type="submit" onclick="window.location=getURL('/settings/wifi')">WiFi Setup</button>
<button type="submit" onclick="window.location=getURL('/settings/leds')">LED Preferences</button>
<button type="submit" onclick="window.location=getURL('/settings/wifi')">WiFi & Network</button>
<button type="submit" onclick="window.location=getURL('/settings/leds')">LED & Hardware</button>
<button id="2dbtn" type="submit" onclick="window.location=getURL('/settings/2D')">2D Configuration</button>
<button type="submit" onclick="window.location=getURL('/settings/ui')">User Interface</button>
<button id="dmxbtn" style="display:none;" type="submit" onclick="window.location=getURL('/settings/dmx')">DMX Output</button>
Expand Down
23 changes: 15 additions & 8 deletions wled00/data/settings_2D.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
if (p.children.length >= maxPanels) return;
var pw = parseInt(d.Sf.PW.value);
var ph = parseInt(d.Sf.PH.value);
let b = `<div id="pnl${i}"><hr class="sml">Panel ${i}<br>
let b = `<div id="pnl${i}"><b>Panel ${i}</b><br>
1<sup>st</sup> LED: <select name="P${i}B" oninput="UI()">
<option value="0">Top</option>
<option value="1">Bottom</option>
Expand All @@ -65,7 +65,7 @@
Dimensions (WxH): <input name="P${i}W" type="number" min="1" max="255" value="${pw}" oninput="UI()"> x <input name="P${i}H" type="number" min="1" max="255" value="${ph}" oninput="UI()"><br>
Offset X: <input name="P${i}X" type="number" min="0" max="255" value="0" oninput="UI()">
Y: <input name="P${i}Y" type="number" min="0" max="255" value="0" oninput="UI()"><br><i>(offset from top-left corner in # LEDs)</i>
</div>`;
<br><br></div>`;
p.insertAdjacentHTML("beforeend", b);
}

Expand Down Expand Up @@ -255,13 +255,15 @@
<button type="button" onclick="B()">Back</button><button type="button" onclick="fS()">Save</button><hr>
</div>
<h2>2D setup</h2>
<div class="sec">
Strip or panel:
<select id="somp" name="SOMP" onchange="resetPanels();addPanels();UI();" >
<option value="0">1D Strip</option>
<option value="1">2D Matrix</option>
</select><br>
</select>
</div>
<div id="mpdiv" style="display:none;">
<hr class="sml">
<div class="sec">
<h3>Matrix Generator <button type="button" id="expGen" onclick="expand(this,gId('mxGen'));">&gt;</button></h3>
<div id="mxGen" style="display:none;">
Panel dimensions (WxH): <input name="PW" type="number" min="1" max="128" value="8"> x <input name="PH" type="number" min="1" max="128" value="8"><br>
Expand All @@ -283,21 +285,26 @@ <h3>Matrix Generator <button type="button" id="expGen" onclick="expand(this,gId(
WARNING: You may need to update each panel parameters after they are generated.</i><br>
<button type="button" onclick="gen();expand(gId('expGen'),gId('mxGen'));">Populate</button>
</div>
<hr class="sml">
</div>
<div class="sec">
<h3>Panel set-up</h3>
Number of panels: <input name="MPC" type="number" min="1" max="64" value="1" oninput="addPanels();UI();"><br>
<i>A matrix is made of 1 or more physical LED panels.<br>
Each panel can be of different size and/or have different LED orientation and/or starting point and/or layout.</i><br>
</div>
<div class="sec">
<h3>LED panel layout</h3>
<div id="panels">
</div>
<hr class="sml">
<div id="MD"></div>
<canvas id="canvas"></canvas>
</div>
<div id="MD"></div>
<canvas id="canvas"></canvas>
<div class="sec">
<div id="json" >Gap file: <input type="file" name="data" accept=".json"><button type="button" class="sml" onclick="uploadFile(d.Sf.data,'/2d-gaps.json')">Upload</button></div>
<i>Note: Gap file is a <b>.json</b> file containing an array with number of elements equal to the matrix size.<br>
A value of -1 means that pixel at that position is missing, a value of 0 means never paint that pixel, and 1 means regular pixel.</i>
</div>
</div>
<hr>
<button type="button" onclick="B()">Back</button><button type="button" onclick="fS()">Save</button>
</form>
Expand Down
52 changes: 34 additions & 18 deletions wled00/data/settings_leds.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -870,12 +870,14 @@
</script>
</head>
<body>
<form id="form_s" name="Sf" method="post">
<div class="toprow">
<div class="helpB"><button type="button" onclick="H('features/settings/#led-settings')">?</button></div>
<button type="button" onclick="B()">Back</button><button type="submit">Save</button><hr>
</div>
<h2>LED &amp; Hardware setup</h2>
<form id="form_s" name="Sf" method="post">
<div class="toprow">
<div class="helpB"><button type="button" onclick="H('features/settings/#led-settings')">?</button></div>
<button type="button" onclick="B()">Back</button><button type="submit">Save</button><hr>
</div>
<h2>Hardware setup</h2>
<div class="sec">
<h3>LED setup</h3>
Total LEDs: <span id="lc">?</span> <span id="pc"></span><br>
<i>Recommended power supply for brightest white:</i><br>
<b><span id="psu">?</span></b><br>
Expand All @@ -900,7 +902,6 @@ <h2>LED &amp; Hardware setup</h2>
multiple power injection points and a fuse!<br>
</div>
</div>
<h3>Hardware setup</h3>
<div id="mLC">LED outputs:</div>
<hr class="sml">
<button type="button" id="+" onclick="addLEDs(1,false)">+</button>
Expand All @@ -923,17 +924,20 @@ <h3>Hardware setup</h3>
<button type="button" id="com_add" onclick="addCOM()">+</button>
<button type="button" id="com_rem" onclick="remCOM()">-</button>
</div>
<hr class="sml">
</div>
<div class="sec">
<h3>Buttons</h3>
<div id="btn_wrap">
Buttons:
<div id="btns"></div>
<hr class="sml">
<button type="button" id="btn_add" onclick="addBtn(gId('btns').children.length,-1,0)">+</button>
<button type="button" id="btn_rem" onclick="remBtn()">-</button>
</div>
Disable internal pull-up/down: <input type="checkbox" name="IP"><br>
Touch threshold: <input type="number" class="s" min="0" max="100" name="TT" required><br>
<hr class="sml">
</div>
<div class="sec">
<h3>IR Remote</h3>
IR GPIO: <input type="number" min="-1" max="48" name="IR" onchange="UI()" class="xs"><select name="IT" onchange="UI()">
<option value=0>Remote disabled</option>
<option value=1>24-key RGB</option>
Expand All @@ -948,10 +952,14 @@ <h3>Hardware setup</h3>
Apply IR change to main segment only: <input type="checkbox" name="MSO"><br>
<div id="json" style="display:none;">JSON file: <input type="file" name="data" accept=".json"><button type="button" class="sml" onclick="uploadFile(d.Sf.data,'/ir.json')">Upload</button><br></div>
<a href="https://kno.wled.ge/interfaces/infrared/" target="_blank">IR info</a><br>
<hr class="sml">
</div>
<div class="sec">
<h3>Relay</h3>
Relay GPIO: <input type="number" min="-1" max="48" name="RL" onchange="UI()" class="xs"><span style="cursor: pointer;" onclick="off('RL')">&nbsp;&#x2715;</span><br>
Invert <input type="checkbox" name="RM"> Open drain <input type="checkbox" name="RO"><br>
<hr class="sml">
</div>
<h2>General settings</h2>
<div class="sec">
<h3>Defaults</h3>
Turn LEDs on after power up/reset: <input type="checkbox" name="BO"><br>
Default brightness: <input name="CA" type="number" class="m" min="1" max="255" required> (1-255)<br><br>
Expand All @@ -960,9 +968,13 @@ <h3>Defaults</h3>
Use Gamma correction for brightness: <input type="checkbox" name="GB"> (not recommended)<br>
Use Gamma value: <input name="GV" type="number" class="m" placeholder="2.8" min="1" max="3" step="0.1" required><br><br>
Brightness factor: <input name="BF" type="number" class="m" min="1" max="255" required> %
</div>
<div class="sec">
<h3>Transitions</h3>
Default transition time: <input name="TD" type="number" class="xl" min="0" max="65500"> ms<br>
<i>Random Cycle</i> Palette Time: <input name="TP" type="number" class="m" min="1" max="255"> s<br>
</div>
<div class="sec">
<h3>Timed light</h3>
Default duration: <input name="TL" type="number" class="m" min="1" max="255" required> min<br>
Default target brightness: <input name="TB" type="number" class="m" min="0" max="255" required><br>
Expand All @@ -973,6 +985,8 @@ <h3>Timed light</h3>
<option value="2">Fade Color</option>
<option value="3">Sunrise</option>
</select>
</div>
<div class="sec">
<h3>White management</h3>
White Balance correction: <input type="checkbox" name="CCT"><br>
<div id="wc">
Expand All @@ -991,6 +1005,8 @@ <h3>White management</h3>
CCT additive blending: <input type="number" class="s" min="0" max="100" name="CB" onchange="UI()" required> %<br>
<i class="warn">WARNING: When using H-bridge for reverse polarity (2-wire) CCT LED strip<br><b>make sure this value is 0</b>.<br>(ESP32 variants only, ESP8266 does not support H-bridges)</i>
</div>
</div>
<div class="sec">
<h3>Advanced</h3>
Palette wrapping:
<select name="PB">
Expand All @@ -1004,11 +1020,11 @@ <h3>Advanced</h3>
<div id="fpsNone" class="warn" style="display: none;">&#9888; Unlimited FPS Mode is experimental &#9888;<br></div>
<div id="fpsHigh" class="warn" style="display: none;">&#9888; High FPS Mode is experimental.<br></div>
<div id="fpsWarn" class="warn" style="display: none;">Please <a class="lnk" href="sec#backup">backup</a> WLED configuration and presets first!<br></div>
<hr class="sml">
<div id="cfg">Config template: <input type="file" name="data2" accept=".json"><button type="button" class="sml" onclick="loadCfg(d.Sf.data2)">Apply</button><br></div>
<hr>
<button type="button" onclick="B()">Back</button><button type="submit">Save</button>
</form>
<div id="toast"></div>
</div>
<div id="cfg">Config template: <input type="file" name="data2" accept=".json"><button type="button" class="sml" onclick="loadCfg(d.Sf.data2)">Apply</button><br></div>
<hr>
<button type="button" onclick="B()">Back</button><button type="submit">Save</button>
</form>
<div id="toast"></div>
</body>
</html>
2 changes: 2 additions & 0 deletions wled00/data/settings_pin.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,12 @@
</head>
<body onload="d.getElementsByName('PIN')[0].focus()">
<form id="form_s" name="Sf" method="post">
<div class="sec">
<h2>Please enter settings PIN code</h2>
<input type="password" name="PIN" size="4" maxlength="4" minlength="4" pattern="[0-9]*" inputmode="numeric" autofocus>
<hr>
<button type="button" onclick="B()">Back</button><button type="submit">Submit</button>
</div>
</form>
</body>
</html>
25 changes: 16 additions & 9 deletions wled00/data/settings_sec.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,13 @@
</script>
</head>
<body>
<form id="form_s" name="Sf" method="post">
<div class="toprow">
<div class="helpB"><button type="button" onclick="H('features/settings/#security-settings')">?</button></div>
<button type="button" onclick="B()">Back</button><button type="submit">Save</button><hr>
</div>
<form id="form_s" name="Sf" method="post">
<div class="toprow">
<div class="helpB"><button type="button" onclick="H('features/settings/#security-settings')">?</button></div>
<button type="button" onclick="B()">Back</button><button type="submit">Save</button><hr>
</div>
<h2>Security & Update setup</h2>
<div class="sec">
Settings PIN: <input type="password" id="PIN" name="PIN" size="4" maxlength="4" minlength="4" onkeydown="checkNum(this)" pattern="[0-9]*" inputmode="numeric" title="Please enter a 4 digit number"><br>
<div class="warn">&#9888; Unencrypted transmission. Be prudent when selecting PIN, do NOT use your banking, door, SIM, etc. pin!</div><br>
Lock wireless (OTA) software update: <input type="checkbox" name="NO"><br>
Expand All @@ -58,14 +59,18 @@ <h2>Security & Update setup</h2>
Factory reset: <input type="checkbox" name="RS"><br>
All settings and presets will be erased.<br><br>
<div class="warn">&#9888; Unencrypted transmission. An attacker on the same network can intercept form data!</div>
<span id="OTA"><hr>
<span id="OTA">
</div>
<div class="sec">
<h3>Software Update</h3>
<button type="button" onclick="U()">Manual OTA Update</button><br>
<div id="aOTA">Enable ArduinoOTA: <input type="checkbox" name="AO"></div>
Only allow update from same network/WiFi: <input type="checkbox" name="SU"><br>
<i class="warn">&#9888; If you are using multiple VLANs (i.e. IoT or guest network) either set PIN or disable this option.<br>
Disabling this option will make your device less secure.</i><br></span>
Comment thread
DedeHai marked this conversation as resolved.
Outdated
<hr id="backup">
<span id="backup">
</div>
<div class="sec">
<h3>Backup & Restore</h3>
<div class="warn">&#9888; Restoring presets/configuration will OVERWRITE your current presets/configuration.<br>
Incorrect upload or configuration may require a factory reset or re-flashing of your ESP.<br>
Expand All @@ -74,14 +79,16 @@ <h3>Backup & Restore</h3>
<div>Restore presets<br><input type="file" name="data" accept=".json"> <button type="button" onclick="uploadFile(d.Sf.data,'/presets.json');">Upload</button><br></div><br>
<a class="btn lnk" id="bckpresets" href="/cfg.json" download="cfg">Backup configuration</a><br>
<div>Restore configuration<br><input type="file" name="data2" accept=".json"> <button type="button" onclick="uploadFile(d.Sf.data2,'/cfg.json');">Upload</button><br></div>
<hr>
</div>
<div class="sec">
<h3>About</h3>
<a href="https://github.com/wled-dev/WLED/" target="_blank">WLED</a>&#32;version ##VERSION##<!-- Autoreplaced from package.json --><br><br>
<a href="https://kno.wled.ge/about/contributors/" target="_blank">Contributors, dependencies and special thanks</a><br>
A huge thank you to everyone who helped me create WLED!<br><br>
(c) 2016-2024 Christian Schwinne <br>
<i>Licensed under the <a href="https://github.com/wled-dev/WLED/blob/main/LICENSE" target="_blank">EUPL v1.2 license</a></i><br><br>
Installed version: <span class="sip">WLED ##VERSION##</span><hr>
Installed version: <span class="sip">WLED ##VERSION##</span>
</div>
<div id="toast"></div>
<button type="button" onclick="B()">Back</button><button type="submit">Save</button>
</form>
Expand Down
38 changes: 29 additions & 9 deletions wled00/data/settings_sync.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,15 +59,21 @@
<button type="button" onclick="B()">Back</button><button type="submit">Save</button><hr>
</div>
<h2>Sync setup</h2>
<div class="sec">
<h3>WLED Broadcast</h3>
UDP Port: <input name="UP" type="number" min="1" max="65535" class="d5" required><br>
2nd Port: <input name="U2" type="number" min="1" max="65535" class="d5" required><br>
</div>
<div class="sec">
<h3>ESP-NOW</h3>
<div id="NoESPNOW" class="hide">
<i class="warn">ESP-NOW support is disabled.<br></i>
<i class="warn">Disabled. Enable ESP-NOW in WiFi settings.<br></i>
</div>
<div id="ESPNOW">
Use ESP-NOW sync: <input type="checkbox" name="EN"><br><i>(in AP mode or no WiFi)</i><br>
</div>
</div>
<div class="sec">
<h3>Sync groups</h3>
<input name="GS" id="GS" type="number" style="display: none;"><!-- hidden inputs for bitwise group checkboxes -->
<input name="GR" id="GR" type="number" style="display: none;">
Expand Down Expand Up @@ -106,9 +112,13 @@ <h3>Sync groups</h3>
<td><input type="checkbox" id="R8" name="R8"></td>
</tr>
</table>
</div>
<div class="sec">
<h3>Receive</h3>
<nowrap><input type="checkbox" name="RB">Brightness,</nowrap> <nowrap><input type="checkbox" name="RC">Color,</nowrap> <nowrap><input type="checkbox" name="RX">Effects,</nowrap> <nowrap>and <input type="checkbox" name="RP">Palette</nowrap><br>
<input type="checkbox" name="SO"> Segment options, <input type="checkbox" name="SG"> bounds
</div>
<div class="sec">
<h3>Send</h3>
Enable Sync on start: <input type="checkbox" name="SS"><br>
Send notifications on direct change: <input type="checkbox" name="SD"><br>
Expand All @@ -117,11 +127,13 @@ <h3>Send</h3>
Send Philips Hue change notifications: <input type="checkbox" name="SH"><br>
UDP packet retransmissions: <input name="UR" type="number" min="0" max="30" class="d5" required><br><br>
<i>Reboot required to apply changes. </i>
<hr class="sml">
</div>
<div class="sec">
<h3>Instance List</h3>
Enable instance list: <input type="checkbox" name="NL"><br>
Make this instance discoverable: <input type="checkbox" name="NB">
<hr class="sml">
</div>
<div class="sec">
<h3>Realtime</h3>
Receive UDP realtime: <input type="checkbox" name="RD"><br>
Use main segment only: <input type="checkbox" name="MO"><br>
Expand Down Expand Up @@ -168,12 +180,13 @@ <h4>Wired DMX Input Pins</h4>
DMX Port: <input name="IDMP" type="number" min="1" max="2"><br/>
</div>
<div id="dmxInputOff">
<br><em style="color:darkorange">This firmware build does not include DMX Input support. <br></em>
<br><i class="warn">This firmware build does not include DMX Input support. <br></i>
</div>
<div id="dmxOnOff2">
<br><em style="color:darkorange">This firmware build does not include DMX output support. <br></em>
<br><i class="warn">This firmware build does not include DMX output support. <br></i>
</div>
<hr class="sml">
</div>
<div class="sec">
<h3>Alexa Voice Assistant</h3>
<div id="NoAlexa" class="hide">
<i class="warn">This firmware build does not include Alexa support.<br></i><br>
Expand All @@ -183,13 +196,15 @@ <h3>Alexa Voice Assistant</h3>
Alexa invocation name: <input type="text" name="AI" maxlength="32"><br>
Also emulate devices to call the first <input name="AP" type="number" class="s" min="0" max="9"> presets<br><br>
</div>
<hr class="sml">
<div class="warn">&#9888; <b>MQTT and Hue sync all connect to external hosts!<br>
</div>

<div class="warn">&#9888; <b>MQTT and Hue sync connect to external hosts!<br>
This may impact the responsiveness of WLED.</b><br>
</div>
For best results, only use one of these services at a time.<br>
(alternatively, connect a second ESP to them and use the UDP sync)
<hr class="sml">

<div class="sec">
<h3>MQTT</h3>
<div id="NoMQTT" class="hide">
<i class="warn">This firmware build does not include MQTT support.<br></i>
Expand All @@ -209,6 +224,8 @@ <h3>MQTT</h3>
Retain brightness & color messages: <input type="checkbox" name="RT"><br>
<i>Reboot required to apply changes. </i><a href="https://kno.wled.ge/interfaces/mqtt/" target="_blank">MQTT info</a>
</div>
</div>
<div class="sec">
<h3>Philips Hue</h3>
<div id="NoHue" class="hide">
<em class="warn">This firmware build does not include Philips Hue support.<br></em>
Expand All @@ -226,6 +243,8 @@ <h3>Philips Hue</h3>
(when first connecting)<br>
Hue status: <span class="sip"> Disabled in this build </span>
</div>
</div>
<div class="sec">
<h3>Serial</h3>
<div id="NoSerial" class="hide">
<em class="warn">This firmware build does not support Serial interface.<br></em>
Expand All @@ -244,6 +263,7 @@ <h3>Serial</h3>
</select><br>
<i>Keep at 115200 to use Improv. Some boards may not support high rates.</i>
</div>
</div>
<hr>
<button type="button" onclick="B()">Back</button><button type="submit">Save</button>
</form>
Expand Down
Loading