LED Layouts, Delete Effect, Colorpicker for EC (#290)

* upd

* ipadte schemas

* update html

* update

* fix matrix index increment

[skip ci]

* matrix 1 led as minimum

[skip ci]

* disable zoom

[skpi ci]

assets/webconfig/js/content_effectsconfigurator.js

@@ -1,3 +1,52 @@
+	JSONEditor.defaults.editors.colorPicker = JSONEditor.defaults.editors.string.extend({
+		
+		getValue: function() {
+			color = $(this.input).data('colorpicker').color.toRGB();
+			return [color.r, color.g, color.b];
+        },
+
+        setValue: function(val) {
+			function rgb2hex(rgb){
+				return "#" +
+				("0" + parseInt(rgb[0],10).toString(16)).slice(-2) +
+				("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
+				("0" + parseInt(rgb[2],10).toString(16)).slice(-2);
+			}
+
+			$(this.input).colorpicker('setValue', rgb2hex(val));
+        },
+		
+        build: function() {
+			this._super();
+			var myinput = this
+				$(this.input).colorpicker({
+                format: 'rgb',
+                customClass: 'colorpicker-2x',
+                sliders: {
+                    saturation: {
+                        maxLeft: 200,
+                        maxTop: 200
+                    },
+                    hue: {
+                        maxTop: 200
+                    },
+                },
+               
+            })
+			//$(this.input).colorpicker().on('changeColor', function(e) {
+			//$(this.input).trigger("change");
+			//});
+			
+        }
+    });
+
+    JSONEditor.defaults.resolvers.unshift(function(schema) {
+        if(schema.type === "array" && schema.format === "colorpicker") {
+            return "colorPicker";
+        }
+
+    });
+
 $(hyperion).one("cmd-config-getschema", function(event) {
 	effects = parsedConfSchemaJSON.properties.effectSchemas.internal
 	EffectsHtml = "";
@@ -83,7 +132,25 @@ $(hyperion).one("cmd-config-getschema", function(event) {
 	$('#btn_cont_test').off().on('click',function() {
 		toggleClass('#btn_cont_test', "btn-success", "btn-danger");
 	});
-
+	
+// Delete effect
+	delList=parsedServerInfoJSON.info.effects
+	var EffectHtml
+	
+	for(var idx=0; idx<delList.length; idx++)
+		{
+			if(!/:/.test(delList[idx].file))
+			{
+				EffectHtml += '<option value="'+delList[idx].name+'">'+delList[idx].name+'</option>';
+			}
+		}
+		$("#effectsdellist").html(EffectHtml);
+	
+	$('#btn_delete').off().on('click',function() {
+		var name = $("#effectsdellist").val();
+		requestDeleteEffect(name);
+	});
+	
 $(document).ready( function() {
 	requestServerConfigSchema();
 });

assets/webconfig/js/content_leds.js

@@ -1,5 +1,6 @@
 
 var ledsCustomCfgInitialized = false;
+var finalLedArray = [];
 
 function get_hue_lights(){
 	$.ajax({
@@ -16,8 +17,284 @@ function get_hue_lights(){
 	});
 }
 
+function validateText(){
+	e = isJsonString($("#ledconfig").val());
+
+	if (e.length != 0){
+		showInfoDialog("error", "Validation failed!", e);
+		return false
+	}
+	return true
+}
+
+function createLedPreview(leds, origin){
+	
+	if (origin == "classic"){
+		$('#previewcreator').html('<h5 lang="en" data-lang-token="conf_leds_layout_preview_originCL">Created from: Classic Layout (LED Frame)</h5>');
+		$('#leds_preview').css("padding-top", "56.25%");
+	}
+	else if(origin == "text"){
+		$('#previewcreator').html('<h5 lang="en" data-lang-token="conf_leds_layout_preview_originTEXT">Created from: Textfield</h5>');
+		$('#leds_preview').css("padding-top", "56.25%");
+	}
+	else if(origin == "matrix"){
+		$('#previewcreator').html('<h5 lang="en" data-lang-token="conf_leds_layout_preview_originMA">Created from: Matrix Layout(LED wall)</h5>');
+		$('#leds_preview').css("padding-top", "100%");
+	}
+	
+	$('#previewledcount').html('<h5>Total LED count: '+leds.length+'</h5>');
+	
+	$('.st_helper').css("border", "8px solid grey");
+	
+	canvas_height = $('#leds_preview').innerHeight();
+	canvas_width = $('#leds_preview').innerWidth();
+
+	leds_html = "";
+	for(var idx=0; idx<leds.length; idx++)
+	{
+		led = leds[idx];
+		led_id='ledc_'+[idx];
+		bgcolor = "background-color:hsl("+(idx*360/leds.length)+",100%,50%);";
+		pos = "left:"+(led.hscan.minimum * canvas_width)+"px;"+
+			"top:"+(led.vscan.minimum * canvas_height)+"px;"+
+			"width:"+((led.hscan.maximum-led.hscan.minimum) * canvas_width-1)+"px;"+
+			"height:"+((led.vscan.maximum-led.vscan.minimum) * canvas_height-1)+"px;";
+		leds_html += '<div id="'+led_id+'" class="led" style="'+bgcolor+pos+'" title="'+idx+'"><span id="'+led_id+'_num" class="led_num">'+idx+'</span></div>';
+	}
+	$('#leds_preview').html(leds_html);
+	$('#ledc_0').css({"background-color":"black","z-index":"10"});
+	$('#ledc_1').css({"background-color":"grey","z-index":"10"});
+	$('#ledc_2').css({"background-color":"#A9A9A9","z-index":"10"});
+}
+
+function createClassicLeds(){
+	//get values
+	var ledsTop = parseInt($("#ip_cl_ledstop").val());
+	var ledsBottom = parseInt($("#ip_cl_ledsbottom").val());
+	var ledsLeft = parseInt($("#ip_cl_ledsleft").val());
+	var ledsRight = parseInt($("#ip_cl_ledsright").val());
+	var ledsGlength = parseInt($("#ip_cl_ledsglength").val());
+	var ledsGPos = parseInt($("#ip_cl_ledsgpos").val());
+	var position = parseInt($("#ip_cl_position").val());
+	var reverse = $("#ip_cl_reverse").is(":checked");
+	var edgeGap = 0.1
+	
+	//advanced values
+	var rawledsVDepth = parseInt($("#ip_cl_ledsvdepth").val());
+	var rawledsHDepth = parseInt($("#ip_cl_ledshdepth").val());
+	
+	//helper
+	var ledsVDepth = rawledsVDepth / 100;
+	var ledsHDepth = rawledsHDepth / 100;
+	var min = 0.0 + edgeGap;
+	var max = 1.0 - edgeGap;
+	var ledArray = [];
+	
+	createLeftLeds(createBottomLeds(createRightLeds(createTopLeds())));
+
+	if(ledsGlength != "0" && validateGap()){
+		ledArray.splice(ledsGPos, ledsGlength);
+	}
+	
+	if (position != "0"){
+		rotateArray(ledArray, position);
+	}
+
+	if (reverse)
+		ledArray.reverse();
+
+	createLedPreview(ledArray, 'classic');
+	createFinalArray(ledArray);
+	
+	function createFinalArray(array){
+		for(var i = 0; i<array.length; i++){
+			hmin = array[i].hscan.minimum;
+			hmax = array[i].hscan.maximum;
+			vmin = array[i].vscan.minimum;
+			vmax = array[i].vscan.maximum;
+			finalLedArray[i] = { "index" : i, "hscan": { "maximum" : hmax, "minimum" : hmin }, "vscan": { "maximum": vmax, "minimum": vmin}}
+		}
+	}
+	
+	function validateGap(){
+		if (ledsGPos+ledsGlength > ledArray.length){
+			showInfoDialog('error','GAP LOST IN SPACE!','You moved the gap out of your TV frame, lower the gap length or position and try again!');
+			return false
+		}
+		return true
+	}
+	
+	function rotateArray(array, times){
+		if (times > "0"){
+			while( times-- ){
+				array.push(array.shift())
+			}
+			return array;
+		}
+		else
+		{
+			while( times++ ){
+				array.unshift(array.pop())
+			}
+			return array;
+		}
+	}
+	
+	function createLedArray(hmin, hmax, vmin, vmax){
+		ledArray.push( { "hscan" : { "minimum" : hmin, "maximum" : hmax }, "vscan": { "minimum": vmin, "maximum": vmax }} );
+	}
+	
+	function createTopLeds(){
+		vmin=0.0;
+		vmax=vmin+ledsHDepth;
+		for (var i = 0; i<ledsTop; i++){
+			//step=(max-min)/ledsTop
+			//i/ledsTop*(max-min)
+			step = 1/ledsTop;
+			factor = i/ledsTop;
+			hmin=factor;
+			hmax=factor+step;
+			createLedArray(hmin, hmax, vmin, vmax);
+		}	
+	}
+	
+	function createLeftLeds(){
+		hmin=0.0;
+		hmax=ledsVDepth;
+		for (var i = ledsLeft; i>0; i--){
+			step = 1/ledsLeft;
+			factor = i/ledsLeft;
+			vmin=factor-step;
+			vmax=factor;
+			createLedArray(hmin, hmax, vmin, vmax);
+		}
+	}
+	
+	function createRightLeds(){
+		hmax=1.0;
+		hmin=hmax-ledsVDepth;
+		for (var i = 0; i<ledsRight; i++){
+			step = 1/ledsRight;
+			factor = i/ledsRight;
+			vmin=factor;
+			vmax=factor+step;
+			createLedArray(hmin, hmax, vmin, vmax);			
+		}
+	}
+	
+	function createBottomLeds(){
+		vmax=1.0;
+		vmin=vmax-ledsHDepth;
+		for (var i = ledsBottom; i>0; i--){
+			step = 1/ledsBottom;
+			factor = i/ledsBottom;
+			hmin=factor-step;
+			hmax=factor;
+			createLedArray(hmin, hmax, vmin, vmax);
+		}
+	}
+}
+
+function createMatrixLeds(){
+// Big thank you to RanzQ (Juha Rantanen) from Github for this script
+// https://raw.githubusercontent.com/RanzQ/hyperion-audio-effects/master/matrix-config.js
+	
+	//get values
+	var width = parseInt($("#ip_ma_ledshoriz").val());
+	var height = parseInt($("#ip_ma_ledsvert").val());
+	var cabling = $("#ip_ma_cabling").val();
+	//var order = $("#ip_ma_order").val();
+	var start = $("#ip_ma_start").val();
+
+	var parallel = false
+	var index = 0
+	var leds = []
+	var hblock = 1.0 / width
+	var vblock = 1.0 / height
+
+	if (cabling == "parallel"){
+		parallel = true
+	}
+
+/**
+ * Adds led to the hyperion config led array
+ * @param {Number} index Index of the led
+ * @param {Number} x     Horizontal position in matrix
+ * @param {Number} y     Vertical position in matrix
+ */
+	function addLed (index, x, y) {
+		var hscanMin = x * hblock
+		var hscanMax = (x + 1) * hblock
+		var vscanMin = y * vblock
+		var vscanMax = (y + 1) * vblock
+
+		leds.push({
+			index: index,
+			hscan: {
+				minimum: hscanMin,
+				maximum: hscanMax
+			},
+			vscan: {
+			minimum: vscanMin,
+			maximum: vscanMax
+			}
+		})
+	}
+
+	var startYX = start.split('-')
+	var startX = startYX[1] === 'right' ? width - 1 : 0
+	var startY = startYX[0] === 'bottom' ? height - 1 : 0
+	var endX = startX === 0 ? width - 1 : 0
+	var endY = startY === 0 ? height - 1 : 0
+	var forward = startX < endX
+
+	var downward = startY < endY
+
+	var x, y
+
+	for (y = startY; downward && y <= endY || !downward && y >= endY; y += downward ? 1 : -1) {
+		for (x = startX; forward && x <= endX || !forward && x >= endX; x += forward ? 1 : -1) {
+			addLed(index, x, y)
+			index++
+		}
+		if (!parallel) {
+			forward = !forward
+			var tmp = startX
+			startX = endX
+			endX = tmp
+		}
+	}
+  
+  finalLedArray = leds
+  createLedPreview(leds, 'matrix');
+}
 
 $(document).ready(function() {
+	//-------------------------------------------------------------------
+	$('.ledCLconstr').bind("change", function() {
+		createClassicLeds();
+	});
+	
+	$('.ledMAconstr').bind("change", function() {
+		createMatrixLeds();
+	});
+	
+	$('#btn_cl_generate').off().on("click", function() {
+		if (finalLedArray != ""){
+			$("#ledconfig").text(JSON.stringify(finalLedArray, null, "\t"));
+			$('#collapse1').collapse('hide')
+			$('#collapse4').collapse('show');
+		}
+	});
+	
+	$('#btn_ma_generate').off().on("click", function() {
+		if (finalLedArray != ""){
+			$("#ledconfig").text(JSON.stringify(finalLedArray, null, "\t"));
+			$('#collapse2').collapse('hide')
+			$('#collapse4').collapse('show');
+		}
+	});
+	
 	// ------------------------------------------------------------------
 	$(hyperion).on("cmd-ledcolors-ledstream-update",function(event){
 		if ($("#leddevices").length == 0)
@@ -80,7 +357,7 @@ $(document).ready(function() {
 			leds_html += '<div id="'+led_id+'" class="led" style="'+bgcolor+pos+'" title="'+led.index+'"><span id="'+led_id+'_num" class="led_num">'+led.index+'</span></div>';
 		}
 		$('#leds_canvas').html(leds_html);
-		$('#led_0').css("border","2px dotted red");
+		$('#led_0').css({"z-index":"10"});
 	});
 
 	// ------------------------------------------------------------------
@@ -109,15 +386,13 @@ $(document).ready(function() {
 	});
 
 	// ------------------------------------------------------------------
-	$("#leds_custom_check").off().on("click", function() {
-		e = isJsonString($("#ledconfig").val());
-
-		if (e.length == 0)
-			showInfoDialog("success", "Validation success", "Your config is valid!");
-		else
-			showInfoDialog("error", "Validation failed!", e);
+	$("#leds_custom_updsim").off().on("click", function() {
+		if (validateText()){
+			string = $("#ledconfig").val();
+			createLedPreview(JSON.parse(string), 'text');
+		}
 	});
-
+	
 	// ------------------------------------------------------------------
 	$("#leds_custom_save").off().on("click", function() {
 

assets/webconfig/js/hyperion.js

@@ -213,3 +213,7 @@ function requestWriteEffect(effectName,effectPy,effectArgs)
 function requestTestEffect(effectName,effectPy,effectArgs) {
 	websocket.send('{"command":"effect", "tan":'+wsTan+',"effect":{"name":"'+effectName+'", "args":'+effectArgs+'},"priority":1, "pythonScript":"'+effectPy+'"}');
 }
+
+function requestDeleteEffect(effectName) {
+	websocket.send('{"command":"delete-effect","name":"'+effectName+'"}');
+}