diff --git a/wled00/FX.h b/wled00/FX.h index 3bb3300c..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; diff --git a/wled00/FX_fcn.cpp b/wled00/FX_fcn.cpp index 624ce4ec..fe26e029 100644 --- a/wled00/FX_fcn.cpp +++ b/wled00/FX_fcn.cpp @@ -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; 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 6aa61b6e..ccdbab96 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 = `
`+ ``+ `
`+ @@ -713,10 +721,11 @@ function populateSegments(s) let stoX = inst.stop; let staY = inst.startY; let stoY = inst.stopY; + let isMSeg = isM && staXReverse ${isM?'':'direction'}`; let miXck = ``; let rvYck = "", miYck =""; - if (isM && staXReverse`; miYck = ``; } @@ -732,18 +741,20 @@ function populateSegments(s) `
`+ `
`; - cn += `
`+ + cn += `
`+ ``+ - `&#x${inst.frz ? (li.live && li.liveseg==i?'e410':'e0e8') : 'e325'};`+ `
`+ + `&#x${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'+ + (isMSeg ? ''+ ''+ ''+ ''+ @@ -775,15 +786,15 @@ function populateSegments(s) ``+ ``+ ``+ - ``+ + ``+ ``+ `
${isM&&staX`+ - `${isM&&staX`+ - `${isM&&staX`+ + `${isMSeg?'Start X':'Start LED'}${isMSeg?(cfg.comp.seglen?"Width":"Stop X"):(cfg.comp.seglen?"LED count":"Stop LED")}${isMSeg?'':'Offset'}
${isM&&staX'+rvXck:''}${isMSeg?miXck+'
'+rvXck:''}
Start Y'+(cfg.comp.seglen?'Height':'Stop Y')+'
Start Y'+(cfg.comp.seglen?'Height':'Stop Y')+'
`+ `
`+ - (!(isM&&staX1&&stoX-staX>1 ? map2D : '') + + (!isMSeg ? rvXck : '') + + (isMSeg&&stoY-staY>1&&stoX-staX>1 ? map2D : '') + (s.AudioReactive && s.AudioReactive.on ? "" : sndSim) + `