Update WebUI (#295)

* update

* lang

* show dialog on delete action

* proper regexp if effect name contains ":"

[skip ci]

assets/webconfig/content/leds.html

@@ -183,6 +183,13 @@
 															<div class="input-group-addon">%</div>
 														</div>
 													</div>
+													<div class="form-group">
+														<label class="col-form-label col-md-6" style="width:190px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_cl_edgegap">Edge Gap</label>
+														<div class=" input-group">
+															<input class="form-control ledCLconstr" id="ip_cl_ledsedgegap" type="number" value="0" min="0" max="30" step="1"></input>
+															<div class="input-group-addon">%</div>
+														</div>
+													</div>
 												</div>
 											</div>
 										</div>
@@ -220,8 +227,8 @@
 										<label class="col-form-label col-md-6" style="width:170px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_ma_cabling">Cabling</label>
 										<div class=" input-group">
 											<select class="form-control ledMAconstr" id="ip_ma_cabling">
-												<option value="snake" lang="en" data-lang-attribute="conf_leds_layout_ma_optsnake">Snake</option>
+												<option value="snake" lang="en" data-lang-token="conf_leds_layout_ma_optsnake">Snake</option>
-												<option value="parallel" lang="en" data-lang-attribute="conf_leds_layout_ma_optparallel">Parallel</option>
+												<option value="parallel" lang="en" data-lang-token="conf_leds_layout_ma_optparallel">Parallel</option>
 											</select>
 										</div>
 									</div>
@@ -229,8 +236,8 @@
 										<label class="col-form-label col-md-6" style="width:170px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_ma_order">Order</label>
 										<div class=" input-group">
 											<select class="form-control ledMAconstr" id="ip_ma_order">
-												<option value="horizontal" lang="en" data-lang-attribute="conf_leds_layout_ma_opthoriz">Horizontal</option>
+												<option value="horizontal" lang="en" data-lang-token="conf_leds_layout_ma_opthoriz">Horizontal</option>
-												<option value="vertical" lang="en" data-lang-attribute="conf_leds_layout_ma_optvert">Vertical</option>
+												<option value="vertical" lang="en" data-lang-token="conf_leds_layout_ma_optvert">Vertical</option>
 											</select>
 										</div>
 									</div>
@@ -239,10 +246,10 @@
 										<label class="col-form-label col-md-6" style="width:170px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_ma_position">Input</label>
 										<div class=" input-group">
 											<select class="form-control ledMAconstr" id="ip_ma_start">
-												<option value="top-left" lang="en" data-lang-attribute="conf_leds_layout_ma_opttopleft">Top left</option>
+												<option value="top-left" lang="en" data-lang-token="conf_leds_layout_ma_opttopleft">Top left</option>
-												<option value="top-right" lang="en" data-lang-attribute="conf_leds_layout_ma_opttopright">Top right</option>
+												<option value="top-right" lang="en" data-lang-token="conf_leds_layout_ma_opttopright">Top right</option>
-												<option value="bottom-left" lang="en" data-lang-attribute="conf_leds_layout_ma_optbottomleft">Bottom left</option>
+												<option value="bottom-left" lang="en" data-lang-token="conf_leds_layout_ma_optbottomleft">Bottom left</option>
-												<option value="bottom-right" lang="en" data-lang-attribute="conf_leds_layout_ma_optbottomright">Bottom right</option>
+												<option value="bottom-right" lang="en" data-lang-token="conf_leds_layout_ma_optbottomright">Bottom right</option>
 											</select>
 										</div>
 									</div>

assets/webconfig/js/content_effectsconfigurator.js

@@ -47,6 +47,25 @@
 
     });
 
+	var oldDelList = [];
+	
+	function updateDelEffectlist(event){
+		var newDelList = event.response.info.effects
+		if(newDelList.length != oldDelList.length)
+		{
+			var EffectHtml = null;
+			for(var idx=0; idx<newDelList.length; idx++)
+			{
+				if(!/^\:/.test(newDelList[idx].file))
+				{
+					EffectHtml += '<option value="'+newDelList[idx].name+'">'+newDelList[idx].name+'</option>';
+				}
+			}
+			$("#effectsdellist").html(EffectHtml);
+			oldDelList = newDelList;
+		}
+	}
+	
 $(hyperion).one("cmd-config-getschema", function(event) {
 	effects = parsedConfSchemaJSON.properties.effectSchemas.internal
 	EffectsHtml = "";
@@ -114,7 +133,7 @@ $(hyperion).one("cmd-config-getschema", function(event) {
 		if(validateEditor() && validateName())
 		{
 			requestWriteEffect(effectName,effectPy,JSON.stringify(effects_editor.getValue()));
-			showInfoDialog('success','SUCCESS!','Your effect has been created successfully!');
+			showInfoDialog('success','SUCCESS!','Your effect "'+effectName+'" has been created successfully!');
 		}
 	});
 
@@ -133,24 +152,13 @@ $(hyperion).one("cmd-config-getschema", function(event) {
 		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);
+		showInfoDialog('success','Effect deleted!', 'The effect "'+name+'" has been deleted successfully!');
 	});
 	
 $(document).ready( function() {
 	requestServerConfigSchema();
+	$(hyperion).on("cmd-serverinfo",updateDelEffectlist);
 });

assets/webconfig/js/content_leds.js

@@ -77,15 +77,16 @@ function createClassicLeds(){
 	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());
+	var rawedgeGap = parseInt($("#ip_cl_ledsedgegap").val());
 	
 	//helper
 	var ledsVDepth = rawledsVDepth / 100;
 	var ledsHDepth = rawledsHDepth / 100;
+	var edgeGap = rawedgeGap / 100 /2;
 	var min = 0.0 + edgeGap;
 	var max = 1.0 - edgeGap;
 	var ledArray = [];
@@ -102,11 +103,12 @@ function createClassicLeds(){
 
 	if (reverse)
 		ledArray.reverse();
-
+	
 	createLedPreview(ledArray, 'classic');
 	createFinalArray(ledArray);
 	
 	function createFinalArray(array){
+		finalLedArray = [];
 		for(var i = 0; i<array.length; i++){
 			hmin = array[i].hscan.minimum;
 			hmax = array[i].hscan.maximum;
@@ -145,52 +147,54 @@ function createClassicLeds(){
 	}
 	
 	function createTopLeds(){
-		vmin=0.0;
+		step=(max-min)/ledsTop;
+		vmin=min
 		vmax=vmin+ledsHDepth;
+		hmin=min
+		hmax=min+step
 		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);
+			hmin += step
+			hmax += step
 		}	
 	}
 	
 	function createLeftLeds(){
-		hmin=0.0;
+		step=(max-min)/ledsLeft;
-		hmax=ledsVDepth;
+		hmin=min;
+		hmax=min+ledsVDepth;
+		vmin=max-step
+		vmax=max
 		for (var i = ledsLeft; i>0; i--){
-			step = 1/ledsLeft;
-			factor = i/ledsLeft;
-			vmin=factor-step;
-			vmax=factor;
 			createLedArray(hmin, hmax, vmin, vmax);
+			vmin -= step
+			vmax -= step
 		}
 	}
 	
 	function createRightLeds(){
-		hmax=1.0;
+		step=(max-min)/ledsRight;
+		hmax=max;
 		hmin=hmax-ledsVDepth;
+		vmin=min
+		vmax=min+step
 		for (var i = 0; i<ledsRight; i++){
-			step = 1/ledsRight;
+			createLedArray(hmin, hmax, vmin, vmax);	
-			factor = i/ledsRight;
+			vmin += step
-			vmin=factor;
+			vmax += step			
-			vmax=factor+step;
-			createLedArray(hmin, hmax, vmin, vmax);			
 		}
 	}
 	
 	function createBottomLeds(){
-		vmax=1.0;
+		step=(max-min)/ledsBottom;
+		vmax=max;
 		vmin=vmax-ledsHDepth;
+		hmin=max-step
+		hmax=max
 		for (var i = ledsBottom; i>0; i--){
-			step = 1/ledsBottom;
-			factor = i/ledsBottom;
-			hmin=factor-step;
-			hmax=factor;
 			createLedArray(hmin, hmax, vmin, vmax);
+			hmin -= step
+			hmax -= step
 		}
 	}
 }
@@ -264,7 +268,7 @@ function createMatrixLeds(){
 			endX = tmp
 		}
 	}
-  
+  finalLedArray =[];
   finalLedArray = leds
   createLedPreview(leds, 'matrix');
 }
@@ -395,7 +399,14 @@ $(document).ready(function() {
 	
 	// ------------------------------------------------------------------
 	$("#leds_custom_save").off().on("click", function() {
-
+		function createLedConfig(){
+			var string = '{"leds" :';
+			string += $("#ledconfig").val();
+			string += "}";
+			return string
+		}
+		if (validateText())
+			requestWriteConfig(JSON.parse(createLedConfig()));
 	});
 
 	// -------------------------------------------------------------

assets/webconfig/js/content_remote.js

@@ -61,9 +61,23 @@
 				
 			}
 		}
-}
+	}
-
+	
-
+	var oldEffects = [];
+	
+	function updateEffectlist(event){
+		var newEffects = event.response.info.effects;
+		if (newEffects.length != oldEffects.length)
+		{
+			effects_html = '<option value="__none__"></option>';
+			for(i = 0; i < newEffects.length; i++) {
+				effectName = newEffects[i].name;
+				effects_html += '<option value="'+effectName+'">'+effectName+'</option>';
+			}
+			$('#effect_select').html(effects_html);
+			oldEffects = newEffects;
+		}
+	}
 
 $(document).ready(function() {
 	// color
@@ -93,7 +107,6 @@ $(document).ready(function() {
 					},
 				}
 			});
-
 			$('#cp2').colorpicker().on('changeColor', function(e) {
 				color = e.color.toRGB();
 				$("#effect_select").val("__none__");
@@ -113,18 +126,10 @@ $(document).ready(function() {
 				});
 			}
 		});
-
-		// effects
-		effects_html = '<option value="__none__"></option>';
-		for(i = 0; i < parsedServerInfoJSON.info.effects.length; i++) {
-			//console.log(parsedServerInfoJSON.info.effects[i].name);
-			effectName = parsedServerInfoJSON.info.effects[i].name;
-			effects_html += '<option value="'+effectName+'">'+effectName+'</option>';
-		}
-		$('#effect_select').html(effects_html);
 		
-		
+	// components
-		// components
 	$(hyperion).on("cmd-serverinfo",updateComponents);
+	// effects
+	$(hyperion).on("cmd-serverinfo",updateEffectlist);
 		
 });

assets/webconfig/lang/de.json

@@ -74,6 +74,7 @@
 		"conf_leds_layout_cl_hleddepth" : "Horizontale LED Tiefe",
 		"conf_leds_layout_cl_vleddepth" : "Vertikale LED Tiefe",
 		"conf_leds_layout_cl_generate" : "Generiere Konfiguartion",
+		"conf_leds_layout_cl_edgegap" : "Rahmenabstand",
 		"conf_leds_layout_ma_horiz" : "Horizontal",
 		"conf_leds_layout_ma_vert" : "Vertical",
 		"conf_leds_layout_ma_cabling" : "Verkabelung",