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

Moved effect sliders to bottom.

Browse Source 
Implemented custom effect parameters.
This commit is contained in:
Blaz Kristan 2022-04-10 11:02:57 +02:00
parent 46e1c8ef73
commit eda6f134a9
8 changed files with 1820 additions and 1776 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
wled00/FX.h
View File

@ -251,7 +251,7 @@ class WS2812FX {
// segment parameters
public:
typedef struct Segment { // 31 (32 in memory) bytes
typedef struct Segment { // 34 (35 in memory) bytes
uint16_t start;
uint16_t stop; //segment invalid if stop == 0
uint16_t offset;
@ -265,6 +265,7 @@ class WS2812FX {
uint32_t colors[NUM_COLORS];
uint8_t cct; //0==1900K, 255==10091K
uint8_t _capabilities;
uint8_t c1x, c2x, c3x; // custom FX parameters
char *name;
bool setColor(uint8_t slot, uint32_t c, uint8_t segn) { //returns true if changed
if (slot >= NUM_COLORS || segn >= MAX_NUM_SEGMENTS) return false;

9
wled00/FX_fcn.cpp
View File

@ -567,6 +567,9 @@ uint8_t WS2812FX::Segment::differs(Segment& b) {
if (speed != b.speed) d |= SEG_DIFFERS_FX;
if (intensity != b.intensity) d |= SEG_DIFFERS_FX;
if (palette != b.palette) d |= SEG_DIFFERS_FX;
if (c1x != b.c1x) d |= SEG_DIFFERS_FX;
if (c2x != b.c2x) d |= SEG_DIFFERS_FX;
if (c3x != b.c3x) d |= SEG_DIFFERS_FX;
if ((options & 0b00101110) != (b.options & 0b00101110)) d |= SEG_DIFFERS_OPT;
if ((options & 0x01) != (b.options & 0x01)) d |= SEG_DIFFERS_SEL;
@ -698,6 +701,9 @@ void WS2812FX::resetSegments() {
_segments[0].setOption(SEG_OPTION_ON, 1);
_segments[0].opacity = 255;
_segments[0].cct = 127;
_segments[0].c1x = 0;
_segments[0].c2x = 0;
_segments[0].c3x = 0;
for (uint16_t i = 1; i < MAX_NUM_SEGMENTS; i++)
{
@ -708,6 +714,9 @@ void WS2812FX::resetSegments() {
_segments[i].cct = 127;
_segments[i].speed = DEFAULT_SPEED;
_segments[i].intensity = DEFAULT_INTENSITY;
_segments[i].c1x = 0;
_segments[i].c2x = 0;
_segments[i].c3x = 0;
_segment_runtimes[i].markForReset();
}
_segment_runtimes[0].markForReset();

47
wled00/data/index.css
View File

@ -367,28 +367,39 @@ button {
bottom: 5px;
}
#fx {
height: calc(100% - 121px);
overflow-y: scroll;
}
#sliders {
padding: 5px 0;
}
#sliders .labels {
padding-top: 3px;
}
#slider0, #slider1, #slider2, #slider3, #slider4 {
background: var(--c-2);
max-width: 310px;
min-width: 280px;
margin: auto;
margin: 0 auto 5px;
border-radius: 15px;
}
#pql,
/*
#sliderLabel2, #sliderLabel3, #sliderLabel4,
#slider2, #slider3, #slider4 {
#slider2, #slider3, #slider4,
*/
#pql {
display: none;
}
/*
#slider1 {
top: 28px;
.hide {
display: none !important;
}
#fxFind {
top: 58px;
}
*/
.first {
margin-top: 10px;
}
@ -627,7 +638,9 @@ input[type=range]::-moz-range-thumb {
height: 30px;
width: 230px;
position: relative;
z-index: 0;
}
#Colors .sliderwrap {
width: 260px;
margin: 10px 0 0;
@ -752,7 +765,7 @@ input[type=range]::-moz-range-thumb {
margin-top: 5px;
}
select/*, .sel-p, .sel-pl, .sel-ple*/ {
select {
padding: 4px;
margin: 0;
font-size: 19px;
@ -1141,15 +1154,15 @@ textarea {
bottom: 52px;
top: 42px;
}
/* calculated in index.js
#fxlist .lstI.selected {
top: 142px !important;
top: 84px;
}
#fxlist .lstI.sticky {
top: 99px !important;
top: 42px;
}
*/
#pallist .lstI.selected {
top: 84px;
}
@ -1221,8 +1234,8 @@ input[type="text"].fnd:hover {
}
.modal .btn:hover,
.segin .btn:hover {
border: 1px solid var(--c-5);
background-color: var(--c-5);
border: 1px solid var(--c-5) /*!important*/;
background-color: var(--c-5) /*!important*/;
}
/* hidden list items, must be after .expanded */

96
wled00/data/index.htm
View File

@ -183,54 +183,7 @@
</div>
<div id="Effects" class="tabcontent">
<span id="sliders">
<p class="labels hd" id="sliderLabel0">Effect speed</p>
<div class="staytop" id="slider0">
<i class="icons slider-icon" style="cursor: pointer;" onclick="tglFreeze()">&#xe325;</i>
<div class="sliderwrap il">
<input id="sliderSpeed" class="noslide" onchange="setSpeed()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div>
</div>
<output class="sliderbubble"></output>
</div>
<p class="labels hd" id="sliderLabel1">Effect intensity</p>
<div class="staytop" id="slider1">
<i class="icons slider-icon" style="cursor: pointer;" onclick="tglLabels()">&#xe409;</i>
<div class="sliderwrap il">
<input id="sliderIntensity" class="noslide" onchange="setIntensity()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div>
</div>
<output class="sliderbubble"></output>
</div>
<p class="labels hd" id="sliderLabel2">Custom 1</p>
<div class="staytop" id="slider2">
<i class="icons slider-icon">&#xe410;</i>
<div class="sliderwrap il">
<input id="sliderC1" class="noslide" onchange="setFFT1()" oninput="updateTrail(this)" max="255" min="0" type="range" value="6" />
<div class="sliderdisplay"></div>
</div>
<output class="sliderbubble"></output>
</div>
<p class="labels hd" id="sliderLabel3">Custom 2</p>
<div class="staytop" id="slider3">
<i class="icons slider-icon">&#xe410;</i>
<div class="sliderwrap il">
<input id="sliderC2" class="noslide" onchange="setFFT2()" oninput="updateTrail(this)" max="255" min="0" type="range" value="6" />
<div class="sliderdisplay"></div>
</div>
<output class="sliderbubble"></output>
</div>
<p class="labels hd" id="sliderLabel4">Custom 3</p>
<div class="staytop" id="slider4">
<i class="icons slider-icon">&#xe410;</i>
<div class="sliderwrap il">
<input id="sliderC3" class="noslide" onchange="setFFT3()" oninput="updateTrail(this)" max="255" min="0" type="range" value="6" />
<div class="sliderdisplay"></div>
</div>
<output class="sliderbubble"></output>
</div>
</span>
<div>
<div id="fx">
<p class="labels hd" id="modeLabel">Effect mode</p>
<div class="staytop fnd" id="fxFind">
<input type="text" class="fnd" placeholder="Search" oninput="search(this,'fxlist')" onfocus="search(this,'fxlist')" />
@ -249,6 +202,53 @@
</div>
</div>
</div>
<div id="sliders">
<p class="labels hd" id="sliderLabel0">Effect speed</p>
<div id="slider0">
<i class="icons slider-icon" style="cursor: pointer;" onclick="tglFreeze()">&#xe325;</i>
<div class="sliderwrap il">
<input id="sliderSpeed" class="noslide" onchange="setSpeed()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div>
</div>
<output class="sliderbubble"></output>
</div>
<p class="labels hd" id="sliderLabel1">Effect intensity</p>
<div id="slider1">
<i class="icons slider-icon" style="cursor: pointer;" onclick="tglLabels()">&#xe409;</i>
<div class="sliderwrap il">
<input id="sliderIntensity" class="noslide" onchange="setIntensity()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div>
</div>
<output class="sliderbubble"></output>
</div>
<p class="labels hd" id="sliderLabel2">Custom 1</p>
<div id="slider2">
<i class="icons slider-icon">&#xe410;</i>
<div class="sliderwrap il">
<input id="sliderC1" class="noslide" onchange="setCustom(1)" oninput="updateTrail(this)" max="255" min="0" type="range" value="6" />
<div class="sliderdisplay"></div>
</div>
<output class="sliderbubble"></output>
</div>
<p class="labels hd" id="sliderLabel3">Custom 2</p>
<div id="slider3">
<i class="icons slider-icon">&#xe0a2;</i>
<div class="sliderwrap il">
<input id="sliderC2" class="noslide" onchange="setCustom(2)" oninput="updateTrail(this)" max="255" min="0" type="range" value="6" />
<div class="sliderdisplay"></div>
</div>
<output class="sliderbubble"></output>
</div>
<p class="labels hd" id="sliderLabel4">Custom 3</p>
<div id="slider4">
<i class="icons slider-icon">&#xe0e8;</i>
<div class="sliderwrap il">
<input id="sliderC3" class="noslide" onchange="setCustom(3)" oninput="updateTrail(this)" max="255" min="0" type="range" value="6" />
<div class="sliderdisplay"></div>
</div>
<output class="sliderbubble"></output>
</div>
</div>
</div>
<div id="Segments" class="tabcontent">

41
wled00/data/index.js
View File

@ -1200,10 +1200,9 @@ function readState(s,command=false)
gId('sliderSpeed').value = i.sx;
gId('sliderIntensity').value = i.ix;
gId('sliderC1').value = i.f1x ? i.f1x : 0;
gId('sliderC2').value = i.f2x ? i.f2x : 0;
gId('sliderC3').value = i.f3x ? i.f3x : 0;
gId('sliderC1').value = i.c1x ? i.c1x : 0;
gId('sliderC2').value = i.c2x ? i.c2x : 0;
gId('sliderC3').value = i.c3x ? i.c3x : 0;
if (s.error && s.error != 0) {
var errstr = "";
@ -1268,7 +1267,7 @@ function setSliderAndColorControl(idx, applyDef=false)
var obj = {"seg":{}};
// set html slider items on/off
var nSliders = Math.min(5,Math.floor((gId("sliders").children.length - 1) / 2)); // p (label) & div for each slider + FX list
var nSliders = Math.min(5,Math.floor(gId("sliders").children.length / 2)); // p (label) & div for each slider
for (let i=0; i<nSliders; i++) {
var slider = gId("slider" + i);
var label = gId("sliderLabel" + i);
@ -1287,20 +1286,23 @@ function setSliderAndColorControl(idx, applyDef=false)
else if (i==0) label.innerHTML = "Effect speed";
else if (i==1) label.innerHTML = "Effect intensity";
else label.innerHTML = "Custom" + (i-1);
//label.style.top = "auto";
label.style.display = "block";
slider.style.display = "block";
slider.style.top = topPosition + "px";
topPosition += 28; // increase top position for the next control
label.classList.remove("hide");
slider.classList.remove("hide");
if (getComputedStyle(label).display === "block") topPosition += 58; // increase top position for the next control
else topPosition += 35;
slider.setAttribute('title',label.innerHTML);
} else {
// disable label and slider
slider.style.display = "none";
label.style.display = "none";
slider.classList.add("hide");
label.classList.add("hide");
}
}
if (topPosition>0) topPosition += 2;
/*if (topPosition>0)*/ topPosition += 10; // +padding
// set size of fx list
gId("fx").style.height = `calc(100% - ${topPosition}px)`;
/*
// set top position of the effect list
gId("fxFind").style.top = topPosition + "px";
topPosition += 42;
@ -1315,7 +1317,7 @@ function setSliderAndColorControl(idx, applyDef=false)
if (selected && !selected.style.top) { // is the sticky element also selected one?
selected.style.top = topPosition + "px";
}
*/
// set html color items on/off
var cslLabel = '';
var sep = '';
@ -1960,6 +1962,17 @@ function setIntensity()
requestJson(obj);
}
function setCustom(i=1)
{
if (i<1 || i>3) return;
var obj = {"seg": {}};
var val = parseInt(gId(`sliderC${i}`).value);
if (i===3) obj.seg.c3x = val;
else if (i===2) obj.seg.c2x = val;
else obj.seg.c1x = val;
requestJson(obj);
}
function setLor(i)
{
var obj = {"lor": i};

3390
wled00/html_ui.h
View File

File diff suppressed because it is too large Load Diff

6
wled00/json.cpp
View File

@ -157,6 +157,9 @@ void deserializeSegment(JsonObject elem, byte it, byte presetId)
getVal(elem[F("sx")], &seg.speed, 0, 255);
getVal(elem[F("ix")], &seg.intensity, 0, 255);
getVal(elem["pal"], &seg.palette, 1, strip.getPaletteCount());
getVal(elem[F("c1x")], &seg.c1x, 0, 255);
getVal(elem[F("c2x")], &seg.c2x, 0, 255);
getVal(elem[F("c3x")], &seg.c3x, 0, 255);
JsonArray iarr = elem[F("i")]; //set individual LEDs
if (!iarr.isNull()) {
@ -426,6 +429,9 @@ void serializeSegment(JsonObject& root, WS2812FX::Segment& seg, byte id, bool fo
root[F("sx")] = seg.speed;
root[F("ix")] = seg.intensity;
root["pal"] = seg.palette;
root[F("c1x")] = seg.c1x;
root[F("c2x")] = seg.c2x;
root[F("c3x")] = seg.c3x;
root[F("sel")] = seg.isSelected();
root["rev"] = seg.getOption(SEG_OPTION_REVERSED);
root[F("mi")] = seg.getOption(SEG_OPTION_MIRROR);

2
wled00/wled.h
View File

@ -8,7 +8,7 @@
*/
// version code in format yymmddb (b = daily build)
#define VERSION 2204071
#define VERSION 2204101
//uncomment this if you have a "my_config.h" file you'd like to use
//#define WLED_USE_MY_CONFIG