Update webui (#301)

* update

* update

* fix

* implement opt groups

* spaces

[skip ci]

* page wrapper adjust

[skip ci]

* implement optgroups for remote, adjust effect schemas

* lost id

[skip ci]

assets/webconfig/js/content_effectsconfigurator.js

@@ -1,25 +1,28 @@
-	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];
+    JSONEditor.defaults.editors.colorPicker = JSONEditor.defaults.editors.string.extend({
+
+         getValue: function() {
+            var 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);
-			}
+             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));
-        },
-		
+            $(this.input).colorpicker('updateInput', 'rgb('+val+')');
+            $(this.input).colorpicker('updateData', val);
+            $(this.input).colorpicker('updatePicker', rgb2hex(val));
+         },
+      
         build: function() {
-			this._super();
-			var myinput = this
-				$(this.input).colorpicker({
+            this._super();
+            var myinput = this;
+            $(myinput.input).colorpicker({
                 format: 'rgb',
                 customClass: 'colorpicker-2x',
                 sliders: {
@@ -31,12 +34,12 @@
                         maxTop: 200
                     },
                 },
-               
+              
             })
-			//$(this.input).colorpicker().on('changeColor', function(e) {
-			//$(this.input).trigger("change");
-			//});
-			
+
+            $(this.input).colorpicker().on('changeColor', function(e) {
+                $(myinput).val(e.color.toRGB()).change();
+            });      
         }
     });
 

assets/webconfig/js/content_index.js

@@ -17,10 +17,6 @@ $(document).ready( function() {
 	bindNavToContent("#load_effectsconfig","effects_configurator",false);
 	bindNavToContent("#load_logging","logging",false);
 
-
-	//Change all Checkboxes to Switches
-	$("[type='checkbox']").bootstrapSwitch();
-
 	$(hyperion).on("cmd-serverinfo",function(event){
 		parsedServerInfoJSON = event.response;
 		currentVersion = parsedServerInfoJSON.info.hyperion[0].version;

assets/webconfig/js/content_leds.js

@@ -27,6 +27,13 @@ function validateText(){
 	return true
 }
 
+function round(number) {
+	var factor = Math.pow(10, 4);
+	var tempNumber = number * factor;
+	var roundedTempNumber = Math.round(tempNumber);
+	return roundedTempNumber / factor;
+};
+
 function createLedPreview(leds, origin){
 	
 	if (origin == "classic"){
@@ -59,12 +66,15 @@ function createLedPreview(leds, origin){
 			"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_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);
-	$('#ledc_0').css({"background-color":"black","z-index":"10"});
-	$('#ledc_1').css({"background-color":"grey","z-index":"10"});
+	$('#ledc_0').css({"background-color":"black","z-index":"12"});
+	$('#ledc_1').css({"background-color":"grey","z-index":"11"});
 	$('#ledc_2').css({"background-color":"#A9A9A9","z-index":"10"});
+	
+	if($('#leds_prev_toggle_num').hasClass('btn-success'))
+		$('.led_prev_num').css("display", "inline");
 }
 
 function createClassicLeds(){
@@ -82,13 +92,19 @@ function createClassicLeds(){
 	var rawledsVDepth = parseInt($("#ip_cl_ledsvdepth").val());
 	var rawledsHDepth = parseInt($("#ip_cl_ledshdepth").val());
 	var rawedgeGap = parseInt($("#ip_cl_ledsedgegap").val());
+	var rawcornerGap = parseInt($("#ip_cl_ledscornergap").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 ledsVDepth = rawledsVDepth /100;
+	var ledsHDepth = rawledsHDepth /100;
+	var edgeVGap = rawedgeGap /100/2;
+	var edgeHGap = edgeVGap/(16/9);
+	var cornerVGap = rawcornerGap /100/2;
+	var cornerHGap = cornerVGap/(16/9);
+	var Vmin = 0.0 + edgeVGap;
+	var Vmax = 1.0 - edgeVGap;
+	var Hmin = 0.0 + edgeHGap;
+	var Hmax = 1.0 - edgeHGap;
 	var ledArray = [];
 	
 	createLeftLeds(createBottomLeds(createRightLeds(createTopLeds())));
@@ -143,15 +159,23 @@ function createClassicLeds(){
 	}
 	
 	function createLedArray(hmin, hmax, vmin, vmax){
+		hmin = round(hmin);
+		hmax = round(hmax);
+		vmin = round(vmin);
+		vmax = round(vmax);
 		ledArray.push( { "hscan" : { "minimum" : hmin, "maximum" : hmax }, "vscan": { "minimum": vmin, "maximum": vmax }} );
 	}
 	
 	function createTopLeds(){
-		step=(max-min)/ledsTop;
-		vmin=min
+		step=(Hmax-Hmin)/ledsTop;
+		hmin=Hmin
+		if(cornerVGap != '0'){
+			step=(Hmax-Hmin-(cornerHGap*2))/ledsTop;
+			hmin=Hmin+(cornerHGap);
+		}
+		vmin=Vmin
 		vmax=vmin+ledsHDepth;
-		hmin=min
-		hmax=min+step
+		hmax=hmin+step
 		for (var i = 0; i<ledsTop; i++){
 			createLedArray(hmin, hmax, vmin, vmax);
 			hmin += step
@@ -160,11 +184,15 @@ function createClassicLeds(){
 	}
 	
 	function createLeftLeds(){
-		step=(max-min)/ledsLeft;
-		hmin=min;
-		hmax=min+ledsVDepth;
-		vmin=max-step
-		vmax=max
+		step=(Vmax-Vmin)/ledsLeft;
+		vmax=Vmax
+		if(cornerVGap != '0'){
+			step=(Vmax-Vmin-(cornerVGap*2))/ledsLeft;
+			vmax=Vmax-(cornerVGap);
+		}
+		hmin=Hmin;
+		hmax=hmin+ledsVDepth;
+		vmin=vmax-step
 		for (var i = ledsLeft; i>0; i--){
 			createLedArray(hmin, hmax, vmin, vmax);
 			vmin -= step
@@ -173,11 +201,15 @@ function createClassicLeds(){
 	}
 	
 	function createRightLeds(){
-		step=(max-min)/ledsRight;
-		hmax=max;
+		step=(Vmax-Vmin)/ledsRight;
+		vmin=Vmin
+		if(cornerVGap != '0'){
+			step=(Vmax-Vmin-(cornerVGap*2))/ledsRight;
+			vmin=Vmin+(cornerVGap);
+		}
+		hmax=Hmax;
 		hmin=hmax-ledsVDepth;
-		vmin=min
-		vmax=min+step
+		vmax=vmin+step
 		for (var i = 0; i<ledsRight; i++){
 			createLedArray(hmin, hmax, vmin, vmax);	
 			vmin += step
@@ -186,15 +218,19 @@ function createClassicLeds(){
 	}
 	
 	function createBottomLeds(){
-		step=(max-min)/ledsBottom;
-		vmax=max;
+		step=(Hmax-Hmin)/ledsBottom;
+		hmax=Hmax
+		if(cornerVGap != '0'){
+			step=(Hmax-Hmin-(cornerHGap*2))/ledsBottom;
+			hmax=Hmax-(cornerHGap);
+		}
+		vmax=Vmax;
 		vmin=vmax-ledsHDepth;
-		hmin=max-step
-		hmax=max
+		hmin=hmax-step
 		for (var i = ledsBottom; i>0; i--){
 			createLedArray(hmin, hmax, vmin, vmax);
-			hmin -= step
-			hmax -= step
+			hmin -= step;
+			hmax -= step;
 		}
 	}
 }
@@ -232,6 +268,11 @@ function createMatrixLeds(){
 		var vscanMin = y * vblock
 		var vscanMax = (y + 1) * vblock
 
+		hscanMin = round(hscanMin);
+		hscanMax = round(hscanMax);
+		vscanMin = round(vscanMin);
+		vscanMax = round(vscanMax);
+		
 		leds.push({
 			index: index,
 			hscan: {
@@ -239,8 +280,8 @@ function createMatrixLeds(){
 				maximum: hscanMax
 			},
 			vscan: {
-			minimum: vscanMin,
-			maximum: vscanMax
+				minimum: vscanMin,
+				maximum: vscanMax
 			}
 		})
 	}
@@ -329,13 +370,42 @@ $(document).ready(function() {
 	$(hyperion).one("cmd-serverinfo",function(event){
 		server = event.response;
 		ledDevices = server.info.ledDevices.available
-
-		ledDevicesHtml = "";
+		devRPiSPI = ['apa102', 'ws2801', 'lpd6803', 'lpd8806', 'p9813', 'sk6812spi', 'ws2812spi'];
+		devRPiPWM = ['ws281x'];
+		devRPiGPIO = ['piblaster'];
+		devNET = ['atmoorb', 'dmx', 'fadecandy', 'philipshue', 'tinkerforge', 'tpm2net', 'udpe131', 'udph801', 'udpraw'];
+		devUSB = ['adalight', 'adalightapa102', 'atmo', 'hyperionusbasp', 'lightpack', 'multilightpack', 'paintpack', 'rawhid', 'sedu', 'tpm2'];
+		
+		var optArr = [[]];
+		optArr[1]=[];
+		optArr[2]=[];
+		optArr[3]=[];
+		optArr[4]=[];
+		optArr[5]=[];
+		
 		for (idx=0; idx<ledDevices.length; idx++)
 		{
-			ledDevicesHtml += '<option value="'+ledDevices[idx]+'">'+ledDevices[idx]+'</option>';
+			if($.inArray(ledDevices[idx], devRPiSPI) != -1)
+				optArr[0].push(ledDevices[idx]);
+			else if($.inArray(ledDevices[idx], devRPiPWM) != -1)
+				optArr[1].push(ledDevices[idx]);
+			else if($.inArray(ledDevices[idx], devRPiGPIO) != -1)
+				optArr[2].push(ledDevices[idx]);
+			else if($.inArray(ledDevices[idx], devNET) != -1)
+				optArr[3].push(ledDevices[idx]);
+			else if($.inArray(ledDevices[idx], devUSB) != -1)
+				optArr[4].push(ledDevices[idx]);
+			else
+				optArr[5].push(ledDevices[idx]);
 		}
-		$("#leddevices").html(ledDevicesHtml);
+		
+		$("#leddevices").append(createSel(optArr[0], "RPi SPI"));
+		$("#leddevices").append(createSel(optArr[1], "RPi PWM"));
+		$("#leddevices").append(createSel(optArr[2], "RPi GPIO"));
+		$("#leddevices").append(createSel(optArr[3], "Network"));
+		$("#leddevices").append(createSel(optArr[4], "USB"));
+		$("#leddevices").append(createSel(optArr[5], "Debug"));
+
 		$("#leddevices").val(server.info.ledDevices.active);
 		$("#leddevices").trigger("change");
 	});
@@ -409,6 +479,11 @@ $(document).ready(function() {
 			requestWriteConfig(JSON.parse(createLedConfig()));
 	});
 
+	// ------------------------------------------------------------------
+	$('#leds_prev_toggle_num').off().on("click", function() {
+		$('.led_prev_num').toggle();
+		toggleClass('#leds_prev_toggle_num', "btn-danger", "btn-success");
+	});
 	// -------------------------------------------------------------
 	$('#leds_cfg_nav a[data-toggle="tab"]').off().on('shown.bs.tab', function (e) {
 		var target = $(e.target).attr("href") // activated tab
@@ -492,8 +567,6 @@ $(document).ready(function() {
 		requestWriteConfig(result)
 	});
 
-	// ------------------------------------------------------------------
-	
 	requestServerConfig();
 });
 

assets/webconfig/js/content_remote.js

@@ -69,12 +69,21 @@
 		var newEffects = event.response.info.effects;
 		if (newEffects.length != oldEffects.length)
 		{
-			effects_html = '<option value="__none__"></option>';
+			$('#effect_select').html('<option value="__none__"></option>');
+			var usrEffArr = [];
+			var sysEffArr = [];
+			
 			for(i = 0; i < newEffects.length; i++) {
-				effectName = newEffects[i].name;
-				effects_html += '<option value="'+effectName+'">'+effectName+'</option>';
+				var effectName = newEffects[i].name;
+				if(!/^\:/.test(newEffects[i].file)){
+					usrEffArr.push(effectName);
+				}
+				else{
+					sysEffArr.push(effectName);
+				}
 			}
-			$('#effect_select').html(effects_html);
+			$('#effect_select').append(createSel(usrEffArr, "User Effects"));
+			$('#effect_select').append(createSel(sysEffArr, "Provided Effects"));
 			oldEffects = newEffects;
 		}
 	}

assets/webconfig/js/lib/sb-admin-2.js

@@ -22,7 +22,7 @@ $(function() {
         height = height - topOffset;
         if (height < 1) height = 1;
         if (height > topOffset) {
-            $("#page-wrapper").css("min-height", (height) + "px");
+            $("#page-wrapper").css("min-height", (height-10) + "px");
         }
     });
 

assets/webconfig/js/ui_utils.js

@@ -119,3 +119,27 @@ function createJsonEditor(container,schema,setconfig)
 
 	return editor;
 }
+
+function createSelGroup(group){
+	var el = document.createElement('optgroup');
+	el.setAttribute('label', group);
+	return el
+}
+		
+function createSelOpt(opt){
+	var el = document.createElement('option');
+	el.setAttribute('value', opt);
+	el.innerHTML = opt;
+	return el
+}
+
+function createSel(array, group){
+	if (array.length != "0"){
+	var el = createSelGroup(group);
+		for(var i=0; i<array.length; i++){
+			var opt = createSelOpt(array[i])
+			el.appendChild(opt);
+		}
+	return el;
+	}
+}