Multiple fixes:

- ability so select mainseg (UI)
- changed preset sort (UI)
- IR40 white +/- fix
- IR repeatable actions fix
- minor UI CSS change
- removed unnecessary color functions
This commit is contained in:
Blaz Kristan 2022-02-27 22:19:05 +01:00
parent fc845dc936
commit 4ce557a829
6 changed files with 2320 additions and 2302 deletions

View File

@ -10,33 +10,6 @@ void setRandomColor(byte* rgb)
colorHStoRGB(lastRandomIndex*256,255,rgb); colorHStoRGB(lastRandomIndex*256,255,rgb);
} }
void colorFromUint32(uint32_t in, bool secondary)
{
byte *_col = secondary ? colSec : col;
_col[0] = R(in);
_col[1] = G(in);
_col[2] = B(in);
_col[3] = W(in);
}
//load a color without affecting the white channel
void colorFromUint24(uint32_t in, bool secondary)
{
byte *_col = secondary ? colSec : col;
_col[0] = R(in);
_col[1] = G(in);
_col[2] = B(in);
}
//relatively change white brightness, minumum A=5
void relativeChangeWhite(int8_t amount, byte lowerBoundary)
{
int16_t new_val = (int16_t) col[3] + amount;
if (new_val > 0xFF) new_val = 0xFF;
else if (new_val < lowerBoundary) new_val = lowerBoundary;
col[3] = new_val;
}
void colorHStoRGB(uint16_t hue, byte sat, byte* rgb) //hue, sat to rgb void colorHStoRGB(uint16_t hue, byte sat, byte* rgb) //hue, sat to rgb
{ {
float h = ((float)hue)/65535.0; float h = ((float)hue)/65535.0;

View File

@ -760,11 +760,12 @@ input[type=number]::-webkit-outer-spin-button {
margin: 3px 0 6px 0 !important; margin: 3px 0 6px 0 !important;
} }
.segname { .pname, .plname, .segname {
position: absolute; position: absolute;
top: 0px;
left: 50%; left: 50%;
padding: 9px 0; text-align: center;
overflow: hidden;
text-overflow: clip;
transform: translateX(-50%); transform: translateX(-50%);
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
@ -776,12 +777,19 @@ input[type=number]::-webkit-outer-spin-button {
text-overflow: clip; text-overflow: clip;
} }
.pname { .segname {
top: 2px;
padding: 9px 0;
}
.pname, .plname {
width: 208px; width: 208px;
padding: 8px 0; padding: 8px 0;
text-align: center; }
overflow: hidden; .pname {
text-overflow: clip; top: 2px;
}
.plname {
top:0;
} }
.pid { .pid {
@ -824,10 +832,12 @@ input[type=number]::-webkit-outer-spin-button {
} }
.cnf-s { .cnf-s {
position: absolute; /*position: absolute;
bottom: 100px; bottom: 100px;
right: 23px; right: 23px;*/
padding: 7px 22px; padding: 9px 22px 7px;
margin: 0;
display: inline;
} }
.pwr { .pwr {
@ -889,19 +899,18 @@ input[type=number]::-webkit-outer-spin-button {
.checkmark, .radiomark { .checkmark, .radiomark {
position: absolute; position: absolute;
bottom: 0; top: 6px;
left: 0; left: 0;
height: 25px; height: 24px;
width: 25px; width: 24px;
background-color: var(--c-3); background-color: var(--c-4);
border-radius: 10px; border-radius: 10px;
/*border: 1px solid var(--c-2);*/
} }
.radiomark { .radiomark {
height: 24px;
width: 24px;
border-radius: 50%; border-radius: 50%;
background-color: transparent; background-color: transparent;
} }
.schk { .schk {
@ -925,11 +934,11 @@ input[type=number]::-webkit-outer-spin-button {
.check:hover input ~ .checkmark { .check:hover input ~ .checkmark {
background-color: var(--c-4); background-color: var(--c-4);
} }
/*
.check input:checked ~ .checkmark { .check input:checked ~ .checkmark {
background-color: var(--c-6); background-color: var(--c-6);
} }
*/
.checkmark:after, .radiomark:after { .checkmark:after, .radiomark:after {
content: ""; content: "";
position: absolute; position: absolute;
@ -942,7 +951,7 @@ input[type=number]::-webkit-outer-spin-button {
.check .checkmark:after { .check .checkmark:after {
left: 9px; left: 9px;
top: 5px; top: 4px;
width: 5px; width: 5px;
height: 10px; height: 10px;
border: solid var(--c-f); border: solid var(--c-f);
@ -953,11 +962,11 @@ input[type=number]::-webkit-outer-spin-button {
} }
.radio .radiomark:after { .radio .radiomark:after {
width: 12px; width: 14px;
height: 12px; height: 14px;
top: 50%; top: 50%;
left: 50%; left: 50%;
margin: -6px; margin: -7px;
border-radius: 50%; border-radius: 50%;
background: var(--c-f); background: var(--c-f);
} }
@ -972,7 +981,7 @@ input[type=number]::-webkit-outer-spin-button {
margin-bottom: 5px; margin-bottom: 5px;
} }
.seg { .seg, .pres {
position: relative; position: relative;
display: inline-block; display: inline-block;
padding: 8px; padding: 8px;
@ -988,6 +997,13 @@ input[type=number]::-webkit-outer-spin-button {
filter: brightness(1); filter: brightness(1);
} }
.selected {
background-color: var(--c-4);
}
.selected .checkmark, .selected .radiokmark {
background-color: var(--c-6);
}
.list { .list {
position: relative; position: relative;
transition: background-color 0.5s; transition: background-color 0.5s;

View File

@ -370,7 +370,7 @@ function presetError(empty)
} catch (e) { } catch (e) {
} }
var cn = `<div class="seg c">`; var cn = `<div class="pres c">`;
if (empty) if (empty)
cn += `You have no presets yet!`; cn += `You have no presets yet!`;
else else
@ -479,9 +479,9 @@ function populatePresets(fromls)
if (qll) pQL.push([i, qll]); if (qll) pQL.push([i, qll]);
is.push(i); is.push(i);
cn += `<div class="seg pres" id="p${i}o">`; cn += `<div class="pres" id="p${i}o">`;
if (cfg.comp.pid) cn += `<div class="pid">${i}</div>`; if (cfg.comp.pid) cn += `<div class="pid">${i}</div>`;
cn += `<div class="segname pname" onclick="setPreset(${i})">${isPlaylist(i)?"<i class='icons btn-icon'>&#xe139;</i>":""}${pName(i)}</div> cn += `<div class="${isPlaylist(i)?'plname':'pname'}" onclick="setPreset(${i})">${isPlaylist(i)?"<i class='icons btn-icon'>&#xe139;</i>":""}${pName(i)}</div>
<i class="icons e-icon flr ${expanded[i+100] ? "exp":""}" id="sege${i+100}" onclick="expand(${i+100})">&#xe395;</i> <i class="icons e-icon flr ${expanded[i+100] ? "exp":""}" id="sege${i+100}" onclick="expand(${i+100})">&#xe395;</i>
<div class="segin" id="seg${i+100}"></div> <div class="segin" id="seg${i+100}"></div>
</div><br>`; </div><br>`;
@ -560,7 +560,7 @@ function populateSegments(s)
if (i == lowestUnused) lowestUnused = i+1; if (i == lowestUnused) lowestUnused = i+1;
if (i > lSeg) lSeg = i; if (i > lSeg) lSeg = i;
cn += `<div class="seg"> cn += `<div class="seg ${i==s.mainseg ? 'selected' : ''}">
<label class="check schkl"> <label class="check schkl">
&nbsp; &nbsp;
<input type="checkbox" id="seg${i}sel" onchange="selSeg(${i})" ${inst.sel ? "checked":""}> <input type="checkbox" id="seg${i}sel" onchange="selSeg(${i})" ${inst.sel ? "checked":""}>
@ -904,9 +904,10 @@ function updateLen(s)
//updates background color of currently selected preset //updates background color of currently selected preset
function updatePA() function updatePA()
{ {
var ps = d.getElementsByClassName("seg"); //reset all preset buttons var ps = d.getElementsByClassName("pres"); //reset all preset buttons
for (let i = 0; i < ps.length; i++) { for (let i = 0; i < ps.length; i++) {
ps[i].style.backgroundColor = "var(--c-2)"; //ps[i].style.backgroundColor = "var(--c-2)";
ps[i].classList.remove("selected");
} }
ps = d.getElementsByClassName("psts"); //reset all quick selectors ps = d.getElementsByClassName("psts"); //reset all quick selectors
for (let i = 0; i < ps.length; i++) { for (let i = 0; i < ps.length; i++) {
@ -915,9 +916,12 @@ function updatePA()
if (currentPreset > 0) { if (currentPreset > 0) {
var acv = d.getElementById(`p${currentPreset}o`); var acv = d.getElementById(`p${currentPreset}o`);
if (acv && !expanded[currentPreset+100]) if (acv && !expanded[currentPreset+100])
acv.style.background = "var(--c-6)"; //highlight current preset //acv.style.background = "var(--c-6)"; //highlight current preset
acv.classList.add("selected");
acv = d.getElementById(`p${currentPreset}qlb`); acv = d.getElementById(`p${currentPreset}qlb`);
if (acv) acv.style.background = "var(--c-6)"; //highlight quick selector if (acv)
//acv.style.background = "var(--c-6)"; //highlight quick selector
acv.classList.add("selected");
} }
} }
@ -952,7 +956,14 @@ function compare(a, b) {
} }
function cmpP(a, b) { function cmpP(a, b) {
if (!a[1].n) return (a[0] > b[0]); if (!a[1].n) return (a[0] > b[0]);
return a[1].n.localeCompare(b[1].n,undefined, {numeric: true}); //return a[1].n.localeCompare(b[1].n,undefined, {numeric: true});
// sort playlists first, followed by presets with characters and last presets with special 1st character
const c = a[1].n.charCodeAt(0);
const d = b[1].n.charCodeAt(0);
if ((c>47 && c<58) || (c>64 && c<91) || (c>96 && c<123) || c>255) x = '='; else x = '>';
if ((d>47 && d<58) || (d>64 && d<91) || (d>96 && d<123) || d>255) y = '='; else y = '>';
const n = (a[1].playlist ? '<' : x) + a[1].n;
return n.localeCompare((b[1].playlist ? '<' : y) + b[1].n, undefined, {numeric: true});
} }
//forces a WebSockets reconnect if timeout (error toast), or successful HTTP response to JSON request //forces a WebSockets reconnect if timeout (error toast), or successful HTTP response to JSON request
@ -1446,8 +1457,8 @@ ${(i>0)? ('<div class="h">ID ' +i+ '</div>'):""}`;
} }
function makePUtil() { function makePUtil() {
d.getElementById('putil').innerHTML = `<div class="seg pres"> d.getElementById('putil').innerHTML = `<div class="pres">
<div class="segname newseg"> <div class="pname newseg">
New preset</div> New preset</div>
<div class="segin expanded"> <div class="segin expanded">
${makeP(0)}</div></div>`; ${makeP(0)}</div></div>`;
@ -1473,8 +1484,8 @@ function makePlUtil() {
showToast("Please make a preset first!"); return; showToast("Please make a preset first!"); return;
} }
if (plJson[0].transition[0] < 0) plJson[0].transition[0] = tr; if (plJson[0].transition[0] < 0) plJson[0].transition[0] = tr;
d.getElementById('putil').innerHTML = `<div class="seg pres"> d.getElementById('putil').innerHTML = `<div class="pres">
<div class="segname newseg"> <div class="pname newseg">
New playlist</div> New playlist</div>
<div class="segin expanded" id="seg100"> <div class="segin expanded" id="seg100">
${makeP(0,true)}</div></div>`; ${makeP(0,true)}</div></div>`;
@ -1503,9 +1514,8 @@ function tglSegn(s)
function selSegEx(s) function selSegEx(s)
{ {
var obj = {"seg":[]}; var obj = {"seg":[]};
for (let i=0; i<=lSeg; i++){ for (let i=0; i<=lSeg; i++) obj.seg.push({"id":i,"sel":(i==s)});
obj.seg.push({"sel":(i==s)?true:false}); obj.mainseg = s;
}
requestJson(obj); requestJson(obj);
} }

View File

@ -58,10 +58,7 @@ bool getJsonValue(const JsonVariant& element, DestType& destination, const Defau
//colors.cpp //colors.cpp
void colorFromUint32(uint32_t in, bool secondary = false);
void colorFromUint24(uint32_t in, bool secondary = false);
inline uint32_t colorFromRgbw(byte* rgbw) { return uint32_t((byte(rgbw[3]) << 24) | (byte(rgbw[0]) << 16) | (byte(rgbw[1]) << 8) | (byte(rgbw[2]))); } inline uint32_t colorFromRgbw(byte* rgbw) { return uint32_t((byte(rgbw[3]) << 24) | (byte(rgbw[0]) << 16) | (byte(rgbw[1]) << 8) | (byte(rgbw[2]))); }
void relativeChangeWhite(int8_t amount, byte lowerBoundary = 0);
void colorHStoRGB(uint16_t hue, byte sat, byte* rgb); //hue, sat to rgb void colorHStoRGB(uint16_t hue, byte sat, byte* rgb); //hue, sat to rgb
void colorKtoRGB(uint16_t kelvin, byte* rgb); void colorKtoRGB(uint16_t kelvin, byte* rgb);
void colorCTtoRGB(uint16_t mired, byte* rgb); //white spectrum to rgb void colorCTtoRGB(uint16_t mired, byte* rgb); //white spectrum to rgb

File diff suppressed because it is too large Load Diff

View File

@ -251,17 +251,27 @@ void changeColor(uint32_t c, int16_t cct=-1)
stateChanged = true; stateChanged = true;
} }
void changeWhite(int8_t amount, int16_t cct=-1)
{
WS2812FX::Segment& seg = irApplyToAllSelected ? strip.getFirstSelectedSeg() : strip.getMainSegment();
byte r = R(seg.colors[0]);
byte g = G(seg.colors[0]);
byte b = B(seg.colors[0]);
byte w = relativeChange(W(seg.colors[0]), amount, 5);
changeColor(RGBW32(r, g, b, w), cct);
}
void decodeIR(uint32_t code) void decodeIR(uint32_t code)
{ {
if (code == 0xFFFFFFFF) //repeated code, continue brightness up/down if (code == 0xFFFFFFFF) {
{ //repeated code, continue brightness up/down
irTimesRepeated++; irTimesRepeated++;
applyRepeatActions(); applyRepeatActions();
return; return;
} }
lastValidCode = 0; irTimesRepeated = 0; lastValidCode = 0; irTimesRepeated = 0;
//if (decodeIRCustom(code)) return;
lastRepeatableAction = ACTION_NONE; lastRepeatableAction = ACTION_NONE;
if (irEnabled == 8) { // any remote configurable with ir.json file if (irEnabled == 8) { // any remote configurable with ir.json file
decodeIRJson(code); decodeIRJson(code);
stateUpdated(CALL_MODE_BUTTON); stateUpdated(CALL_MODE_BUTTON);
@ -271,25 +281,22 @@ void decodeIR(uint32_t code)
switch (irEnabled) { switch (irEnabled) {
case 1: case 1:
if (code > 0xF80000) { if (code > 0xF80000) decodeIR24OLD(code); // white 24-key remote (old) - it sends 0xFF0000 values
decodeIR24OLD(code); // white 24-key remote (old) - it sends 0xFF0000 values else decodeIR24(code); // 24-key remote - 0xF70000 to 0xF80000
} else {
decodeIR24(code); // 24-key remote - 0xF70000 to 0xF80000
}
break; break;
case 2: decodeIR24CT(code); break; // white 24-key remote with CW, WW, CT+ and CT- keys case 2: decodeIR24CT(code); break; // white 24-key remote with CW, WW, CT+ and CT- keys
case 3: decodeIR40(code); break; // blue 40-key remote with 25%, 50%, 75% and 100% keys case 3: decodeIR40(code); break; // blue 40-key remote with 25%, 50%, 75% and 100% keys
case 4: decodeIR44(code); break; // white 44-key remote with color-up/down keys and DIY1 to 6 keys case 4: decodeIR44(code); break; // white 44-key remote with color-up/down keys and DIY1 to 6 keys
case 5: decodeIR21(code); break; // white 21-key remote case 5: decodeIR21(code); break; // white 21-key remote
case 6: decodeIR6(code); break; // black 6-key learning remote defaults: "CH" controls brightness, case 6: decodeIR6(code); break; // black 6-key learning remote defaults: "CH" controls brightness,
// "VOL +" controls effect, "VOL -" controls colour/palette, "MUTE" // "VOL +" controls effect, "VOL -" controls colour/palette, "MUTE"
// sets bright plain white // sets bright plain white
case 7: decodeIR9(code); break; case 7: decodeIR9(code); break;
//case 8: return; // ir.json file, handled above switch statement //case 8: return; // ir.json file, handled above switch statement
} }
if (nightlightActive && bri == 0) nightlightActive = false; if (nightlightActive && bri == 0) nightlightActive = false;
colorUpdated(CALL_MODE_BUTTON); //for notifier, IR is considered a button input stateUpdated(CALL_MODE_BUTTON); //for notifier, IR is considered a button input
} }
void applyRepeatActions() void applyRepeatActions()
@ -298,24 +305,24 @@ void applyRepeatActions()
decodeIRJson(lastValidCode); decodeIRJson(lastValidCode);
return; return;
} else switch (lastRepeatableAction) { } else switch (lastRepeatableAction) {
case ACTION_BRIGHT_UP : incBrightness(); colorUpdated(CALL_MODE_BUTTON); return; case ACTION_BRIGHT_UP : incBrightness(); stateUpdated(CALL_MODE_BUTTON); return;
case ACTION_BRIGHT_DOWN : decBrightness(); colorUpdated(CALL_MODE_BUTTON); return; case ACTION_BRIGHT_DOWN : decBrightness(); stateUpdated(CALL_MODE_BUTTON); return;
case ACTION_SPEED_UP : changeEffectSpeed(lastRepeatableValue); colorUpdated(CALL_MODE_BUTTON); return; case ACTION_SPEED_UP : changeEffectSpeed(lastRepeatableValue); stateUpdated(CALL_MODE_BUTTON); return;
case ACTION_SPEED_DOWN : changeEffectSpeed(lastRepeatableValue); colorUpdated(CALL_MODE_BUTTON); return; case ACTION_SPEED_DOWN : changeEffectSpeed(lastRepeatableValue); stateUpdated(CALL_MODE_BUTTON); return;
case ACTION_INTENSITY_UP : changeEffectIntensity(lastRepeatableValue); colorUpdated(CALL_MODE_BUTTON); return; case ACTION_INTENSITY_UP : changeEffectIntensity(lastRepeatableValue); stateUpdated(CALL_MODE_BUTTON); return;
case ACTION_INTENSITY_DOWN : changeEffectIntensity(lastRepeatableValue); colorUpdated(CALL_MODE_BUTTON); return; case ACTION_INTENSITY_DOWN : changeEffectIntensity(lastRepeatableValue); stateUpdated(CALL_MODE_BUTTON); return;
default: break; default: break;
} }
if (lastValidCode == IR40_WPLUS) { if (lastValidCode == IR40_WPLUS) {
relativeChangeWhite(10); changeWhite(10);
colorUpdated(CALL_MODE_BUTTON); stateUpdated(CALL_MODE_BUTTON);
} else if (lastValidCode == IR40_WMINUS) { } else if (lastValidCode == IR40_WMINUS) {
relativeChangeWhite(-10, 5); changeWhite(-10);
colorUpdated(CALL_MODE_BUTTON); stateUpdated(CALL_MODE_BUTTON);
} else if ((lastValidCode == IR24_ON || lastValidCode == IR40_ON) && irTimesRepeated > 7 ) { } else if ((lastValidCode == IR24_ON || lastValidCode == IR40_ON) && irTimesRepeated > 7 ) {
nightlightActive = true; nightlightActive = true;
nightlightStartTime = millis(); nightlightStartTime = millis();
colorUpdated(CALL_MODE_BUTTON); stateUpdated(CALL_MODE_BUTTON);
} }
} }
@ -417,6 +424,11 @@ void decodeIR24CT(uint32_t code)
void decodeIR40(uint32_t code) void decodeIR40(uint32_t code)
{ {
WS2812FX::Segment& seg = irApplyToAllSelected ? strip.getFirstSelectedSeg() : strip.getMainSegment();
byte r = R(seg.colors[0]);
byte g = G(seg.colors[0]);
byte b = B(seg.colors[0]);
byte w = W(seg.colors[0]);
switch (code) { switch (code) {
case IR40_BPLUS : incBrightness(); break; case IR40_BPLUS : incBrightness(); break;
case IR40_BMINUS : decBrightness(); break; case IR40_BMINUS : decBrightness(); break;
@ -442,10 +454,10 @@ void decodeIR40(uint32_t code)
case IR40_WHITE : changeColor(COLOR_NEUTRALWHITE, 127); changeEffect(FX_MODE_STATIC); break; case IR40_WHITE : changeColor(COLOR_NEUTRALWHITE, 127); changeEffect(FX_MODE_STATIC); break;
case IR40_COLDWHITE : changeColor(COLOR_COLDWHITE, 191); changeEffect(FX_MODE_STATIC); break; case IR40_COLDWHITE : changeColor(COLOR_COLDWHITE, 191); changeEffect(FX_MODE_STATIC); break;
case IR40_COLDWHITE2 : changeColor(COLOR_COLDWHITE2, 255); changeEffect(FX_MODE_STATIC); break; case IR40_COLDWHITE2 : changeColor(COLOR_COLDWHITE2, 255); changeEffect(FX_MODE_STATIC); break;
case IR40_WPLUS : relativeChangeWhite(10); break; case IR40_WPLUS : changeWhite(10); break;
case IR40_WMINUS : relativeChangeWhite(-10, 5); break; case IR40_WMINUS : changeWhite(-10); break;
case IR40_WOFF : whiteLast = col[3]; col[3] = 0; break; case IR40_WOFF : if (w) whiteLast = w; changeColor(RGBW32(r, g, b, 0)); break;
case IR40_WON : col[3] = whiteLast; break; case IR40_WON : changeColor(RGBW32(r, g, b, whiteLast)); break;
case IR40_W25 : bri = 63; break; case IR40_W25 : bri = 63; break;
case IR40_W50 : bri = 127; break; case IR40_W50 : bri = 127; break;
case IR40_W75 : bri = 191; break; case IR40_W75 : bri = 191; break;