refactor: Led layout, clearAll (#703)

* add SSDP name field

* YALL - yet another led layout

* led layout migration

* add initial vscode config

* merge clearAll with clear, rename Hyperion::compStateChange

* simpler components api

* Corrected code formatting

+ triggered PR build

* fix: regression from #636

* Support for color patterns

Co-authored-by: Paulchen Panther <16664240+Paulchen-Panther@users.noreply.github.com>

assets/webconfig/js/content_leds.js

@@ -40,10 +40,10 @@ function createLedPreview(leds, origin){
 		var led = leds[idx];
 		var led_id='ledc_'+[idx];
 		var bgcolor = "background-color:hsl("+(idx*360/leds.length)+",100%,50%);";
-		var pos = "left:"+(led.h.min * canvas_width)+"px;"+
-			"top:"+(led.v.min * canvas_height)+"px;"+
-			"width:"+((led.h.max-led.h.min) * (canvas_width-1))+"px;"+
-			"height:"+((led.v.max-led.v.min) * (canvas_height-1))+"px;";
+		var pos = "left:"+(led.hmin * canvas_width)+"px;"+
+			"top:"+(led.vmin * canvas_height)+"px;"+
+			"width:"+((led.hmax-led.hmin) * (canvas_width-1))+"px;"+
+			"height:"+((led.vmax-led.vmin) * (canvas_height-1))+"px;";
 		leds_html += '<div id="'+led_id+'" class="led" style="'+bgcolor+pos+'" title="'+idx+'"><span id="'+led_id+'_num" class="led_prev_num">'+idx+'</span></div>';
 	}
 	$('#leds_preview').html(leds_html);
@@ -91,11 +91,11 @@ function createClassicLeds(){
 	function createFinalArray(array){
 		finalLedArray = [];
 		for(var i = 0; i<array.length; i++){
-			var hmin = array[i].h.min;
-			var hmax = array[i].h.max;
-			var vmin = array[i].v.min;
-			var vmax = array[i].v.max;
-			finalLedArray[i] = { "h": { "max" : hmax, "min" : hmin }, "v": { "max": vmax, "min": vmin}}
+			var hmin = array[i].hmin;
+			var hmax = array[i].hmax;
+			var vmin = array[i].vmin;
+			var vmax = array[i].vmax;
+			finalLedArray[i] = { "hmax": hmax, "hmin": hmin, "vmax": vmax, "vmin": vmin }
 		}
 		createLedPreview(finalLedArray, 'classic');
 	}
@@ -138,7 +138,7 @@ function createClassicLeds(){
 		hmax = round(hmax);
 		vmin = round(vmin);
 		vmax = round(vmax);
-		ledArray.push( { "h" : { "min" : hmin, "max" : hmax }, "v": { "min": vmin, "max": vmax }} );
+		ledArray.push({ "hmin": hmin, "hmax": hmax, "vmin": vmin, "vmax": vmax });
 	}
 
 	function createTopLeds(){
@@ -268,14 +268,10 @@ function createMatrixLeds(){
 		vscanMax = round(vscanMax);
 
 		leds.push({
-			h: {
-				min: hscanMin,
-				max: hscanMax
-			},
-			v: {
-				min: vscanMin,
-				max: vscanMax
-			}
+			hmin: hscanMin,
+			hmax: hscanMax,
+			vmin: vscanMin,
+			vmax: vscanMax
 		})
 	}
 
@@ -446,7 +442,7 @@ $(document).ready(function() {
 	});
 
 	// v4 of json schema with diff required assignment - remove when hyperion schema moved to v4
-	var ledschema = {"items":{"additionalProperties":false,"required":["h","v"],"properties":{"colorOrder":{"enum":["rgb","bgr","rbg","brg","gbr","grb"],"type":"string"},"h":{"additionalProperties":false,"properties":{"max":{"maximum":1,"minimum":0,"type":"number"},"min":{"maximum":1,"minimum":0,"type":"number"}},"type":"object"},"v":{"additionalProperties":false,"properties":{"max":{"maximum":1,"minimum":0,"type":"number"},"min":{"maximum":1,"minimum":0,"type":"number"}},"type":"object"}},"type":"object"},"type":"array"};
+	var ledschema = { "items": { "additionalProperties": false, "required": ["hmin", "hmax", "vmin", "vmax"], "properties": { "name": { "type": "string" }, "colorOrder": { "enum": ["rgb", "bgr", "rbg", "brg", "gbr", "grb"], "type": "string" }, "hmin": { "maximum": 1, "minimum": 0, "type": "number" }, "hmax": { "maximum": 1, "minimum": 0, "type": "number" }, "vmin": { "maximum": 1, "minimum": 0, "type": "number" }, "vmax": { "maximum": 1, "minimum": 0, "type": "number" } }, "type": "object" }, "type": "array" };
 	//create jsonace editor
 	aceEdt = new JSONACEEditor(document.getElementById("aceedit"),{
 		mode: 'code',

assets/webconfig/js/ledsim.js

@@ -22,7 +22,7 @@ $(document).ready(function() {
 		for(var idx=0; idx<leds.length; idx++)
 		{
 			var led = leds[idx];
-			twoDPaths.push( build2DPath(led.h.min * canvas_width, led.v.min * canvas_height, (led.h.max-led.h.min) * canvas_width, (led.v.max-led.v.min) * canvas_height, 5) );
+			twoDPaths.push( build2DPath(led.hmin * canvas_width, led.vmin * canvas_height, (led.hmax-led.hmin) * canvas_width, (led.vmax-led.vmin) * canvas_height, 5) );
 		}
 	}
 
@@ -144,8 +144,8 @@ $(document).ready(function() {
 		{
 			var led = leds[idx];
 			// can be used as fallback when Path2D is not available
-			//roundRect(ledsCanvasNodeCtx, led.h.min * canvas_width, led.v.min * canvas_height, (led.h.max-led.h.min) * canvas_width, (led.v.max-led.v.min) * canvas_height, 4, true, colors[idx])
-			//ledsCanvasNodeCtx.fillRect(led.h.min * canvas_width, led.v.min * canvas_height, (led.h.max-led.h.min) * canvas_width, (led.v.max-led.v.min) * canvas_height);
+			//roundRect(ledsCanvasNodeCtx, led.hmin * canvas_width, led.vmin * canvas_height, (led.hmax-led.hmin) * canvas_width, (led.vmax-led.vmin) * canvas_height, 4, true, colors[idx])
+			//ledsCanvasNodeCtx.fillRect(led.hmin * canvas_width, led.vmin * canvas_height, (led.hmax-led.hmin) * canvas_width, (led.vmax-led.vmin) * canvas_height);
 
 			ledsCanvasNodeCtx.fillStyle = (useColor) ?  "rgba("+colors[cPos]+","+colors[cPos+1]+","+colors[cPos+2]+",0.9)"  : "hsl("+(idx*360/leds.length)+",100%,50%)";
 			ledsCanvasNodeCtx.fill(twoDPaths[idx]);
@@ -155,7 +155,7 @@ $(document).ready(function() {
 			{
 				ledsCanvasNodeCtx.fillStyle = "blue";
 				ledsCanvasNodeCtx.textAlign = "center";
-				ledsCanvasNodeCtx.fillText(idx, (led.h.min * canvas_width) + ( ((led.h.max-led.h.min) * canvas_width) / 2), (led.v.min * canvas_height) + ( ((led.v.max-led.v.min) * canvas_height) / 2));
+				ledsCanvasNodeCtx.fillText(idx, (led.hmin * canvas_width) + ( ((led.hmax-led.hmin) * canvas_width) / 2), (led.vmin * canvas_height) + ( ((led.vmax-led.vmin) * canvas_height) / 2));
 			}
 
 			// increment colorsPosition

assets/webconfig/js/wizard.js

@@ -518,11 +518,11 @@ $('#btn_wizard_colorcalibration').off().on('click', startWizardCC);
 var hueIPs = [];
 var hueIPsinc = 0;
 var lightIDs = null;
-var huePosTop =    {h: {max: 0.85, min: 0.15}, v: {max: 0.2, min: 0}};
-var huePosBottom = {h: {max: 0.85, min: 0.15}, v: {max: 1, min: 0.8}};
-var huePosLeft =   {h: {max: 0.15, min: 0},    v: {max: 0.85, min: 0.15}};
-var huePosRight =  {h: {max: 1, min: 0.85},    v: {max: 0.85, min: 0.15}};
-var huePosEntire = {h: {max: 1.0, min: 0.0},   v: {max: 1.0, min: 0.0}};
+var huePosTop =    {hmax: 0.85, hmin: 0.15, vmax: 0.2,  vmin: 0};
+var huePosBottom = {hmax: 0.85, hmin: 0.15, vmax: 1,    vmin: 0.8};
+var huePosLeft =   {hmax: 0.15, hmin: 0,    vmax: 0.85, vmin: 0.15};
+var huePosRight =  {hmax: 1,    hmin: 0.85, vmax: 0.85, vmin: 0.15};
+var huePosEntire = {hmax: 1.0,  hmin: 0.0,  vmax: 1.0,  vmin: 0.0};
 
 function startWizardPhilipsHue()
 {