UI slider and CCT adjustments

wled00/data/index.css

@@ -459,29 +459,19 @@ img {
 .sliderdisplay {
 	content:'';
 	position: absolute;
-	top: 13px; bottom: 13px;
+	top: 12.5px; bottom: 12.5px;
-	left: 10px; right: 10px;
+	left: 13px; right: 13px;
 	background: var(--c-4);
 	border-radius: 17px;
 	pointer-events: none;
 	z-index: -1;
+  --bg: var(--c-f);
 }
 
-#rwrap .sliderdisplay,
+#rwrap .sliderdisplay { --bg: #f00; }
-#gwrap .sliderdisplay,
+#gwrap .sliderdisplay { --bg: #0f0; }
-#bwrap .sliderdisplay,
+#bwrap .sliderdisplay { --bg: #00f; }
-#wwrap .sliderdisplay,
+#wbal .sliderdisplay  { background: linear-gradient(90deg, #ff8f1f 0%, #fff 50%, #cbdbff); }
-#wbal .sliderdisplay {
-	height: 28px;
-	top: 0; bottom: 0;
-	left: 0; right: 0;
-	/*border: 1px solid var(--c-b);*/
-}
-#rwrap .sliderdisplay { background: linear-gradient(90deg, #000 0%, #f00); }
-#gwrap .sliderdisplay { background: linear-gradient(90deg, #000 0%, #0f0); }
-#bwrap .sliderdisplay { background: linear-gradient(90deg, #000 0%, #00f); }
-#wwrap .sliderdisplay { background: linear-gradient(90deg, #000 0%, #fff); }
-#wbal .sliderdisplay  { background: linear-gradient(90deg, #ff8f1f 0%, #fff 50%, #d4e0ff); }
 
 .sliderbubble {
     width: 36px;
@@ -508,14 +498,7 @@ input[type=range] {
 	background-color: transparent;
 	cursor: pointer;
 }
-#rwrap input[type=range],
+
-#gwrap input[type=range],
-#bwrap input[type=range],
-#wwrap input[type=range],
-#wbal input[type=range] {
-	width: 252px;
-	margin: 0;
-}
 input[type=range]:focus {
 	outline: none;
 }
@@ -551,24 +534,7 @@ input[type=range]:active + .sliderbubble {
 	display: inline;
 	transform: translateX(-50%);
 }
-#rwrap input[type=range]::-webkit-slider-thumb,
+#wwrap {
-#gwrap input[type=range]::-webkit-slider-thumb,
-#bwrap input[type=range]::-webkit-slider-thumb,
-#wwrap input[type=range]::-webkit-slider-thumb,
-#wbal input[type=range]::-webkit-slider-thumb {
-	height: 18px;
-	width: 18px;
-	border: 2px solid #000;
-	margin-top: 5px;
-}
-#rwrap input[type=range]::-moz-range-thumb,
-#gwrap input[type=range]::-moz-range-thumb,
-#bwrap input[type=range]::-moz-range-thumb,
-#wwrap input[type=range]::-moz-range-thumb,
-#wbal input[type=range]::-moz-range-thumb {
-	border: 2px solid var(--c-1);
-}
-#wwrap, #wbal {
 	display: none;
 }
 
@@ -577,14 +543,6 @@ input[type=range]:active + .sliderbubble {
 	width: 240px;
 	position: relative;
 }
-#rwrap .sliderwrap,
-#gwrap .sliderwrap,
-#bwrap .sliderwrap,
-#wwrap .sliderwrap,
-#wbal .sliderwrap {
-	width: 260px;
-	margin: 10px 0 0;
-}
 
 .sbs {
 	margin: 0px -20px 5px -6px;

wled00/data/index.htm

@@ -45,31 +45,37 @@
 <div class ="container">
 	<div id="Colors" class="tabcontent">
 		<div id="picker" class="noslide"></div>
+    <div id="vwrap">
+      <div class="sliderwrap il" id="vwrap">
+				<input id="sliderV" class="noslide" onchange="setColor(0)" oninput="fromV()" max="100" min="0" type="range" value="128" step="any" />
+				<div class="sliderdisplay"></div>
+			</div><br>
+    </div>
+    <div id="wbal">
+			<div class="sliderwrap il">
+				<input id="sliderA" class="noslide" oninput="fromA()" onchange="setBalance(this.value)" max="10091" min="1900" type="range" value="6550" />
+				<div class="sliderdisplay"></div>
+			</div>
+		</div>
 		<div id="rgbwrap">
-			<div class="sliderwrap il">
+      <p class="labels">RGB color</p>
-				<input id="sliderR" class="noslide" onchange="fromRgb()" max="255" min="0" type="range" value="128" />
+			<div class="sliderwrap il" id="rwrap">
+				<input id="sliderR" class="noslide" onchange="setColor(0)" oninput="fromRgb()" max="255" min="0" type="range" value="128" />
 				<div class="sliderdisplay"></div>
 			</div><br>
-			<div class="sliderwrap il">
+			<div class="sliderwrap il" id="gwrap">
-				<input id="sliderG" class="noslide" onchange="fromRgb()" max="255" min="0" type="range" value="128" />
+				<input id="sliderG" class="noslide" onchange="setColor(0)" oninput="fromRgb()" max="255" min="0" type="range" value="128" />
 				<div class="sliderdisplay"></div>
 			</div><br>
-			<div class="sliderwrap il">
+			<div class="sliderwrap il" id="bwrap">
-				<input id="sliderB" class="noslide" onchange="fromRgb()" max="255" min="0" type="range" value="128" />
+				<input id="sliderB" class="noslide" onchange="setColor(0)" oninput="fromRgb()" max="255" min="0" type="range" value="128" />
 				<div class="sliderdisplay"></div>
 			</div><br>
 		</div>
 		<div id="wwrap">
 			<p class="labels">White channel</p>
 			<div class="sliderwrap il">
-				<input id="sliderW" class="noslide" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
+				<input id="sliderW" class="noslide" onchange="setColor(0)" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
-				<div class="sliderdisplay"></div>
-			</div>
-		</div>
-		<div id="wbal">
-			<p class="labels">White balance</p>
-			<div class="sliderwrap il">
-				<input id="sliderA" class="noslide" onchange="setBalance(this.value)" max="255" min="0" type="range" value="128" />
 				<div class="sliderdisplay"></div>
 			</div>
 		</div>

wled00/data/index.js

@@ -4,6 +4,7 @@ var noNewSegs = false;
 var isOn = false, nlA = false, isLv = false, isInfo = false, isNodes = false, syncSend = false, syncTglRecv = true, isRgbw = false;
 var whites = [0,0,0];
 var selColors;
+var mcct = false; //manual CCT (if false, CCT from RGB)
 var expanded = [false];
 var powered = [true];
 var nlDur = 60, nlTar = 0;
@@ -40,26 +41,13 @@ var hol = [
 var cpick = new iro.ColorPicker("#picker", {
 	width: 260,
 	wheelLightness: false,
-  wheelAngle: 90,
+  wheelAngle: 270,
+  wheelDirection: "clockwise",
   layout: [
     {
       component: iro.ui.Wheel,
       options: {}
-    },
+    }
-    {
-      component: iro.ui.Slider,
-      options: {
-        sliderType: 'value'
-      }
-    }/*,
-    {
-      component: iro.ui.Slider,
-      options: {
-        sliderType: 'kelvin',
-        minTemperature: 2100,
-        maxTemperature: 10000
-      }
-    }*/
   ]
 });
 
@@ -81,6 +69,7 @@ function applyCfg()
 	var ccfg = cfg.comp.colors;
 	d.getElementById('hexw').style.display = ccfg.hex ? "block":"none";
 	d.getElementById('picker').style.display = ccfg.picker ? "block":"none";
+  d.getElementById('vwrap').style.display = ccfg.picker ? "block":"none";
 	d.getElementById('rgbwrap').style.display = ccfg.rgb ? "block":"none";
 	d.getElementById('qcs-w').style.display = ccfg.quick ? "block":"none";
 	var l = cfg.comp.labels;
@@ -246,6 +235,7 @@ function onLoad() {
 	cpick.on("input:end", function() {
 		setColor(1);
 	});
+  cpick.on("color:change", updatePSliders);
 	pmtLS = localStorage.getItem('wledPmt');
 	setTimeout(function(){requestJson(null, false);}, 50);
 	d.addEventListener("visibilitychange", handleVisibilityChange, false);
@@ -861,7 +851,7 @@ function updateTrail(e)
 	var perc = e.value * 100 / max;
 	perc = parseInt(perc);
   if (perc < 50) perc += 2;
-	var val = `linear-gradient(90deg, var(--c-f) ${perc}%, var(--c-4) ${perc}%)`;
+	var val = `linear-gradient(90deg, var(--bg) ${perc}%, var(--c-4) ${perc}%)`;
 	e.parentNode.getElementsByClassName('sliderdisplay')[0].style.background = val;
 }
 
@@ -932,12 +922,12 @@ function updateUI()
 	updateTrail(d.getElementById('sliderBri'));
 	updateTrail(d.getElementById('sliderSpeed'));
 	updateTrail(d.getElementById('sliderIntensity'));
+  //updateTrail(d.getElementById('sliderW'));
 	d.getElementById('wwrap').style.display = (isRgbw) ? "block":"none";
-	d.getElementById("wbal").style.display = (lastinfo.leds.cct) ? "block":"none";
 
 	updatePA();
-	updateHex();
+	//updateHex();
-	updateRgb();
+	//updateRgb();
 }
 
 function displayRover(i,s)
@@ -1015,8 +1005,8 @@ function readState(s,command=false) {
     if (isRgbw) whites[e] = parseInt(i.col[e][3]);
     selectSlot(csel);
   }
-  d.getElementById('sliderW').value = whites[csel];
+  //d.getElementById('sliderW').value = whites[csel];
-  if (i.cct && i.cct>=0) d.getElementById("sliderA").value = i.cct;
+  if (mcct & i.cct && i.cct>=0) d.getElementById("sliderA").value = i.cct;
 
   d.getElementById('sliderSpeed').value = i.sx;
   d.getElementById('sliderIntensity').value = i.ix;
@@ -1164,6 +1154,9 @@ function requestJson(command, rinfo = true) {
 			}
 			d.title = name;
 			isRgbw = info.leds.wv;
+      mcct = info.leds.cct;
+      let wsld = d.getElementById("wbal");
+      if (mcct) wsld.parentNode.insertBefore(wsld,d.getElementById('qcs-w'));
 			ledCount = info.leds.count;
 			syncTglRecv = info.str;
       maxSeg = info.leds.maxseg;
@@ -1717,8 +1710,9 @@ function selectSlot(b) {
 	cd[csel].style.width="50px";
 	cpick.color.set(cd[csel].style.backgroundColor);
 	d.getElementById('sliderW').value = whites[csel];
-	updateHex();
+  updateTrail(d.getElementById('sliderW'));
-	updateRgb();
+	//updateHex();
+	//updateRgb();
 	redrawPalPrev();
 }
 
@@ -1738,12 +1732,28 @@ function pC(col)
 	setColor(0);
 }
 
+function updatePSliders() {
+  updateRgb();
+  updateHex();
+  var v = d.getElementById('sliderV');
+  v.value = cpick.color.value;
+  var hsv = {"h":cpick.color.hue,"s":cpick.color.saturation,"v":100}; 
+  var c = iro.Color.hsvToRgb(hsv);
+  var cs = 'rgb('+c.r+','+c.g+','+c.b+')';
+  v.parentNode.getElementsByClassName('sliderdisplay')[0].style.setProperty('--bg',cs);
+  updateTrail(v);
+  if (!mcct) d.getElementById('sliderA').value = cpick.color.kelvin;
+}
+
 function updateRgb()
 {
 	var col = cpick.color.rgb;
-	d.getElementById('sliderR').value = col.r;
+	var s = d.getElementById('sliderR');
-	d.getElementById('sliderG').value = col.g;
+	s.value = col.r; updateTrail(s,1);
-	d.getElementById('sliderB').value = col.b;
+	s = d.getElementById('sliderG');
+	s.value = col.g; updateTrail(s,2);
+	s = d.getElementById('sliderB');
+	s.value = col.b; updateTrail(s,3);
 }
 
 function updateHex()
@@ -1774,15 +1784,25 @@ function fromHex()
 	setColor(2);
 }
 
+function fromV()
+{
+  cpick.color.setChannel('hsv', 'v', d.getElementById('sliderV').value);
+}
+
+function fromA()
+{
+  if (!mcct) cpick.color.set({ kelvin: d.getElementById('sliderA').value });
+}
+
 function fromRgb()
 {
 	var r = d.getElementById('sliderR').value;
 	var g = d.getElementById('sliderG').value;
 	var b = d.getElementById('sliderB').value;
 	cpick.color.set(`rgb(${r},${g},${b})`);
-	setColor(0);
 }
 
+//sr 0: from RGB sliders, 1: from picker, 2: from hex
 function setColor(sr) {
 	var cd = d.getElementById('csl').children;
 	if (sr == 1 && cd[csel].style.backgroundColor == 'rgb(0, 0, 0)') cpick.color.setChannel('hsv', 'v', 100);
@@ -1795,13 +1815,14 @@ function setColor(sr) {
 	} else if (csel == 2) {
 		obj = {"seg": {"col": [[],[],[col.r, col.g, col.b, whites[csel]]]}};
 	}
-	updateHex();
+	//updateHex();
-	updateRgb();
+	//updateRgb();
 	requestJson(obj);
 }
 
 function setBalance(b)
 {
+  if (!mcct) {setColor(0); return;}
 	var obj = {"seg": {"cct": parseInt(b)}};
 	requestJson(obj);
 }