diff --git a/wled00/FX.h b/wled00/FX.h
index 745e10f7..40fb0d48 100644
--- a/wled00/FX.h
+++ b/wled00/FX.h
@@ -353,7 +353,8 @@ typedef struct Segment {
bool mirror_y : 1; // 8 : mirrored Y (2D)
bool transpose : 1; // 9 : transposed (2D, swapped X & Y)
uint8_t map1D2D : 3; // 10-12 : mapping for 1D effect on 2D (0-use as strip, 1-expand vertically, 2-circular/arc, 3-rectangular/corner, ...)
- uint8_t soundSim : 3; // 13-15 : 0-7 sound simulation types
+ uint8_t soundSim : 1; // 13 : 0-1 sound simulation types ("soft" & "hard" or "on"/"off")
+ uint8_t set : 2; // 14-15 : 0-3 UI segment sets/groups
};
};
uint8_t grouping, spacing;
@@ -515,7 +516,7 @@ typedef struct Segment {
static uint16_t getUsedSegmentData(void) { return _usedSegmentData; }
static void addUsedSegmentData(int len) { _usedSegmentData += len; }
- void set(uint16_t i1, uint16_t i2, uint8_t grp=1, uint8_t spc=0, uint16_t ofs=UINT16_MAX, uint16_t i1Y=0, uint16_t i2Y=1);
+ void setUp(uint16_t i1, uint16_t i2, uint8_t grp=1, uint8_t spc=0, uint16_t ofs=UINT16_MAX, uint16_t i1Y=0, uint16_t i2Y=1);
bool setColor(uint8_t slot, uint32_t c); //returns true if changed
void setCCT(uint16_t k);
void setOpacity(uint8_t o);
diff --git a/wled00/FX_fcn.cpp b/wled00/FX_fcn.cpp
index d3363cb9..58458e3c 100644
--- a/wled00/FX_fcn.cpp
+++ b/wled00/FX_fcn.cpp
@@ -379,7 +379,7 @@ void Segment::handleTransition() {
}
}
-void Segment::set(uint16_t i1, uint16_t i2, uint8_t grp, uint8_t spc, uint16_t ofs, uint16_t i1Y, uint16_t i2Y) {
+void Segment::setUp(uint16_t i1, uint16_t i2, uint8_t grp, uint8_t spc, uint16_t ofs, uint16_t i1Y, uint16_t i2Y) {
//return if neither bounds nor grouping have changed
bool boundsUnchanged = (start == i1 && stop == i2);
#ifndef WLED_DISABLE_2D
@@ -474,7 +474,7 @@ void Segment::setMode(uint8_t fx, bool loadDefaults) {
sOpt = extractModeDefaults(fx, "o2"); check2 = (sOpt >= 0) ? (bool)sOpt : false;
sOpt = extractModeDefaults(fx, "o3"); check3 = (sOpt >= 0) ? (bool)sOpt : false;
sOpt = extractModeDefaults(fx, "m12"); if (sOpt >= 0) map1D2D = constrain(sOpt, 0, 7);
- sOpt = extractModeDefaults(fx, "si"); if (sOpt >= 0) soundSim = constrain(sOpt, 0, 7);
+ sOpt = extractModeDefaults(fx, "si"); if (sOpt >= 0) soundSim = constrain(sOpt, 0, 1);
sOpt = extractModeDefaults(fx, "rev"); if (sOpt >= 0) reverse = (bool)sOpt;
sOpt = extractModeDefaults(fx, "mi"); if (sOpt >= 0) mirror = (bool)sOpt; // NOTE: setting this option is a risky business
sOpt = extractModeDefaults(fx, "rY"); if (sOpt >= 0) reverse_y = (bool)sOpt;
@@ -750,7 +750,7 @@ uint8_t Segment::differs(Segment& b) const {
if (startY != b.startY) d |= SEG_DIFFERS_BOUNDS;
if (stopY != b.stopY) d |= SEG_DIFFERS_BOUNDS;
- //bit pattern: (msb first) sound:3, mapping:3, transposed, mirrorY, reverseY, [transitional, reset,] paused, mirrored, on, reverse, [selected]
+ //bit pattern: (msb first) set:2, sound:1, mapping:3, transposed, mirrorY, reverseY, [transitional, reset,] paused, mirrored, on, reverse, [selected]
if ((options & 0b1111111110011110U) != (b.options & 0b1111111110011110U)) d |= SEG_DIFFERS_OPT;
if ((options & 0x0001U) != (b.options & 0x0001U)) d |= SEG_DIFFERS_SEL;
for (uint8_t i = 0; i < NUM_COLORS; i++) if (colors[i] != b.colors[i]) d |= SEG_DIFFERS_COL;
@@ -1427,7 +1427,7 @@ Segment& WS2812FX::getSegment(uint8_t id) {
void WS2812FX::setSegment(uint8_t n, uint16_t i1, uint16_t i2, uint8_t grouping, uint8_t spacing, uint16_t offset, uint16_t startY, uint16_t stopY) {
if (n >= _segments.size()) return;
- _segments[n].set(i1, i2, grouping, spacing, offset, startY, stopY);
+ _segments[n].setUp(i1, i2, grouping, spacing, offset, startY, stopY);
}
void WS2812FX::restartRuntime() {
diff --git a/wled00/data/index.css b/wled00/data/index.css
index fb8fad72..640839d5 100644
--- a/wled00/data/index.css
+++ b/wled00/data/index.css
@@ -174,37 +174,62 @@ button {
}
.slider-icon {
- /*transform: translate(3px,3px);*/
position: absolute;
left: 8px;
bottom: 5px;
}
-.e-icon {
- transform: translateY(3px);
-}
-
.sel-icon {
transform: translateX(3px);
}
-.e-icon, .sel-icon, .slider-icon {
+.e-icon, .g-icon, .sel-icon, .slider-icon {
cursor: pointer;
color: var(--c-d);
}
+.g-icon {
+ font-style: normal;
+ position: absolute;
+ top: 8px;
+ right: 8px;
+}
+
+/* pop-up container */
+.pop {
+ position: absolute;
+ display: inline-block;
+ top: 0;
+ right: 0;
+}
+
+/* pop-up content (segment sets) */
+.pop-c {
+ position: absolute;
+ background-color: var(--c-2);
+ border: 1px solid var(--c-8);
+ border-radius: 20px;
+ z-index: 1;
+ top: 3px;
+ right: 35px;
+ padding: 3px 8px 1px;
+ font-size: 24px;
+ line-height: 24px;
+}
+.pop-c span {
+ padding: 2px 6px;
+}
+
.search-icon {
position: absolute;
top: 8px;
left: 12px;
- /*pointer-events: none;*/
width: 24px;
height: 24px;
}
.clear-icon {
position: absolute;
- display: none;
top: 8px;
right: 9px;
cursor: pointer;
@@ -232,14 +257,12 @@ button {
#liveview {
height: 4px;
- display: none;
width: 100%;
border: 0px;
}
#liveview2D {
height: 90%;
- display: none;
width: 90%;
border: 0px;
position: absolute;
@@ -482,13 +505,6 @@ button {
opacity: 1;
}
-#pql, .edit-icon {
- display: none;
-}
-
-.hide {
- display: none !important;
-}
.fade {
visibility: hidden; /* hide it */
opacity: 0; /* make it transparent */
@@ -567,7 +583,6 @@ button {
position: fixed;
top: calc(var(--th) + 5px);
left: 1px;
- display: none;
cursor: pointer;
}
@@ -662,7 +677,9 @@ img {
#wbal .sliderdisplay { background: linear-gradient(90deg, #ff8f1f 0%, #fff 50%, #cbdbff); }
/* wrapper divs hidden by default */
-#rgbwrap, #swrap, #hwrap, #kwrap, #wwrap, #wbal, #qcs-w, #hexw {
+#liveview, #liveview2D, #roverstar, #pql
+#rgbwrap, #swrap, #hwrap, #kwrap, #wwrap, #wbal, #qcs-w, #hexw,
+.clear-icon, .edit-icon, .ptxt {
display: none;
}
@@ -771,8 +788,8 @@ input[type=range]::-moz-range-thumb {
-webkit-transform:translate3d(0,0,0);
backface-visibility: hidden;
transform:translate3d(0,0,0);
- overflow: clip;
- text-overflow: clip;
+ overflow: hidden;
+ text-overflow: ellipsis;
border: 1px solid var(--c-3);
background-color: var(--c-3);
}
@@ -803,6 +820,7 @@ input[type=range]::-moz-range-thumb {
.btn-xs, .btn-pl-del, .btn-pl-add {
width: 42px !important;
height: 42px !important;
+ text-overflow: clip;
}
.btn-xs {
margin: 2px 0 0 0;
@@ -979,8 +997,7 @@ textarea {
}
.ptxt {
- margin: -1px 4px 8px !important;
- display: none;
+ margin: -1px 4px 8px !important;
}
.stxt {
@@ -990,7 +1007,7 @@ textarea {
.segname, .pname {
white-space: nowrap;
text-align: center;
- overflow: clip;
+ overflow: hidden;
text-overflow: ellipsis;
line-height: 24px;
padding: 8px 24px;
@@ -1048,11 +1065,9 @@ textarea {
#csl .xxs {
border: 2px solid var(--c-d) !important;
- /*box-shadow: 0 0 0 2px var(--c-d);*/
}
#csl .xxs-w {
border-width: 5px !important;
- /*box-shadow: 0 0 0 5px var(--c-d);*/
}
.qcs, #namelabel { /* text shadow for name to be legible on grey backround */
@@ -1066,7 +1081,6 @@ textarea {
.pwr {
color: var(--c-6);
- transform: translate(1px, 1px);
cursor: pointer;
}
@@ -1081,18 +1095,13 @@ textarea {
}
.frz {
- left: 32px;
+ left: 10px;
position: absolute;
- top: -3px;
+ top: 8px;
cursor: pointer;
- padding: 8px;
z-index: 1;
}
-.expanded .frz {
- display: none;
-}
-
/* radiobuttons and checkmarks */
.check, .radio {
display: block;
@@ -1234,7 +1243,6 @@ TD .checkmark, TD .radiomark {
.lbl-s {
display: inline-block;
- /* margin: 10px 4px 0 0; */
margin-top: 6px;
font-size: 13px;
width: 48%;
@@ -1284,10 +1292,6 @@ TD .checkmark, TD .radiomark {
background-color: var(--c-3);
}
-/*.selected .radiomark {
- border: 1px solid var(--c-3);
-}*/
-
/* selected list item */
.lstI.selected {
top: 0;
@@ -1405,7 +1409,7 @@ TD .checkmark, TD .radiomark {
.expanded {
display: inline-block !important;
}
-.expanded .segin.hide, .expanded .presin.hide, .expanded .sbs.hide {
+.hide, .expanded .segin.hide, .expanded .presin.hide, .expanded .sbs.hide, .expanded .frz, .expanded .g-icon {
display: none !important;
}
@@ -1541,11 +1545,7 @@ TD .checkmark, TD .radiomark {
left: 12px;
}
.segname {
- padding: 8px 16px;
- max-width: 140px;
- }
- .segname, .pname {
- max-width: 134px;
+ max-width: calc(100% - 110px);
}
.segt TD {
padding: 0 !important;
diff --git a/wled00/data/index.js b/wled00/data/index.js
index 999301a5..2821349d 100644
--- a/wled00/data/index.js
+++ b/wled00/data/index.js
@@ -702,6 +702,14 @@ function populateSegments(s)
let sg = gId(`seg${i}`);
let exp = sg ? (sg.classList.contains('expanded') || (i===0 && cfg.comp.segexp)) : false;
+ // segment set icon color
+ let cG = "var(--c-b)";
+ switch (inst.set) {
+ case 1: cG = "var(--c-r)"; break;
+ case 2: cG = "var(--c-g)"; break;
+ case 3: cG = "var(--c-l)"; break;
+ }
+
let segp = `
`+
`
`+
`
`;
- cn += `
`+
+ cn += `
`+
`
`+
- `
${inst.frz ? (li.live && li.liveseg==i?'e410':'e0e8') : 'e325'};`+
`
`+
+ `
${inst.frz ? (li.live && li.liveseg==i?'e410':'e0e8') : 'e325'};`+
(inst.n ? inst.n : "Segment "+i) +
+ `
`+
+ `
ɸ${String.fromCharCode(inst.set+"A".charCodeAt(0))};`+
+ `
➊➋➌➍
`+
+ `
`+
`
`+
`
`+
`
`+
@@ -752,16 +763,16 @@ function populateSegments(s)
`
`+
`
`+
`
`+
- (!(isM&&staX
1&&stoX-staX>1 ? map2D : '') +
+ (!isMSeg ? rvXck : '') +
+ (isMSeg&&stoY-staY>1&&stoX-staX>1 ? map2D : '') +
(s.AudioReactive && s.AudioReactive.on ? "" : sndSim) +
`