Merge branch 'dev' of https://github.com/aircoookie/WLED into dev

Conflicts:
	wled00/data/index.css
	wled00/data/index.htm
	wled00/data/index.js
	wled00/html_ui.h
	wled00/json.cpp

.gitignore

@@ -13,3 +13,4 @@
 .gitignore
 .clang-format
 node_modules
+.idea

wled00/data/index.css

@@ -166,6 +166,7 @@ button {
 }
 
 .sel-icon {
+	cursor: pointer;
 	transform: translateX(3px);
 	color: var(--c-d);
 }
@@ -553,6 +554,7 @@ input[type=range]::-moz-range-thumb {
 	font-size: 19px;
 	background-color: var(--c-3);
 	color: var(--c-f);
+	cursor: pointer;
 	border: 0px solid white;
 	border-radius: 25px;
 	transition-duration: 0.5s;
@@ -769,7 +771,7 @@ input[type=number]::-webkit-outer-spin-button {
 	cursor: pointer;
 }
 
-.check {
+.check, .radio {
 	display: inline-block;
 	position: relative;
 	padding-bottom: 32px;
@@ -789,7 +791,13 @@ input[type=number]::-webkit-outer-spin-button {
 	margin-top: 8px;
 }
 
-.check input {
+.fxchkl {
+  position: absolute;
+  top: 0px;
+  left: 8px;
+}
+
+.check input, .radio input {
 	position: absolute;
 	opacity: 0;
 	cursor: pointer;
@@ -797,7 +805,7 @@ input[type=number]::-webkit-outer-spin-button {
 	width: 0;
 }
 
-.checkmark {
+.checkmark, .radiomark {
 	position: absolute;
 	bottom: 0;
 	left: 0;
@@ -807,6 +815,12 @@ input[type=number]::-webkit-outer-spin-button {
 	border-radius: 10px;
 }
 
+.radiomark {
+	height: 24px;
+	width: 24px;
+	border-radius: 50%;
+}
+
 .schk {
 	top: 0;
 }
@@ -833,13 +847,13 @@ input[type=number]::-webkit-outer-spin-button {
 	background-color: var(--c-6);
 }
 
-.checkmark:after {
+.checkmark:after, .radiomark:after {
 	content: "";
 	position: absolute;
 	display: none;
 }
 
-.check input:checked ~ .checkmark:after {
+.check input:checked ~ .checkmark:after, .radio input:checked ~ .radiomark:after {
 	display: block;
 }
 
@@ -855,6 +869,16 @@ input[type=number]::-webkit-outer-spin-button {
 	transform: rotate(45deg);
 }
 
+.radio .radiomark:after {
+	width: 12px;
+	height: 12px;
+	top: 50%;
+	left: 50%;
+	margin: -6px;
+	border-radius: 50%;
+	background: var(--c-f);
+}
+
 .h {
 	font-size: 13px;
 	text-align: center;

wled00/data/index.htm

@@ -99,9 +99,8 @@
 			<input id="hexc" type="text" class="noslide" onkeydown="hexEnter(this)" autocomplete="off" maxlength="8" />
 			<button id="hexcnf" class="xxs btn" onclick="fromHex();"><i class="icons btna-icon">&#xe390;</i></button>
 		</div>
-		<p class="labels">Color palette</p>
+		<p class="labels"><i class="icons sel-icon" onclick="tglHex()">&#xe2b3;</i> Color palette</p>
 		<div class="il">
-			<i class="icons sel-icon" onclick="tglHex()">&#xe2b3;</i>
 			<div class="staytop fnd">
 				<input type="text" class="fnd" placeholder="Search" oninput="search(this,'selectPalette')" onfocus="search(this)" />
 				<span onclick="clean(this)" class="icons">&#xe38f;</span>
@@ -109,10 +108,10 @@
 			</div>
 			<div id="selectPalette" class="list">
 				<div class="lstI" data-id="0">
-					<label class="check schkl">
+					<label class="radio schkl">
 						&nbsp;
 						<input type="radio" value="${palettes[i].id}" name="palette" onChange="setPalette()">
-						<span class="checkmark schk"></span>
+						<span class="radiomark schk"></span>
 					</label>
 					<div class="lstIcontent">
 						<span class="lstIname">
@@ -123,7 +122,7 @@
 				<div class="lstI">
 					<div class="lstIcontent">
 						<span class="lstIname">
-							Loading
+							Loading...
 						</span>
 					</div>
 				</div>

wled00/data/index.js

@@ -1,5 +1,4 @@
 //page js
-const lsPalKey = "wledPalx";
 var loc = false, locip;
 var noNewSegs = false;
 var isOn = false, nlA = false, isLv = false, isInfo = false, isNodes = false, syncSend = false, syncTglRecv = true, isRgbw = false;
@@ -189,7 +188,6 @@ function onLoad()
 	pmtLS = localStorage.getItem('wledPmt');
 
 	// Load initial data
-	getPalettesDataCached();
 	loadPalettes(function() {
 		loadFX(function() {
 			loadPresets(function() {
@@ -319,9 +317,7 @@ function cpBck()
 
 	copyText.select();
 	copyText.setSelectionRange(0, 999999);
-
 	d.execCommand("copy");
-	
 	showToast("Copied to clipboard!");
 }
 
@@ -803,10 +799,10 @@ function genPalPrevCss(id)
 function generateListItemHtml(listName, id, name, clickAction, extraHtml = '')
 {
     return `<div class="lstI" data-id="${id}">
-	<label class="check schkl">
+	<label class="radio schkl">
 		&nbsp;
 		<input type="radio" value="${id}" name="${listName}" onChange="${clickAction}()">
-		<span class="checkmark schk"></span>
+		<span class="radiomark schk"></span>
 	</label>
 	<div class="lstIcontent" onClick="${clickAction}(${id})">
 		<span class="lstIname">
@@ -1089,6 +1085,8 @@ function requestJson(command, rinfo = true, verbose = true, callback = null)
 			lastinfo = info;
 			if (isInfo) populateInfo(info);
 			displayRover(info, s);
+
+			if (!rinfo) loadPalettesData();
 		}
 
 		if (!handleJson(s)) {
@@ -1609,34 +1607,27 @@ function rSegs()
 
 function loadPalettesData()
 {
-	if (palettesData || getPalettesDataCached()) return;
+	if (palettesData) return;
-
+	const lsKey = "wledPalx";
-	var dateExpiration = new Date();
+	var palettesDataJson = localStorage.getItem(lsKey);
-	palettesData = {};
+	if (palettesDataJson) {
-	getPalettesData(1, function() {
-		localStorage.setItem(lsPalKey, JSON.stringify({
-			p: palettesData,
-			expiration: dateExpiration.getTime() + (24 * 60 * 60 * 1000) // 24 hrs expiration
-		}));
-		requestJson(null, false);
-	});
-}
-
-function getPalettesDataCached()
-{
-	var palDataJson = localStorage.getItem(lsPalKey);
-	if (palDataJson) {
 		try {
-			palDataJson = JSON.parse(palDataJson);
+			palettesDataJson = JSON.parse(palettesDataJson);
-			var d = new Date();
+			if (palettesDataJson && palettesDataJson.vid == lastinfo.vid) {
-			if (palDataJson && palDataJson.expiration && palDataJson.expiration > d.getTime()) {
+				palettesData = palettesDataJson.p;
-				palettesData = palDataJson.p;
+				return;
-				redrawPalPrev();
-				return true;
 			}
 		} catch (e) {}
 	}
-	return false;
+
+	palettesData = {};
+	getPalettesData(0, function() {
+		localStorage.setItem(lsKey, JSON.stringify({
+			p: palettesData,
+			vid: lastinfo.vid
+		}));
+		redrawPalPrev();
+	});
 }
 
 function getPalettesData(page, callback)
@@ -1655,7 +1646,7 @@ function getPalettesData(page, callback)
 	})
 	.then(json => {
 		palettesData = Object.assign({}, palettesData, json.p);
-		if (page < json.m) setTimeout(function() { getPalettesData(page + 1, callback); }, 100);
+		if (page < json.m) setTimeout(function() { getPalettesData(page + 1, callback); }, 50);
 		else callback();
 	})
 	.catch(function(error) {

wled00/json.cpp

@@ -59,7 +59,8 @@ void deserializeSegment(JsonObject elem, byte it)
           if (sz == 0) continue; //do nothing on empty array
 
           byte cp = copyArray(colX, rgbw, 4);      
-          if (cp == 1 && rgbw[0] == 0) seg.setColor(i, 0, id);
+          if (cp == 1 && rgbw[0] == 0) 
+            seg.setColor(i, 0, id);
           colValid = true;
         }
 
@@ -347,9 +348,6 @@ void serializeState(JsonObject root, bool forPreset, bool includeBri, bool segme
 
     root[F("ps")] = currentPreset;
     root[F("pl")] = (presetCyclingEnabled) ? 0: -1;
-    
-//    JsonObject um = root.createNestedObject(F("um"));
-//    usermods.addToJsonState(um);
     usermods.addToJsonState(root);
 
     //temporary for preset cycle
@@ -596,25 +594,19 @@ void serializePalettes(JsonObject root, AsyncWebServerRequest* request)
   int itemPerPage = 8;
   #endif
 
-  int page;
+  int page = 0;
   if (request->hasParam("page")) {
     page = request->getParam("page")->value().toInt();
-  } else {
-    page = 1;
   }
 
   int palettesCount = strip.getPaletteCount();
 
-  int maxPage = ceil((float)palettesCount / (float)itemPerPage);
+  int maxPage = (palettesCount -1) / itemPerPage;
-  if (page > maxPage) {
+  if (page > maxPage) page = maxPage;
-    page = maxPage;
-  }
 
-  int start = itemPerPage * (page - 1);
+  int start = itemPerPage * page;
   int end = start + itemPerPage;
-  if (end > palettesCount - 1) {
+  if (end >= palettesCount) end = palettesCount;
-    end = palettesCount;
-  }
 
   root[F("m")] = maxPage;
   JsonObject palettes  = root.createNestedObject("p");
@@ -629,19 +621,10 @@ void serializePalettes(JsonObject root, AsyncWebServerRequest* request)
         setPaletteColors(curPalette, PartyColors_p); 
         break;
       case 1: //random
-          curPalette.add(F("r"));
+          curPalette.add("r");
-          curPalette.add(F("r"));
+          curPalette.add("r");
-          curPalette.add(F("r"));
+          curPalette.add("r");
-          curPalette.add(F("r"));
+          curPalette.add("r");
-          /**setPaletteColors(
-            curPalette, 
-            CRGBPalette16(
-              CHSV(random8(), 255, random8(128, 255)),
-              CHSV(random8(), 255, random8(128, 255)),
-              CHSV(random8(), 192, random8(128, 255)),
-              CHSV(random8(), 255, random8(128, 255))
-            )
-          );**/
         break;
       case 2: //primary color only
         curPalette.add(F("c1"));

wled00/wled.h

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