Search bar and palettes preview (#1637)
* 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
GitHub
parent
ba4c3e3852
commit
4a20f43fbf
3
.gitignore
vendored
3
.gitignore
vendored
@ -7,9 +7,10 @@
|
||||
/wled00/Release
|
||||
/wled00/extLibs
|
||||
/platformio_override.ini
|
||||
/wled00/my_config.h
|
||||
/wled00/my_config.h
|
||||
/build_output
|
||||
.DS_Store
|
||||
.gitignore
|
||||
.clang-format
|
||||
node_modules
|
||||
.idea
|
||||
|
||||
@ -166,6 +166,14 @@ button {
|
||||
color: var(--c-d);
|
||||
}
|
||||
|
||||
.search-cancel-icon {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 9px;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flr {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
@ -215,7 +223,7 @@ button {
|
||||
|
||||
.top button {
|
||||
padding: var(--tbp);
|
||||
}
|
||||
}
|
||||
|
||||
.bot button {
|
||||
padding: var(--bbp);
|
||||
@ -299,7 +307,7 @@ button {
|
||||
top: -1px;
|
||||
z-index: 1;
|
||||
margin-top: 1px;
|
||||
width: 274px;
|
||||
width: 272px;
|
||||
margin: auto;
|
||||
border-radius: 25px;
|
||||
}
|
||||
@ -308,10 +316,6 @@ button {
|
||||
top: 28px;
|
||||
}
|
||||
|
||||
#staytop2 {
|
||||
top: 56px;
|
||||
}
|
||||
|
||||
#fxb0 {
|
||||
margin-bottom: 2px;
|
||||
filter: drop-shadow(0 0 1px #000);
|
||||
@ -548,6 +552,7 @@ input[type=range]:active + .sliderbubble {
|
||||
font-size: 19px;
|
||||
background-color: var(--c-3);
|
||||
color: var(--c-f);
|
||||
cursor: pointer;
|
||||
border: 0px solid white;
|
||||
border-radius: 25px;
|
||||
transition-duration: 0.5s;
|
||||
@ -668,8 +673,8 @@ input[type=number]:focus, input[type=text]:focus {
|
||||
background: var(--c-6);
|
||||
}
|
||||
|
||||
input[type=number]::-webkit-inner-spin-button,
|
||||
input[type=number]::-webkit-outer-spin-button {
|
||||
input[type=number]::-webkit-inner-spin-button,
|
||||
input[type=number]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
@ -742,7 +747,7 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
}
|
||||
|
||||
.pwr {
|
||||
color: var(--c-6);
|
||||
color: var(--c-6);
|
||||
transform: translate(2px, 3px);
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -764,7 +769,7 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.check {
|
||||
.check, .radio {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding-bottom: 32px;
|
||||
@ -774,7 +779,7 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
}
|
||||
|
||||
.schkl {
|
||||
padding: 2px 22px 0px 35px;
|
||||
padding: 2px 5px 0px 35px;
|
||||
margin: 0 0 0 2px;
|
||||
}
|
||||
|
||||
@ -784,7 +789,13 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.check input {
|
||||
.fxchkl {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.check input, .radio input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
@ -792,7 +803,7 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
.checkmark, .radiomark {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@ -802,6 +813,13 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.radiomark {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.schk {
|
||||
top: 0;
|
||||
}
|
||||
@ -828,13 +846,13 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
background-color: var(--c-6);
|
||||
}
|
||||
|
||||
.checkmark:after {
|
||||
.checkmark:after, .radiomark:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.check input:checked ~ .checkmark:after {
|
||||
.check input:checked ~ .checkmark:after, .radio input:checked ~ .radiomark:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -850,6 +868,16 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.radio .radiomark:after {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -6px;
|
||||
border-radius: 50%;
|
||||
background: var(--c-f);
|
||||
}
|
||||
|
||||
.h {
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
@ -873,7 +901,93 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
border-radius: 20px;
|
||||
text-align: left;
|
||||
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 {
|
||||
@ -906,7 +1020,7 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
width: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--c-sb);
|
||||
@ -947,4 +1061,4 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
#buttonPcm {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -88,13 +88,33 @@
|
||||
<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"></i></button>
|
||||
</div>
|
||||
<p class="labels">Color palette</p>
|
||||
<div class="il">
|
||||
<p class="labels">
|
||||
<i class="icons sel-icon" onclick="tglHex()"></i>
|
||||
<select class="btn sel" id="selectPalette" onchange="setPalette()">
|
||||
<option>Default</option>
|
||||
<option>Error!</option>
|
||||
</select>
|
||||
Color palette
|
||||
</p>
|
||||
<div class="il">
|
||||
<div id="selectPalette" class="list">
|
||||
<div class="lstI" data-id="0">
|
||||
<label class="check schkl">
|
||||
|
||||
<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>
|
||||
|
||||
@ -118,21 +138,17 @@
|
||||
</div>
|
||||
</div>
|
||||
<p class="labels">Effect mode</p>
|
||||
<div class="staytop" id="staytop2">
|
||||
<button class="btn" id="fxb0" onclick="setX(0);">Solid</button>
|
||||
</div>
|
||||
<div id="fxlist">
|
||||
<div id="fxlist" class="list">
|
||||
Loading...
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="Segments" class="tabcontent">
|
||||
<div id="segcont">
|
||||
Loading...
|
||||
</div>
|
||||
<div id="segutil">
|
||||
|
||||
|
||||
</div>
|
||||
<div id="segutil2">
|
||||
<button class="btn btn-s" id="rsbtn" onclick="rSegs()">Reset segments</button>
|
||||
@ -141,7 +157,7 @@
|
||||
|
||||
<div id="Favorites" class="tabcontent">
|
||||
<div id="putil">
|
||||
|
||||
|
||||
</div>
|
||||
<div id="pql">
|
||||
|
||||
@ -205,4 +221,4 @@
|
||||
<script src="rangetouch.js"></script>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -3,6 +3,7 @@ var loc = false, locip;
|
||||
var noNewSegs = false;
|
||||
var isOn = false, nlA = false, isLv = false, isInfo = false, isNodes = false, syncSend = false, syncTglRecv = true, isRgbw = false;
|
||||
var whites = [0,0,0];
|
||||
var selColors;
|
||||
var expanded = [false];
|
||||
var powered = [true];
|
||||
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 d = document;
|
||||
const ranges = RangeTouch.setup('input[type="range"]', {});
|
||||
var palettesData;
|
||||
var pJson = {};
|
||||
var pN = "", pI = 0;
|
||||
var pmt = 1, pmtLS = 0, pmtLast = 0;
|
||||
@ -29,17 +31,17 @@ var cpick = new iro.ColorPicker("#picker", {
|
||||
wheelLightness: false,
|
||||
wheelAngle: 90,
|
||||
layout: [
|
||||
{
|
||||
{
|
||||
component: iro.ui.Wheel,
|
||||
options: {}
|
||||
},
|
||||
{
|
||||
{
|
||||
component: iro.ui.Slider,
|
||||
options: {
|
||||
sliderType: 'value'
|
||||
}
|
||||
},
|
||||
{
|
||||
{
|
||||
component: iro.ui.Slider,
|
||||
options: {
|
||||
sliderType: 'kelvin',
|
||||
@ -157,7 +159,6 @@ function loadBg(iUrl) {
|
||||
}
|
||||
img.addEventListener('load', (event) => {
|
||||
var a = parseFloat(cfg.theme.alpha.bg);
|
||||
d.getElementById('staytop2').style.background = "transparent";
|
||||
if (isNaN(a)) a = 0.6;
|
||||
bg.style.opacity = a;
|
||||
bg.style.backgroundImage = `url(${img.src})`;
|
||||
@ -177,12 +178,12 @@ function onLoad() {
|
||||
}
|
||||
var sett = localStorage.getItem('wledUiCfg');
|
||||
if (sett) cfg = mergeDeep(cfg, JSON.parse(sett));
|
||||
|
||||
|
||||
resetPUtil();
|
||||
|
||||
|
||||
applyCfg();
|
||||
loadBg(cfg.theme.bg.url);
|
||||
|
||||
|
||||
var cd = d.getElementById('csl').children;
|
||||
for (var i = 0; i < cd.length; i++) {
|
||||
cd[i].style.backgroundColor = "rgb(0, 0, 0)";
|
||||
@ -233,7 +234,7 @@ function showToast(text, error = false) {
|
||||
x.className = error ? "error":"show";
|
||||
clearTimeout(timeout);
|
||||
x.style.animation = 'none';
|
||||
x.style.animation = null;
|
||||
x.style.animation = null;
|
||||
timeout = setTimeout(function(){ x.className = x.className.replace("show", ""); }, 2900);
|
||||
}
|
||||
|
||||
@ -255,7 +256,7 @@ function getRuntimeStr(rt)
|
||||
if (!days && hrs) str += ", ";
|
||||
if (t > 59 && !days) str += mins + " min";
|
||||
if (t < 3600 && t > 59) str += ", ";
|
||||
if (t < 3600) str += (t - mins*60) + " sec";
|
||||
if (t < 3600) str += (t - mins*60) + " sec";
|
||||
return str;
|
||||
}
|
||||
|
||||
@ -271,7 +272,7 @@ function getLowestUnusedP()
|
||||
{
|
||||
if (key == l) l++;
|
||||
}
|
||||
if (l > 250) l = 250;
|
||||
if (l > 250) l = 250;
|
||||
return l;
|
||||
}
|
||||
|
||||
@ -309,7 +310,6 @@ function cpBck() {
|
||||
|
||||
copyText.select();
|
||||
copyText.setSelectionRange(0, 999999);
|
||||
|
||||
d.execCommand("copy");
|
||||
|
||||
showToast("Copied to clipboard!");
|
||||
@ -322,12 +322,12 @@ function presetError(empty)
|
||||
bckstr = localStorage.getItem("wledP");
|
||||
if (bckstr.length > 10) hasBackup = true;
|
||||
} catch (e) {
|
||||
|
||||
|
||||
}
|
||||
var cn = `<div class="seg c">`;
|
||||
if (empty)
|
||||
if (empty)
|
||||
cn += `You have no presets yet!`;
|
||||
else
|
||||
else
|
||||
cn += `Sorry, there was an issue loading your presets!`;
|
||||
|
||||
if (hasBackup) {
|
||||
@ -351,7 +351,7 @@ function loadPresets()
|
||||
if (loc) {
|
||||
url = `http://${locip}/presets.json`;
|
||||
}
|
||||
|
||||
|
||||
fetch
|
||||
(url, {
|
||||
method: 'get'
|
||||
@ -380,7 +380,7 @@ function populateQL()
|
||||
var cn = "";
|
||||
if (pQL.length > 0) {
|
||||
cn += `<p class="labels">Quick load</p>`;
|
||||
|
||||
|
||||
var it = 0;
|
||||
for (var key of (pQL||[]))
|
||||
{
|
||||
@ -392,7 +392,7 @@ function populateQL()
|
||||
}
|
||||
}
|
||||
if (it != 0) cn+= '<br>';
|
||||
|
||||
|
||||
cn += `<p class="labels">All presets</p>`;
|
||||
}
|
||||
d.getElementById('pql').innerHTML = cn;
|
||||
@ -416,7 +416,7 @@ function populatePresets(fromls)
|
||||
var qll = key[1].ql;
|
||||
if (qll) pQL.push([i, qll]);
|
||||
is.push(i);
|
||||
|
||||
|
||||
cn += `<div class="seg pres" id="p${i}o">`;
|
||||
if (cfg.comp.pid) cn += `<div class="pid">${i}</div>`;
|
||||
cn += `<div class="segname pname" onclick="setPreset(${i})">${pName(i)}</div>
|
||||
@ -467,7 +467,7 @@ function populateInfo(i)
|
||||
var vcn = "Kuuhaku";
|
||||
if (i.ver.startsWith("0.12.")) vcn = "Hikari";
|
||||
if (i.cn) vcn = i.cn;
|
||||
|
||||
|
||||
cn += `v${i.ver} "${vcn}"<br><br><table class="infot">
|
||||
${urows}
|
||||
${inforow("Build",i.vid)}
|
||||
@ -487,17 +487,17 @@ function populateSegments(s)
|
||||
{
|
||||
var cn = "";
|
||||
segCount = 0; lowestUnused = 0; lSeg = 0;
|
||||
|
||||
|
||||
for (var y = 0; y < (s.seg||[]).length; y++)
|
||||
{
|
||||
segCount++;
|
||||
|
||||
|
||||
var inst=s.seg[y];
|
||||
let i = parseInt(inst.id);
|
||||
powered[i] = inst.on;
|
||||
if (i == lowestUnused) lowestUnused = i+1;
|
||||
if (i > lSeg) lSeg = i;
|
||||
|
||||
|
||||
cn += `<div class="seg">
|
||||
<label class="check schkl">
|
||||
|
||||
@ -567,6 +567,151 @@ function populateSegments(s)
|
||||
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)"></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)"></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){
|
||||
switch (b) {
|
||||
case 32: return "ESP32";
|
||||
@ -673,7 +818,7 @@ function updateLen(s)
|
||||
} else if (len == 1) {
|
||||
out = "1 LED";
|
||||
}
|
||||
|
||||
|
||||
if (d.getElementById(`seg${s}grp`) != null)
|
||||
{
|
||||
var grp = parseInt(d.getElementById(`seg${s}grp`).value);
|
||||
@ -682,7 +827,7 @@ function updateLen(s)
|
||||
var virt = Math.ceil(len/(grp + spc));
|
||||
if (!isNaN(virt) && (grp > 1 || spc > 0)) out += ` (${virt} virtual)`;
|
||||
}
|
||||
|
||||
|
||||
d.getElementById(`seg${s}len`).innerHTML = out;
|
||||
}
|
||||
|
||||
@ -711,15 +856,12 @@ function updateUI()
|
||||
d.getElementById('buttonNl').className = (nlA) ? "active":"";
|
||||
d.getElementById('buttonSync').className = (syncSend) ? "active":"";
|
||||
|
||||
d.getElementById('fxb' + selectedFx).style.backgroundColor = "var(--c-6)";
|
||||
updateTrail(d.getElementById('sliderBri'));
|
||||
updateTrail(d.getElementById('sliderSpeed'));
|
||||
updateTrail(d.getElementById('sliderIntensity'));
|
||||
updateTrail(d.getElementById('sliderW'));
|
||||
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();
|
||||
updateHex();
|
||||
updateRgb();
|
||||
@ -755,7 +897,7 @@ function requestJson(command, rinfo = true, verbose = true) {
|
||||
if (loc) {
|
||||
url = `http://${locip}${url}`;
|
||||
}
|
||||
|
||||
|
||||
var type = command ? 'post':'get';
|
||||
if (command)
|
||||
{
|
||||
@ -774,7 +916,7 @@ function requestJson(command, rinfo = true, verbose = true) {
|
||||
})
|
||||
.then(res => {
|
||||
if (!res.ok) {
|
||||
showErrorToast();
|
||||
showErrorToast();
|
||||
}
|
||||
return res.json();
|
||||
})
|
||||
@ -783,54 +925,63 @@ function requestJson(command, rinfo = true, verbose = true) {
|
||||
jsonTimeout = null;
|
||||
clearErrorToast();
|
||||
d.getElementById('connind').style.backgroundColor = "#070";
|
||||
if (!json) showToast('Empty response', true);
|
||||
if (json.success) return;
|
||||
if (!json) {
|
||||
showToast('Empty response', true);
|
||||
}
|
||||
if (json.success) {
|
||||
return;
|
||||
}
|
||||
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 name = info.name;
|
||||
d.getElementById('namelabel').innerHTML = name;
|
||||
if (name === "Dinnerbone") d.documentElement.style.transform = "rotate(180deg)";
|
||||
if (info.live) name = "(Live) " + name;
|
||||
if (loc) name = "(L) " + name;
|
||||
if (name === "Dinnerbone") {
|
||||
d.documentElement.style.transform = "rotate(180deg)";
|
||||
}
|
||||
if (info.live) {
|
||||
name = "(Live) " + name;
|
||||
}
|
||||
if (loc) {
|
||||
name = "(L) " + name;
|
||||
}
|
||||
d.title = name;
|
||||
isRgbw = info.leds.wv;
|
||||
ledCount = info.leds.count;
|
||||
syncTglRecv = info.str;
|
||||
maxSeg = info.leds.maxseg;
|
||||
pmt = info.fs.pmt;
|
||||
if (!command && pmt != pmtLast) setTimeout(loadPresets,99);
|
||||
pmtLast = pmt;
|
||||
pmt = info.fs.pmt;
|
||||
|
||||
if (!command && pmt != pmtLast) {
|
||||
setTimeout(loadPresets,99);
|
||||
}
|
||||
pmtLast = pmt;
|
||||
d.getElementById('buttonNodes').style.display = (info.ndc > 0 && window.innerWidth > 770) ? "block":"none";
|
||||
lastinfo = info;
|
||||
if (isInfo) populateInfo(info);
|
||||
lastinfo = info;
|
||||
if (isInfo) {
|
||||
populateInfo(info);
|
||||
}
|
||||
s = json.state;
|
||||
displayRover(info, s);
|
||||
|
||||
if (!rinfo) loadPalettesData();
|
||||
}
|
||||
|
||||
isOn = s.on;
|
||||
d.getElementById('sliderBri').value= s.bri;
|
||||
nlA = s.nl.on;
|
||||
@ -839,12 +990,12 @@ function requestJson(command, rinfo = true, verbose = true) {
|
||||
nlFade = s.nl.fade;
|
||||
syncSend = s.udpn.send;
|
||||
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('cyce').value = s.ccnf.max;
|
||||
d.getElementById('cyct').value = s.ccnf.time /10;
|
||||
d.getElementById('cyctt').value = s.transition /10;
|
||||
|
||||
|
||||
var selc=0; var ind=0;
|
||||
populateSegments(s);
|
||||
for (let i = 0; i < (s.seg||[]).length; i++)
|
||||
@ -857,6 +1008,8 @@ function requestJson(command, rinfo = true, verbose = true) {
|
||||
updateUI();
|
||||
return;
|
||||
}
|
||||
|
||||
selColors = i.col;
|
||||
var cd = d.getElementById('csl').children;
|
||||
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('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;
|
||||
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) {
|
||||
var errstr = "";
|
||||
switch (s.error) {
|
||||
case 10: errstr = "Could not mount filesystem!"; break;
|
||||
case 11: errstr = "Not enough space to save preset!"; 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);
|
||||
}
|
||||
var errstr = "";
|
||||
switch (s.error) {
|
||||
case 10:
|
||||
errstr = "Could not mount filesystem!";
|
||||
break;
|
||||
case 11:
|
||||
errstr = "Not enough space to save preset!";
|
||||
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();
|
||||
})
|
||||
.catch(function (error) {
|
||||
showToast(error, true);
|
||||
console.log(error);
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
|
||||
@ -1104,14 +1285,35 @@ function setSegBri(s){
|
||||
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)}};
|
||||
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);
|
||||
}
|
||||
|
||||
@ -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.transition = parseInt(d.getElementById('cyctt').value*10);
|
||||
}
|
||||
|
||||
|
||||
requestJson(obj);
|
||||
}
|
||||
|
||||
@ -1227,6 +1429,7 @@ function selectSlot(b) {
|
||||
updateTrail(d.getElementById('sliderW'));
|
||||
updateHex();
|
||||
updateRgb();
|
||||
redrawPalPrev();
|
||||
}
|
||||
|
||||
var lasth = 0;
|
||||
@ -1353,6 +1556,88 @@ function rSegs()
|
||||
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)
|
||||
{
|
||||
if (!a) expanded[i] = !expanded[i];
|
||||
@ -1427,7 +1712,7 @@ function move(e) {
|
||||
x0 = null;
|
||||
}
|
||||
|
||||
function size() {
|
||||
function size() {
|
||||
w = window.innerWidth;
|
||||
d.getElementById('buttonNodes').style.display = (lastinfo.ndc > 0 && w > 770) ? "block":"none";
|
||||
var h = d.getElementById('top').clientHeight;
|
||||
@ -1489,4 +1774,4 @@ _C.addEventListener('touchstart', lock, false);
|
||||
|
||||
_C.addEventListener('mouseout', move, false);
|
||||
_C.addEventListener('mouseup', move, false);
|
||||
_C.addEventListener('touchend', move, false);
|
||||
_C.addEventListener('touchend', move, false);
|
||||
|
||||
4257
wled00/html_ui.h
4257
wled00/html_ui.h
File diff suppressed because it is too large
Load Diff
197
wled00/json.cpp
197
wled00/json.cpp
@ -1,5 +1,7 @@
|
||||
#include "wled.h"
|
||||
|
||||
#include "palettes.h"
|
||||
|
||||
/*
|
||||
* JSON API (De)serialization
|
||||
*/
|
||||
@ -57,13 +59,14 @@ void deserializeSegment(JsonObject elem, byte it)
|
||||
if (sz == 0) continue; //do nothing on empty array
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
if (!colValid) continue;
|
||||
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 == 1) {colSec[0] = rgbw[0]; colSec[1] = rgbw[1]; colSec[2] = rgbw[2]; colSec[3] = rgbw[3];}
|
||||
} else { //normal case, apply directly to segment
|
||||
@ -84,7 +87,7 @@ void deserializeSegment(JsonObject elem, byte it)
|
||||
parseLxJson(ly, id, true);
|
||||
}
|
||||
#endif
|
||||
|
||||
|
||||
//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_REVERSED, elem["rev"] | seg.getOption(SEG_OPTION_REVERSED));
|
||||
@ -157,9 +160,9 @@ bool deserializeState(JsonObject root)
|
||||
{
|
||||
strip.applyToAllSelected = false;
|
||||
bool stateResponse = root[F("v")] | false;
|
||||
|
||||
|
||||
bri = root["bri"] | bri;
|
||||
|
||||
|
||||
bool on = root["on"] | (bri > 0);
|
||||
if (!on != !bri) toggleOnOff();
|
||||
|
||||
@ -303,16 +306,16 @@ void serializeSegment(JsonObject& root, WS2812FX::Segment& seg, byte id, bool fo
|
||||
root["bri"] = (segbri) ? segbri : 255;
|
||||
|
||||
JsonArray colarr = root.createNestedArray("col");
|
||||
|
||||
|
||||
for (uint8_t i = 0; i < 3; i++)
|
||||
{
|
||||
JsonArray colX = colarr.createNestedArray();
|
||||
if (id == strip.getMainSegmentId() && i < 2) //temporary, to make transition work on main segment
|
||||
{
|
||||
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 {
|
||||
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 {
|
||||
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)
|
||||
{
|
||||
{
|
||||
if (includeBri) {
|
||||
root["on"] = (bri > 0);
|
||||
root["bri"] = briLast;
|
||||
@ -342,10 +345,10 @@ void serializeState(JsonObject root, bool forPreset, bool includeBri, bool segme
|
||||
|
||||
if (!forPreset) {
|
||||
if (errorFlag) root[F("error")] = errorFlag;
|
||||
|
||||
|
||||
root[F("ps")] = currentPreset;
|
||||
root[F("pl")] = (presetCyclingEnabled) ? 0: -1;
|
||||
|
||||
|
||||
usermods.addToJsonState(root);
|
||||
|
||||
//temporary for preset cycle
|
||||
@ -415,14 +418,14 @@ void serializeInfo(JsonObject root)
|
||||
root[F("ver")] = versionString;
|
||||
root[F("vid")] = VERSION;
|
||||
//root[F("cn")] = WLED_CODENAME;
|
||||
|
||||
|
||||
JsonObject leds = root.createNestedObject("leds");
|
||||
leds[F("count")] = ledCount;
|
||||
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?
|
||||
JsonArray leds_pin = leds.createNestedArray("pin");
|
||||
leds_pin.add(LEDPIN);
|
||||
|
||||
|
||||
leds[F("pwr")] = strip.currentMilliamps;
|
||||
leds[F("fps")] = strip.getFps();
|
||||
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
|
||||
|
||||
root[F("str")] = syncToggleReceive;
|
||||
|
||||
|
||||
root[F("name")] = serverDescription;
|
||||
root[F("udpport")] = udpPort;
|
||||
root["live"] = (bool)realtimeMode;
|
||||
@ -499,13 +502,13 @@ void serializeInfo(JsonObject root)
|
||||
#endif
|
||||
root[F("lwip")] = LWIP_VERSION_MAJOR;
|
||||
#endif
|
||||
|
||||
|
||||
root[F("freeheap")] = ESP.getFreeHeap();
|
||||
root[F("uptime")] = millis()/1000 + rolloverMillis*4294967;
|
||||
|
||||
|
||||
|
||||
usermods.addToJsonInfo(root);
|
||||
|
||||
|
||||
byte os = 0;
|
||||
#ifdef WLED_DEBUG
|
||||
os = 0x80;
|
||||
@ -528,16 +531,163 @@ void serializeInfo(JsonObject root)
|
||||
#ifdef WLED_ENABLE_ADALIGHT
|
||||
os += 0x02;
|
||||
#endif
|
||||
#ifndef WLED_DISABLE_OTA
|
||||
#ifndef WLED_DISABLE_OTA
|
||||
os += 0x01;
|
||||
#endif
|
||||
root[F("opt")] = os;
|
||||
|
||||
|
||||
root[F("brand")] = "WLED";
|
||||
root[F("product")] = F("FOSS");
|
||||
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)
|
||||
{
|
||||
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("si") > 0) subJson = 3;
|
||||
else if (url.indexOf("nodes") > 0) subJson = 4;
|
||||
else if (url.indexOf("palx") > 0) subJson = 5;
|
||||
else if (url.indexOf("live") > 0) {
|
||||
serveLiveLeds(request);
|
||||
return;
|
||||
@ -580,7 +731,7 @@ void serveJson(AsyncWebServerRequest* request)
|
||||
request->send( 501, "application/json", F("{\"error\":\"Not implemented\"}"));
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
AsyncJsonResponse* response = new AsyncJsonResponse(JSON_BUFFER_SIZE);
|
||||
JsonObject doc = response->getRoot();
|
||||
|
||||
@ -592,10 +743,12 @@ void serveJson(AsyncWebServerRequest* request)
|
||||
serializeInfo(doc); break;
|
||||
case 4: //node list
|
||||
serializeNodes(doc); break;
|
||||
case 5: //palettes
|
||||
serializePalettes(doc, request); break;
|
||||
default: //all
|
||||
JsonObject state = doc.createNestedObject("state");
|
||||
serializeState(state);
|
||||
JsonObject info = doc.createNestedObject("info");
|
||||
JsonObject info = doc.createNestedObject("info");
|
||||
serializeInfo(info);
|
||||
if (subJson != 3)
|
||||
{
|
||||
@ -603,7 +756,7 @@ void serveJson(AsyncWebServerRequest* request)
|
||||
doc[F("palettes")] = serialized((const __FlashStringHelper*)JSON_palette_names);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
response->setLength();
|
||||
request->send(response);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user