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

Search bar and palettes preview (#1637)

Browse Source 
* Fix swipe behavior on firefox when clicking on palette selection input

When clicking on the palette select element on firefox, it would often swipe to the next tab due to a bug in firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1410816

* Update UI .h files and remove console log

* Fix indentation in requestJson

* Add palette preview
Add palette and effects search

* Add palette preview
Add palette and effects search

* Add palette preview

Add palette and effects search

* Add palette preview

Add palette and effects search

* Fix error with background image

* Add missing palettes

* Add expiration to cached palette data

* Remove extra console.log

* bug fixes for palettes

* Rename "Default" effect back to "Solid"

* Fix scrolling issue when selecting an effect

* Add sticky default and sticky selected item

* Change checkboxes for radio button

* build html .h files

* Design Iteration 1

* Palette preview style changes

* Add button for clearing search field

* Use version ID for caching palette data rather than 24h expiration

Co-authored-by: Aircoookie <dev.aircoookie@gmail.com>
This commit is contained in:
Christophe Gagnier 2021-03-18 18:59:56 -04:00 committed by GitHub
parent ba4c3e3852
commit 4a20f43fbf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 2881 additions and 2225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -7,9 +7,10 @@
/wled00/Release /wled00/Release
/wled00/extLibs /wled00/extLibs
/platformio_override.ini /platformio_override.ini
/wled00/my_config.h /wled00/my_config.h
/build_output /build_output
.DS_Store .DS_Store
.gitignore .gitignore
.clang-format .clang-format
node_modules node_modules
.idea

150
wled00/data/index.css
View File

@ -166,6 +166,14 @@ button {
color: var(--c-d); color: var(--c-d);
} }
.search-cancel-icon {
position: absolute;
right: 8px;
top: 9px;
cursor: pointer;
display: none;
}
.flr { .flr {
float: right; float: right;
cursor: pointer; cursor: pointer;
@ -215,7 +223,7 @@ button {
.top button { .top button {
padding: var(--tbp); padding: var(--tbp);
} }
.bot button { .bot button {
padding: var(--bbp); padding: var(--bbp);
@ -299,7 +307,7 @@ button {
top: -1px; top: -1px;
z-index: 1; z-index: 1;
margin-top: 1px; margin-top: 1px;
width: 274px; width: 272px;
margin: auto; margin: auto;
border-radius: 25px; border-radius: 25px;
} }
@ -308,10 +316,6 @@ button {
top: 28px; top: 28px;
} }
#staytop2 {
top: 56px;
}
#fxb0 { #fxb0 {
margin-bottom: 2px; margin-bottom: 2px;
filter: drop-shadow(0 0 1px #000); filter: drop-shadow(0 0 1px #000);
@ -548,6 +552,7 @@ input[type=range]:active + .sliderbubble {
font-size: 19px; font-size: 19px;
background-color: var(--c-3); background-color: var(--c-3);
color: var(--c-f); color: var(--c-f);
cursor: pointer;
border: 0px solid white; border: 0px solid white;
border-radius: 25px; border-radius: 25px;
transition-duration: 0.5s; transition-duration: 0.5s;
@ -668,8 +673,8 @@ input[type=number]:focus, input[type=text]:focus {
background: var(--c-6); background: var(--c-6);
} }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
} }
@ -742,7 +747,7 @@ input[type=number]::-webkit-outer-spin-button {
} }
.pwr { .pwr {
color: var(--c-6); color: var(--c-6);
transform: translate(2px, 3px); transform: translate(2px, 3px);
cursor: pointer; cursor: pointer;
} }
@ -764,7 +769,7 @@ input[type=number]::-webkit-outer-spin-button {
cursor: pointer; cursor: pointer;
} }
.check { .check, .radio {
display: inline-block; display: inline-block;
position: relative; position: relative;
padding-bottom: 32px; padding-bottom: 32px;
@ -774,7 +779,7 @@ input[type=number]::-webkit-outer-spin-button {
} }
.schkl { .schkl {
padding: 2px 22px 0px 35px; padding: 2px 5px 0px 35px;
margin: 0 0 0 2px; margin: 0 0 0 2px;
} }
@ -784,7 +789,13 @@ input[type=number]::-webkit-outer-spin-button {
margin-top: 8px; margin-top: 8px;
} }
.check input { .fxchkl {
position: absolute;
top: 0px;
left: 8px;
}
.check input, .radio input {
position: absolute; position: absolute;
opacity: 0; opacity: 0;
cursor: pointer; cursor: pointer;
@ -792,7 +803,7 @@ input[type=number]::-webkit-outer-spin-button {
width: 0; width: 0;
} }
.checkmark { .checkmark, .radiomark {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
@ -802,6 +813,13 @@ input[type=number]::-webkit-outer-spin-button {
border-radius: 10px; border-radius: 10px;
} }
.radiomark {
height: 24px;
width: 24px;
border-radius: 50%;
background-color: transparent;
}
.schk { .schk {
top: 0; top: 0;
} }
@ -828,13 +846,13 @@ input[type=number]::-webkit-outer-spin-button {
background-color: var(--c-6); background-color: var(--c-6);
} }
.checkmark:after { .checkmark:after, .radiomark:after {
content: ""; content: "";
position: absolute; position: absolute;
display: none; display: none;
} }
.check input:checked ~ .checkmark:after { .check input:checked ~ .checkmark:after, .radio input:checked ~ .radiomark:after {
display: block; display: block;
} }
@ -850,6 +868,16 @@ input[type=number]::-webkit-outer-spin-button {
transform: rotate(45deg); transform: rotate(45deg);
} }
.radio .radiomark:after {
width: 12px;
height: 12px;
top: 50%;
left: 50%;
margin: -6px;
border-radius: 50%;
background: var(--c-f);
}
.h { .h {
font-size: 13px; font-size: 13px;
text-align: center; text-align: center;
@ -873,7 +901,93 @@ input[type=number]::-webkit-outer-spin-button {
border-radius: 20px; border-radius: 20px;
text-align: left; text-align: left;
transition: background-color 0.5s; transition: background-color 0.5s;
filter: brightness(1); filter: brightness(1);
}
.list {
position: relative;
transition: background-color 0.5s;
margin: auto auto 10px;
padding-bottom: 10px;
width: 230px;
}
.lstI {
overflow: hidden;
}
.fxbtn {
margin: 20px auto;
padding: 8px 0;
}
.lstI:hover {
background: var(--c-4);
}
.lstI:last-child {
border: none;
}
.lstI.sticky, .lstI.selected {
position: sticky;
z-index: 1;
}
#selectPalette .lstI.selected {
top: 27px;
bottom: -11px;
}
#selectPalette .lstI.sticky {
top: -11px;
}
.lstI.selected {
background: var(--c-5);
top: 95px;
bottom: -11px;
}
.lstI.sticky {
top: 57px;
}
.lstIname {
margin: 3px 0;
white-space: nowrap;
cursor: pointer;
font-size: 19px;
}
.lstIprev {
width: 100%;
height: 5px;
margin: auto;
position: absolute;
bottom: 0px;
left: 0px;
}
input[type="text"].search {
display: block;
width: 230px;
box-sizing: border-box;
padding: 8px 8px 9px 38px;
margin: 6px auto 0 auto;
text-align: left;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' stroke='white'><ellipse fill-opacity='0' stroke-width='10' cx='35' cy='35' id='svg_1' rx='25' ry='25' /><line stroke-width='10' x1='48.5' y1='70.75' x2='92.5' y2='70.75' transform='rotate(45, 70.5, 70.75)' /></svg>")
no-repeat 10px 10px;
background-size: 20px;
background-color: var(--c-3);
}
input[type="text"].search:focus {
background-color: var(--c-4);
}
input[type="text"].search:not(:placeholder-shown) {
background-color: var(--c-5);
} }
.pres { .pres {
@ -906,7 +1020,7 @@ input[type=number]::-webkit-outer-spin-button {
width: 6px; width: 6px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: transparent; background: transparent;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: var(--c-sb); background: var(--c-sb);
@ -947,4 +1061,4 @@ input[type=number]::-webkit-outer-spin-button {
#buttonPcm { #buttonPcm {
display: none; display: none;
} }
} }

46
wled00/data/index.htm
View File

@ -88,13 +88,33 @@
<input id="hexc" type="text" class="noslide" onkeydown="hexEnter(this)" autocomplete="off" maxlength="8" /> <input id="hexc" type="text" class="noslide" onkeydown="hexEnter(this)" autocomplete="off" maxlength="8" />
<button id="hexcnf" class="xxs btn" onclick="fromHex();"><i class="icons btna-icon">&#xe390;</i></button> <button id="hexcnf" class="xxs btn" onclick="fromHex();"><i class="icons btna-icon">&#xe390;</i></button>
</div> </div>
<p class="labels">Color palette</p> <p class="labels">
<div class="il">
<i class="icons sel-icon" onclick="tglHex()">&#xe2b3;</i> <i class="icons sel-icon" onclick="tglHex()">&#xe2b3;</i>
<select class="btn sel" id="selectPalette" onchange="setPalette()"> Color palette
<option>Default</option> </p>
<option>Error!</option> <div class="il">
</select> <div id="selectPalette" class="list">
<div class="lstI" data-id="0">
<label class="check schkl">
&nbsp;
<input type="radio" value="${palettes[i].id}" name="palette" onChange="setPalette()">
<span class="checkmark schk"></span>
</label>
<div class="lstIcontent">
<span class="lstIname">
Default
</span>
</div>
</div>
<div class="lstI">
<div class="lstIcontent">
<span class="lstIname">
Loading...
</span>
</div>
</div>
</div>
</div> </div>
</div> </div>
@ -118,21 +138,17 @@
</div> </div>
</div> </div>
<p class="labels">Effect mode</p> <p class="labels">Effect mode</p>
<div class="staytop" id="staytop2"> <div id="fxlist" class="list">
<button class="btn" id="fxb0" onclick="setX(0);">Solid</button>
</div>
<div id="fxlist">
Loading... Loading...
</div> </div>
<br>
</div> </div>
<div id="Segments" class="tabcontent"> <div id="Segments" class="tabcontent">
<div id="segcont"> <div id="segcont">
Loading... Loading...
</div> </div>
<div id="segutil"> <div id="segutil">
</div> </div>
<div id="segutil2"> <div id="segutil2">
<button class="btn btn-s" id="rsbtn" onclick="rSegs()">Reset segments</button> <button class="btn btn-s" id="rsbtn" onclick="rSegs()">Reset segments</button>
@ -141,7 +157,7 @@
<div id="Favorites" class="tabcontent"> <div id="Favorites" class="tabcontent">
<div id="putil"> <div id="putil">
</div> </div>
<div id="pql"> <div id="pql">
@ -205,4 +221,4 @@
<script src="rangetouch.js"></script> <script src="rangetouch.js"></script>
<script src="index.js"></script> <script src="index.js"></script>
</body> </body>
</html> </html>

453
wled00/data/index.js
View File

@ -3,6 +3,7 @@ var loc = false, locip;
var noNewSegs = false; var noNewSegs = false;
var isOn = false, nlA = false, isLv = false, isInfo = false, isNodes = false, syncSend = false, syncTglRecv = true, isRgbw = false; var isOn = false, nlA = false, isLv = false, isInfo = false, isNodes = false, syncSend = false, syncTglRecv = true, isRgbw = false;
var whites = [0,0,0]; var whites = [0,0,0];
var selColors;
var expanded = [false]; var expanded = [false];
var powered = [true]; var powered = [true];
var nlDur = 60, nlTar = 0; var nlDur = 60, nlTar = 0;
@ -15,6 +16,7 @@ var segCount = 0, ledCount = 0, lowestUnused = 0, maxSeg = 0, lSeg = 0;
var pcMode = false, pcModeA = false, lastw = 0; var pcMode = false, pcModeA = false, lastw = 0;
var d = document; var d = document;
const ranges = RangeTouch.setup('input[type="range"]', {}); const ranges = RangeTouch.setup('input[type="range"]', {});
var palettesData;
var pJson = {}; var pJson = {};
var pN = "", pI = 0; var pN = "", pI = 0;
var pmt = 1, pmtLS = 0, pmtLast = 0; var pmt = 1, pmtLS = 0, pmtLast = 0;
@ -29,17 +31,17 @@ var cpick = new iro.ColorPicker("#picker", {
wheelLightness: false, wheelLightness: false,
wheelAngle: 90, wheelAngle: 90,
layout: [ layout: [
{ {
component: iro.ui.Wheel, component: iro.ui.Wheel,
options: {} options: {}
}, },
{ {
component: iro.ui.Slider, component: iro.ui.Slider,
options: { options: {
sliderType: 'value' sliderType: 'value'
} }
}, },
{ {
component: iro.ui.Slider, component: iro.ui.Slider,
options: { options: {
sliderType: 'kelvin', sliderType: 'kelvin',
@ -157,7 +159,6 @@ function loadBg(iUrl) {
} }
img.addEventListener('load', (event) => { img.addEventListener('load', (event) => {
var a = parseFloat(cfg.theme.alpha.bg); var a = parseFloat(cfg.theme.alpha.bg);
d.getElementById('staytop2').style.background = "transparent";
if (isNaN(a)) a = 0.6; if (isNaN(a)) a = 0.6;
bg.style.opacity = a; bg.style.opacity = a;
bg.style.backgroundImage = `url(${img.src})`; bg.style.backgroundImage = `url(${img.src})`;
@ -177,12 +178,12 @@ function onLoad() {
} }
var sett = localStorage.getItem('wledUiCfg'); var sett = localStorage.getItem('wledUiCfg');
if (sett) cfg = mergeDeep(cfg, JSON.parse(sett)); if (sett) cfg = mergeDeep(cfg, JSON.parse(sett));
resetPUtil(); resetPUtil();
applyCfg(); applyCfg();
loadBg(cfg.theme.bg.url); loadBg(cfg.theme.bg.url);
var cd = d.getElementById('csl').children; var cd = d.getElementById('csl').children;
for (var i = 0; i < cd.length; i++) { for (var i = 0; i < cd.length; i++) {
cd[i].style.backgroundColor = "rgb(0, 0, 0)"; cd[i].style.backgroundColor = "rgb(0, 0, 0)";
@ -233,7 +234,7 @@ function showToast(text, error = false) {
x.className = error ? "error":"show"; x.className = error ? "error":"show";
clearTimeout(timeout); clearTimeout(timeout);
x.style.animation = 'none'; x.style.animation = 'none';
x.style.animation = null; x.style.animation = null;
timeout = setTimeout(function(){ x.className = x.className.replace("show", ""); }, 2900); timeout = setTimeout(function(){ x.className = x.className.replace("show", ""); }, 2900);
} }
@ -255,7 +256,7 @@ function getRuntimeStr(rt)
if (!days && hrs) str += ", "; if (!days && hrs) str += ", ";
if (t > 59 && !days) str += mins + " min"; if (t > 59 && !days) str += mins + " min";
if (t < 3600 && t > 59) str += ", "; if (t < 3600 && t > 59) str += ", ";
if (t < 3600) str += (t - mins*60) + " sec"; if (t < 3600) str += (t - mins*60) + " sec";
return str; return str;
} }
@ -271,7 +272,7 @@ function getLowestUnusedP()
{ {
if (key == l) l++; if (key == l) l++;
} }
if (l > 250) l = 250; if (l > 250) l = 250;
return l; return l;
} }
@ -309,7 +310,6 @@ function cpBck() {
copyText.select(); copyText.select();
copyText.setSelectionRange(0, 999999); copyText.setSelectionRange(0, 999999);
d.execCommand("copy"); d.execCommand("copy");
showToast("Copied to clipboard!"); showToast("Copied to clipboard!");
@ -322,12 +322,12 @@ function presetError(empty)
bckstr = localStorage.getItem("wledP"); bckstr = localStorage.getItem("wledP");
if (bckstr.length > 10) hasBackup = true; if (bckstr.length > 10) hasBackup = true;
} catch (e) { } catch (e) {
} }
var cn = `<div class="seg c">`; var cn = `<div class="seg c">`;
if (empty) if (empty)
cn += `You have no presets yet!`; cn += `You have no presets yet!`;
else else
cn += `Sorry, there was an issue loading your presets!`; cn += `Sorry, there was an issue loading your presets!`;
if (hasBackup) { if (hasBackup) {
@ -351,7 +351,7 @@ function loadPresets()
if (loc) { if (loc) {
url = `http://${locip}/presets.json`; url = `http://${locip}/presets.json`;
} }
fetch fetch
(url, { (url, {
method: 'get' method: 'get'
@ -380,7 +380,7 @@ function populateQL()
var cn = ""; var cn = "";
if (pQL.length > 0) { if (pQL.length > 0) {
cn += `<p class="labels">Quick load</p>`; cn += `<p class="labels">Quick load</p>`;
var it = 0; var it = 0;
for (var key of (pQL||[])) for (var key of (pQL||[]))
{ {
@ -392,7 +392,7 @@ function populateQL()
} }
} }
if (it != 0) cn+= '<br>'; if (it != 0) cn+= '<br>';
cn += `<p class="labels">All presets</p>`; cn += `<p class="labels">All presets</p>`;
} }
d.getElementById('pql').innerHTML = cn; d.getElementById('pql').innerHTML = cn;
@ -416,7 +416,7 @@ function populatePresets(fromls)
var qll = key[1].ql; var qll = key[1].ql;
if (qll) pQL.push([i, qll]); if (qll) pQL.push([i, qll]);
is.push(i); is.push(i);
cn += `<div class="seg pres" id="p${i}o">`; cn += `<div class="seg pres" id="p${i}o">`;
if (cfg.comp.pid) cn += `<div class="pid">${i}</div>`; if (cfg.comp.pid) cn += `<div class="pid">${i}</div>`;
cn += `<div class="segname pname" onclick="setPreset(${i})">${pName(i)}</div> cn += `<div class="segname pname" onclick="setPreset(${i})">${pName(i)}</div>
@ -467,7 +467,7 @@ function populateInfo(i)
var vcn = "Kuuhaku"; var vcn = "Kuuhaku";
if (i.ver.startsWith("0.12.")) vcn = "Hikari"; if (i.ver.startsWith("0.12.")) vcn = "Hikari";
if (i.cn) vcn = i.cn; if (i.cn) vcn = i.cn;
cn += `v${i.ver} "${vcn}"<br><br><table class="infot"> cn += `v${i.ver} "${vcn}"<br><br><table class="infot">
${urows} ${urows}
${inforow("Build",i.vid)} ${inforow("Build",i.vid)}
@ -487,17 +487,17 @@ function populateSegments(s)
{ {
var cn = ""; var cn = "";
segCount = 0; lowestUnused = 0; lSeg = 0; segCount = 0; lowestUnused = 0; lSeg = 0;
for (var y = 0; y < (s.seg||[]).length; y++) for (var y = 0; y < (s.seg||[]).length; y++)
{ {
segCount++; segCount++;
var inst=s.seg[y]; var inst=s.seg[y];
let i = parseInt(inst.id); let i = parseInt(inst.id);
powered[i] = inst.on; powered[i] = inst.on;
if (i == lowestUnused) lowestUnused = i+1; if (i == lowestUnused) lowestUnused = i+1;
if (i > lSeg) lSeg = i; if (i > lSeg) lSeg = i;
cn += `<div class="seg"> cn += `<div class="seg">
<label class="check schkl"> <label class="check schkl">
&nbsp; &nbsp;
@ -567,6 +567,151 @@ function populateSegments(s)
d.getElementById('rsbtn').style.display = (segCount > 1) ? "inline":"none"; d.getElementById('rsbtn').style.display = (segCount > 1) ? "inline":"none";
} }
function populateEffects(effects)
{
var html = `<div class="searchbar"><input type="text" class="search" placeholder="Search" oninput="search(this)" />
<i class="icons search-cancel-icon" onclick="cancelSearch(this)">&#xe38f;</i></div>`;
effects.shift(); //remove solid
for (let i = 0; i < effects.length; i++) {
effects[i] = {id: parseInt(i)+1, name:effects[i]};
}
effects.sort(compare);
effects.unshift({
"id": 0,
"name": "Solid",
"class": "sticky"
});
for (let i = 0; i < effects.length; i++) {
html += generateListItemHtml(
'fx',
effects[i].id,
effects[i].name,
'setX',
'',
effects[i].class,
);
}
d.getElementById('fxlist').innerHTML=html;
}
function populatePalettes(palettes)
{
palettes.shift(); //remove default
for (let i = 0; i < palettes.length; i++) {
palettes[i] = {
"id": parseInt(i)+1,
"name": palettes[i]
};
}
palettes.sort(compare);
palettes.unshift({
"id": 0,
"name": "Default",
"class": "sticky"
});
var html = `<div class="searchbar"><input type="text" class="search" placeholder="Search" oninput="search(this)" />
<i class="icons search-cancel-icon" onclick="cancelSearch(this)">&#xe38f;</i></div>`;
for (let i = 0; i < palettes.length; i++) {
let previewCss = genPalPrevCss(palettes[i].id);
html += generateListItemHtml(
'palette',
palettes[i].id,
palettes[i].name,
'setPalette',
`<div class="lstIprev" style="${previewCss}"></div>`,
palettes[i].class,
);
}
d.getElementById('selectPalette').innerHTML=html;
}
function redrawPalPrev()
{
let palettes = d.querySelectorAll('#selectPalette .lstI');
for (let i = 0; i < palettes.length; i++) {
let id = palettes[i].dataset.id;
let lstPrev = palettes[i].querySelector('.lstIprev');
if (lstPrev) {
lstPrev.style = genPalPrevCss(id);
}
}
}
function genPalPrevCss(id)
{
if (!palettesData) {
return;
}
var paletteData = palettesData[id];
var previewCss = "";
if (!paletteData) {
return 'display: none';
}
// We need at least two colors for a gradient
if (paletteData.length == 1) {
paletteData[1] = paletteData[0];
if (Array.isArray(paletteData[1])) {
paletteData[1][0] = 255;
}
}
var gradient = [];
for (let j = 0; j < paletteData.length; j++) {
const element = paletteData[j];
let r;
let g;
let b;
let index = false;
if (Array.isArray(element)) {
index = element[0]/255*100;
r = element[1];
g = element[2];
b = element[3];
} else if (element == 'r') {
r = Math.random() * 255;
g = Math.random() * 255;
b = Math.random() * 255;
} else {
if (selColors) {
let pos = element[1] - 1;
r = selColors[pos][0];
g = selColors[pos][1];
b = selColors[pos][2];
}
}
if (index === false) {
index = j / paletteData.length * 100;
}
gradient.push(`rgb(${r},${g},${b}) ${index}%`);
}
return `background: linear-gradient(to right,${gradient.join()});`;
}
function generateListItemHtml(listName, id, name, clickAction, extraHtml = '', extraClass = '')
{
return `<div class="lstI btn fxbtn ${extraClass}" data-id="${id}" onClick="${clickAction}(${id})">
<label class="radio fxchkl">
<input type="radio" value="${id}" name="${listName}">
<span class="radiomark"></span>
</label>
<span class="lstIname">
${name}
</span>
${extraHtml}
</div>`;
}
function btype(b){ function btype(b){
switch (b) { switch (b) {
case 32: return "ESP32"; case 32: return "ESP32";
@ -673,7 +818,7 @@ function updateLen(s)
} else if (len == 1) { } else if (len == 1) {
out = "1 LED"; out = "1 LED";
} }
if (d.getElementById(`seg${s}grp`) != null) if (d.getElementById(`seg${s}grp`) != null)
{ {
var grp = parseInt(d.getElementById(`seg${s}grp`).value); var grp = parseInt(d.getElementById(`seg${s}grp`).value);
@ -682,7 +827,7 @@ function updateLen(s)
var virt = Math.ceil(len/(grp + spc)); var virt = Math.ceil(len/(grp + spc));
if (!isNaN(virt) && (grp > 1 || spc > 0)) out += ` (${virt} virtual)`; if (!isNaN(virt) && (grp > 1 || spc > 0)) out += ` (${virt} virtual)`;
} }
d.getElementById(`seg${s}len`).innerHTML = out; d.getElementById(`seg${s}len`).innerHTML = out;
} }
@ -711,15 +856,12 @@ function updateUI()
d.getElementById('buttonNl').className = (nlA) ? "active":""; d.getElementById('buttonNl').className = (nlA) ? "active":"";
d.getElementById('buttonSync').className = (syncSend) ? "active":""; d.getElementById('buttonSync').className = (syncSend) ? "active":"";
d.getElementById('fxb' + selectedFx).style.backgroundColor = "var(--c-6)";
updateTrail(d.getElementById('sliderBri')); updateTrail(d.getElementById('sliderBri'));
updateTrail(d.getElementById('sliderSpeed')); updateTrail(d.getElementById('sliderSpeed'));
updateTrail(d.getElementById('sliderIntensity')); updateTrail(d.getElementById('sliderIntensity'));
updateTrail(d.getElementById('sliderW')); updateTrail(d.getElementById('sliderW'));
if (isRgbw) d.getElementById('wwrap').style.display = "block"; if (isRgbw) d.getElementById('wwrap').style.display = "block";
var spal = d.getElementById("selectPalette");
spal.style.backgroundColor = (spal.selectedIndex > 0) ? "var(--c-6)":"var(--c-3)";
updatePA(); updatePA();
updateHex(); updateHex();
updateRgb(); updateRgb();
@ -755,7 +897,7 @@ function requestJson(command, rinfo = true, verbose = true) {
if (loc) { if (loc) {
url = `http://${locip}${url}`; url = `http://${locip}${url}`;
} }
var type = command ? 'post':'get'; var type = command ? 'post':'get';
if (command) if (command)
{ {
@ -774,7 +916,7 @@ function requestJson(command, rinfo = true, verbose = true) {
}) })
.then(res => { .then(res => {
if (!res.ok) { if (!res.ok) {
showErrorToast(); showErrorToast();
} }
return res.json(); return res.json();
}) })
@ -783,54 +925,63 @@ function requestJson(command, rinfo = true, verbose = true) {
jsonTimeout = null; jsonTimeout = null;
clearErrorToast(); clearErrorToast();
d.getElementById('connind').style.backgroundColor = "#070"; d.getElementById('connind').style.backgroundColor = "#070";
if (!json) showToast('Empty response', true); if (!json) {
if (json.success) return; showToast('Empty response', true);
}
if (json.success) {
return;
}
var s = json; var s = json;
if (!command || rinfo) {
if (!rinfo) {
pmt = json.info.fs.pmt;
if (pmt != pmtLS || pmt == 0) {
setTimeout(loadPresets,99);
}
else populatePresets(true);
pmtLast = pmt;
var x='',y='<option value="0">Default</option>';
json.effects.shift(); //remove solid
for (let i = 0; i < json.effects.length; i++) json.effects[i] = {id: parseInt(i)+1, name:json.effects[i]};
json.effects.sort(compare);
for (let i = 0; i < json.effects.length; i++) {
x += `<button class="btn${(i==0)?" first":""}" id="fxb${json.effects[i].id}" onclick="setX(${json.effects[i].id});">${json.effects[i].name}</button><br>`;
}
json.palettes.shift(); //remove default
for (let i = 0; i < json.palettes.length; i++) json.palettes[i] = {"id": parseInt(i)+1, "name":json.palettes[i]};
json.palettes.sort(compare);
for (let i = 0; i < json.palettes.length; i++) {
y += `<option value="${json.palettes[i].id}">${json.palettes[i].name}</option>`;
}
e1.innerHTML=x; e2.innerHTML=y;
}
if (!command || rinfo) {
if (!rinfo) {
pmt = json.info.fs.pmt;
if (pmt != pmtLS || pmt == 0) {
setTimeout(loadPresets,99);
}
else {
populatePresets(true);
}
pmtLast = pmt;
populateEffects(json.effects);
populatePalettes(json.palettes);
}
var info = json.info; var info = json.info;
var name = info.name; var name = info.name;
d.getElementById('namelabel').innerHTML = name; d.getElementById('namelabel').innerHTML = name;
if (name === "Dinnerbone") d.documentElement.style.transform = "rotate(180deg)"; if (name === "Dinnerbone") {
if (info.live) name = "(Live) " + name; d.documentElement.style.transform = "rotate(180deg)";
if (loc) name = "(L) " + name; }
if (info.live) {
name = "(Live) " + name;
}
if (loc) {
name = "(L) " + name;
}
d.title = name; d.title = name;
isRgbw = info.leds.wv; isRgbw = info.leds.wv;
ledCount = info.leds.count; ledCount = info.leds.count;
syncTglRecv = info.str; syncTglRecv = info.str;
maxSeg = info.leds.maxseg; maxSeg = info.leds.maxseg;
pmt = info.fs.pmt; pmt = info.fs.pmt;
if (!command && pmt != pmtLast) setTimeout(loadPresets,99);
pmtLast = pmt; if (!command && pmt != pmtLast) {
setTimeout(loadPresets,99);
}
pmtLast = pmt;
d.getElementById('buttonNodes').style.display = (info.ndc > 0 && window.innerWidth > 770) ? "block":"none"; d.getElementById('buttonNodes').style.display = (info.ndc > 0 && window.innerWidth > 770) ? "block":"none";
lastinfo = info; lastinfo = info;
if (isInfo) populateInfo(info); if (isInfo) {
populateInfo(info);
}
s = json.state; s = json.state;
displayRover(info, s); displayRover(info, s);
if (!rinfo) loadPalettesData();
} }
isOn = s.on; isOn = s.on;
d.getElementById('sliderBri').value= s.bri; d.getElementById('sliderBri').value= s.bri;
nlA = s.nl.on; nlA = s.nl.on;
@ -839,12 +990,12 @@ function requestJson(command, rinfo = true, verbose = true) {
nlFade = s.nl.fade; nlFade = s.nl.fade;
syncSend = s.udpn.send; syncSend = s.udpn.send;
currentPreset = s.ps; currentPreset = s.ps;
d.getElementById('cyToggle').checked = (s.pl < 0) ? false : true; d.getElementById('cyToggle').checked = (s.pl >= 0);
d.getElementById('cycs').value = s.ccnf.min; d.getElementById('cycs').value = s.ccnf.min;
d.getElementById('cyce').value = s.ccnf.max; d.getElementById('cyce').value = s.ccnf.max;
d.getElementById('cyct').value = s.ccnf.time /10; d.getElementById('cyct').value = s.ccnf.time /10;
d.getElementById('cyctt').value = s.transition /10; d.getElementById('cyctt').value = s.transition /10;
var selc=0; var ind=0; var selc=0; var ind=0;
populateSegments(s); populateSegments(s);
for (let i = 0; i < (s.seg||[]).length; i++) for (let i = 0; i < (s.seg||[]).length; i++)
@ -857,6 +1008,8 @@ function requestJson(command, rinfo = true, verbose = true) {
updateUI(); updateUI();
return; return;
} }
selColors = i.col;
var cd = d.getElementById('csl').children; var cd = d.getElementById('csl').children;
for (let e = 2; e >= 0; e--) for (let e = 2; e >= 0; e--)
{ {
@ -869,26 +1022,54 @@ function requestJson(command, rinfo = true, verbose = true) {
d.getElementById('sliderSpeed').value = i.sx; d.getElementById('sliderSpeed').value = i.sx;
d.getElementById('sliderIntensity').value = i.ix; d.getElementById('sliderIntensity').value = i.ix;
d.getElementById('fxb' + selectedFx).style.backgroundColor = "var(--c-3)"; // Effects
e1.querySelector(`input[name="fx"][value="${i.fx}"]`).checked = true;
var selElement = e1.querySelector('.selected');
if (selElement) {
selElement.classList.remove('selected')
}
var selectedEffect = e1.querySelector(`.lstI[data-id="${i.fx}"]`);
selectedEffect.classList.add('selected');
selectedFx = i.fx; selectedFx = i.fx;
e2.value = i.pal;
if (!command) d.getElementById('Effects').scrollTop = d.getElementById('fxb' + selectedFx).offsetTop - d.getElementById('Effects').clientHeight/1.8; // Palettes
e2.querySelector(`input[name="palette"][value="${i.pal}"]`).checked = true;
selElement = e2.querySelector('.selected');
if (selElement) {
selElement.classList.remove('selected')
}
e2.querySelector(`.lstI[data-id="${i.pal}"]`).classList.add('selected');
if (!command) {
selectedEffect.scrollIntoView({
behavior: 'smooth',
block: 'nearest',
});
}
if (s.error && s.error != 0) { if (s.error && s.error != 0) {
var errstr = ""; var errstr = "";
switch (s.error) { switch (s.error) {
case 10: errstr = "Could not mount filesystem!"; break; case 10:
case 11: errstr = "Not enough space to save preset!"; break; errstr = "Could not mount filesystem!";
case 12: errstr = "The requested preset does not exist."; break; break;
case 19: errstr = "A filesystem error has occured."; break; case 11:
} errstr = "Not enough space to save preset!";
showToast('Error ' + s.error + ": " + errstr, true); break;
} case 12:
errstr = "The requested preset does not exist.";
break;
case 19:
errstr = "A filesystem error has occured.";
break;
}
showToast('Error ' + s.error + ": " + errstr, true);
}
updateUI(); updateUI();
}) })
.catch(function (error) { .catch(function (error) {
showToast(error, true); showToast(error, true);
console.log(error); console.log(error);
}); });
} }
@ -1104,14 +1285,35 @@ function setSegBri(s){
requestJson(obj); requestJson(obj);
} }
function setX(ind) { function setX(ind = null) {
if (ind === null) {
ind = parseInt(d.querySelector('#fxlist input[name="fx"]:checked').value);
} else {
d.querySelector(`#fxlist input[name="fx"][value="${ind}`).checked = true;
}
var selElement = d.querySelector('#fxlist .selected');
if (selElement) {
selElement.classList.remove('selected')
}
d.querySelector(`#fxlist .lstI[data-id="${ind}"]`).classList.add('selected');
var obj = {"seg": {"fx": parseInt(ind)}}; var obj = {"seg": {"fx": parseInt(ind)}};
requestJson(obj); requestJson(obj);
} }
function setPalette() function setPalette(paletteId = null)
{ {
var obj = {"seg": {"pal": parseInt(d.getElementById('selectPalette').value)}}; if (paletteId === null) {
paletteId = parseInt(d.querySelector('#selectPalette input[name="palette"]:checked').value);
} else {
d.querySelector(`#selectPalette input[name="palette"][value="${paletteId}`).checked = true;
}
var selElement = d.querySelector('#selectPalette .selected');
if (selElement) {
selElement.classList.remove('selected')
}
d.querySelector(`#selectPalette .lstI[data-id="${paletteId}"]`).classList.add('selected');
var obj = {"seg": {"pal": paletteId}};
requestJson(obj); requestJson(obj);
} }
@ -1143,7 +1345,7 @@ function toggleCY() {
obj = {"pl": 0, "ccnf": {"min": parseInt(d.getElementById('cycs').value), "max": parseInt(d.getElementById('cyce').value), "time": parseInt(d.getElementById('cyct').value*10)}}; obj = {"pl": 0, "ccnf": {"min": parseInt(d.getElementById('cycs').value), "max": parseInt(d.getElementById('cyce').value), "time": parseInt(d.getElementById('cyct').value*10)}};
obj.transition = parseInt(d.getElementById('cyctt').value*10); obj.transition = parseInt(d.getElementById('cyctt').value*10);
} }
requestJson(obj); requestJson(obj);
} }
@ -1227,6 +1429,7 @@ function selectSlot(b) {
updateTrail(d.getElementById('sliderW')); updateTrail(d.getElementById('sliderW'));
updateHex(); updateHex();
updateRgb(); updateRgb();
redrawPalPrev();
} }
var lasth = 0; var lasth = 0;
@ -1353,6 +1556,88 @@ function rSegs()
requestJson(obj); requestJson(obj);
} }
function loadPalettesData()
{
if (palettesData) return;
const lsKey = "wledPalx";
var palettesDataJson = localStorage.getItem(lsKey);
if (palettesDataJson) {
try {
palettesDataJson = JSON.parse(palettesDataJson);
var d = new Date();
if (palettesDataJson && palettesDataJson.vid == lastinfo.vid) {
palettesData = palettesDataJson.p;
return;
}
} catch (e) {}
}
palettesData = {};
getPalettesData(0, function() {
localStorage.setItem(lsKey, JSON.stringify({
p: palettesData,
vid: lastinfo.vid
}));
redrawPalPrev();
});
}
function getPalettesData(page, callback)
{
var url = `/json/palx?page=${page}`;
if (loc) {
url = `http://${locip}${url}`;
}
fetch(url, {
method: 'get',
headers: {
"Content-type": "application/json; charset=UTF-8"
}
})
.then(res => {
if (!res.ok) {
showErrorToast();
}
return res.json();
})
.then(json => {
palettesData = Object.assign({}, palettesData, json.p);
if (page < json.m) {
getPalettesData(page + 1, callback);
} else {
callback();
}
})
.catch(function (error) {
showToast(error, true);
console.log(error);
presetError(false);
});
}
function search(searchField) {
var searchText = searchField.value.toUpperCase();
searchField.parentElement.getElementsByClassName('search-cancel-icon')[0].style.display = (searchText.length < 1)?"none":"inline";
var elements = searchField.parentElement.parentElement.querySelectorAll('.lstI');
for (i = 0; i < elements.length; i++) {
var item = elements[i];
var itemText = item.querySelector('.lstIname').innerText.toUpperCase();
if (itemText.indexOf(searchText) > -1) {
item.style.display = "";
} else {
item.style.display = "none";
}
}
}
function cancelSearch(ic) {
var searchField = ic.parentElement.getElementsByClassName('search')[0];
searchField.value = "";
search(searchField);
searchField.focus();
}
function expand(i,a) function expand(i,a)
{ {
if (!a) expanded[i] = !expanded[i]; if (!a) expanded[i] = !expanded[i];
@ -1427,7 +1712,7 @@ function move(e) {
x0 = null; x0 = null;
} }
function size() { function size() {
w = window.innerWidth; w = window.innerWidth;
d.getElementById('buttonNodes').style.display = (lastinfo.ndc > 0 && w > 770) ? "block":"none"; d.getElementById('buttonNodes').style.display = (lastinfo.ndc > 0 && w > 770) ? "block":"none";
var h = d.getElementById('top').clientHeight; var h = d.getElementById('top').clientHeight;
@ -1489,4 +1774,4 @@ _C.addEventListener('touchstart', lock, false);
_C.addEventListener('mouseout', move, false); _C.addEventListener('mouseout', move, false);
_C.addEventListener('mouseup', move, false); _C.addEventListener('mouseup', move, false);
_C.addEventListener('touchend', move, false); _C.addEventListener('touchend', move, false);

4257
wled00/html_ui.h
View File

File diff suppressed because it is too large Load Diff

197
wled00/json.cpp
View File

@ -1,5 +1,7 @@
#include "wled.h" #include "wled.h"
#include "palettes.h"
/* /*
* JSON API (De)serialization * JSON API (De)serialization
*/ */
@ -57,13 +59,14 @@ void deserializeSegment(JsonObject elem, byte it)
if (sz == 0) continue; //do nothing on empty array if (sz == 0) continue; //do nothing on empty array
byte cp = copyArray(colX, rgbw, 4); byte cp = copyArray(colX, rgbw, 4);
if (cp == 1 && rgbw[0] == 0) seg.setColor(i, 0, id); if (cp == 1 && rgbw[0] == 0)
seg.setColor(i, 0, id);
colValid = true; colValid = true;
} }
if (!colValid) continue; if (!colValid) continue;
if (id == strip.getMainSegmentId() && i < 2) //temporary, to make transition work on main segment if (id == strip.getMainSegmentId() && i < 2) //temporary, to make transition work on main segment
{ {
if (i == 0) {col[0] = rgbw[0]; col[1] = rgbw[1]; col[2] = rgbw[2]; col[3] = rgbw[3];} if (i == 0) {col[0] = rgbw[0]; col[1] = rgbw[1]; col[2] = rgbw[2]; col[3] = rgbw[3];}
if (i == 1) {colSec[0] = rgbw[0]; colSec[1] = rgbw[1]; colSec[2] = rgbw[2]; colSec[3] = rgbw[3];} if (i == 1) {colSec[0] = rgbw[0]; colSec[1] = rgbw[1]; colSec[2] = rgbw[2]; colSec[3] = rgbw[3];}
} else { //normal case, apply directly to segment } else { //normal case, apply directly to segment
@ -84,7 +87,7 @@ void deserializeSegment(JsonObject elem, byte it)
parseLxJson(ly, id, true); parseLxJson(ly, id, true);
} }
#endif #endif
//if (pal != seg.palette && pal < strip.getPaletteCount()) strip.setPalette(pal); //if (pal != seg.palette && pal < strip.getPaletteCount()) strip.setPalette(pal);
seg.setOption(SEG_OPTION_SELECTED, elem[F("sel")] | seg.getOption(SEG_OPTION_SELECTED)); seg.setOption(SEG_OPTION_SELECTED, elem[F("sel")] | seg.getOption(SEG_OPTION_SELECTED));
seg.setOption(SEG_OPTION_REVERSED, elem["rev"] | seg.getOption(SEG_OPTION_REVERSED)); seg.setOption(SEG_OPTION_REVERSED, elem["rev"] | seg.getOption(SEG_OPTION_REVERSED));
@ -157,9 +160,9 @@ bool deserializeState(JsonObject root)
{ {
strip.applyToAllSelected = false; strip.applyToAllSelected = false;
bool stateResponse = root[F("v")] | false; bool stateResponse = root[F("v")] | false;
bri = root["bri"] | bri; bri = root["bri"] | bri;
bool on = root["on"] | (bri > 0); bool on = root["on"] | (bri > 0);
if (!on != !bri) toggleOnOff(); if (!on != !bri) toggleOnOff();
@ -303,16 +306,16 @@ void serializeSegment(JsonObject& root, WS2812FX::Segment& seg, byte id, bool fo
root["bri"] = (segbri) ? segbri : 255; root["bri"] = (segbri) ? segbri : 255;
JsonArray colarr = root.createNestedArray("col"); JsonArray colarr = root.createNestedArray("col");
for (uint8_t i = 0; i < 3; i++) for (uint8_t i = 0; i < 3; i++)
{ {
JsonArray colX = colarr.createNestedArray(); JsonArray colX = colarr.createNestedArray();
if (id == strip.getMainSegmentId() && i < 2) //temporary, to make transition work on main segment if (id == strip.getMainSegmentId() && i < 2) //temporary, to make transition work on main segment
{ {
if (i == 0) { if (i == 0) {
colX.add(col[0]); colX.add(col[1]); colX.add(col[2]); if (useRGBW) colX.add(col[3]); colX.add(col[0]); colX.add(col[1]); colX.add(col[2]); if (useRGBW) colX.add(col[3]);
} else { } else {
colX.add(colSec[0]); colX.add(colSec[1]); colX.add(colSec[2]); if (useRGBW) colX.add(colSec[3]); colX.add(colSec[0]); colX.add(colSec[1]); colX.add(colSec[2]); if (useRGBW) colX.add(colSec[3]);
} }
} else { } else {
colX.add((seg.colors[i] >> 16) & 0xFF); colX.add((seg.colors[i] >> 16) & 0xFF);
@ -333,7 +336,7 @@ void serializeSegment(JsonObject& root, WS2812FX::Segment& seg, byte id, bool fo
} }
void serializeState(JsonObject root, bool forPreset, bool includeBri, bool segmentBounds) void serializeState(JsonObject root, bool forPreset, bool includeBri, bool segmentBounds)
{ {
if (includeBri) { if (includeBri) {
root["on"] = (bri > 0); root["on"] = (bri > 0);
root["bri"] = briLast; root["bri"] = briLast;
@ -342,10 +345,10 @@ void serializeState(JsonObject root, bool forPreset, bool includeBri, bool segme
if (!forPreset) { if (!forPreset) {
if (errorFlag) root[F("error")] = errorFlag; if (errorFlag) root[F("error")] = errorFlag;
root[F("ps")] = currentPreset; root[F("ps")] = currentPreset;
root[F("pl")] = (presetCyclingEnabled) ? 0: -1; root[F("pl")] = (presetCyclingEnabled) ? 0: -1;
usermods.addToJsonState(root); usermods.addToJsonState(root);
//temporary for preset cycle //temporary for preset cycle
@ -415,14 +418,14 @@ void serializeInfo(JsonObject root)
root[F("ver")] = versionString; root[F("ver")] = versionString;
root[F("vid")] = VERSION; root[F("vid")] = VERSION;
//root[F("cn")] = WLED_CODENAME; //root[F("cn")] = WLED_CODENAME;
JsonObject leds = root.createNestedObject("leds"); JsonObject leds = root.createNestedObject("leds");
leds[F("count")] = ledCount; leds[F("count")] = ledCount;
leds[F("rgbw")] = useRGBW; leds[F("rgbw")] = useRGBW;
leds[F("wv")] = useRGBW && (strip.rgbwMode == RGBW_MODE_MANUAL_ONLY || strip.rgbwMode == RGBW_MODE_DUAL); //should a white channel slider be displayed? leds[F("wv")] = useRGBW && (strip.rgbwMode == RGBW_MODE_MANUAL_ONLY || strip.rgbwMode == RGBW_MODE_DUAL); //should a white channel slider be displayed?
JsonArray leds_pin = leds.createNestedArray("pin"); JsonArray leds_pin = leds.createNestedArray("pin");
leds_pin.add(LEDPIN); leds_pin.add(LEDPIN);
leds[F("pwr")] = strip.currentMilliamps; leds[F("pwr")] = strip.currentMilliamps;
leds[F("fps")] = strip.getFps(); leds[F("fps")] = strip.getFps();
leds[F("maxpwr")] = (strip.currentMilliamps)? strip.ablMilliampsMax : 0; leds[F("maxpwr")] = (strip.currentMilliamps)? strip.ablMilliampsMax : 0;
@ -430,7 +433,7 @@ void serializeInfo(JsonObject root)
leds[F("seglock")] = false; //will be used in the future to prevent modifications to segment config leds[F("seglock")] = false; //will be used in the future to prevent modifications to segment config
root[F("str")] = syncToggleReceive; root[F("str")] = syncToggleReceive;
root[F("name")] = serverDescription; root[F("name")] = serverDescription;
root[F("udpport")] = udpPort; root[F("udpport")] = udpPort;
root["live"] = (bool)realtimeMode; root["live"] = (bool)realtimeMode;
@ -499,13 +502,13 @@ void serializeInfo(JsonObject root)
#endif #endif
root[F("lwip")] = LWIP_VERSION_MAJOR; root[F("lwip")] = LWIP_VERSION_MAJOR;
#endif #endif
root[F("freeheap")] = ESP.getFreeHeap(); root[F("freeheap")] = ESP.getFreeHeap();
root[F("uptime")] = millis()/1000 + rolloverMillis*4294967; root[F("uptime")] = millis()/1000 + rolloverMillis*4294967;
usermods.addToJsonInfo(root); usermods.addToJsonInfo(root);
byte os = 0; byte os = 0;
#ifdef WLED_DEBUG #ifdef WLED_DEBUG
os = 0x80; os = 0x80;
@ -528,16 +531,163 @@ void serializeInfo(JsonObject root)
#ifdef WLED_ENABLE_ADALIGHT #ifdef WLED_ENABLE_ADALIGHT
os += 0x02; os += 0x02;
#endif #endif
#ifndef WLED_DISABLE_OTA #ifndef WLED_DISABLE_OTA
os += 0x01; os += 0x01;
#endif #endif
root[F("opt")] = os; root[F("opt")] = os;
root[F("brand")] = "WLED"; root[F("brand")] = "WLED";
root[F("product")] = F("FOSS"); root[F("product")] = F("FOSS");
root["mac"] = escapedMac; root["mac"] = escapedMac;
} }
void setPaletteColors(JsonArray json, CRGBPalette16 palette)
{
for (int i = 0; i < 16; i++) {
JsonArray colors = json.createNestedArray();
CRGB color = palette[i];
colors.add((((float)i / (float)16) * 255));
colors.add(color.red);
colors.add(color.green);
colors.add(color.blue);
}
}
void setPaletteColors(JsonArray json, byte* tcp)
{
TRGBGradientPaletteEntryUnion* ent = (TRGBGradientPaletteEntryUnion*)(tcp);
TRGBGradientPaletteEntryUnion u;
// Count entries
uint16_t count = 0;
do {
u = *(ent + count);
count++;
} while ( u.index != 255);
u = *ent;
int indexstart = 0;
while( indexstart < 255) {
indexstart = u.index;
JsonArray colors = json.createNestedArray();
colors.add(u.index);
colors.add(u.r);
colors.add(u.g);
colors.add(u.b);
ent++;
u = *ent;
}
}
void serializePalettes(JsonObject root, AsyncWebServerRequest* request)
{
#ifdef ESP8266
int itemPerPage = 5;
#else
int itemPerPage = 8;
#endif
int page = 0;
if (request->hasParam("page")) {
page = request->getParam("page")->value().toInt();
}
int palettesCount = strip.getPaletteCount();
int maxPage = (palettesCount -1) / itemPerPage;
if (page > maxPage) page = maxPage;
int start = itemPerPage * page;
int end = start + itemPerPage;
if (end >= palettesCount) end = palettesCount;
root[F("m")] = maxPage;
JsonObject palettes = root.createNestedObject("p");
for (int i = start; i < end; i++) {
JsonArray curPalette = palettes.createNestedArray(String(i));
CRGB prim;
CRGB sec;
CRGB ter;
switch (i) {
case 0: //default palette
setPaletteColors(curPalette, PartyColors_p);
break;
case 1: //random
curPalette.add("r");
curPalette.add("r");
curPalette.add("r");
curPalette.add("r");
break;
case 2: //primary color only
curPalette.add(F("c1"));
break;
case 3: //primary + secondary
curPalette.add(F("c1"));
curPalette.add(F("c1"));
curPalette.add(F("c2"));
curPalette.add(F("c2"));
break;
case 4: //primary + secondary + tertiary
curPalette.add(F("c3"));
curPalette.add(F("c2"));
curPalette.add(F("c1"));
break;
case 5: {//primary + secondary (+tert if not off), more distinct
curPalette.add(F("c1"));
curPalette.add(F("c1"));
curPalette.add(F("c1"));
curPalette.add(F("c1"));
curPalette.add(F("c1"));
curPalette.add(F("c2"));
curPalette.add(F("c2"));
curPalette.add(F("c2"));
curPalette.add(F("c2"));
curPalette.add(F("c2"));
curPalette.add(F("c3"));
curPalette.add(F("c3"));
curPalette.add(F("c3"));
curPalette.add(F("c3"));
curPalette.add(F("c3"));
curPalette.add(F("c1"));
break;}
case 6: //Party colors
setPaletteColors(curPalette, PartyColors_p);
break;
case 7: //Cloud colors
setPaletteColors(curPalette, CloudColors_p);
break;
case 8: //Lava colors
setPaletteColors(curPalette, LavaColors_p);
break;
case 9: //Ocean colors
setPaletteColors(curPalette, OceanColors_p);
break;
case 10: //Forest colors
setPaletteColors(curPalette, ForestColors_p);
break;
case 11: //Rainbow colors
setPaletteColors(curPalette, RainbowColors_p);
break;
case 12: //Rainbow stripe colors
setPaletteColors(curPalette, RainbowStripeColors_p);
break;
default:
if (i < 13) {
break;
}
byte tcp[72];
memcpy_P(tcp, (byte*)pgm_read_dword(&(gGradientPalettes[i - 13])), 72);
setPaletteColors(curPalette, tcp);
break;
}
}
}
void serializeNodes(JsonObject root) void serializeNodes(JsonObject root)
{ {
JsonArray nodes = root.createNestedArray("nodes"); JsonArray nodes = root.createNestedArray("nodes");
@ -564,6 +714,7 @@ void serveJson(AsyncWebServerRequest* request)
else if (url.indexOf("info") > 0) subJson = 2; else if (url.indexOf("info") > 0) subJson = 2;
else if (url.indexOf("si") > 0) subJson = 3; else if (url.indexOf("si") > 0) subJson = 3;
else if (url.indexOf("nodes") > 0) subJson = 4; else if (url.indexOf("nodes") > 0) subJson = 4;
else if (url.indexOf("palx") > 0) subJson = 5;
else if (url.indexOf("live") > 0) { else if (url.indexOf("live") > 0) {
serveLiveLeds(request); serveLiveLeds(request);
return; return;
@ -580,7 +731,7 @@ void serveJson(AsyncWebServerRequest* request)
request->send( 501, "application/json", F("{\"error\":\"Not implemented\"}")); request->send( 501, "application/json", F("{\"error\":\"Not implemented\"}"));
return; return;
} }
AsyncJsonResponse* response = new AsyncJsonResponse(JSON_BUFFER_SIZE); AsyncJsonResponse* response = new AsyncJsonResponse(JSON_BUFFER_SIZE);
JsonObject doc = response->getRoot(); JsonObject doc = response->getRoot();
@ -592,10 +743,12 @@ void serveJson(AsyncWebServerRequest* request)
serializeInfo(doc); break; serializeInfo(doc); break;
case 4: //node list case 4: //node list
serializeNodes(doc); break; serializeNodes(doc); break;
case 5: //palettes
serializePalettes(doc, request); break;
default: //all default: //all
JsonObject state = doc.createNestedObject("state"); JsonObject state = doc.createNestedObject("state");
serializeState(state); serializeState(state);
JsonObject info = doc.createNestedObject("info"); JsonObject info = doc.createNestedObject("info");
serializeInfo(info); serializeInfo(info);
if (subJson != 3) if (subJson != 3)
{ {
@ -603,7 +756,7 @@ void serveJson(AsyncWebServerRequest* request)
doc[F("palettes")] = serialized((const __FlashStringHelper*)JSON_palette_names); doc[F("palettes")] = serialized((const __FlashStringHelper*)JSON_palette_names);
} }
} }
response->setLength(); response->setLength();
request->send(response); request->send(response);
} }