minor webui enhancements

This commit is contained in:
maxi4329 2024-10-17 18:07:01 +02:00
parent e9d2182390
commit bd68b977d5
11 changed files with 58 additions and 35 deletions

View File

@ -97,6 +97,7 @@ button {
.labels {
margin: 0;
padding: 8px 0 2px 0;
font-size: 19px;
}
#namelabel {
@ -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 */
@ -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;
@ -1433,6 +1442,11 @@ dialog {
position: relative;
}
.presin {
width: 100%;
box-sizing: border-box;
}
.btn-s,
.btn-n {
border: 1px solid var(--c-2);

View File

@ -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>

View File

@ -54,8 +54,8 @@ Orientation: <select name="P${i}V" oninput="UI()">
</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);
}
@ -246,7 +246,7 @@ Y:<input name="P${i}Y" type="number" min="0" max="255" value="0" oninput="UI()">
<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>
@ -258,14 +258,14 @@ Y:<input name="P${i}Y" type="number" min="0" max="255" value="0" oninput="UI()">
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>
@ -286,7 +286,7 @@ Y:<input name="P${i}Y" type="number" min="0" max="255" value="0" oninput="UI()">
<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>

View File

@ -747,7 +747,7 @@ Swap: <select id="xw${s}" name="XW${s}">
<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>
@ -776,7 +776,7 @@ Swap: <select id="xw${s}" name="XW${s}">
<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>
@ -837,7 +837,7 @@ Swap: <select id="xw${s}" name="XW${s}">
<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>
@ -863,7 +863,7 @@ Swap: <select id="xw${s}" name="XW${s}">
<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>

View File

@ -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"];
// 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>

View File

@ -72,8 +72,8 @@
<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>

View File

@ -118,7 +118,7 @@ Receive UDP realtime: <input type="checkbox" name="RD"><br>
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>
@ -127,12 +127,12 @@ Type:
<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>
@ -185,7 +185,7 @@ Device Topic: <input type="text" name="MD" maxlength="32"><br>
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">
@ -209,7 +209,7 @@ Hue status: <span class="sip"> Disabled in this build </span>
<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>

View File

@ -131,7 +131,7 @@
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>
@ -160,8 +160,8 @@
</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>

View File

@ -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>

View File

@ -166,7 +166,7 @@ Static subnet mask:<br>
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>
@ -174,13 +174,13 @@ Static subnet mask:<br>
<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>
@ -205,7 +205,7 @@ Static subnet mask:<br>
<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">

View File

@ -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>