Webui: view led configuration + lights (#223)

* make hyperion websocket api event based

* implement new websocket handling for generalconf

* migrate all webui stuff to new event based websocket api
some cleanup ... now all html templates are in content
refactoring of web stuff

* add hyperionport to global
start impl. removing advanced key

* separate dashboard
serverinfo is updated every 3 seconds automatily
add input selection
cleanup and remove not needed stuff

* prepare infrastructure for server sided file execution

* webui minor fixes

* fix compile

* implement led layout view with live colors

* live led vies

* fix general conf
unrigister ledcolors request, when not on leds.html

* fix compiler warning

* prepare realtime ledview and enhance ui

assets/webconfig/content/effects.html

@@ -1,7 +1,7 @@
 <div class="container-fluid">
-    <div class="row">
-        <div class="col-lg-12">
-            <h1 class="page-header" lang="en" data-lang-token="main_menu_effects_token">Effects</h1>
+	<div class="row">
+		<div class="col-lg-12">
+			<h1 class="page-header" lang="en" data-lang-token="main_menu_effects_token">Effects</h1>
 			<div class="introd">
 				<h4 lang="en" data-lang-token="remote_effects_intro">The Effects remote enables you to set an effect for testing or demonstration purposes. Don't forget to stop it afterwards.</h4>
 			</div>

assets/webconfig/content/generalconf.html

@@ -17,7 +17,8 @@
 
 
 <script>
-	function removeAdvanced(obj)
+/*
+	function removeAdvanced(obj,searchStack)
 	{
 		searchStack = [];
 		$.each(obj, function(key, val) {
@@ -35,33 +36,33 @@
 		});
 		return false;
 	}
-
+*/
 	$(hyperion).on("cmd-config-getschema", function(event) {
 		parsedConfSchemaJSON = event.response.result;
-
 		// remove all "advanced" options from schema
-		//removeAdvanced(parsedConfSchemaJSON); // not working atm
+		//removeAdvanced(parsedConfSchemaJSON, []); // not working atm
 		//console.log(JSON.stringify(parsedConfSchemaJSON));
-
-		schema_smoothing = parsedConfSchemaJSON.properties.smoothing;
-		schema_kodiVideoChecker = parsedConfSchemaJSON.properties.kodiVideoChecker;
-		schema_initialEffect = parsedConfSchemaJSON.properties.initialEffect;
-		//schema_grabber-v4l2 = parsedConfSchemaJSON.properties.grabber-v4l2;
-		schema_framegrabber = parsedConfSchemaJSON.properties.framegrabber;
-		schema_forwarder = parsedConfSchemaJSON.properties.forwarder;
-		schema_effects = parsedConfSchemaJSON.properties.effects;
-		schema_device = parsedConfSchemaJSON.properties.device;
-		schema_color = parsedConfSchemaJSON.properties.color;
-		schema_blackborderdetector = parsedConfSchemaJSON.properties.blackborderdetector;
-		schema_logger = parsedConfSchemaJSON.properties.logger;
-		schema_jsonServer = parsedConfSchemaJSON.properties.jsonServer;
-		schema_protoServer = parsedConfSchemaJSON.properties.protoServer;
-		schema_boblightServer = parsedConfSchemaJSON.properties.boblightServer;
-		schema_udpListener = parsedConfSchemaJSON.properties.udpListener;
-		schema_webConfig = parsedConfSchemaJSON.properties.webConfig;
+		schema = parsedConfSchemaJSON.properties;
+		schema_blackborderdetector = schema.blackborderdetector;
+		schema_color = schema.color,
+		schema_device = schema.device,
+		schema_effects = schema.effects,
+		schema_forwarder = schema.forwarder,
+		schema_framegrabber = schema.framegrabber,
+		//schema_grabber-v4l2 = schema.grabber-v4l2,
+		schema_initialEffect = schema.initialEffect,
+		schema_kodiVideoChecker = schema.kodiVideoChecker,
+		schema_smoothing = schema.smoothing,
+		schema_logger = schema.logger,
+		schema_jsonServer = schema.jsonServer,
+		schema_protoServer = schema.protoServer,
+		schema_boblightServer = schema.boblightServer,
+		schema_udpListener = schema.udpListener,
+		schema_webConfig = schema.webConfig
 
 		var element = document.getElementById('editor_holder');
 		//JSONEditor.defaults.options.theme = 'bootstrap3';
+		
 		var general_conf_editor = new JSONEditor(element,{
 			theme: 'bootstrap3',
 			disable_collapse: 'true',
@@ -98,7 +99,7 @@
 
 		document.getElementById('submit').addEventListener('click',function() {
 			// Get the value from the editor
-			console.log(general_conf_editor.getValue());
+			//console.log(general_conf_editor.getValue());
 		});
     //  $("[type='checkbox']").bootstrapSwitch();
 	});

assets/webconfig/content/input_selection.html

@@ -1,6 +1,15 @@
-<div style="text-align:center;margin:auto;padding:auto">
-	<div id="hyperion_inputs" />
-</div> 
+
+<div  class="container-fluid">
+	<h1 class="page-header" lang="en" data-lang-token="main_menu_input_selection_token">Input Selection</h1>
+<!--	<div class="introd">
+		<h4 lang="en" data-lang-token="remote_effects_intro"></h4>
+	</div>-->
+
+	<div style="text-align:center;margin:auto;padding:auto">
+		<div id="hyperion_inputs" />
+	</div> 
+</div>
+
 
 <script>
 	$(hyperion).on("cmd-serverinfo", function(event) {
@@ -22,10 +31,8 @@
 		
 		var max_width=200;
 		$('.btn_input_selection').each(function() {
-			elem_width = $(this).css('width')
-			elem_width = elem_width.substring(0, elem_width.length - 2);
-			if (elem_width > max_width)
-				max_width = elem_width;
+			if ($(this).innerWidth() > max_width)
+				max_width = $(this).innerWidth();
 		});
 		$('.btn_input_selection').css("min-width",max_width+"px"); 
 	});

assets/webconfig/content/leds.html

@@ -0,0 +1,125 @@
+<style>
+	#leds_canvas {width:800px; height:450px; background-color:#AAAAAA; position:absolute; margin:10px; box-shadow: 10px 10px 5px #BBBBBB;
+	background-image:url(/img/hyperion/hyperionlogo.png); background-repeat:no-repeat; background-position: center; border-radius:2px; }
+	.led { display:inline-block; border: 1px solid black; position:absolute; opacity:0.8; text-align:center;
+	vertical-align:middle; padding:4px;  border-radius:2px;}
+	.led_num {display:none; position:relative; color:black; background-color: white; 
+		border-radius:2px; padding:1px; vertical-align:middle; text-align:center;  font-size:0.8em;}
+	#leds_controls {white-space:nowrap; margin-top:530px;}
+</style>
+
+<div  class="container-fluid">
+	<h1 class="page-header" lang="en" data-lang-token="main_menu_leds_conf_token">Led Configuration</h1>
+<!--	<div class="introd">
+		<h4 lang="en" data-lang-token="remote_effects_intro"></h4>
+	</div>-->
+
+		<div id="leds_canvas"/>
+	
+		<div id="leds_controls">
+			<button lang="en" type="button" class="btn btn-success" id="leds_toggle">toggle leds</button>
+			<button lang="en" type="button" class="btn btn-danger" id="leds_toggle_num">toggle led numbers</button>
+			<button lang="en" type="button" class="btn btn-success" id="leds_toggle_live">toggle live leds</button>
+		</div>
+</div>
+
+<script>
+
+	function updateLedColors()
+	{
+		if($("#leds_canvas").length > 0 && ledStreamActive)
+		{
+			requestLedColorsStart();
+		}
+		else
+		{
+			ledStreamActivate(false);
+		}
+	}
+
+	function ledStreamActivate(enable)
+	{
+		$(hyperion).off("cron", updateLedColors );
+		if ( enable && ! ledStreamActive )
+		{
+			$(hyperion).on("cron", updateLedColors );
+		}
+
+		ledStreamActive=enable;
+	}
+	
+	
+	$(document).ready(function() {
+		$(hyperion).on("cmd-ledcolors",function(event){
+			ledColors = (event.response.result);
+			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-ledstream-update",function(event){
+			ledColors = (event.response.result);
+			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-config-getconfig",function(event){
+			parsedConfJSON = event.response.result;
+			leds = parsedConfJSON.leds;
+			canvas_height = $('#leds_canvas').innerHeight();
+			canvas_width = $('#leds_canvas').innerWidth();
+
+			leds_html = "";
+			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);
+			$('#led_0').css("border","2px dotted red");
+			ledStreamActivate(true)
+		});
+		
+		$('#leds_toggle_num').on("click", function() {
+			$('.led_num').toggle();
+			toggleClass('#leds_toggle_num', "btn-danger", "btn-success");
+		});
+		
+		$('#leds_toggle').on("click", function() {
+			$('.led').toggle();
+			toggleClass('#leds_toggle', "btn-success", "btn-danger");
+		});
+		
+		$('#leds_toggle_live').on("click", function() {
+			setClassByBool('#leds_toggle_live',ledStreamActive,"btn-success","btn-danger");
+			if ( ledStreamActive )
+			{
+				ledStreamActivate(false);
+
+				led_count = $(".led").length;
+				for(var idx=0; idx<led_count; idx++)
+				{
+					$('#led_'+idx).css("background-color","hsl("+(idx*360/led_count)+",100%,50%)");
+				}
+			}
+			else
+			{
+				ledStreamActivate(true);
+			}
+			
+		});
+		
+		requestServerConfig();
+	});
+</script>