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

Open
DedeHai wants to merge 8 commits into
base: main
Choose a base branch
from
+255 −164
Open

Improvements to UI settings readability #5328

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 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
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
125 changes: 74 additions & 51 deletions wled00/data/settings_leds.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -870,25 +870,28 @@
</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>LED 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>
<span id="psu2"><br></span>
<br>
Global brightness factor: <input name="BF" type="number" class="m" min="1" max="255" required> %<br>
Enable automatic brightness limiter: <input type="checkbox" name="ABL" onchange="enABL()"><br>
<div id="abl">
<i>Automatically limits brightness to stay close to the limit.<br>
Keep at &lt;1A if powering LEDs directly from the ESP 5V pin!<br>
If using multiple outputs it is recommended to use per-output limiter.<br>
Analog (PWM) and virtual LEDs cannot use automatic brightness limiter.<br></i>
<div id="psuMA">Maximum PSU Current: <input name="MA" type="number" class="xl" min="250" max="65000" oninput="UI()" required> mA<br></div>
Use per-output limiter: <input type="checkbox" name="PPL" onchange="UI()"><br>
Use per-output limiter: <input type="checkbox" name="PPL" onchange="UI()"><br><br>
<div id="ppldis" style="display:none;">
<i>Make sure you enter correct value for each LED output.<br>
If using multiple outputs with only one PSU, distribute its power proportionally amongst outputs.</i><br>
Expand All @@ -900,8 +903,7 @@ <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>
<div id="mLC"><h4>LED outputs:</h4></div>
<hr class="sml">
<button type="button" id="+" onclick="addLEDs(1,false)">+</button>
<button type="button" id="-" onclick="addLEDs(-1,false)">-</button><br>
Expand All @@ -923,17 +925,44 @@ <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>Color & White</h3>
Use Gamma correction for color: <input type="checkbox" name="GC"> (strongly recommended)<br>
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.2" min="0.1" max="3" step="0.1" required><br><br>
White Balance correction: <input type="checkbox" name="CCT"><br>
<div id="wc">
Global override for Auto-calculate white:
<select name="AW">
<option value=255>Disabled</option>
<option value=0>None</option>
<option value=1>Brighter</option>
<option value=2>Accurate</option>
<option value=3>Dual</option>
<option value=4>Max</option>
</select>
<br>
Calculate CCT from RGB: <input type="checkbox" name="CR"><br>
CCT IC used (Athom 15W): <input type="checkbox" name="IC"><br>
CCT additive blending: <input type="number" class="s" min="0" max="100" name="CB" onchange="UI()" required> %<br>
<i class="warn"><b>⚠</b> Set to 0 when using 2-wire (reverse polarity) CCT strips</i><br><br>
</div>
</div>
<h2>Hardware setup</h2>
<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">
Touch threshold: <input type="number" class="s" min="0" max="100" name="TT" required><br><br>
</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 @@ -947,22 +976,31 @@ <h3>Hardware setup</h3>
</select><span style="cursor: pointer;" onclick="off('IR')">&nbsp;&#x2715;</span><br>
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">
<a href="https://kno.wled.ge/interfaces/infrared/" target="_blank">IR info</a><br><br>
</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">
<h3>Defaults</h3>
Invert <input type="checkbox" name="RM"> Open drain <input type="checkbox" name="RO"><br><br>
</div>
<h2>General settings</h2>
<div class="sec">
<h3>Power up</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>
Apply preset <input name="BP" type="number" class="m" min="0" max="250" required> at boot (0 uses values from above)<br><br>
Use Gamma correction for color: <input type="checkbox" name="GC"> (strongly recommended)<br>
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.2" min="0.1" max="3" step="0.1" required><br><br>
Brightness factor: <input name="BF" type="number" class="m" min="1" max="255" required> %
with brightness: <input name="CA" type="number" class="m" min="1" max="255" required> (1-255)<br>
<i>(disable if using boot preset to turn LEDs on)</i><br><br>
Apply preset <input name="BP" type="number" class="m" min="0" max="250" required> at boot (0 = none)<br><br>
</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>
Default transition time: <input name="TD" type="number" class="xl" min="0" max="65500"> ms<br><br>
</div>
<div class="sec">
<h3>Random Palettes</h3>
Use harmonic colors in <i>Random palettes</i>: <input type="checkbox" name="TH"><br>
<i>Random Palette</i> Cycle Time: <input name="TP" type="number" class="m" min="1" max="255"> s<br><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,24 +1011,9 @@ <h3>Timed light</h3>
<option value="2">Fade Color</option>
<option value="3">Sunrise</option>
</select>
<h3>White management</h3>
White Balance correction: <input type="checkbox" name="CCT"><br>
<div id="wc">
Global override for Auto-calculate white:<br>
<select name="AW">
<option value=255>Disabled</option>
<option value=0>None</option>
<option value=1>Brighter</option>
<option value=2>Accurate</option>
<option value=3>Dual</option>
<option value=4>Max</option>
</select>
<br>
Calculate CCT from RGB: <input type="checkbox" name="CR"><br>
CCT IC used (Athom 15W): <input type="checkbox" name="IC"><br>
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>
<br><br>
</div>
<div class="sec">
<h3>Advanced</h3>
Palette wrapping:
<select name="PB">
Expand All @@ -999,16 +1022,16 @@ <h3>Advanced</h3>
<option value="2">Linear (never wrap)</option>
<option value="3">None (not recommended)</option>
</select><br>
Use harmonic <i>Random Cycle</i> palette: <input type="checkbox" name="TH"><br>
Target refresh rate: <input type="number" class="s" min="0" max="250" name="FR" oninput="UI()" required> FPS
<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>
<br><br>
</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>
23 changes: 14 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,16 @@ <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>
</div>
<div class="sec" id="OTA">
<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>
<hr id="backup">
</div>
<div class="sec" id="backup">
<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 +77,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
Loading