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

Minor UX optimizations.

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@!,# of dots;!,!,;!",
-"Scan Dual@!,# of dots;,!,;!",
+"Scan Dual@!,# of dots;!,!,;!",
-"Fade","Theater",
+"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 Dots@!,Dot size;1,2,Bg;!",
-"Two Areas@!,Size;,,Bg;!",
+"Two Areas@!,Size;1,2,Bg;!",
 "Running Dual",
 "Halloween",
-"Tri Chase@!,Size;;",
+"Tri Chase@!,Size;1,2,3;",
-"Tri Wipe",
+"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",

wled00/data/index.css

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

wled00/data/index.js

@@ -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, "&");
+		//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
-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;
+  	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 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 {

wled00/json.cpp

@@ -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);

wled00/wled.h

@@ -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