priorities rework, webc update (#366)

* update * update * tabs test * update * test * ... * fix editor * update ui * fix visual glitch if help is off * fix fadecandy error and th [skip ci]
2025-03-01 10:33:28 +00:00 · 2017-01-17 21:53:35 +01:00
parent 5b809743f7
commit 8d7137136b
75 changed files with 1713 additions and 1144 deletions
--- a/assets/webconfig/js/ledsim.js
+++ b/assets/webconfig/js/ledsim.js
@@ -0,0 +1,141 @@
+$(document).ready(function() {
+	var modalOpened = false;
+	var ledsim_width = 540;
+	var ledsim_height = 489;
+	var dialog;
+	var leds;
+	
+	$(hyperion).one("cmd-config-getconfig",function(event){
+		leds = event.response.result.leds;
+		
+		if(storageComp() && getStorage('ledsim_width') != null)
+		{
+			ledsim_width = getStorage('ledsim_width');
+			ledsim_height = getStorage('ledsim_height');
+		}
+		
+		dialog = $("#ledsim_dialog").dialog({
+			uiLibrary: 'bootstrap',
+			resizable: true,
+			modal: false,
+			minWidth: 250,
+			width: ledsim_width,
+			minHeight: 350,
+			height: ledsim_height,
+			closeOnEscape: true,
+			autoOpen: false,
+			title: $.i18n('main_ledsim_title'),
+			resize: function (e) {
+				updateLedLayout();
+			},
+			opened: function (e) {
+				updateLedLayout();
+				modalOpened = true;
+				requestLedColorsStart();
+			
+				if($('#leds_toggle_live_video').hasClass('btn-success'))
+					requestLedImageStart();
+			},
+			closed: function (e) {
+				modalOpened = false;
+			},
+			resizeStop: function (e) {
+				if(storageComp())
+				{
+					setStorage("ledsim_width", $("#ledsim_dialog").outerWidth());
+					setStorage("ledsim_height", $("#ledsim_dialog").outerHeight());	
+				}
+			}
+		});	
+	});
+	
+	function updateLedLayout()
+	{
+		//calculate body size
+		var canvas_height = $('#ledsim_dialog').outerHeight()-$('#ledsim_text').outerHeight()-$('[data-role=footer]').outerHeight()-$('[data-role=header]').outerHeight()-40;
+		var canvas_width = $('#ledsim_dialog').outerWidth()-30;
+		
+		$('#leds_canvas').html("");
+		leds_html = '<img src="" id="image_preview" style="position:relative" />';
+		for(var idx=0; idx<leds.length; idx++)
+		{
+			led = leds[idx];
+			led_id='led_'+led.index;
+			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="'+led.index+'"><span id="'+led_id+'_num" class="led_num">'+led.index+'</span></div>';
+		}
+		$('#leds_canvas').html(leds_html);
+		
+		if($('#leds_toggle_num').hasClass('btn-success'))
+			$('.led_num').toggle(true);
+		
+		if($('#leds_toggle').hasClass('btn-danger'))
+			$('.led').toggle(false);
+	
+		$('#image_preview').attr("width" , canvas_width-1);		
+		$('#image_preview').attr("height", canvas_height-1);
+	}
+	// ------------------------------------------------------------------
+	$('#leds_toggle_num').off().on("click", function() {
+		$('.led_num').toggle();
+		toggleClass('#leds_toggle_num', "btn-danger", "btn-success");
+	});
+
+	// ------------------------------------------------------------------
+	$('#leds_toggle').off().on("click", function() {
+		$('.led').toggle();
+		toggleClass('#leds_toggle', "btn-success", "btn-danger");
+	});
+
+	// ------------------------------------------------------------------
+	$('#leds_toggle_live_video').off().on("click", function() {
+		setClassByBool('#leds_toggle_live_video',imageStreamActive,"btn-success","btn-danger");
+		if ( imageStreamActive )
+		{
+			requestLedImageStop();
+			$('#image_preview').removeAttr("src");
+		}
+		else
+		{
+			requestLedImageStart();
+		}
+	});
+	
+	// ------------------------------------------------------------------
+	$(hyperion).on("cmd-ledcolors-ledstream-update",function(event){
+		if (!modalOpened)
+		{
+			requestLedColorsStop();
+		}
+		else
+		{
+			ledColors = (event.response.result.leds);
+			for(var idx=0; idx<ledColors.length; idx++)
+			{
+				led = ledColors[idx]
+				$("#led_"+led.index).css("background","rgb("+led.red+","+led.green+","+led.blue+")");
+			}
+		}
+	});
+	
+	// ------------------------------------------------------------------
+	$(hyperion).on("cmd-ledcolors-imagestream-update",function(event){
+		if (!modalOpened)
+		{
+			requestLedImageStop();
+		}
+		else
+		{
+			imageData = (event.response.result.image);
+			$("#image_preview").attr("src", imageData);
+		}
+	});
+	
+	$("#btn_open_ledsim").off().on("click", function(event) {
+		dialog.open();
+	});
+});