New endpoint for UI slider control (WLED-SR ext.)

Minor UX optimizations.
This commit is contained in:
Blaz Kristan 2021-11-20 12:26:04 +01:00
parent 7871e868a9
commit be8db602b8
6 changed files with 2043 additions and 2009 deletions

View File

@ -932,7 +932,7 @@ class WS2812FX {
const char JSON_mode_names[] PROGMEM = R"=====([ const char JSON_mode_names[] PROGMEM = R"=====([
"Solid", "Solid",
"Blink@;!;!", "Blink@;!;!",
"Breathe@!,;,!;!", "Breathe@!,;!,!;!",
"Wipe", "Wipe",
"Wipe Random", "Wipe Random",
"Random Colors", "Random Colors",
@ -940,12 +940,13 @@ const char JSON_mode_names[] PROGMEM = R"=====([
"Dynamic", "Dynamic",
"Colorloop", "Colorloop",
"Rainbow", "Rainbow",
"Scan@!,# of dots;,!,;!", "Scan@!,# of dots;!,!,;!",
"Scan Dual@!,# of dots;,!,;!", "Scan Dual@!,# of dots;!,!,;!",
"Fade","Theater", "Fade",
"Theater",
"Theater Rainbow", "Theater Rainbow",
"Running@!,Wave width;!,!,;!", "Running@!,Wave width;!,!,;!",
"Saw@!,Width;Fx,Bg,;!", "Saw@!,Width;!,!,;!",
"Twinkle", "Twinkle",
"Dissolve", "Dissolve",
"Dissolve Rnd", "Dissolve Rnd",
@ -966,25 +967,25 @@ const char JSON_mode_names[] PROGMEM = R"=====([
"Colorful", "Colorful",
"Traffic Light", "Traffic Light",
"Sweep Random", "Sweep Random",
"Running 2@!,Width;;!", "Running 2@!,Width;!,!,;!",
"Aurora", "Aurora",
"Stream", "Stream",
"Scanner", "Scanner",
"Lighthouse", "Lighthouse",
"Fireworks", "Fireworks",
"Rain", "Rain",
"Tetrix@!,Width;Fx,Bg,;!", "Tetrix@!,Width;!,!,;!",
"Fire Flicker", "Fire Flicker",
"Gradient", "Gradient",
"Loading", "Loading",
"Police@!,Width;;", "Police@!,Width;;",
"Police All@!,Width;;", "Police All@!,Width;;",
"Two Dots@!,Dot size;,,Bg;!", "Two Dots@!,Dot size;1,2,Bg;!",
"Two Areas@!,Size;,,Bg;!", "Two Areas@!,Size;1,2,Bg;!",
"Running Dual", "Running Dual",
"Halloween", "Halloween",
"Tri Chase@!,Size;;", "Tri Chase@!,Size;1,2,3;",
"Tri Wipe", "Tri Wipe@!,Width;1,2,3;",
"Tri Fade", "Tri Fade",
"Lightning", "Lightning",
"ICU", "ICU",
@ -993,9 +994,9 @@ const char JSON_mode_names[] PROGMEM = R"=====([
"Stream 2", "Stream 2",
"Oscillate", "Oscillate",
"Pride 2015", "Pride 2015",
"Juggle@!,Trail;Fx,Bg,;!", "Juggle@!,Trail;!,!,;!",
"Palette@!,;;!", "Palette@!,;;!",
"Fire 2012@Spark rate,Decay;!;!", "Fire 2012@Spark rate,Decay;;!",
"Colorwaves", "Colorwaves",
"Bpm", "Bpm",
"Fill Noise", "Fill Noise",
@ -1017,10 +1018,10 @@ const char JSON_mode_names[] PROGMEM = R"=====([
"Spots", "Spots",
"Spots Fade", "Spots Fade",
"Glitter", "Glitter",
"Candle@Flicker rate,Flicker intensity;Fx,Bg,;", "Candle@Flicker rate,Flicker intensity;!,!,;",
"Fireworks Starburst", "Fireworks Starburst",
"Fireworks 1D@Gravity,Firing side;;!", "Fireworks 1D@Gravity,Firing side;;!",
"Bouncing Balls@Gravity,# of balls;Fx,Bg,;!", "Bouncing Balls@Gravity,# of balls;!,!,;!",
"Sinelon", "Sinelon",
"Sinelon Dual", "Sinelon Dual",
"Sinelon Rainbow", "Sinelon Rainbow",
@ -1031,11 +1032,11 @@ const char JSON_mode_names[] PROGMEM = R"=====([
"Ripple Rainbow", "Ripple Rainbow",
"Heartbeat", "Heartbeat",
"Pacifica", "Pacifica",
"Candle Multi@Flicker rate,Flicker intensity;Fx,Bg,;", "Candle Multi@Flicker rate,Flicker intensity;!,!,;",
"Solid Glitter", "Solid Glitter",
"Sunrise@Time [min],;!;", "Sunrise@Time [min],;;",
"Phased", "Phased",
"Twinkleup@!,Intensity;,!;!", "Twinkleup@!,Intensity;!,!,;!",
"Noise Pal", "Noise Pal",
"Sine", "Sine",
"Phased Noise", "Phased Noise",

View File

@ -165,7 +165,7 @@ button {
} }
.slider-icon { .slider-icon {
transform: translate(6px,3px); transform: translate(3px,3px);
} }
.e-icon { .e-icon {

View File

@ -20,6 +20,7 @@ var tr = 7;
var d = document; var d = document;
const ranges = RangeTouch.setup('input[type="range"]', {}); const ranges = RangeTouch.setup('input[type="range"]', {});
var palettesData; var palettesData;
var fxdata = [];
var pJson = {}, eJson = {}, lJson = {}; var pJson = {}, eJson = {}, lJson = {};
var pN = "", pI = 0, pNum = 0; var pN = "", pI = 0, pNum = 0;
var pmt = 1, pmtLS = 0, pmtLast = 0; var pmt = 1, pmtLS = 0, pmtLast = 0;
@ -252,6 +253,7 @@ function onLoad()
loadPalettes(()=>{ loadPalettes(()=>{
loadPalettesData(redrawPalPrev); loadPalettesData(redrawPalPrev);
loadFX(()=>{ loadFX(()=>{
loadFXData();
loadPresets(()=>{ loadPresets(()=>{
if (isObj(lastinfo) && isEmpty(lastinfo)) loadInfo(requestJson); // if not filled by WS 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 = []; var pQL = [];
function populateQL() function populateQL()
{ {
@ -1076,10 +1106,9 @@ function updateSelectedFx()
var selectedEffect = parent.querySelector(`.lstI[data-id="${selectedFx}"]`); var selectedEffect = parent.querySelector(`.lstI[data-id="${selectedFx}"]`);
if (selectedEffect) { if (selectedEffect) {
selectedEffect.classList.add('selected'); selectedEffect.classList.add('selected');
// WLEDSR: extract the Slider and color control string from the HTML element and set it. // WLEDSR: extract the Slider and color control string from the HTML element and set it.
sliderControl = selectedEffect.dataset.opt.replace(/&/g, "&"); //sliderControl = selectedEffect.dataset.opt.replace(/&/g, "&");
setSliderAndColorControl(selectedFx, sliderControl); setSliderAndColorControl(selectedFx /*, sliderControl*/);
} }
} }
@ -1224,11 +1253,12 @@ function readState(s,command=false)
} }
// WLEDSR: control HTML elements for Slider and Color Control // 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 topPosition = 0;
var controlDefined = (extra.substr(0,1) == "@")?true:false; var controlDefined = (fxdata[idx].substr(0,1) == "@")?true:false;
extra = extra.substr(1); var extra = fxdata[idx].substr(1);
var extras = (extra == '')?[]:extra.split(";"); var extras = (extra == '')?[]:extra.split(";");
var slOnOff = (extras.length==0 || extras[0]=='')?[]:extras[0].split(","); var slOnOff = (extras.length==0 || extras[0]=='')?[]:extras[0].split(",");
var coOnOff = (extras.length<2 || extras[1]=='')?[]:extras[1].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==0) btn.innerHTML = "Fx";
else if (i==1) btn.innerHTML = "Bg"; else if (i==1) btn.innerHTML = "Bg";
else btn.innerHTML = "Cs"; 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.style.display = "inline";
btn.innerHTML = `${i+1}`; btn.innerHTML = `${i+1}`;
} else { } else {

File diff suppressed because it is too large Load Diff

View File

@ -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; String lineBuffer;
bool insideQuotes = false; bool insideQuotes = false;
char singleJsonSymbol; char singleJsonSymbol;
@ -958,13 +958,13 @@ void serveJson(AsyncWebServerRequest* request)
} }
#ifdef WLED_USE_DYNAMIC_JSON #ifdef WLED_USE_DYNAMIC_JSON
AsyncJsonResponse* response = new AsyncJsonResponse(JSON_BUFFER_SIZE); AsyncJsonResponse* response = new AsyncJsonResponse(JSON_BUFFER_SIZE, subJson==6);
#else #else
if (!requestJSONBufferLock(7)) return; if (!requestJSONBufferLock(7)) return;
AsyncJsonResponse *response = new AsyncJsonResponse(&doc); AsyncJsonResponse *response = new AsyncJsonResponse(&doc, subJson==6);
#endif #endif
JsonObject lDoc = response->getRoot(); JsonVariant lDoc = response->getRoot();
switch (subJson) switch (subJson)
{ {
@ -977,7 +977,7 @@ void serveJson(AsyncWebServerRequest* request)
case 5: //palettes case 5: //palettes
serializePalettes(lDoc, request); break; serializePalettes(lDoc, request); break;
case 6: // FX helper data case 6: // FX helper data
serializeModeData(lDoc); break; serializeModeData(lDoc.as<JsonArray>()); break;
default: //all default: //all
JsonObject state = lDoc.createNestedObject("state"); JsonObject state = lDoc.createNestedObject("state");
serializeState(state); serializeState(state);

View File

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