Clean up UserMod settings: grouping of variables and add preInfo to variables (#2894)

* Grouping um settings, add pre and post Info, update  SR & 4LD settings

Settings_um.htm: 
- modify addField (grouping)
- addInfo (pre and post texts)

Add preInfo to audio reactive and 4ld usermod

Extra:
platformio: wemos_shield: add audio reactive usermod and update to alt display

* um settings: cpp: lowercase, js: initcap

* um settings: txt only pre, txt2 only post and initCap as function

* Fix rotary encoder info string

Co-authored-by: Blaž Kristan <blaz@kristan-sp.si>

wled00/data/settings_um.htm

@@ -104,9 +104,14 @@
 			}
 		}
 	}
+	function initCap(s) {
+  		if (typeof s !== 'string') return ''
+  		return s.charAt(0).toUpperCase() + s.slice(1)
+	}
 	function addField(k,f,o,a=false) {  //key, field, (sub)object, isArray
 		if (isO(o)) {
 			urows += '<hr class="sml">';
+			if (f!=='unknown' && !k.includes(":")) urows += `<p><u>${initCap(f)}</u></p>`; //show group title
 			for (const [s,v] of Object.entries(o)) {
 				// possibility to nest objects (only 1 level)
 				if (f!=='unknown' && !k.includes(":")) addField(k+":"+f,s,v);
@@ -135,8 +140,7 @@
 					t = "text"; c = `value="${o}" style="width:250px;"`;
 					break;
 			}
-			if (k.includes(":")) urows += k.substr(k.indexOf(":")+1);
-			urows += ` ${f}: `;
+			urows += ` ${initCap(f)} `; //only show field (key is shown in grouping)
 			// https://stackoverflow.com/questions/11657123/posting-both-checked-and-unchecked-checkboxes
 			if (t=="checkbox") urows += `<input type="hidden" name="${k}:${f}${a?"[]":""}" value="false">`;
 			else if (!a)       urows += `<input type="hidden" name="${k}:${f}${a?"[]":""}" value="${t}">`;
@@ -179,11 +183,14 @@
 		}
 	}
 	// https://stackoverflow.com/questions/26440494/insert-text-after-this-input-element-with-javascript
-	function addInfo(name,el,txt) {
+	function addInfo(name,el,txt, txt2="") {
 		let obj = d.getElementsByName(name);
 		if (!obj.length) return;
 		if (typeof el === "string" && obj[0]) obj[0].placeholder = el;
-		else if (obj[el]) obj[el].insertAdjacentHTML('afterend', '&nbsp;'+txt);
+		else if (obj[el]) {
+			if (txt!="") obj[el].insertAdjacentHTML('afterend', '&nbsp;'+txt);
+			if (txt2!="") obj[el].insertAdjacentHTML('beforebegin', txt2 + '&nbsp;');  //add pre texts
+		}
 	}
 	// load settings and insert values into DOM
 	function ldS() {