kopia lustrzana https://github.com/Aircoookie/WLED
Segment grouping HTML support
rodzic
cf60eb52d8
commit
50ff59239c
|
@ -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);
|
||||||
|
@ -432,8 +447,8 @@ 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 {
|
||||||
|
@ -470,11 +485,19 @@ 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 +595,13 @@ 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;
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bp {
|
||||||
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.seg {
|
.seg {
|
||||||
|
@ -734,8 +762,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 +892,27 @@ function populateSegments(s)
|
||||||
</label>
|
</label>
|
||||||
<i class="icons slider-icon flr ${expanded[i] ? "exp":""}" id="sege${i}" onclick="expand(${i})"></i>
|
<i class="icons slider-icon flr ${expanded[i] ? "exp":""}" id="sege${i}" onclick="expand(${i})"></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})"></i>
|
<i class="icons slider-icon cnf" id="segc${i}" onclick="setSeg(${i})"></i>
|
||||||
<i class="icons slider-icon del" id="segd${i}" onclick="delSeg(${i})"></i>
|
<i class="icons slider-icon del" id="segd${i}" onclick="delSeg(${i})"></i>
|
||||||
<label class="check revchkl">
|
<label class="check revchkl">
|
||||||
|
@ -896,18 +942,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 +1004,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,10 +1161,18 @@ 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();"></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();"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>`;
|
</div>`;
|
||||||
d.getElementById('segutil').innerHTML = cn;
|
d.getElementById('segutil').innerHTML = cn;
|
||||||
|
@ -1130,6 +1194,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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Ładowanie…
Reference in New Issue