Minor fixes.

wled00/cfg.cpp

@@ -121,7 +121,7 @@ bool deserializeConfig(JsonObject doc, bool fromFS) {
   if (lC > ledCount) ledCount = lC; // fix incorrect total length (honour analog setup)
 
   // read multiple button configuration
-  JsonArray hw_btn_ins = hw[F("btn")][F("ins")];
+  JsonArray hw_btn_ins = hw[F("btn")]["ins"];
   if (!hw_btn_ins.isNull()) {
     uint8_t s = 0;
     for (JsonObject btn : hw_btn_ins) {
@@ -342,7 +342,7 @@ bool deserializeConfig(JsonObject doc, bool fromFS) {
   CJSON(macroCountdown, cntdwn[F("macro")]);
   setCountdown();
 
-  JsonArray timers = tm[F("ins")];
+  JsonArray timers = tm["ins"];
   uint8_t it = 0;
   for (JsonObject timer : timers) {
     if (it > 9) break;

wled00/data/index.css

@@ -591,7 +591,7 @@ input[type=range]::-moz-range-thumb {
 	margin: 0px;
 }
 .btn-p {
-	width: 80%;
+	width: 165px;
 	margin: 5px;
 }
 .btn-xs, .btn-pl-del, .btn-pl-add {

wled00/data/index.js

@@ -260,9 +260,9 @@ function onLoad()
 
 	// Create UI update WS handler
 	myWS = new WebSocket('ws://'+(loc?locip:window.location.hostname)+'/ws');
-    myWS.onopen = function () {
+//    myWS.onopen = function () {
-		myWS.send("{'v':true}");
+//		myWS.send("{'v':true}");
-	}
+//	}
 	myWS.onmessage = function(event) {
 		var json = JSON.parse(event.data);
 		if (handleJson(json.state)) updateUI(true);
@@ -1067,11 +1067,7 @@ function handleJson(s)
 	nlFade = s.nl.fade;
 	syncSend = s.udpn.send;
 	currentPreset = s.ps;
-	gId('cyToggle').checked = (s.pl >= 0);
+	gId('tt').value = s.transition/10;
-	gId('cycs').value = s.ccnf.min;
-	gId('cyce').value = s.ccnf.max;
-	gId('cyct').value = s.ccnf.time/10;
-	gId('cyctt').value = s.transition/10;
 
 	var selc=0; var ind=0;
 	populateSegments(s);
@@ -1410,8 +1406,8 @@ ${plSelContent}
 </div>
 <div class="c">Save to ID <input class="noslide" id="p${i}id" type="number" oninput="checkUsed(${i})" max=250 min=1 value=${(i>0)?i:getLowestUnusedP()}></div>
 <div class="c">
-	<button class="btn btn-i btn-p" onclick="saveP(${i},${pl})"><i class="icons btn-icon">&#xe390;</i>Save ${(pl)?"playlist":(i>0)?"changes":"preset"}</button>
+	<button class="btn btn-i btn-p" onclick="saveP(${i},${pl})"><i class="icons btn-icon">&#xe390;</i>Save</button>
-	${(i>0)?'<button class="btn btn-i btn-p" id="p'+i+'del" onclick="delP('+i+')"><i class="icons btn-icon">&#xe037;</i>Delete '+(pl?"playlist":"preset"):'<button class="btn btn-p" onclick="resetPUtil()">Cancel'}</button>
+	${(i>0)?'<button class="btn btn-i btn-pl-del" id="p'+i+'del" onclick="delP('+i+')"><i class="icons btn-icon">&#xe037;</i>':'<button class="btn btn-p" onclick="resetPUtil()">Cancel'}</button>
 </div>
 <div class="pwarn ${(i>0)?"bp":""} c" id="p${i}warn"></div>
 ${(i>0)? ('<div class="h">ID ' +i+ '</div>'):""}`;
@@ -1421,7 +1417,7 @@ function makePUtil()
 {
 	gId('putil').innerHTML = `<div class="seg pres"><div class="segin expanded">${makeP(0)}</div></div>`;
 //	updateTrail(gId('p0p'));
-	for (var i=0; i<expanded.length; i++) if (expanded[i]) expand(i);
+	for (var i=0; i<expanded.length; i++) if (expanded[i]) expand(i); // collapse all expanded presets
 }
 
 function makePlEntry(p,i) {
@@ -1937,6 +1933,15 @@ function expand(i,a)
 	if (!a) expanded[i] = !expanded[i];
 	seg.style.display = (expanded[i]) ? "block":"none";
 	gId('sege' +i).style.transform = (expanded[i]) ? "rotate(180deg)":"rotate(0deg)";
+
+	if (expanded[i]) gId(i<100?'segutil':'putil').classList.remove("staytop");
+	else gId(i<100?'segutil':'putil').classList.add("staytop");
+
+	if (expanded[i]) seg.parentElement.scrollIntoView({
+		behavior: 'smooth',
+		block: 'start',
+	});
+
 	if (i < 100) return; //no preset, we are done
 
 	var p = i-100;
@@ -1961,12 +1966,6 @@ function expand(i,a)
 	gId(`p${p}api`).value = papi;
 	if (papi.indexOf("Please") == 0) gId(`p${p}cstgl`).checked = true;
 	tglCs(p);
-
-	seg = seg.parentElement;
-	if (expanded[i]) seg.scrollIntoView({
-		behavior: 'smooth',
-		block: 'center',
-	});
 }
 
 function unfocusSliders()

wled00/xml.cpp

@@ -159,24 +159,16 @@ void sappends(char stype, const char* key, char* val)
 {
   switch(stype)
   {
-    case 's': { //string (we can interpret val as char*)
+    case 's': {//string (we can interpret val as char*)
+      String buf = val;
+      //convert "%" to "%%" to make EspAsyncWebServer happy
+      buf.replace("%","%%");
       oappend("d.Sf.");
       oappend(key);
       oappend(".value=\"");
-      //convert "%" to "%%" to make EspAsyncWebServer happy
+      oappend(buf.c_str());
-      char buf[130];
-      uint8_t len = strlen(val) +1;
-      uint8_t s = 0;
-      for (uint8_t i = 0; i < len; i++) {
-        buf[i+s] = val[i];
-        if (val[i] == '%') {
-          s++; buf[i+s] = '%';
-        }
-      }
-
-      oappend(buf);
       oappend("\";");
-      break; }
+      break;}
     case 'm': //message
       oappend(SET_F("d.getElementsByClassName"));
       oappend(key);