New endpoint for UI slider control (WLED-SR ext.)
Minor UX optimizations.
This commit is contained in:
Blaz Kristan
parent
7871e868a9
commit
be8db602b8
37
wled00/FX.h
37
wled00/FX.h
@ -932,7 +932,7 @@ class WS2812FX {
|
||||
const char JSON_mode_names[] PROGMEM = R"=====([
|
||||
"Solid",
|
||||
"Blink@;!;!",
|
||||
"Breathe@!,;,!;!",
|
||||
"Breathe@!,;!,!;!",
|
||||
"Wipe",
|
||||
"Wipe Random",
|
||||
"Random Colors",
|
||||
@ -940,12 +940,13 @@ const char JSON_mode_names[] PROGMEM = R"=====([
|
||||
"Dynamic",
|
||||
"Colorloop",
|
||||
"Rainbow",
|
||||
"Scan@!,# of dots;,!,;!",
|
||||
"Scan Dual@!,# of dots;,!,;!",
|
||||
"Fade","Theater",
|
||||
"Scan@!,# of dots;!,!,;!",
|
||||
"Scan Dual@!,# of dots;!,!,;!",
|
||||
"Fade",
|
||||
"Theater",
|
||||
"Theater Rainbow",
|
||||
"Running@!,Wave width;!,!,;!",
|
||||
"Saw@!,Width;Fx,Bg,;!",
|
||||
"Saw@!,Width;!,!,;!",
|
||||
"Twinkle",
|
||||
"Dissolve",
|
||||
"Dissolve Rnd",
|
||||
@ -966,25 +967,25 @@ const char JSON_mode_names[] PROGMEM = R"=====([
|
||||
"Colorful",
|
||||
"Traffic Light",
|
||||
"Sweep Random",
|
||||
"Running 2@!,Width;;!",
|
||||
"Running 2@!,Width;!,!,;!",
|
||||
"Aurora",
|
||||
"Stream",
|
||||
"Scanner",
|
||||
"Lighthouse",
|
||||
"Fireworks",
|
||||
"Rain",
|
||||
"Tetrix@!,Width;Fx,Bg,;!",
|
||||
"Tetrix@!,Width;!,!,;!",
|
||||
"Fire Flicker",
|
||||
"Gradient",
|
||||
"Loading",
|
||||
"Police@!,Width;;",
|
||||
"Police All@!,Width;;",
|
||||
"Two Dots@!,Dot size;,,Bg;!",
|
||||
"Two Areas@!,Size;,,Bg;!",
|
||||
"Two Dots@!,Dot size;1,2,Bg;!",
|
||||
"Two Areas@!,Size;1,2,Bg;!",
|
||||
"Running Dual",
|
||||
"Halloween",
|
||||
"Tri Chase@!,Size;;",
|
||||
"Tri Wipe",
|
||||
"Tri Chase@!,Size;1,2,3;",
|
||||
"Tri Wipe@!,Width;1,2,3;",
|
||||
"Tri Fade",
|
||||
"Lightning",
|
||||
"ICU",
|
||||
@ -993,9 +994,9 @@ const char JSON_mode_names[] PROGMEM = R"=====([
|
||||
"Stream 2",
|
||||
"Oscillate",
|
||||
"Pride 2015",
|
||||
"Juggle@!,Trail;Fx,Bg,;!",
|
||||
"Juggle@!,Trail;!,!,;!",
|
||||
"Palette@!,;;!",
|
||||
"Fire 2012@Spark rate,Decay;!;!",
|
||||
"Fire 2012@Spark rate,Decay;;!",
|
||||
"Colorwaves",
|
||||
"Bpm",
|
||||
"Fill Noise",
|
||||
@ -1017,10 +1018,10 @@ const char JSON_mode_names[] PROGMEM = R"=====([
|
||||
"Spots",
|
||||
"Spots Fade",
|
||||
"Glitter",
|
||||
"Candle@Flicker rate,Flicker intensity;Fx,Bg,;",
|
||||
"Candle@Flicker rate,Flicker intensity;!,!,;",
|
||||
"Fireworks Starburst",
|
||||
"Fireworks 1D@Gravity,Firing side;;!",
|
||||
"Bouncing Balls@Gravity,# of balls;Fx,Bg,;!",
|
||||
"Bouncing Balls@Gravity,# of balls;!,!,;!",
|
||||
"Sinelon",
|
||||
"Sinelon Dual",
|
||||
"Sinelon Rainbow",
|
||||
@ -1031,11 +1032,11 @@ const char JSON_mode_names[] PROGMEM = R"=====([
|
||||
"Ripple Rainbow",
|
||||
"Heartbeat",
|
||||
"Pacifica",
|
||||
"Candle Multi@Flicker rate,Flicker intensity;Fx,Bg,;",
|
||||
"Candle Multi@Flicker rate,Flicker intensity;!,!,;",
|
||||
"Solid Glitter",
|
||||
"Sunrise@Time [min],;!;",
|
||||
"Sunrise@Time [min],;;",
|
||||
"Phased",
|
||||
"Twinkleup@!,Intensity;,!;!",
|
||||
"Twinkleup@!,Intensity;!,!,;!",
|
||||
"Noise Pal",
|
||||
"Sine",
|
||||
"Phased Noise",
|
||||
|
||||
@ -165,7 +165,7 @@ button {
|
||||
}
|
||||
|
||||
.slider-icon {
|
||||
transform: translate(6px,3px);
|
||||
transform: translate(3px,3px);
|
||||
}
|
||||
|
||||
.e-icon {
|
||||
|
||||
@ -20,6 +20,7 @@ var tr = 7;
|
||||
var d = document;
|
||||
const ranges = RangeTouch.setup('input[type="range"]', {});
|
||||
var palettesData;
|
||||
var fxdata = [];
|
||||
var pJson = {}, eJson = {}, lJson = {};
|
||||
var pN = "", pI = 0, pNum = 0;
|
||||
var pmt = 1, pmtLS = 0, pmtLast = 0;
|
||||
@ -252,6 +253,7 @@ function onLoad()
|
||||
loadPalettes(()=>{
|
||||
loadPalettesData(redrawPalPrev);
|
||||
loadFX(()=>{
|
||||
loadFXData();
|
||||
loadPresets(()=>{
|
||||
if (isObj(lastinfo) && isEmpty(lastinfo)) loadInfo(requestJson); // if not filled by WS
|
||||
});
|
||||
@ -508,6 +510,34 @@ function loadFX(callback = null)
|
||||
});
|
||||
}
|
||||
|
||||
function loadFXData(callback = null)
|
||||
{
|
||||
var url = (loc?`http://${locip}`:'') + '/json/fxdata';
|
||||
|
||||
fetch(url, {
|
||||
method: 'get'
|
||||
})
|
||||
.then(res => {
|
||||
if (!res.ok) showErrorToast();
|
||||
return res.json();
|
||||
})
|
||||
.then(json => {
|
||||
clearErrorToast();
|
||||
fxdata = json||[];
|
||||
// add default value for Solid
|
||||
fxdata.shift();
|
||||
fxdata.unshift("@;!;");
|
||||
})
|
||||
.catch(function (error) {
|
||||
fxdata = [];
|
||||
showToast(error, true);
|
||||
})
|
||||
.finally(()=>{
|
||||
if (callback) callback();
|
||||
updateUI();
|
||||
});
|
||||
}
|
||||
|
||||
var pQL = [];
|
||||
function populateQL()
|
||||
{
|
||||
@ -1076,10 +1106,9 @@ function updateSelectedFx()
|
||||
var selectedEffect = parent.querySelector(`.lstI[data-id="${selectedFx}"]`);
|
||||
if (selectedEffect) {
|
||||
selectedEffect.classList.add('selected');
|
||||
|
||||
// WLEDSR: extract the Slider and color control string from the HTML element and set it.
|
||||
sliderControl = selectedEffect.dataset.opt.replace(/&/g, "&");
|
||||
setSliderAndColorControl(selectedFx, sliderControl);
|
||||
//sliderControl = selectedEffect.dataset.opt.replace(/&/g, "&");
|
||||
setSliderAndColorControl(selectedFx /*, sliderControl*/);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1224,11 +1253,12 @@ function readState(s,command=false)
|
||||
}
|
||||
|
||||
// WLEDSR: control HTML elements for Slider and Color Control
|
||||
function setSliderAndColorControl(idx, extra)
|
||||
function setSliderAndColorControl(idx/*, extra*/)
|
||||
{
|
||||
if (!(Array.isArray(fxdata) && fxdata.length>idx)) return;
|
||||
var topPosition = 0;
|
||||
var controlDefined = (extra.substr(0,1) == "@")?true:false;
|
||||
extra = extra.substr(1);
|
||||
var controlDefined = (fxdata[idx].substr(0,1) == "@")?true:false;
|
||||
var extra = fxdata[idx].substr(1);
|
||||
var extras = (extra == '')?[]:extra.split(";");
|
||||
var slOnOff = (extras.length==0 || extras[0]=='')?[]:extras[0].split(",");
|
||||
var coOnOff = (extras.length<2 || extras[1]=='')?[]:extras[1].split(",");
|
||||
@ -1293,7 +1323,7 @@ function setSliderAndColorControl(idx, extra)
|
||||
else if (i==0) btn.innerHTML = "Fx";
|
||||
else if (i==1) btn.innerHTML = "Bg";
|
||||
else btn.innerHTML = "Cs";
|
||||
} else if (!controlDefined || paOnOff.length>0) { // if no controls or palette then all buttons should be shown for color 1..3 palettes
|
||||
} else if (!controlDefined /*|| paOnOff.length>0*/) { // if no controls then all buttons should be shown for color 1..3
|
||||
btn.style.display = "inline";
|
||||
btn.innerHTML = `${i+1}`;
|
||||
} else {
|
||||
|
||||
3955
wled00/html_ui.h
3955
wled00/html_ui.h
File diff suppressed because it is too large
Load Diff
@ -813,9 +813,9 @@ void serializeNodes(JsonObject root)
|
||||
}
|
||||
}
|
||||
|
||||
void serializeModeData(JsonObject root)
|
||||
void serializeModeData(JsonArray fxdata)
|
||||
{
|
||||
JsonArray fxdata = root.createNestedArray("fxdata");
|
||||
//JsonArray fxdata = root.createNestedArray("fxdata");
|
||||
String lineBuffer;
|
||||
bool insideQuotes = false;
|
||||
char singleJsonSymbol;
|
||||
@ -958,13 +958,13 @@ void serveJson(AsyncWebServerRequest* request)
|
||||
}
|
||||
|
||||
#ifdef WLED_USE_DYNAMIC_JSON
|
||||
AsyncJsonResponse* response = new AsyncJsonResponse(JSON_BUFFER_SIZE);
|
||||
AsyncJsonResponse* response = new AsyncJsonResponse(JSON_BUFFER_SIZE, subJson==6);
|
||||
#else
|
||||
if (!requestJSONBufferLock(7)) return;
|
||||
AsyncJsonResponse *response = new AsyncJsonResponse(&doc);
|
||||
AsyncJsonResponse *response = new AsyncJsonResponse(&doc, subJson==6);
|
||||
#endif
|
||||
|
||||
JsonObject lDoc = response->getRoot();
|
||||
JsonVariant lDoc = response->getRoot();
|
||||
|
||||
switch (subJson)
|
||||
{
|
||||
@ -977,7 +977,7 @@ void serveJson(AsyncWebServerRequest* request)
|
||||
case 5: //palettes
|
||||
serializePalettes(lDoc, request); break;
|
||||
case 6: // FX helper data
|
||||
serializeModeData(lDoc); break;
|
||||
serializeModeData(lDoc.as<JsonArray>()); break;
|
||||
default: //all
|
||||
JsonObject state = lDoc.createNestedObject("state");
|
||||
serializeState(state);
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
*/
|
||||
|
||||
// version code in format yymmddb (b = daily build)
|
||||
#define VERSION 2111191
|
||||
#define VERSION 2111201
|
||||
|
||||
//uncomment this if you have a "my_config.h" file you'd like to use
|
||||
//#define WLED_USE_MY_CONFIG
|
||||
|
||||
Loading…
Reference in New Issue
Block a user