Skip to content

Commit

Permalink
Merge branch '0_15' into FXparticleSystem
Browse files Browse the repository at this point in the history
  • Loading branch information
@DedeHai
DedeHai committed Feb 4, 2024
2 parents a7ef020 + 0003845 commit 3b82219
Show file tree
Hide file tree
Showing 4 changed files with 74 additions and 76 deletions.
70 changes: 32 additions & 38 deletions wled00/data/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -346,10 +346,14 @@ button {
-webkit-overflow-scrolling: touch;
}

#Segments, #Presets, #Effects, #Colors {
font-size: 19px;
padding: 4px 0 0;
}

#segutil, #segutil2, #segcont, #putil, #pcont, #pql, #fx, #palw,
.fnd {
max-width: 280px;
font-size: 19px;
}

#putil, #segutil, #segutil2 {
Expand All @@ -361,7 +365,7 @@ button {
padding-top: 12px;
}

#fx, #pql, #segcont, #pcont, #sliders, #picker, #qcs-w, #hexw, #pall, #ledmap,
#fx, #pql, #segcont, #pcont, #sliders, #qcs-w, #hexw, #pall, #ledmap,
.slider, .filter, .option, .segname, .pname, .fnd {
margin: 0 auto;
}
Expand All @@ -371,15 +375,10 @@ button {
}

/* Quick load magin for simplified UI */
.simplified #pql {
.simplified #pql, .simplified #palw, .simplified #fx {
margin-bottom: 8px;
}

/* Button margin for simplified UI */
.simplified #fx .btn, .simplified #palw .btn {
margin-top: 0;
}

.smooth { transition: transform calc(var(--f, 1)*.5s) ease-out }

.tab-label {
Expand Down Expand Up @@ -624,12 +623,10 @@ button {
padding-bottom: 8px;
}

#info .btn {
.infobtn {
margin: 5px;
}
#info table .btn, #nodes table .btn {
margin: 0;
}

#info div, #nodes div {
max-width: 490px;
margin: 0 auto;
Expand Down Expand Up @@ -784,14 +781,14 @@ input[type=range]::-moz-range-thumb {
}

#picker {
margin-top: 8px !important;
margin: 4px auto 0 !important;
max-width: max-content;
}

/* buttons */
.btn {
padding: 8px;
margin: 10px 4px;
/*margin: 10px 4px;*/
width: 230px;
font-size: 19px;
color: var(--c-d);
Expand Down Expand Up @@ -837,14 +834,14 @@ input[type=range]::-moz-range-thumb {
text-overflow: clip;
}
.btn-xs {
margin: 2px 0 0 0;
}
#putil .btn-xs {
margin: 0;
}
#info .btn-xs {
border: 1px solid var(--c-4);
}
#btns .btn-xs {
margin: 0 4px;
}

#putil .btn-s {
width: 135px;
Expand All @@ -867,7 +864,7 @@ a.btn {
display: block;
white-space: nowrap;
text-align: center;
padding: 8px 32px;
padding: 9px 32px 7px 24px;
position: relative;
box-sizing: border-box;
line-height: 24px;
Expand Down Expand Up @@ -922,9 +919,6 @@ select {
#tt {
text-align: center;
}
.cl {
background-color: #000;
}
select.sel-p, select.sel-pl, select.sel-ple {
margin: 5px 0;
width: 100%;
Expand Down Expand Up @@ -1071,27 +1065,24 @@ textarea {
.newseg {
cursor: default;
}

/*
.ic {
padding: 6px 0 0 0;
}

.xxs {
*/
/* color selector */
#csl button {
width: 44px;
height: 44px;
margin: 5px;
border: 2px solid var(--c-d) !important;
background-color: #000;
}

.xxs-w {
/* selected color selector */
#csl .sl {
margin: 2px;
width: 50px;
height: 50px;
}

#csl .xxs {
border: 2px solid var(--c-d) !important;
}
#csl .xxs-w {
border-width: 5px !important;
}

Expand Down Expand Up @@ -1296,15 +1287,11 @@ TD .checkmark, TD .radiomark {
position: -webkit-sticky;
position: sticky;
border-radius: 21px;
margin: 13px auto 0;
margin: 0 auto 12px;
min-height: 40px;
border: 1px solid var(--c-2);
}

#segutil .lstI {
margin-top: 0;
}

/* Simplify segments */
.simplified #segcont .lstI {
margin-top: 4px;
Expand Down Expand Up @@ -1403,7 +1390,7 @@ dialog {
width: 100%;
box-sizing: border-box;
padding: 8px 40px 8px 44px;
margin: 5px auto 0;
margin: 4px auto 12px;
text-align: left;
border-radius: 21px;
background: var(--c-2);
Expand All @@ -1421,6 +1408,13 @@ dialog {
background-color: var(--c-3);
}

#fxFind.fnd input[type="text"] {
margin-bottom: 0;
}
#fxFind {
margin-bottom: 12px;
}

/* segment & preset inner/expanded content */
.segin,
.presin {
Expand Down
9 changes: 5 additions & 4 deletions wled00/data/index.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,9 +115,9 @@
<div class="qcs" onclick="pC('rnd');" title="Random" style="background:linear-gradient(to right, red, orange, yellow, green, blue, purple);transform: translateY(-11px);">R</div>
</div>
<div id="csl">
<button id="csl0" title="Select slot" class="btn xxs cl" onclick="selectSlot(0);" data-r="0" data-g="0" data-b="0" data-w="0">1</button>
<button id="csl1" title="Select slot" class="btn xxs cl" onclick="selectSlot(1);" data-r="0" data-g="0" data-b="0" data-w="0">2</button>
<button id="csl2" title="Select slot" class="btn xxs cl" onclick="selectSlot(2);" data-r="0" data-g="0" data-b="0" data-w="0">3</button>
<button id="csl0" title="Select slot" class="btn" onclick="selectSlot(0);" data-r="0" data-g="0" data-b="0" data-w="0">1</button>
<button id="csl1" title="Select slot" class="btn" onclick="selectSlot(1);" data-r="0" data-g="0" data-b="0" data-w="0">2</button>
<button id="csl2" title="Select slot" class="btn" onclick="selectSlot(2);" data-r="0" data-g="0" data-b="0" data-w="0">3</button>
</div>
<p class="labels h" id="cslLabel"></p>
<div id="hexw">
Expand All @@ -130,7 +130,7 @@
<button class="btn btn-xs" title="Add custom palette" type="button" onclick="window.location.href=getURL('/cpal.htm')"><i class="icons btn-icon">&#xe18a;</i></button>
<button class="btn btn-xs" title="Remove custom palette" type="button" id="rmPal" onclick="palettesData=null;localStorage.removeItem('wledPalx');requestJson({rmcpal:true});setTimeout(loadPalettes,250,loadPalettesData);"><i class="icons btn-icon">&#xe037;</i></button>
</div>
<p class="labels" id="pall"><i class="icons sel-icon" onclick="tglHex()">&#xe2b3;</i> Color palette</p>
<p class="labels hd" id="pall"><i class="icons sel-icon" onclick="tglHex()">&#xe2b3;</i> Color palette</p>
<div id="palw" class="il">
<div class="staytop fnd">
<input type="text" placeholder="Search" oninput="search(this,'pallist')" onfocus="search(this,'pallist')" />
Expand Down Expand Up @@ -256,6 +256,7 @@
</div>

<div id="Segments" class="tabcontent">
<p class="labels hd" id="segLabel">Segments</p>
<div id="segcont">
Loading...
</div>
Expand Down
69 changes: 36 additions & 33 deletions wled00/data/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,6 @@ function setCSL(cs)
function applyCfg()
{
cTheme(cfg.theme.base === "light");
gId("Colors").style.paddingTop = cfg.comp.colors.picker ? "0" : "28px";
var bg = cfg.theme.color.bg;
if (bg) sCol('--c-1', bg);
var l = cfg.comp.labels;
Expand Down Expand Up @@ -809,13 +808,13 @@ function populateSegments(s)
`<span class="checkmark"></span>`+
`</label>`+
`<div class="segname ${smpl}" onclick="selSegEx(${i})">`+
`<i class="icons e-icon frz" id="seg${i}frz" onclick="event.preventDefault();tglFreeze(${i});">&#x${inst.frz ? (li.live && li.liveseg==i?'e410':'e0e8') : 'e325'};</i>`+
`<i class="icons e-icon frz" id="seg${i}frz" title="(un)Freeze" onclick="event.preventDefault();tglFreeze(${i});">&#x${inst.frz ? (li.live && li.liveseg==i?'e410':'e0e8') : 'e325'};</i>`+
(inst.n ? inst.n : "Segment "+i) +
`<div class="pop hide" onclick="event.preventDefault();event.stopPropagation();">`+
`<i class="icons g-icon" style="color:${cG};" onclick="this.nextElementSibling.classList.toggle('hide');">&#x278${String.fromCharCode(inst.set+"A".charCodeAt(0))};</i>`+
`<i class="icons g-icon" title="Set group" style="color:${cG};" onclick="this.nextElementSibling.classList.toggle('hide');">&#x278${String.fromCharCode(inst.set+"A".charCodeAt(0))};</i>`+
`<div class="pop-c hide"><span style="color:var(--c-f);" onclick="setGrp(${i},0);">&#x278A;</span><span style="color:var(--c-r);" onclick="setGrp(${i},1);">&#x278B;</span><span style="color:var(--c-g);" onclick="setGrp(${i},2);">&#x278C;</span><span style="color:var(--c-l);" onclick="setGrp(${i},3);">&#x278D;</span></div>`+
`</div> `+
`<i class="icons edit-icon flr ${smpl}" id="seg${i}nedit" onclick="tglSegn(${i})">&#xe2c6;</i>`+
`<i class="icons edit-icon flr ${smpl}" id="seg${i}nedit" title="Edit" onclick="tglSegn(${i})">&#xe2c6;</i>`+
`</div>`+
`<i class="icons e-icon flr ${smpl}" id="sege${i}" onclick="expand(${i})">&#xe395;</i>`+
(cfg.comp.segpwr ? segp : '') +
Expand Down Expand Up @@ -846,7 +845,7 @@ function populateSegments(s)
`<tr>`+
`<td><input class="segn" id="seg${i}grp" type="number" min="1" max="255" value="${inst.grp}" oninput="updateLen(${i})" onkeydown="segEnter(${i})"></td>`+
`<td><input class="segn" id="seg${i}spc" type="number" min="0" max="255" value="${inst.spc}" oninput="updateLen(${i})" onkeydown="segEnter(${i})"></td>`+
`<td><button class="btn btn-xs" onclick="setSeg(${i})"><i class="icons btn-icon" id="segc${i}">&#xe390;</i></button></td>`+
`<td><button class="btn btn-xs" title="Update" onclick="setSeg(${i})"><i class="icons btn-icon" id="segc${i}">&#xe390;</i></button></td>`+
`</tr>`+
`</table>`+
`<div class="h bp" id="seg${i}len"></div>`+
Expand Down Expand Up @@ -898,6 +897,7 @@ function populateSegments(s)
} else {
gId("ledmap").classList.add('hide');
}
tooltip("#Segments");
}

function populateEffects()
Expand Down Expand Up @@ -1560,12 +1560,12 @@ function setEffectParameters(idx)
// set html slider items on/off
let sliders = d.querySelectorAll("#sliders .sliderwrap");
sliders.forEach((slider, i)=>{
let text = slider.getAttribute("tooltip");
let text = slider.getAttribute("title");
if ((!controlDefined && i<((idx<128)?2:nSliders)) || (slOnOff.length>i && slOnOff[i]!="")) {
if (slOnOff.length>i && slOnOff[i]!="!") text = slOnOff[i];
// restore overwritten default tooltips
if (i<2 && slOnOff[i]==="!") text = i==0 ? "Effect speed" : "Effect intensity";
slider.setAttribute("tooltip", text);
slider.setAttribute("title", text);
slider.parentElement.classList.remove('hide');
} else
slider.parentElement.classList.add('hide');
Expand All @@ -1575,10 +1575,10 @@ function setEffectParameters(idx)
gId('fxopt').classList.remove('fade');
let checks = d.querySelectorAll("#sliders .ochkl");
checks.forEach((check, i)=>{
let text = check.getAttribute("tooltip");
let text = check.getAttribute("title");
if (5+i<slOnOff.length && slOnOff[5+i]!=='') {
if (slOnOff.length>5+i && slOnOff[5+i]!="!") text = slOnOff[5+i];
check.setAttribute("tooltip", text);
check.setAttribute("title", text);
check.classList.remove('hide');
} else
check.classList.add('hide');
Expand Down Expand Up @@ -1876,7 +1876,7 @@ function resetUtil(off=false)
+ '<label class="check schkl"><input type="checkbox" id="selall" onchange="selSegAll(this)"><span class="checkmark"></span></label>'
+ `<div class="segname" ${off?'':'onclick="makeSeg()"'}><i class="icons btn-icon">&#xe18a;</i>Add segment</div>`
+ '<div class="pop hide" onclick="event.stopPropagation();">'
+ `<i class="icons g-icon" onclick="this.nextElementSibling.classList.toggle('hide');">&#xE34B;</i>`
+ `<i class="icons g-icon" title="Select group" onclick="this.nextElementSibling.classList.toggle('hide');">&#xE34B;</i>`
+ '<div class="pop-c hide"><span style="color:var(--c-f);" onclick="selGrp(0);">&#x278A;</span><span style="color:var(--c-r);" onclick="selGrp(1);">&#x278B;</span><span style="color:var(--c-g);" onclick="selGrp(2);">&#x278C;</span><span style="color:var(--c-l);" onclick="selGrp(3);">&#x278D;</span></div>'
+ '</div></div>';
}
Expand Down Expand Up @@ -2514,8 +2514,8 @@ function selectSlot(b)
{
csel = b;
var cd = gId('csl').children;
for (let i of cd) i.classList.remove('xxs-w');
cd[b].classList.add('xxs-w');
for (let i of cd) i.classList.remove('sl');
cd[b].classList.add('sl');
setPicker(rgbStr(cd[b].dataset));
// force slider update on initial load (picker "color:change" not fired if black)
if (cpick.color.value == 0) updatePSliders();
Expand Down Expand Up @@ -2802,6 +2802,7 @@ function search(field, listId = null) {
if (!listId) return;

const search = field.value !== '';
const presets = listId === 'pcont';

// clear filter if searching in fxlist
if (listId === 'fxlist' && search) {
Expand All @@ -2813,36 +2814,38 @@ function search(field, listId = null) {

const listItems = gId(listId).querySelectorAll('.lstI');
// filter list items but leave (Default & Solid) always visible
for (i = (listId === 'pcont' ? 0 : 1); i < listItems.length; i++) {
for (i = (presets ? 0 : 1); i < listItems.length; i++) {
const listItem = listItems[i];
const listItemName = listItem.querySelector('.lstIname').innerText.toUpperCase();
const searchIndex = listItemName.indexOf(field.value.toUpperCase());
listItem.style.display = (searchIndex < 0) ? 'none' : '';
listItem.dataset.searchIndex = searchIndex;
}

// sort list items by search index and name
const sortedListItems = Array.from(listItems).sort((a, b) => {
const aSearchIndex = parseInt(a.dataset.searchIndex);
const bSearchIndex = parseInt(b.dataset.searchIndex);
if (!presets) {
// sort list items by search index and name
const sortedListItems = Array.from(listItems).sort((a, b) => {
const aSearchIndex = parseInt(a.dataset.searchIndex);
const bSearchIndex = parseInt(b.dataset.searchIndex);

if (aSearchIndex !== bSearchIndex) {
return aSearchIndex - bSearchIndex;
}
if (aSearchIndex !== bSearchIndex) {
return aSearchIndex - bSearchIndex;
}

const aName = a.querySelector('.lstIname').innerText.toUpperCase();
const bName = b.querySelector('.lstIname').innerText.toUpperCase();
const aName = a.querySelector('.lstIname').innerText.toUpperCase();
const bName = b.querySelector('.lstIname').innerText.toUpperCase();

return aName.localeCompare(bName);
});
sortedListItems.forEach(item => {
gId(listId).append(item);
});
return aName.localeCompare(bName);
});
sortedListItems.forEach(item => {
gId(listId).append(item);
});

// scroll to first search result
const firstVisibleItem = sortedListItems.find(item => item.style.display !== 'none' && !item.classList.contains('sticky') && !item.classList.contains('selected'));
if (firstVisibleItem && search) {
firstVisibleItem.scrollIntoView({ behavior: "instant", block: "center" });
// scroll to first search result
const firstVisibleItem = sortedListItems.find(item => item.style.display !== 'none' && !item.classList.contains('sticky') && !item.classList.contains('selected'));
if (firstVisibleItem && search) {
firstVisibleItem.scrollIntoView({ behavior: "instant", block: "center" });
}
}
}

Expand Down Expand Up @@ -3071,9 +3074,9 @@ function mergeDeep(target, ...sources)
return mergeDeep(target, ...sources);
}

function tooltip()
function tooltip(cont=null)
{
const elements = d.querySelectorAll("[title]");
const elements = d.querySelectorAll((cont?cont+" ":"")+"[title]");
elements.forEach((element)=>{
element.addEventListener("mouseover", ()=>{
// save title
Expand Down
2 changes: 1 addition & 1 deletion wled00/remote.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ static bool remoteJson(int button)
JsonObject fdo = pDoc->as<JsonObject>();
if (fdo.isNull()) {
// the received button does not exist
if (!WLED_FS.exists("/remote.json")) errorFlag = ERR_FS_RMLOAD; //warn if file itself doesn't exist
//if (!WLED_FS.exists("/remote.json")) errorFlag = ERR_FS_RMLOAD; //warn if file itself doesn't exist
releaseJSONBufferLock();
return parsed;
}
Expand Down

0 comments on commit 3b82219

Please sign in to comment.