Webui: extend led hardware config + connection lost page (#226)

* split content and js
tune leds config

* implement connection lost page

* split js/html in huebridge

* add js action for connection lost

* extend led config
make connection loss nicer

* tune led code
add menu entry for grabber

* more tuning of webui

* switch back to botstrap textarea
add v4l to components

* add icon

* extend schema for jsoneditor

* implement ledcolors streaming with 4fps

* implement component state

assets/webconfig/js/content_generalconf.js

@@ -0,0 +1,83 @@
+/*
+function removeAdvanced(obj,searchStack)
+{
+	searchStack = [];
+	$.each(obj, function(key, val) {
+		if ( typeof(val) == 'object' )
+		{
+			searchStack.push(key);
+			if (! removeAdvanced(val,searchStack) )
+				searchStack.pop();
+		}
+		else if ( key == "advanced" && val == true )
+		{
+			console.log(searchStack);
+			return true;
+		}
+	});
+	return false;
+}
+*/
+
+$(hyperion).one("cmd-config-getschema", function(event) {
+	parsedConfSchemaJSON = event.response.result;
+	// remove all "advanced" options from schema
+	//removeAdvanced(parsedConfSchemaJSON, []); // not working atm
+	//console.log(JSON.stringify(parsedConfSchemaJSON));
+	schema = parsedConfSchemaJSON.properties;
+	schema_blackborderdetector = schema.blackborderdetector;
+	schema_color = schema.color;
+	schema_effects = schema.effects;
+	schema_forwarder = schema.forwarder;
+	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',
+		form_name_root: 'sa',
+		disable_edit_json: 'true',
+		disable_properties: 'true',
+		no_additional_properties: 'true',
+		schema: {
+			title:' ',
+			properties: {
+				schema_blackborderdetector,
+				schema_color,
+				schema_effects,
+				schema_forwarder,
+				schema_initialEffect,
+				schema_kodiVideoChecker,
+				schema_smoothing,
+				schema_logger,
+				schema_jsonServer,
+				schema_protoServer,
+				schema_boblightServer,
+				schema_udpListener,
+				schema_webConfig
+			}
+		}
+	});
+});
+
+
+$(document).ready( function() {
+	requestServerConfigSchema();
+
+	document.getElementById('submit').addEventListener('click',function() {
+		// Get the value from the editor
+		//console.log(general_conf_editor.getValue());
+	});
+//  $("[type='checkbox']").bootstrapSwitch();
+});
+

assets/webconfig/js/content_grabber.js

@@ -0,0 +1,58 @@
+ 
+/*
+function removeAdvanced(obj,searchStack)
+{
+	searchStack = [];
+	$.each(obj, function(key, val) {
+		if ( typeof(val) == 'object' )
+		{
+			searchStack.push(key);
+			if (! removeAdvanced(val,searchStack) )
+				searchStack.pop();
+		}
+		else if ( key == "advanced" && val == true )
+		{
+			console.log(searchStack);
+			return true;
+		}
+	});
+	return false;
+}
+*/
+
+$(hyperion).one("cmd-config-getschema", function(event) {
+	parsedConfSchemaJSON = event.response.result;
+	schema = parsedConfSchemaJSON.properties;
+	schema_framegrabber = schema.framegrabber;
+	schema_grabberv4l2 = schema["grabber-v4l2"];
+
+	var element = document.getElementById('editor_container');
+	
+	var grabber_conf_editor = new JSONEditor(element,{
+		theme: 'bootstrap3',
+		disable_collapse: 'true',
+		form_name_root: 'sa',
+		disable_edit_json: 'true',
+		disable_properties: 'true',
+		no_additional_properties: 'true',
+		schema: {
+			title:' ',
+			properties: {
+				schema_framegrabber,
+				schema_grabberv4l2,
+			}
+		}
+	});
+});
+
+
+$(document).ready( function() {
+	requestServerConfigSchema();
+
+	document.getElementById('submit').addEventListener('click',function() {
+		// Get the value from the editor
+		//console.log(general_conf_editor.getValue());
+	});
+//  $("[type='checkbox']").bootstrapSwitch();
+});
+

assets/webconfig/js/content_index.js

@@ -12,6 +12,8 @@ $(document).ready( function() {
 	bindNavToContent("#load_update","update",false);
 	bindNavToContent("#load_confGeneral","generalconf",false);
 	bindNavToContent("#load_confLeds","leds",false);
+	bindNavToContent("#load_confGrabber","grabber",false);
+
 
 	//Change all Checkboxes to Switches
 	$("[type='checkbox']").bootstrapSwitch();
@@ -31,6 +33,14 @@ $(document).ready( function() {
 		var hostname = parsedServerInfoJSON.info.hostname;
 		$('#dash_systeminfo').html(hostname+':'+hyperionport);
 
+		var components = parsedServerInfoJSON.info.components;
+		components_html = "";
+		for ( idx=0; idx<components.length;idx++)
+		{
+			components_html += '<tr><td>'+(components[idx].title)+'</td><td><i class="fa fa-circle component-'+(components[idx].enabled?"on":"off")+'"></i></td></tr>';
+		}
+		$("#tab_components").html(components_html);
+
 		$.get( "https://raw.githubusercontent.com/hyperion-project/hyperion.ng/master/version.json", function( data ) {
 			parsedUpdateJSON = JSON.parse(data);
 			latestVersion = parsedUpdateJSON[0].versionnr;

assets/webconfig/js/content_leds.js

@@ -1,51 +1,48 @@
 
 var ledsCustomCfgInitialized = false;
 
-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++)
+	$(hyperion).on("cmd-ledcolors-ledstream-update",function(event){
+		if ($("#leddevices").length == 0)
 		{
-			led = ledColors[idx]
-			$("#led_"+led.index).css("background","rgb("+led.red+","+led.green+","+led.blue+")");
+			requestLedColorsStop();
+		}
+		else
+		{
+			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++)
+	$(hyperion).on("cmd-ledcolors-ledstream-stop",function(event){
+		led_count = $(".led").length;
+		for(var idx=0; idx<led_count; idx++)
 		{
-			led = ledColors[idx]
-			$("#led_"+led.index).css("background","rgb("+led.red+","+led.green+","+led.blue+")");
+			$('#led_'+idx).css("background-color","hsl("+(idx*360/led_count)+",100%,50%)");
 		}
 	});
 
+	// ------------------------------------------------------------------
+	$(hyperion).one("cmd-serverinfo",function(event){
+		server = event.response;
+		ledDevices = server.info.ledDevices.available
+
+		ledDevicesHtml = "";
+		for (idx=0; idx<ledDevices.length; idx++)
+		{
+			ledDevicesHtml += '<option value="'+ledDevices[idx]+'">'+ledDevices[idx]+'</option>';
+		}
+		$("#leddevices").html(ledDevicesHtml);
+		$("#leddevices").val(server.info.ledDevices.active);
+	});
+
 	// ------------------------------------------------------------------
 	$(hyperion).on("cmd-config-getconfig",function(event){
 		parsedConfJSON = event.response.result;
@@ -68,7 +65,6 @@ $(document).ready(function() {
 		}
 		$('#leds_canvas').html(leds_html);
 		$('#led_0').css("border","2px dotted red");
-		ledStreamActivate(false);
 	});
 
 	// ------------------------------------------------------------------
@@ -88,23 +84,18 @@ $(document).ready(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%)");
-			}
+			requestLedColorsStop();
 		}
 		else
 		{
-			ledStreamActivate(true);
+			requestLedColorsStart();
 		}
 	});
 
 	// ------------------------------------------------------------------
 	$("#leds_custom_check").on("click", function() {
 		e = isJsonString($("#ledconfig").val());
+		
 		if (e.length == 0)
 			showErrorDialog("Validation success", "Your config is valid!");
 		else
@@ -118,10 +109,13 @@ $(document).ready(function() {
 
 	$('#leds_cfg_nav a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
 		var target = $(e.target).attr("href") // activated tab
-		if (target == "#menu_customcfg" && !ledsCustomCfgInitialized)
+		if (target == "#menu_gencfg" && !ledsCustomCfgInitialized)
 		{
 			ledsCustomCfgInitialized = true;
-			$("#ledconfig").linedtextarea();
+// 			$("#ledconfig").linedtextarea();
+// 			$(window).resize(function(){
+// 				$("#ledconfig").trigger("resize");
+// 			});
 		}
 	});
 

assets/webconfig/js/hyperion.js

@@ -36,12 +36,12 @@ var hyperion = {};
 var wsTan = 1;
 var cronId = 0;
 var ledStreamActive=false;
-var watchdog = true;
+var watchdog = 0;
 
 // 
 function cron()
 {
-	if ( ! watchdog )
+	if ( watchdog > 3)
 	{
 		var interval_id = window.setInterval("", 9999); // Get a reference to the last
 		for (var i = 1; i < interval_id; i++)
@@ -69,7 +69,7 @@ function initWebSocket()
 					$(hyperion).trigger({type:"open"});
 					
 					$(hyperion).on("cmd-serverinfo", function(event) {
-						watchdog = true;
+						watchdog = 0;
 					});
 					cronId = window.setInterval(cron,2000);
 				};
@@ -143,7 +143,7 @@ function initWebSocket()
 
 // also used for watchdog
 function requestServerInfo() {
-	watchdog = false;
+	watchdog++;
 	websocket.send('{"command":"serverinfo", "tan":'+wsTan+'}');
 }
 
@@ -156,11 +156,13 @@ function requestServerConfig() {
 }
 
 function requestLedColorsStart() {
-	websocket.send('{"command":"ledcolors", "tan":'+wsTan+',"subcommand":"ledstream_start"}');
+	ledStreamActive=true;
+	websocket.send('{"command":"ledcolors", "tan":'+wsTan+',"subcommand":"ledstream-start"}');
 }
 
 function requestLedColorsStop() {
-	websocket.send('{"command":"ledcolors", "tan":'+wsTan+',"subcommand":"ledstream_stop"}');
+	ledStreamActive=false;
+	websocket.send('{"command":"ledcolors", "tan":'+wsTan+',"subcommand":"ledstream-stop"}');
 }
 
 function requestPriorityClear() {