lba.gitea/WLED
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #20 from Aircoookie/master

Browse Source 
Update
This commit is contained in:
srg74 2020-02-04 15:59:06 -05:00 committed by GitHub
commit 0b3f2da6ef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 141 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
readme.md
View File

@ -1,6 +1,7 @@
![WLED logo](https://raw.githubusercontent.com/Aircoookie/WLED/master/wled_logo.png) ![WLED logo](https://raw.githubusercontent.com/Aircoookie/WLED/master/wled_logo.png)
[![](https://img.shields.io/github/release/Aircoookie/WLED.svg?style=flat-square)](https://github.com/Aircoookie/WLED/releases) [![](https://img.shields.io/github/release/Aircoookie/WLED.svg?style=flat-square)](https://github.com/Aircoookie/WLED/releases)
[![](https://img.shields.io/discourse/topics?colorB=blue&label=forum&server=https%3A%2F%2Fwled.discourse.group%2F&style=flat-square)](https://wled.discourse.group)
[![](https://img.shields.io/discord/473448917040758787.svg?colorB=blue&label=discord&style=flat-square)](https://discord.gg/KuqP7NE) [![](https://img.shields.io/discord/473448917040758787.svg?colorB=blue&label=discord&style=flat-square)](https://discord.gg/KuqP7NE)
[![](https://img.shields.io/badge/quick_start-wiki-blue.svg?style=flat-square)](https://github.com/Aircoookie/WLED/wiki) [![](https://img.shields.io/badge/quick_start-wiki-blue.svg?style=flat-square)](https://github.com/Aircoookie/WLED/wiki)
[![](https://img.shields.io/badge/app-wled-blue.svg?style=flat-square)](https://github.com/Aircoookie/WLED-App) [![](https://img.shields.io/badge/app-wled-blue.svg?style=flat-square)](https://github.com/Aircoookie/WLED-App)
@ -57,7 +58,8 @@ Credits [here](https://github.com/Aircoookie/WLED/wiki/Contributors-&-About)!
Uses Linearicons by Perxis! Uses Linearicons by Perxis!
Join the Discord [server](https://discord.gg/KuqP7NE) to discuss everything about WLED! Join the Discord [server](https://discord.gg/KuqP7NE) to discuss everything about WLED!
You can also send me mails to [dev.aircoookie@gmail.com](mailto:dev.aircoookie@gmail.com). Check out the WLED [Discourse forum](https://wled.discourse.group)!
You can also send me mails to [dev.aircoookie@gmail.com](mailto:dev.aircoookie@gmail.com), but please only do so if you want to talk to me privately.
If WLED really brightens up your every day, you can [![](https://img.shields.io/badge/send%20me%20a%20small%20gift-paypal-blue.svg?style=flat-square)](https://paypal.me/aircoookie) If WLED really brightens up your every day, you can [![](https://img.shields.io/badge/send%20me%20a%20small%20gift-paypal-blue.svg?style=flat-square)](https://paypal.me/aircoookie)
*Disclaimer:* *Disclaimer:*

168
wled00/data/index.htm
View File

@ -46,6 +46,12 @@ p {
color: #ddd; color: #ddd;
} }
td {
text-align: center;
text-transform: uppercase;
font-size: 14px;
}
button { button {
outline: none; outline: none;
cursor: pointer; cursor: pointer;
@ -86,6 +92,15 @@ button {
margin: -2px 0 4px 0; margin: -2px 0 4px 0;
} }
table {
table-layout: fixed;
width: 76%;
}
td {
text-align: center;
}
.slider-icon .slider-icon
{ {
transform: translateY(2px); transform: translateY(2px);
@ -370,7 +385,7 @@ input[type=range]::-ms-thumb {
background-color: #333; background-color: #333;
color: white; color: white;
border: 0px solid white; border: 0px solid white;
border-radius: 5px; border-radius: 25px;
filter: drop-shadow(0px 0px 2px #000); filter: drop-shadow(0px 0px 2px #000);
transition-duration: 0.5s; transition-duration: 0.5s;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
@ -387,13 +402,32 @@ input[type=range]::-ms-thumb {
vertical-align: middle; vertical-align: middle;
} }
.qcs-w {
margin-top: 10px;
}
.qcs {
padding: 14px;
margin: 2px;
border-radius: 14px;
display: inline-block;
}
.qcsb {
padding: 13px;
border: 1px solid white;
}
.cl {
width: 42px;
}
select { select {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='white'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='white'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
background-size: 12px; background-size: 12px;
background-position: 210px 16px; background-position: 206px 16px;
padding-left: 12px !important;
background-repeat: no-repeat; background-repeat: no-repeat;
outline: none; outline: none;
} }
@ -432,21 +466,21 @@ input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
} }
.botpad { .segn {
margin-bottom: 16px !important; margin: 3px 0 6px 0 !important;
} }
.ic { .ic {
padding: 6px 0 0 0; padding: 6px 0 0 0;
} }
.xs { .xxs {
width: 60px; width: 40px;
margin: 6px;
} }
.xxs { .rect {
width: 42px; border-radius: 5px;
margin: 8px;
} }
.psts { .psts {
@ -471,10 +505,18 @@ input[type=number]::-webkit-outer-spin-button {
.cnf { .cnf {
position: absolute; position: absolute;
top: 75px; top: 66px;
right: 60px; right: 28px;
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
background: #333;
padding: 43px 6px;
border-radius: 5px;
}
.half {
padding: 6px 6px;
top: 64px;
} }
.del { .del {
@ -572,8 +614,12 @@ input[type=number]::-webkit-outer-spin-button {
.h { .h {
font-size: 13px; font-size: 13px;
text-align: center;
color: #bbb; color: #bbb;
text-align: left; }
.bp {
margin-bottom: 5px;
} }
.seg { .seg {
@ -652,6 +698,19 @@ input[type=number]::-webkit-outer-spin-button {
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
</div> </div>
<div class="qcs-w">
<div class="qcs" onclick="pC('#ff0000');" style="background-color:#ff0000;"></div>
<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('#fff0a0');" style="background-color:#fff0a0;"></div>
<div class="qcs" 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>
<div class="qcs" onclick="pC('#00ffc8');" style="background-color:#00ffc8;"></div>
<div class="qcs" onclick="pC('#08ff00');" style="background-color:#08ff00;"></div>
<div class="qcs" onclick="pC('rnd');" style="background-color:#333; padding: 4px 8px; transform: translateY(-10px);">R</div>
</div>
<div id="csl"> <div id="csl">
<button class="xxs cl btn" onclick="selectSlot(0);">1</button> <button class="xxs cl btn" onclick="selectSlot(0);">1</button>
<button class="xxs cl btn" onclick="selectSlot(1);">2</button> <button class="xxs cl btn" onclick="selectSlot(1);">2</button>
@ -734,8 +793,8 @@ input[type=number]::-webkit-outer-spin-button {
</label><br> </label><br>
First preset: <input id="cycs" class="noslide" type="number" min="1" max="14" value="1"><br> First preset: <input id="cycs" class="noslide" type="number" min="1" max="14" value="1"><br>
Last preset: <input id="cyce" class="noslide" type="number" min="2" max="15" value="3"><br> Last preset: <input id="cyce" class="noslide" type="number" min="2" max="15" value="3"><br>
Time per preset: <input id="cyct" class="noslide" type="number" min="0.2" max="65.5" value="1.2">s<br> Time per preset: <input id="cyct" class="noslide" type="number" min="0.2" max="65.5" step="0.1" value="1.2">s<br>
Transition: <input id="cyctt" class="noslide" type="number" min="0" max="65.5" value="0.7">s Transition: <input id="cyctt" class="noslide" type="number" min="0" max="65.5" step="0.1" value="0.7">s
</div> </div>
</div> </div>
@ -864,9 +923,27 @@ function populateSegments(s)
</label> </label>
<i class="icons slider-icon flr ${expanded[i] ? "exp":""}" id="sege${i}" onclick="expand(${i})">&#xe395;</i> <i class="icons slider-icon flr ${expanded[i] ? "exp":""}" id="sege${i}" onclick="expand(${i})">&#xe395;</i>
<div class="segin ${expanded[i] ? "expanded":""}" id="seg${i}"> <div class="segin ${expanded[i] ? "expanded":""}" id="seg${i}">
Start LED: <input class="starts noslide" id="seg${i}s" type="number" min="0" max="${ledCount-1}" value="${inst.start}" oninput="updateLen(this)"><br> <table>
Stop LED: <input class="stops noslide botpad" id="seg${i}e" type="number" min="0" max="${ledCount}" value="${inst.stop}" oninput="updateLen(this)"> <tr>
<span class="h">(${inst.stop - inst.start} LED${inst.stop - inst.start > 1 ? "s":""})</span><br> <td>Start LED</td>
<td>Stop LED</td>
</tr>
<tr>
<td><input class="noslide segn" id="seg${i}s" type="number" min="0" max="${ledCount-1}" value="${inst.start}" oninput="updateLen(${i})"></td>
<td><input class="noslide segn" id="seg${i}e" type="number" min="0" max="${ledCount}" value="${inst.stop}" oninput="updateLen(${i})"></td>
</tr>
</table>
<table>
<tr>
<td>Grouping</td>
<td>Spacing</td>
</tr>
<tr>
<td><input class="noslide segn" id="seg${i}grp" type="number" min="1" max="255" value="${inst.grp}" oninput="updateLen(${i})"></td>
<td><input class="noslide segn" id="seg${i}spc" type="number" min="0" max="255" value="${inst.spc}" oninput="updateLen(${i})"></td>
</tr>
</table>
<div class="h bp" id="seg${i}len">${inst.stop - inst.start} LED${inst.stop - inst.start > 1 ? "s":""} (${Math.ceil((inst.stop - inst.start)/(inst.grp + inst.spc))} virtual)</div>
<i class="icons slider-icon cnf" id="segc${i}" onclick="setSeg(${i})">&#xe390;</i> <i class="icons slider-icon cnf" id="segc${i}" onclick="setSeg(${i})">&#xe390;</i>
<i class="icons slider-icon del" id="segd${i}" onclick="delSeg(${i})">&#xe037;</i> <i class="icons slider-icon del" id="segd${i}" onclick="delSeg(${i})">&#xe037;</i>
<label class="check revchkl"> <label class="check revchkl">
@ -896,18 +973,28 @@ function updateTrail(e)
e.parentNode.getElementsByClassName('sliderdisplay')[0].style.background = val; e.parentNode.getElementsByClassName('sliderdisplay')[0].style.background = val;
} }
function updateLen(e) function updateLen(s)
{ {
var len = e.parentNode.getElementsByClassName('stops')[0].value; var start = parseInt(d.getElementById(`seg${s}s`).value);
len -= e.parentNode.getElementsByClassName('starts')[0].value; var stop = parseInt(d.getElementById(`seg${s}e`).value);
var len = stop - start;
var out = "(delete)"
if (len > 1) { if (len > 1) {
len = `(${len} LEDs)`; out = `${len} LEDs`;
} else if (len == 1) { } else if (len == 1) {
len = "(1 LED)" out = "1 LED"
} else {
len = "(delete)";
} }
e.parentNode.getElementsByClassName('h')[0].innerHTML = len;
if (d.getElementById(`seg${s}grp`) != null)
{
var grp = parseInt(d.getElementById(`seg${s}grp`).value);
var spc = parseInt(d.getElementById(`seg${s}spc`).value);
if (grp == 0) grp = 1;
var virt = Math.ceil(len/(grp + spc));
if (!isNaN(virt) && (grp > 1 || spc > 0)) out += ` (${virt} virtual)`;
}
d.getElementById(`seg${s}len`).innerHTML = out;
} }
function updateUI() function updateUI()
@ -948,7 +1035,7 @@ function requestJson(command, verbose = true) {
e1 = d.getElementById('fxlist'); e1 = d.getElementById('fxlist');
e2 = d.getElementById('selectPalette'); e2 = d.getElementById('selectPalette');
url = command ? '/json/state':'/json'; url = command ? 'http://10.10.1.26/json/state':'http://10.10.1.26/json';
type = command ? 'post':'get'; type = command ? 'post':'get';
if (command) if (command)
@ -1105,17 +1192,25 @@ function makeSeg() {
Segment ${lowestUnused} (new) Segment ${lowestUnused} (new)
</label> </label>
<div class="segin expanded"> <div class="segin expanded">
Start LED: <input class="starts noslide" id="seg${lowestUnused}s" type="number" min="0" max="${ledCount-1}" value="${ns}" oninput="updateLen(this)"><br> <table>
Stop LED: <input class="stops noslide" id="seg${lowestUnused}e" type="number" min="0" max="${ledCount}" value="${ledCount}" oninput="updateLen(this)"> <tr>
<span class="h">(${ledCount - ns} LEDs)</span><br> <td>Start LED</td>
<i class="icons slider-icon cnf" id="segc${lowestUnused}" onclick="setSeg(${lowestUnused}); resetUtil();">&#xe390;</i> <td>Stop LED</td>
</tr>
<tr>
<td><input class="noslide segn" id="seg${lowestUnused}s" type="number" min="0" max="${ledCount-1}" value="${ns}" oninput="updateLen(${lowestUnused})"></td>
<td><input class="noslide segn" id="seg${lowestUnused}e" type="number" min="0" max="${ledCount}" value="${ledCount}" oninput="updateLen(${lowestUnused})"></td>
</tr>
</table>
<div class="h" id="seg${lowestUnused}len">${ledCount - ns} LEDs</div>
<i class="icons slider-icon cnf half" id="segc${lowestUnused}" onclick="setSeg(${lowestUnused}); resetUtil();">&#xe390;</i>
</div> </div>
</div>`; </div>`;
d.getElementById('segutil').innerHTML = cn; d.getElementById('segutil').innerHTML = cn;
} }
function resetUtil() { function resetUtil() {
var cn = `<button class="btn btn-i" onclick="makeSeg()"><i class="icons btn-icon">&#xe18a;</i>Add segment</button><br>`; var cn = `<button class="btn btn-i rect" onclick="makeSeg()"><i class="icons btn-icon">&#xe18a;</i>Add segment</button><br>`;
d.getElementById('segutil').innerHTML = cn; d.getElementById('segutil').innerHTML = cn;
} }
@ -1130,6 +1225,13 @@ function setSeg(s){
var stop = parseInt(d.getElementById(`seg${s}e`).value); var stop = parseInt(d.getElementById(`seg${s}e`).value);
if (stop <= start) {delSeg(s); return;}; if (stop <= start) {delSeg(s); return;};
var obj = {"seg": {"id": s, "start": start, "stop": stop}}; var obj = {"seg": {"id": s, "start": start, "stop": stop}};
if (d.getElementById(`seg${s}grp`))
{
var grp = parseInt(d.getElementById(`seg${s}grp`).value);
var spc = parseInt(d.getElementById(`seg${s}spc`).value);
obj.seg.grp = grp;
obj.seg.spc = spc;
}
requestJson(obj); requestJson(obj);
} }
@ -1225,9 +1327,9 @@ function selectSlot(b) {
cd[i].style.margin="5px"; cd[i].style.margin="5px";
cd[i].style.width="42px"; cd[i].style.width="42px";
} }
cd[csel].style.border="6px solid white"; cd[csel].style.border="5px solid white";
cd[csel].style.margin="2px"; cd[csel].style.margin="2px";
cd[csel].style.width="54px"; cd[csel].style.width="50px";
if (cpick.color.rgbString !== cd[csel].style.backgroundColor) { if (cpick.color.rgbString !== cd[csel].style.backgroundColor) {
cpick.color.set(cd[csel].style.backgroundColor); cpick.color.set(cd[csel].style.backgroundColor);
} }