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

minor webui enhancements #4203

Open
wants to merge 2 commits into
base: 0_15
Choose a base branch
from
+24 −7
Open

minor webui enhancements #4203

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bd68b97
minor webui enhancements
maxi4329 Oct 17, 2024
caa997f
removed onkeydown tried to find a replacement for the nbsp
maxi4329 Oct 18, 2024
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
20 changes: 17 additions & 3 deletions wled00/data/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@ button {
.labels {
margin: 0;
padding: 8px 0 2px 0;
font-size: 19px;
}

#namelabel {
Expand Down Expand Up @@ -890,12 +891,12 @@ a.btn {
line-height: 28px;
}

/* Quick color select Black button (has white border) */
.qcsb {
/* Quick color select Black and White button (has white/black border, depending on the theme) */
.qcsb, .qcsw {
width: 26px;
height: 26px;
line-height: 26px;
border: 1px solid #fff;
border: 1px solid var(--c-f);
}

/* Hex color input wrapper div */
Expand Down Expand Up @@ -1299,6 +1300,14 @@ TD .checkmark, TD .radiomark {
width: 100%;
}

#segutil {
margin-bottom: 12px;
}

#segcont > div:first-child, #fxFind {
margin-top: 4px;
}

/* Simplify segments */
.simplified #segcont .lstI {
margin-top: 4px;
Expand Down Expand Up @@ -1433,6 +1442,11 @@ dialog {
position: relative;
}

.presin {
width: 100%;
box-sizing: border-box;
}

.btn-s,
.btn-n {
border: 1px solid var(--c-2);
Expand Down
2 changes: 1 addition & 1 deletion wled00/data/index.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@
<div class="qcs" onclick="pC('#ffa000');" style="background-color:#ffa000;"></div>
<div class="qcs" onclick="pC('#ffc800');" style="background-color:#ffc800;"></div>
<div class="qcs" onclick="pC('#ffe0a0');" style="background-color:#ffe0a0;"></div>
<div class="qcs" onclick="pC('#ffffff');" style="background-color:#ffffff;"></div>
<div class="qcs qcsw" onclick="pC('#ffffff');" style="background-color:#ffffff;"></div>
<div class="qcs qcsb" onclick="pC('#000000');" style="background-color:#000000;"></div><br>
<div class="qcs" onclick="pC('#ff00ff');" style="background-color:#ff00ff;"></div>
<div class="qcs" onclick="pC('#0000ff');" style="background-color:#0000ff;"></div>
Expand Down
12 changes: 6 additions & 6 deletions wled00/data/settings_2D.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,8 @@
</select><br>
Serpentine: <input type="checkbox" name="P${i}S" oninput="UI()"><br>
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>
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>`;
p.insertAdjacentHTML("beforeend", b);
}
Expand Down Expand Up @@ -246,7 +246,7 @@
<button type="button" onclick="B()">Back</button><button type="button" onclick="fS()">Save</button><hr>
</div>
<h2>2D setup</h2>
Strip or panel:
Strip or panel:&nbsp;
<select id="somp" name="SOMP" onchange="resetPanels();addPanels();UI();" >
<option value="0">1D Strip</option>
<option value="1">2D Matrix</option>
Expand All @@ -258,14 +258,14 @@ <h3>Matrix Generator <button type="button" id="expGen" onclick="expand(this,gId(
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>
Horizontal panels: <input name="MPH" type="number" min="1" max="8" value="1">
Vertical panels: <input name="MPV" type="number" min="1" max="8" value="1"><br>
1<sup>st</sup> panel: <select name="PB">
1<sup>st</sup> panel:&nbsp;<select name="PB">
<option value="0">Top</option>
<option value="1">Bottom</option>
</select><select name="PR">
<option value="0">Left</option>
<option value="1">Right</option>
</select><br>
Orientation: <select name="PV">
Orientation:&nbsp;<select name="PV">
<option value="0">Horizontal</option>
<option value="1">Vertical</option>
</select><br>
Expand All @@ -286,7 +286,7 @@ <h3>LED panel layout</h3>
<div id="MD"></div>
<canvas id="canvas"></canvas>
<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>
<i>Note: Gap file is a&nbsp;<b>.json</b>&nbsp;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>
<hr>
Expand Down
8 changes: 4 additions & 4 deletions wled00/data/settings_leds.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -747,7 +747,7 @@
<button type="button" onclick="B()">Back</button><button type="submit">Save</button><hr>
</div>
<h2>LED &amp; Hardware setup</h2>
Total LEDs: <span id="lc">?</span> <span id="pc"></span><br>
Total LEDs:&nbsp;<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>
Expand Down Expand Up @@ -776,7 +776,7 @@ <h3>Hardware setup</h3>
<hr class="sml">
<button type="button" id="+" onclick="addLEDs(1,false)">+</button>
<button type="button" id="-" onclick="addLEDs(-1,false)">-</button><br>
LED memory usage: <span id="m0">0</span> / <span id="m1">?</span> B<br>
LED memory usage:&nbsp;<span id="m0">0</span> / <span id="m1">?</span> B<br>
<div id="dbar" style="display:inline-block; width: 100px; height: 10px; border-radius: 20px;"></div><br>
<div id="ledwarning" class="warn" style="display: none;">
&#9888; You might run into stability or lag issues.<br>
Expand Down Expand Up @@ -837,7 +837,7 @@ <h3>Transitions</h3>
<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>
Mode:
Mode:&nbsp;
<select name="TW">
<option value="0">Wait and set</option>
<option value="1">Fade</option>
Expand All @@ -863,7 +863,7 @@ <h3>White management</h3>
<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>
<h3>Advanced</h3>
Palette wrapping:
Palette wrapping:&nbsp;
<select name="PB">
<option value="0">Linear (wrap if moving)</option>
<option value="1">Linear (always wrap)</option>
Expand Down
11 changes: 10 additions & 1 deletion wled00/data/settings_pin.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,20 @@
<style>
@import url("style.css");
</style>
<script>
function checkNum(o) {
const specialkeys = ["Backspace", "Tab", "Enter", "Shift", "Control", "Alt", "Pause", "CapsLock", "Escape", "Space", "PageUp", "PageDown", "End", "Home", "ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", "Insert", "Delete"];
Copy link
Collaborator

Choose a reason for hiding this comment

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

what does this line do and is it necessary or more of a best practice? it adds quite a lot of code...

// true if key is a number or a special key
if(event.key.match(/[0-9]/) || specialkeys.includes(event.key)) return true;
event.preventDefault();
return false;
}
</script>
</head>
<body onload="d.getElementsByName('PIN')[0].focus()">
<form id="form_s" name="Sf" method="post">
<h2>Please enter settings PIN code</h2>
<input type="password" name="PIN" size="4" maxlength="4" minlength="4" pattern="[0-9]*" inputmode="numeric" autofocus>
<input type="password" name="PIN" size="4" maxlength="4" minlength="4" onkeydown="checkNum(this)" pattern="[0-9]*" inputmode="numeric" autofocus>
<hr>
<button type="button" onclick="B()">Back</button><button type="submit">Submit</button>
</form>
Expand Down
4 changes: 2 additions & 2 deletions wled00/data/settings_sec.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,8 +72,8 @@ <h3>About</h3>
<a href="https://github.com/Aircoookie/WLED/wiki/Contributors-and-credits" 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/Aircoookie/WLED/blob/master/LICENSE" target="_blank">EUPL v1.2 license</a></i><br><br>
Server message: <span class="sip"> Response error! </span><hr>
<i>Licensed under the&nbsp;<a href="https://github.com/Aircoookie/WLED/blob/master/LICENSE" target="_blank">EUPL v1.2 license</a></i><br><br>
Server message:&nbsp;<span class="sip"> Response error! </span><hr>
<div id="toast"></div>
<button type="button" onclick="B()">Back</button><button type="submit">Save</button>
</form>
Expand Down
10 changes: 5 additions & 5 deletions wled00/data/settings_sync.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ <h3>Realtime</h3>
Use main segment only: <input type="checkbox" name="MO"><br>
Respect LED Maps: <input type="checkbox" name="RLM"><br><br>
<i>Network DMX input</i><br>
Type:
Type:&nbsp;
<select name=DI onchange="SP(); adj();">
<option value=5568>E1.31 (sACN)</option>
<option value=6454>Art-Net</option>
Expand All @@ -127,12 +127,12 @@ <h3>Realtime</h3>
<div id=xp>Port: <input name="EP" type="number" min="1" max="65535" value="5568" class="d5" required><br></div>
Multicast: <input type="checkbox" name="EM"><br>
Start universe: <input name="EU" type="number" min="0" max="63999" required><br>
<i>Reboot required.</i> Check out <a href="https://github.com/LedFx/LedFx" target="_blank">LedFx</a>!<br>
<i>Reboot required.</i>&nbsp;Check out&nbsp;<a href="https://github.com/LedFx/LedFx" target="_blank">LedFx</a>!<br>
Skip out-of-sequence packets: <input type="checkbox" name="ES"><br>
DMX start address: <input name="DA" type="number" min="1" max="510" required><br>
DMX segment spacing: <input name="XX" type="number" min="0" max="150" required><br>
E1.31 port priority: <input name="PY" type="number" min="0" max="200" required><br>
DMX mode:
DMX mode:&nbsp;
<select name=DM>
<option value=0>Disabled</option>
<option value=1>Single RGB</option>
Expand Down Expand Up @@ -185,7 +185,7 @@ <h3>MQTT</h3>
Group Topic: <input type="text" name="MG" maxlength="32"><br>
Publish on button press: <input type="checkbox" name="BM"><br>
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>
<i>Reboot required to apply changes.&nbsp;</i><a href="https://kno.wled.ge/interfaces/mqtt/" target="_blank">MQTT info</a>
</div>
<h3>Philips Hue</h3>
<div id="NoHue" class="hide">
Expand All @@ -209,7 +209,7 @@ <h3>Serial</h3>
<em class="warn">This firmware build does not support Serial interface.<br></em>
</div>
<div id="Serial">
Baud rate:
Baud rate:&nbsp;
<select name=BD>
<option value=1152>115200</option>
<option value=2304>230400</option>
Expand Down
6 changes: 3 additions & 3 deletions wled00/data/settings_time.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ <h2>Time setup</h2>
Get time from NTP server: <input type="checkbox" name="NT"><br>
<input type="text" name="NS" maxlength="32"><br>
Use 24h format: <input type="checkbox" name="CF"><br>
Time zone:
Time zone:&nbsp;
<select name="TZ">
<option value="0" selected>GMT(UTC)</option>
<option value="1">GMT/BST</option>
Expand Down Expand Up @@ -160,8 +160,8 @@ <h2>Time setup</h2>
</select><br>
UTC offset: <input name="UO" type="number" min="-65500" max="65500" required> seconds (max. 18 hours)<br>
Current local time is <span class="times">unknown</span>.<br>
Latitude: <select name="LTR"><option value="N">N</option><option value="S">S</option></select><input name="LT" type="number" class="xl" min="0" max="66.6" step="0.01"><br>
Longitude: <select name="LNR"><option value="E">E</option><option value="W">W</option></select><input name="LN" type="number" class="xl" min="0" max="180" step="0.01"><br>
Latitude:&nbsp;<select name="LTR"><option value="N">N</option><option value="S">S</option></select><input name="LT" type="number" class="xl" min="0" max="66.6" step="0.01"><br>
Longitude:&nbsp;<select name="LNR"><option value="E">E</option><option value="W">W</option></select><input name="LN" type="number" class="xl" min="0" max="180" step="0.01"><br>
<button type="button" id="locbtn" onclick="getLatLon()">Get location</button>
<div><i>(opens new tab, only works in browser)</i></div>
<div id="sun" class="times"></div>
Expand Down
10 changes: 5 additions & 5 deletions wled00/data/settings_um.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -283,14 +283,14 @@
<h2>Usermod Setup</h2>
Global I<sup>2</sup>C GPIOs (HW)<br>
<i class="warn">(change requires reboot!)</i><br>
SDA:<input type="number" min="-1" max="48" name="SDA" onchange="check(this,'if')" class="s" placeholder="SDA">
SCL:<input type="number" min="-1" max="48" name="SCL" onchange="check(this,'if')" class="s" placeholder="SCL">
SDA:&nbsp;<input type="number" min="-1" max="48" name="SDA" onchange="check(this,'if')" class="s" placeholder="SDA">
SCL:&nbsp;<input type="number" min="-1" max="48" name="SCL" onchange="check(this,'if')" class="s" placeholder="SCL">
<hr class="sml">
Global SPI GPIOs (HW)<br>
<i class="warn">(only changable on ESP32, change requires reboot!)</i><br>
MOSI:<input type="number" min="-1" max="48" name="MOSI" onchange="check(this,'if')" class="s" placeholder="MOSI">
MISO:<input type="number" min="-1" max="48" name="MISO" onchange="check(this,'if')" class="s" placeholder="MISO">
SCLK:<input type="number" min="-1" max="48" name="SCLK" onchange="check(this,'if')" class="s" placeholder="SCLK">
MOSI:&nbsp;<input type="number" min="-1" max="48" name="MOSI" onchange="check(this,'if')" class="s" placeholder="MOSI">
MISO:&nbsp;<input type="number" min="-1" max="48" name="MISO" onchange="check(this,'if')" class="s" placeholder="MISO">
SCLK:&nbsp;<input type="number" min="-1" max="48" name="SCLK" onchange="check(this,'if')" class="s" placeholder="SCLK">
<hr class="sml">
Reboot after save? <input type="checkbox" name="RBT"><br>
<div id="um">Loading settings...</div>
Expand Down
8 changes: 4 additions & 4 deletions wled00/data/settings_wifi.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,21 +166,21 @@ <h3>Configure Access Point</h3>
Hide AP name: <input type="checkbox" name="AH"><br>
AP password (leave empty for open):<br> <input type="password" name="AP" maxlength="63" pattern="(.{8,63})|()" title="Empty or min. 8 characters"><br>
Access Point WiFi channel: <input name="AC" type="number" class="xs" min="1" max="13" required><br>
AP opens:
AP opens:&nbsp;
<select name="AB">
<option value="0">No connection after boot</option>
<option value="1">Disconnected</option>
<option value="2">Always</option>
<option value="3">Never (not recommended)</option>
<option value="4">Temporary (no connection after boot)</option>
</select><br>
AP IP: <span class="sip"> Not active </span><br>
AP IP:&nbsp;<span class="sip"> Not active </span><br>
<h3>Experimental</h3>
Force 802.11g mode (ESP8266 only): <input type="checkbox" name="FG"><br>
Disable WiFi sleep: <input type="checkbox" name="WS"><br>
<i>Can help with connectivity issues and Audioreactive sync.<br>
Disabling WiFi sleep increases power consumption.</i><br>
<div id="tx">TX power: <select name="TX">
<div id="tx">TX power:&nbsp;<select name="TX">
<option value="78">19.5 dBm</option>
<option value="76">19 dBm</option>
<option value="74">18.5 dBm</option>
Expand All @@ -205,7 +205,7 @@ <h3>ESP-NOW Wireless</h3>
<i>Listen for events over ESP-NOW<br>
Keep disabled if not using a remote or wireless sync, increases power consumption.<br></i>
Paired Remote MAC: <input type="text" name="RMAC" minlength="12" maxlength="12"><br>
Last device seen: <span class="rlid" onclick="d.Sf.RMAC.value=this.textContent;" style="cursor:pointer;">None</span> <br>
Last device seen:&nbsp;<span class="rlid" onclick="d.Sf.RMAC.value=this.textContent;" style="cursor:pointer;">None</span> <br>
</div>

<div id="ethd">
Expand Down
2 changes: 1 addition & 1 deletion wled00/data/update.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<body onload="GetV()">
<h2>WLED Software Update</h2>
<form method='POST' action='./update' id='uf' enctype='multipart/form-data' onsubmit="U()">
Installed version: <span class="sip">##VERSION##</span><br>
Installed version:&nbsp;<span class="sip">##VERSION##</span><br>
Download the latest binary:&nbsp;<a href="https://github.com/Aircoookie/WLED/releases" target="_blank"
style="vertical-align: text-bottom; display: inline-flex;">
<img src="https://img.shields.io/github/release/Aircoookie/WLED.svg?style=flat-square"></a><br>
Expand Down