From 2beccb0912d6f781b0f2e4dc3c1266b5bca1d43e Mon Sep 17 00:00:00 2001
From: redPanther <redPanther@users.noreply.github.com>
Date: Wed, 7 Sep 2016 20:10:37 +0200
Subject: [PATCH] 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/content/connection_lost.html |  33 +++++-
 assets/webconfig/content/dashboard.html       |  14 +--
 assets/webconfig/content/generalconf.html     |  93 +--------------
 assets/webconfig/content/grabber.html         |  20 ++++
 assets/webconfig/content/leds.html            | 110 ++++++++++++++----
 .../webconfig/content/remote_components.html  |  49 +++++++-
 assets/webconfig/css/hyperion.css             |   2 +-
 assets/webconfig/index.html                   |  11 +-
 assets/webconfig/js/content_generalconf.js    |  83 +++++++++++++
 assets/webconfig/js/content_grabber.js        |  58 +++++++++
 assets/webconfig/js/content_index.js          |  10 ++
 assets/webconfig/js/content_leds.js           |  82 ++++++-------
 assets/webconfig/js/hyperion.js               |  14 ++-
 include/hyperion/ComponentRegister.h          |  28 +++++
 include/hyperion/Hyperion.h                   |   6 +
 include/hyperion/MessageForwarder.h           |   2 +
 include/utils/Components.h                    |  16 +++
 libsrc/boblightserver/BoblightServer.cpp      |  13 ++-
 libsrc/hyperion/CMakeLists.txt                |   2 +
 libsrc/hyperion/ComponentRegister.cpp         |  27 +++++
 libsrc/hyperion/GrabberWrapper.cpp            |  40 ++++---
 libsrc/hyperion/Hyperion.cpp                  |   5 +
 libsrc/hyperion/LinearColorSmoothing.cpp      |   7 +-
 libsrc/hyperion/LinearColorSmoothing.h        |   2 +-
 libsrc/hyperion/MessageForwarder.cpp          |   5 +
 libsrc/hyperion/hyperion.schema.json          |  67 +++++++----
 libsrc/jsonserver/JsonClientConnection.cpp    |  78 ++++++++++---
 libsrc/jsonserver/JsonClientConnection.h      |   6 +-
 .../jsonserver/schema/schema-ledcolors.json   |   2 +-
 libsrc/kodivideochecker/KODIVideoChecker.cpp  |  13 ++-
 libsrc/protoserver/ProtoServer.cpp            |  10 +-
 libsrc/udplistener/UDPListener.cpp            |  19 +--
 libsrc/utils/Components.cpp                   |   1 +
 .../utils/jsonschema/QJsonSchemaChecker.cpp   |   3 +-
 src/hyperiond/hyperiond.cpp                   |  23 +++-
 35 files changed, 675 insertions(+), 279 deletions(-)
 create mode 100644 assets/webconfig/content/grabber.html
 create mode 100644 assets/webconfig/js/content_generalconf.js
 create mode 100644 assets/webconfig/js/content_grabber.js
 create mode 100644 include/hyperion/ComponentRegister.h
 create mode 100644 libsrc/hyperion/ComponentRegister.cpp
 create mode 100644 libsrc/utils/Components.cpp

diff --git a/assets/webconfig/content/connection_lost.html b/assets/webconfig/content/connection_lost.html
index 030a3732..fa883b28 100644
--- a/assets/webconfig/content/connection_lost.html
+++ b/assets/webconfig/content/connection_lost.html
@@ -1,16 +1,39 @@
 <div id="wrapper">
-	<div class="container-fluid">
-		connection lost: <a href="/">reconnect</a>
+	<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom:0">
+		<div class="navbar-header">
+			<a class="navbar-brand" href="/"><img src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!" height="55"></a>
+		</div>
+	</nav>
+
+	<div class="container" style="margin-top:50px">
+		<div class="panel panel-danger" style="box-shadow: 10px 10px 5px #BBBBBB;">
+			<div class="panel-heading"><i class="fa fa-exclamation-triangle"></i> Connection to Hyperion Service lost!</div>
+			<div class="panel-body"><a href="/">reconnect</a></div>
+		</div>
 	</div>
 </div>
 
+
+<!-- ************************************ -->
+
 <script>
+var connectionLost = false;
+var connectionTimer;
+
+function tryReconnect()
+{
+	$.ajax({ url: "/" }).done(function(data) {
+		window.clearInterval(connectionTimer);
+		window.location.href ="/";
+	});
+}
+
 function connectionLostAction()
 {
-	// demo code to see if this works
-	$("#wrapper").css("margin","auto");
-	$("#wrapper").css("background-color","#BBBBBB");
+	connectionLost = true;
+	connectionTimer = window.setInterval(tryReconnect, 5000);
 }
+
 </script>
 
 
diff --git a/assets/webconfig/content/dashboard.html b/assets/webconfig/content/dashboard.html
index 86dc848d..391afe1a 100644
--- a/assets/webconfig/content/dashboard.html
+++ b/assets/webconfig/content/dashboard.html
@@ -52,19 +52,7 @@
 													<th>Status</th>
 												</tr>
 											</thead>
-											<tbody>
-												<tr>
-													<td>Kodi Watch</td>
-													<td><i class="fa fa-circle component-on"></i></td>
-												</tr>
-													<tr>
-													<td>Blackborder</td>
-													<td><i class="fa fa-circle component-off"></i></td>
-												</tr>
-												<tr>
-													<td>Booteffect</td>
-													<td><i class="fa fa-circle component-off"></i></td>
-												</tr>
+											<tbody id="tab_components">
 											</tbody>
 										</table>
 									</div>
diff --git a/assets/webconfig/content/generalconf.html b/assets/webconfig/content/generalconf.html
index 94201f57..86137c35 100644
--- a/assets/webconfig/content/generalconf.html
+++ b/assets/webconfig/content/generalconf.html
@@ -7,7 +7,7 @@
 			</div>
 			<hr>
 			<div class="col-lg-12">
-				<form id="generalConfForm"></form>
+<!--				<form id="generalConfForm"></form>-->
 				<div id='editor_holder'></div>
 				<button id='submit'>Submit (console.log)</button>
 			</div>
@@ -16,93 +16,4 @@
 </div>
 
 
-<script>
-/*
-	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).on("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_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',
-			form_name_root: 'sa',
-			disable_edit_json: 'true',
-			disable_properties: 'true',
-			no_additional_properties: 'true',
-			schema: {
-				title:' ',
-				properties: {
-					schema_blackborderdetector,
-					schema_color,
-					schema_device,
-					schema_effects,
-					schema_forwarder,
-					schema_framegrabber,
-					//schema_grabber-v4l2,
-					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();
-	});
-
-
-</script>
+<script src="/js/content_generalconf.js"></script>
diff --git a/assets/webconfig/content/grabber.html b/assets/webconfig/content/grabber.html
new file mode 100644
index 00000000..f8eee33d
--- /dev/null
+++ b/assets/webconfig/content/grabber.html
@@ -0,0 +1,20 @@
+
+<div class="container-fluid">
+	<div class="row">
+		<div class="col-lg-12">
+			<h1 class="page-header" lang="en" data-lang-token="main_menu_grabber_conf_token">Capturing Hardware</h1> 
+			<div class="introd">
+				<h4 lang="en" data-lang-token="remote_general_conf_intro">You can edit the general configuration here.</h4>
+			</div>
+			<hr>
+			<div class="col-lg-12">
+<!--				<form id="grabberConfForm"></form>-->
+				<div id='editor_container'/>
+				<button id='submit'>Submit (console.log)</button>
+			</div>
+		</div>
+	</div>
+</div>
+
+
+<script src="/js/content_grabber.js"></script>
diff --git a/assets/webconfig/content/leds.html b/assets/webconfig/content/leds.html
index 6540861d..1b64225d 100644
--- a/assets/webconfig/content/leds.html
+++ b/assets/webconfig/content/leds.html
@@ -5,24 +5,36 @@
 	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;}
+	#leds_controls {white-space:nowrap; margin-top:500px;}
 </style>
 
-
-	<h1 class="page-header" lang="en" data-lang-token="main_menu_leds_conf_token">Led Configuration</h1>
+<div class="container-fluid">
+	<h1 class="page-header" lang="en" data-lang-token="main_menu_leds_conf_token">LED Hardware</h1>
 <!--	<div class="introd">
 		<h4 lang="en" data-lang-token="remote_effects_intro"></h4>
 	</div>-->
 
 	<ul id="leds_cfg_nav" class="nav nav-tabs">
-		<li class="active"><a data-toggle="tab" href="#menu_display">Display LEDs</a></li>
-		<li><a data-toggle="tab" href="#menu_gencfg">Generate Config</a></li>
-		<li><a data-toggle="tab" href="#menu_customcfg">Custom Config</a></li>
+		<li class="active"><a data-toggle="tab" href="#menu_controller">LED Controller</a></li>
+		<li><a data-toggle="tab" href="#menu_gencfg">Generate LED Config</a></li>
+		<li><a data-toggle="tab" href="#menu_display">LED Testing</a></li>
 	</ul>
 
 	<div class="tab-content">
 
-		<div id="menu_display" class="tab-pane fade in active">
+		<div id="menu_controller" class="tab-pane fade in active" style="padding-top:10px">
+			<div class="panel panel-primary">
+					<div class="panel-heading form-group" style="font-size:90%;white-space:nowrap;">
+						<label for="leddevices">Controller Type</label>
+						<select id="leddevices" class="form-control" style="color:black;width:auto;margin-left:10px;display:inline-block" />
+					</div>
+					<div class="panel-body">
+					... device specific options ... we need some cpp code extension to get schema for all leds
+					</div>
+			</div>
+		</div>
+	
+		<div id="menu_display" class="tab-pane fade" style="padding-top:10px">
 			<div  class="container-fluid">
 				<div id="leds_canvas"/>
 	
@@ -34,24 +46,80 @@
 			</div>
 		</div>
 
-		<div id="menu_gencfg" class="tab-pane fade">
-			<h3>coming soon</h3>
-			<p>led config generator ...</p>
-		</div>
+		<div id="menu_gencfg" class="tab-pane fade" style="padding-top:10px">
 
-		<div id="menu_customcfg" class="tab-pane fade">
-			<p>
-			<div class="form-group">
-				<div style="margin-bottom:5px">
-					<button lang="en" type="button" class="btn btn-success" id="leds_custom_check">check config</button>
-					<button lang="en" type="button" class="btn btn-success" id="leds_custom_save">save config</button>
-				</div>
-				<textarea  rows="20" id="ledconfig" style="width:90%"></textarea>
-			</div>
-			</p>
+			<div class="row">
+				<div class="col-sm-6">
+			
+					<div class="panel-group" id="accordion">
+					
+						<div class="panel panel-primary">
+							<div class="panel-heading">
+								<h4 class="panel-title">
+									<a data-toggle="collapse" data-parent="#accordion" href="#collapse1"><i class="fa fa-television fa-fw"></i>Frame Configuration (ambient light)</a>
+								</h4>
+							</div>
+							<div id="collapse1" class="panel-collapse collapse in">
+								<div class="panel-body">
+								just a reminder ... this are the needed form elements:
+<pre>
+led count horizontal:
+led count vertical:
+cabling: zick zack/snake
+order: horizontal/vertical
+led 0 position: top-left / top-right / bottom-left / bottom-right
+</pre>
+								</div>
+							</div>
+						</div> 
+	
+					<div class="panel panel-primary">
+						<div class="panel-heading">
+							<h4 class="panel-title">
+								<a data-toggle="collapse" data-parent="#accordion" href="#collapse2"><i class="fa fa-th fa-fw"></i>Matrix Configuration (LED wall)</a>
+							</h4>
+						</div>
+						<div id="collapse2" class="panel-collapse collapse">
+							<div class="panel-body">
+							just a reminder ... this are the needed form elements:
+<pre>
+led count links
+led count rechts
+led count oben
+led count unten rechts
+led count unten links
+start
+</pre>
+							</div>
+						</div>
+					</div>
+		
+			</div> <!-- accordion -->
 		</div>
+		
+		<div class="col-sm-6">
+			<div class="panel panel-primary" style="margin-bottom:5px">
+				<div class="panel-heading">
+					<h4 class="panel-title"><i class="fa fa-wrench fa-fw"></i>Generated Configuration</h4>
+				</div>
+				<div class="panel-body">
+					<div class="form-group">
+						<button lang="en" type="button" class="btn btn-success" id="leds_custom_check">check config</button>
+						<button lang="en" type="button" class="btn btn-success" id="leds_custom_save">save config</button>
+					</div>
+					<textarea rows="25" id="ledconfig" class="form-control"></textarea>
+				</div>
+			</div>
+		</div> <!-- left pane -->
+
+		</div> <!-- row layout -->
+	</div>
+
+	</div>
+
 
 	</div> <!-- tab content -->
+</div>
 
 <script src="/js/content_leds.js"></script>
 
diff --git a/assets/webconfig/content/remote_components.html b/assets/webconfig/content/remote_components.html
index e8a5765b..2c0542e1 100644
--- a/assets/webconfig/content/remote_components.html
+++ b/assets/webconfig/content/remote_components.html
@@ -6,14 +6,17 @@
 				<h4 lang="en" data-lang-token="remote_components_intro">The components remote enables you to disable and enable certain components of Hyperion during runtime. Keep in mind this persist just until the next reboot! To enable/disable components permament, use the configuration section.</h4>
 			</div>
 			<hr>
-			<div class="col-lg-12" id="componentsbutton">
+			<div class="col-lg-12">
+			 <div id="componentsbutton">
+			 </div>
 			</div>
 		</div>
 	</div>
 </div>
 
 <script>
-new Enum('SMOOTHING', 'BLACKBORDER', 'KODICHECKER', 'FORWARDER', 'UDPLISTENER', 'BOBLIGHT_SERVER','GRABBER');
+/*
+new Enum('SMOOTHING', 'BLACKBORDER', 'KODICHECKER', 'FORWARDER', 'UDPLISTENER', 'BOBLIGHT_SERVER','GRABBER', 'V4L');
 
 function Enum() {
 	for (var i in arguments)
@@ -23,4 +26,46 @@ function Enum() {
 		$('#componentsbutton').append('<button type="button" class="btn btn-danger" onclick="requestSetComponentState(\''+arguments[i]+'\',false)"><i class="fa fa-play"></i></button> '+arguments[i]+'<br />');
     }
 }
+*/
+
+function updateComponents(event) {
+		if ($('#componentsbutton').length == 0)
+		{
+			$(hyperion).off("cmd-serverinfo",updateComponents);
+		}
+		else
+		{
+			components = event.response.info.components;
+			// create buttons
+			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>';
+				enable_style = (components[idx].enabled? "btn-success" : "btn-danger");
+				enable_icon  = (components[idx].enabled? "fa-play" : "fa-stop");
+				comp_name    = components[idx].name;
+				comp_btn_id  = "comp_btn_"+comp_name;
+				
+				// create btn if not there
+				if ($("#"+comp_btn_id).length == 0)
+				{
+					d='<p><button type="button" id="'+comp_btn_id+'" class="btn '+enable_style
+						+'" onclick="requestSetComponentState(\''+comp_name+'\','+(!components[idx].enabled)
+						+')"><i id="'+comp_btn_id+'_icon" class="fa '+enable_icon+'"></i></button> '+components[idx].title+'</p>';
+					$('#componentsbutton').append(d);
+				}
+				else // already create, update state
+				{
+					setClassByBool( $('#'+comp_btn_id)        , components[idx].enabled, "btn-danger", "btn-success" );
+					setClassByBool( $('#'+comp_btn_id+"_icon"), components[idx].enabled, "fa-stop"    , "fa-play" );
+					$('#'+comp_btn_id).attr("onclick",'requestSetComponentState(\''+comp_name+'\','+(!components[idx].enabled)+')');
+				}
+				
+			}
+		}
+};
+
+$(document).ready(function() {
+	$(hyperion).on("cmd-serverinfo",updateComponents);
+});
+
 </script>
diff --git a/assets/webconfig/css/hyperion.css b/assets/webconfig/css/hyperion.css
index 064f8b54..92cae3d4 100644
--- a/assets/webconfig/css/hyperion.css
+++ b/assets/webconfig/css/hyperion.css
@@ -13,7 +13,7 @@ body{font-family:Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:15
 table.borderless td,table.borderless th{border: none !important;}
 
 /*Header*/
-.navbar-brand{padding: 5px;height:90px;}
+.navbar-brand{padding: 5px;padding-left:20px;height:60px;}
 .sidebar{margin-top:91px;}
 .dropdown{font-size:18px;}
 @media (max-width: 767px) {.sidebar{margin-top:0px;}}
diff --git a/assets/webconfig/index.html b/assets/webconfig/index.html
index 01f6099e..0031d2b4 100644
--- a/assets/webconfig/index.html
+++ b/assets/webconfig/index.html
@@ -92,7 +92,7 @@
 					<span class="icon-bar"></span>
 				</button>
 
-				<a class="navbar-brand" href="/"><img src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!"></a>
+				<a class="navbar-brand" href="/"><img src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!" height="55"></a>
 
 			</div>
 			<!-- /.navbar-header -->
@@ -202,9 +202,10 @@
 						<li>
 							<a class="inactive"><i class="fa fa-cog fa-fw"></i><span lang="en" data-lang-token="main_menu_configuration_token">Configuration</span><span class="fa arrow"></span></a>
 							<ul class="nav nav-second-level">
-								<li> <a class="inactive" id="load_confGeneral"><i class="fa fa-play-circle-o fa-fw"></i><span lang="en" data-lang-token="main_menu_general_conf_token">General</span></a> </li>
-								<li> <a class="inactive" id="load_confKodi"><i class="fa fa-play-circle-o fa-fw"></i><span lang="en" data-lang-token="main_menu_kodiwatch_token">Kodi Watch</span></a> </li>
-								<li> <a class="inactive" id="load_confLeds"><i class="fa fa-lightbulb-o fa-fw"></i><span lang="en" data-lang-token="main_menu_leds_conf_token">LEDs</span></a> </li>
+								<li> <a class="inactive" id="load_confGeneral"><i class="fa fa-wrench fa-fw"></i><span lang="en" data-lang-token="main_menu_general_conf_token">General</span></a> </li>
+								<li> <a class="inactive" id="load_confGrabber"><i class="fa fa-camera fa-fw"></i><span lang="en" data-lang-token="main_menu_grabber_conf_token">Capturing Hardware</span></a> </li>
+								<li> <a class="inactive" id="load_confLeds"><i class="fa fa-lightbulb-o fa-fw"></i><span lang="en" data-lang-token="main_menu_leds_conf_token">LED Hardware</span></a> </li>
+								<li> <a class="inactive" id="load_confKodi"><i class="fa fa-play-circle-o fa-fw"></i><span lang="en" data-lang-token="main_menu_kodiwatch_token">KODI Connector</span></a> </li>
 								<li> <a class="inactive" id="load_huebridge"><i class="fa fa-cog fa-fw"></i><span lang="en" data-lang-token="main_menu_huebridge_token">Hue Bridge</span></a> </li>
 							</ul>
 						</li>
@@ -237,7 +238,7 @@
 	</div>
 	<!-- /#wrapper -->
 
-	<div id="container_connection_lost" style="display:none" />
+	<div id="container_connection_lost" style="display:none"></div>
 
 	<div id="error_dialog" class="modal fade" role="dialog">
 		<div class="modal-dialog">
diff --git a/assets/webconfig/js/content_generalconf.js b/assets/webconfig/js/content_generalconf.js
new file mode 100644
index 00000000..c957d451
--- /dev/null
+++ b/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();
+});
+
diff --git a/assets/webconfig/js/content_grabber.js b/assets/webconfig/js/content_grabber.js
new file mode 100644
index 00000000..78f8acea
--- /dev/null
+++ b/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();
+});
+
diff --git a/assets/webconfig/js/content_index.js b/assets/webconfig/js/content_index.js
index 9d81a62e..f7bafe1a 100644
--- a/assets/webconfig/js/content_index.js
+++ b/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;
diff --git a/assets/webconfig/js/content_leds.js b/assets/webconfig/js/content_leds.js
index b242fbdc..053feaf4 100644
--- a/assets/webconfig/js/content_leds.js
+++ b/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");
+// 			});
 		}
 	});
 
diff --git a/assets/webconfig/js/hyperion.js b/assets/webconfig/js/hyperion.js
index 22110b5d..7048a00c 100644
--- a/assets/webconfig/js/hyperion.js
+++ b/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() {
diff --git a/include/hyperion/ComponentRegister.h b/include/hyperion/ComponentRegister.h
new file mode 100644
index 00000000..5ae442b0
--- /dev/null
+++ b/include/hyperion/ComponentRegister.h
@@ -0,0 +1,28 @@
+#pragma once
+
+#include <utils/Components.h> 
+#include <utils/Logger.h>
+
+// STL includes
+#include <map>
+
+#include <QObject>
+
+class ComponentRegister : public QObject
+{
+	Q_OBJECT
+
+public:
+	ComponentRegister();
+	~ComponentRegister();
+
+	std::map<hyperion::Components, bool> getRegister() { return _componentStates; };
+
+public slots:
+	void componentStateChanged(const hyperion::Components comp, const bool activated);
+
+private:
+	std::map<hyperion::Components, bool> _componentStates;
+	Logger * _log;
+};
+
diff --git a/include/hyperion/Hyperion.h b/include/hyperion/Hyperion.h
index 0be1d25e..20ae4bbb 100644
--- a/include/hyperion/Hyperion.h
+++ b/include/hyperion/Hyperion.h
@@ -21,6 +21,7 @@
 #include <hyperion/ColorCorrection.h>
 #include <hyperion/ColorAdjustment.h>
 #include <hyperion/MessageForwarder.h>
+#include <hyperion/ComponentRegister.h>
 
 // Effect engine includes
 #include <effectengine/EffectDefinition.h>
@@ -158,6 +159,9 @@ public:
 	/// @param state The state of the component [true | false]
 	///
 	void setComponentState(const hyperion::Components component, const bool state);
+
+	ComponentRegister& getComponentRegister() { return _componentRegister; };
+
 public slots:
 	///
 	/// Writes a single color to all the leds for the given time and priority
@@ -359,6 +363,8 @@ private:
 	/// count of hardware leds
 	unsigned _hwLedCount;
 
+	ComponentRegister _componentRegister;
+	
 	/// register of input sources and it's prio channel
 	PriorityRegister _priorityRegister;
 
diff --git a/include/hyperion/MessageForwarder.h b/include/hyperion/MessageForwarder.h
index a762ae41..48b084bc 100644
--- a/include/hyperion/MessageForwarder.h
+++ b/include/hyperion/MessageForwarder.h
@@ -29,6 +29,8 @@ public:
 	void addProtoSlave(std::string slave);
 
 	bool protoForwardingEnabled();
+	bool jsonForwardingEnabled();
+	bool forwardingEnabled() { return jsonForwardingEnabled() || protoForwardingEnabled(); };
 	QStringList getProtoSlaves();
 	QList<MessageForwarder::JsonSlaveAddress> getJsonSlaves();
 
diff --git a/include/utils/Components.h b/include/utils/Components.h
index 52729b89..628bd586 100644
--- a/include/utils/Components.h
+++ b/include/utils/Components.h
@@ -35,6 +35,22 @@ inline const char* componentToString(Components c)
 	}
 }
 
+inline const char* componentToIdString(Components c)
+{
+	switch (c)
+	{
+		case COMP_SMOOTHING:     return "SMOOTHING";
+		case COMP_BLACKBORDER:   return "BLACKBORDER";
+		case COMP_KODICHECKER:   return "KODICHECKER";
+		case COMP_FORWARDER:     return "FORWARDER";
+		case COMP_UDPLISTENER:   return "UDPLISTENER";
+		case COMP_BOBLIGHTSERVER:return "BOBLIGHTSERVER";
+		case COMP_GRABBER:       return "GRABBER";
+		case COMP_V4L:           return "V4L";
+		default:                 return "";
+	}
+}
+
 inline  Components stringToComponent(QString component)
 {
 	component = component.toUpper();
diff --git a/libsrc/boblightserver/BoblightServer.cpp b/libsrc/boblightserver/BoblightServer.cpp
index e6b81d94..68a45f0c 100644
--- a/libsrc/boblightserver/BoblightServer.cpp
+++ b/libsrc/boblightserver/BoblightServer.cpp
@@ -41,7 +41,6 @@ void BoblightServer::start()
 	emit statusChanged(_isActive);
 
 	_hyperion->registerPriority("Boblight", _priority);
-
 }
 
 void BoblightServer::stop()
@@ -62,11 +61,15 @@ void BoblightServer::stop()
 
 void BoblightServer::componentStateChanged(const hyperion::Components component, bool enable)
 {
-	if (component == COMP_BOBLIGHTSERVER && _isActive != enable)
+	if (component == COMP_BOBLIGHTSERVER)
 	{
-		if (enable) start();
-		else        stop();
-		Info(_log, "change state to %s", (enable ? "enabled" : "disabled") );
+		if (_isActive != enable)
+		{
+			if (enable) start();
+			else        stop();
+			Info(_log, "change state to %s", (_isActive ? "enabled" : "disabled") );
+		}
+		_hyperion->getComponentRegister().componentStateChanged(component, _isActive);
 	}
 }
 
diff --git a/libsrc/hyperion/CMakeLists.txt b/libsrc/hyperion/CMakeLists.txt
index dc70fc8d..a967aece 100644
--- a/libsrc/hyperion/CMakeLists.txt
+++ b/libsrc/hyperion/CMakeLists.txt
@@ -9,6 +9,7 @@ SET(Hyperion_QT_HEADERS
 
 	${CURRENT_SOURCE_DIR}/LinearColorSmoothing.h
 	${CURRENT_HEADER_DIR}/GrabberWrapper.h
+	${CURRENT_HEADER_DIR}/ComponentRegister.h
 )
 
 SET(Hyperion_HEADERS
@@ -38,6 +39,7 @@ SET(Hyperion_SOURCES
 	${CURRENT_SOURCE_DIR}/LinearColorSmoothing.cpp
 	${CURRENT_SOURCE_DIR}/MessageForwarder.cpp
 	${CURRENT_SOURCE_DIR}/GrabberWrapper.cpp
+	${CURRENT_SOURCE_DIR}/ComponentRegister.cpp
 )
 
 SET(Hyperion_RESOURCES
diff --git a/libsrc/hyperion/ComponentRegister.cpp b/libsrc/hyperion/ComponentRegister.cpp
new file mode 100644
index 00000000..41f52c75
--- /dev/null
+++ b/libsrc/hyperion/ComponentRegister.cpp
@@ -0,0 +1,27 @@
+#include <hyperion/ComponentRegister.h>
+#include <iostream>
+
+ComponentRegister::ComponentRegister()
+	: _log(Logger::getInstance("ComponentRegister"))
+{
+}
+
+ComponentRegister::~ComponentRegister()
+{
+}
+
+
+void ComponentRegister::componentStateChanged(const hyperion::Components comp, const bool activated)
+{
+	Info(_log, "%s: %s", componentToString(comp), (activated? "activated" : "off"));
+	_componentStates.emplace(comp,activated);
+	_componentStates[comp] = activated;
+
+/*	for(auto comp : _componentStates)
+	{
+		std::cout << hyperion::componentToIdString(comp.first) << " " << comp.second << std::endl;
+	}
+	std::cout << "\n";
+	*/
+}
+ 
diff --git a/libsrc/hyperion/GrabberWrapper.cpp b/libsrc/hyperion/GrabberWrapper.cpp
index 989b9716..2db0a7cc 100644
--- a/libsrc/hyperion/GrabberWrapper.cpp
+++ b/libsrc/hyperion/GrabberWrapper.cpp
@@ -17,6 +17,7 @@ GrabberWrapper::GrabberWrapper(std::string grabberName, const int priority, hype
 	_timer.setSingleShot(false);
 
 	_forward = _hyperion->getForwarder()->protoForwardingEnabled();
+	_hyperion->getComponentRegister().componentStateChanged(hyperion::COMP_BLACKBORDER, _processor->blackBorderDetectorEnabled());
 	connect(_hyperion, SIGNAL(componentStateChanged(hyperion::Components,bool)), this, SLOT(componentStateChanged(hyperion::Components,bool)));
 	connect(&_timer, SIGNAL(timeout()), this, SLOT(action()));
 
@@ -45,27 +46,36 @@ void GrabberWrapper::stop()
 
 void GrabberWrapper::componentStateChanged(const hyperion::Components component, bool enable)
 {
-	if (component == _grabberComponentId && _timer.isActive() != enable)
+	if (component == _grabberComponentId)
 	{
-		if (enable) start();
-		else        stop();
-
-		_forward = _hyperion->getForwarder()->protoForwardingEnabled();
-
-		if ( enable == _timer.isActive() )
+		if (_timer.isActive() != enable)
 		{
-			Info(_log, "grabber change state to %s", (_timer.isActive() ? "enabled" : "disabled") );
-		}
-		else
-		{
-			WarningIf( enable, _log, "enable grabber failed");
+			if (enable) start();
+			else        stop();
+
+			_forward = _hyperion->getForwarder()->protoForwardingEnabled();
+
+
+			if ( enable == _timer.isActive() )
+			{
+				Info(_log, "grabber change state to %s", (_timer.isActive() ? "enabled" : "disabled") );
+			}
+			else
+			{
+				WarningIf( enable, _log, "enable grabber failed");
+			}
 		}
+		_hyperion->getComponentRegister().componentStateChanged(component, _timer.isActive());
 	}
 
-	if (component == hyperion::COMP_BLACKBORDER && _processor->blackBorderDetectorEnabled() != enable)
+	if (component == hyperion::COMP_BLACKBORDER)
 	{
-		_processor->enableBlackBorderDetector(enable);
-		Info(_log, "bb detector change state to %s", (_processor->blackBorderDetectorEnabled() ? "enabled" : "disabled") );
+		if (_processor->blackBorderDetectorEnabled() != enable)
+		{
+			_processor->enableBlackBorderDetector(enable);
+			Info(_log, "bb detector change state to %s", (_processor->blackBorderDetectorEnabled() ? "enabled" : "disabled") );
+		}
+		_hyperion->getComponentRegister().componentStateChanged(component, _processor->blackBorderDetectorEnabled());
 	}
 }
 
diff --git a/libsrc/hyperion/Hyperion.cpp b/libsrc/hyperion/Hyperion.cpp
index 9cbaf376..c74b6f1a 100644
--- a/libsrc/hyperion/Hyperion.cpp
+++ b/libsrc/hyperion/Hyperion.cpp
@@ -507,6 +507,7 @@ LedDevice * Hyperion::createColorSmoothing(const Json::Value & smoothingConfig,
 	if ( ! smoothingConfig.get("enable", true).asBool() )
 	{
 		Info(log,"Smoothing disabled");
+		Hyperion::getInstance()->getComponentRegister().componentStateChanged(hyperion::COMP_SMOOTHING, false);
 		return nullptr;
 	}
 
@@ -603,12 +604,16 @@ Hyperion::Hyperion(const Json::Value &jsonConfig, const std::string configFile)
 				_ledString,
 				jsonConfig["blackborderdetector"]
 	);
+	//_hyperion->getComponentRegister().componentStateChanged(component, _processor->blackBorderDetectorEnabled());
 
+	getComponentRegister().componentStateChanged(hyperion::COMP_FORWARDER, _messageForwarder->forwardingEnabled());
+	
 	// initialize the color smoothing filter
 	LedDevice* smoothing = createColorSmoothing(jsonConfig["smoothing"], _device);
 	if ( smoothing != nullptr )
 	{
 		_device = smoothing;
+		getComponentRegister().componentStateChanged(hyperion::COMP_SMOOTHING, ((LinearColorSmoothing*)_device)->componentState());
 		connect(this, SIGNAL(componentStateChanged(hyperion::Components,bool)), (LinearColorSmoothing*)_device, SLOT(componentStateChanged(hyperion::Components,bool)));
 	}
 
diff --git a/libsrc/hyperion/LinearColorSmoothing.cpp b/libsrc/hyperion/LinearColorSmoothing.cpp
index 0c4f9d9c..df9bf2ee 100644
--- a/libsrc/hyperion/LinearColorSmoothing.cpp
+++ b/libsrc/hyperion/LinearColorSmoothing.cpp
@@ -2,6 +2,7 @@
 #include <QDateTime>
 
 #include "LinearColorSmoothing.h"
+#include <hyperion/Hyperion.h>
 
 using namespace hyperion;
 
@@ -21,7 +22,6 @@ LinearColorSmoothing::LinearColorSmoothing( LedDevice * ledDevice, double ledUpd
 	_timer.setInterval(_updateInterval);
 
 	connect(&_timer, SIGNAL(timeout()), this, SLOT(updateLeds()));
-
 	Info( _log, "Created linear-smoothing with interval: %d ms, settlingTime: %d ms, updateDelay: %d frames",
 	      _updateInterval, settlingTime_ms,  _outputDelay );
 }
@@ -141,10 +141,11 @@ void LinearColorSmoothing::queueColors(const std::vector<ColorRgb> & ledColors)
 
 void LinearColorSmoothing::componentStateChanged(const hyperion::Components component, bool enable)
 {
-	if (component == COMP_SMOOTHING && _bypass == enable)
+	if (component == COMP_SMOOTHING)
 	{
+		InfoIf(_bypass == enable, _log, "change state to %s", (enable ? "enabled" : "disabled") );
+		Hyperion::getInstance()->getComponentRegister().componentStateChanged(component, enable);
 		_bypass = !enable;
-		Info(_log, "change state to %s", (enable ? "enabled" : "disabled") );
 	}
 }
 
diff --git a/libsrc/hyperion/LinearColorSmoothing.h b/libsrc/hyperion/LinearColorSmoothing.h
index d8ce5c27..5cd3df30 100644
--- a/libsrc/hyperion/LinearColorSmoothing.h
+++ b/libsrc/hyperion/LinearColorSmoothing.h
@@ -40,7 +40,7 @@ public:
 	/// Switch the leds off
 	virtual int switchOff();
 
-	bool componentState() { return _bypass; }
+	bool componentState() { return !_bypass; }
 
 private slots:
 	/// Timer callback which writes updated led values to the led device
diff --git a/libsrc/hyperion/MessageForwarder.cpp b/libsrc/hyperion/MessageForwarder.cpp
index 7760786a..95d007ee 100644
--- a/libsrc/hyperion/MessageForwarder.cpp
+++ b/libsrc/hyperion/MessageForwarder.cpp
@@ -49,3 +49,8 @@ bool MessageForwarder::protoForwardingEnabled()
 {
 	return ! _protoSlaves.empty();
 }
+
+bool MessageForwarder::jsonForwardingEnabled()
+{
+	return ! _jsonSlaves.empty();
+}
diff --git a/libsrc/hyperion/hyperion.schema.json b/libsrc/hyperion/hyperion.schema.json
index 6c2f0f94..9181dd0c 100644
--- a/libsrc/hyperion/hyperion.schema.json
+++ b/libsrc/hyperion/hyperion.schema.json
@@ -59,16 +59,20 @@
 			"type":"object",
 			"title" : "Color Calibration",
 			"required" : true,
+			"defaultProperties": ["channelAdjustment_enable","channelAdjustment","transform_enable","transform"],
 			"properties":
 			{
 				"channelAdjustment_enable" :
 				{
-					"type" : "boolean"
+					"type" : "boolean",
+					"format": "checkbox",
+					"propertyOrder" : 1
 				},
 				"channelAdjustment" :
 				{
 					"type" : "array",
 					"required" : true,
+					"propertyOrder" : 2,
 					"items" :
 					{
 						"type" : "object",
@@ -239,12 +243,15 @@
 				},
 				"transform_enable" :
 				{
-					"type" : "boolean"
+					"type" : "boolean",
+					"format": "checkbox",
+					"propertyOrder" : 3
 				},
 				"transform" :
 				{
 					"type" : "array",
 					"required" : true,
+					"propertyOrder" : 4,
 					"items" :
 					{
 						"type" : "object",
@@ -376,7 +383,8 @@
 					"type" : "boolean",
 					"format": "checkbox",
 					"title" : "Activate",
-					"default" : true
+					"default" : true,
+					"propertyOrder" : 1
 				},
 				"type" :
 				{
@@ -433,7 +441,8 @@
 						"type" : "boolean",
 						"format": "checkbox",
 						"title" : "Activate",
-						"default" : false
+						"default" : false,
+						"propertyOrder" : 1
 					},
 					"device" :
 					{
@@ -565,12 +574,15 @@
 					"type" : "boolean",
 					"format": "checkbox",
 					"title" : "Activate",
-					"default" : true
+					"default" : true,
+					"propertyOrder" : 1
 				},
 				"type" :
 				{
 					"type" : "string",
-					"title" : "Type"
+					"title" : "Type",
+					"enum"  : ["auto","dispmanx","amlogic","x11","framebuffer"],
+					"default" : "auto"
 				},
 				"width" :
 				{
@@ -667,6 +679,7 @@
 			"type" : "object",
 			"title" : "Blackbar detector",
 			"required": ["mode"],
+			"defaultProperties": ["enable","mode","threshold"],
 			"properties" :
 			{
 				"enable" :
@@ -674,7 +687,8 @@
 					"type" : "boolean",
 					"format": "checkbox",
 					"title" : "Activate",
-					"default" : true
+					"default" : true,
+					"propertyOrder" : 1
 				},
 				"threshold" :
 				{
@@ -687,26 +701,22 @@
 				"unknownFrameCnt"    :
 				{
 					"type" : "number",
-					"minimum" : 0,
-					"advanced" : true
+					"minimum" : 0
 				},
 				"borderFrameCnt" :
 				{
 					"type" : "number",
-					"minimum" : 0,
-					"advanced" : true
+					"minimum" : 0
 				},
 				"maxInconsistentCnt" :
 				{
 					"type" : "number",
-					"minimum" : 0,
-					"advanced" : true
+					"minimum" : 0
 				},
 				"blurRemoveCnt" :
 				{
 					"type" : "number",
-					"minimum" : 0,
-					"advanced" : true
+					"minimum" : 0
 				},
 				"mode" :
 				{
@@ -729,7 +739,8 @@
 					"type" : "boolean",
 					"format": "checkbox",
 					"title" : "Activate",
-					"default" : false
+					"default" : false,
+					"propertyOrder" : 1
 				},
 				"kodiAddress" :
 				{
@@ -801,12 +812,14 @@
 		{
 			"type" : "object",
 			"title" : "Initial Effect",
+			"defaultProperties": ["background-effect","foreground-effect","foreground-duration_ms"],
 			"properties" :
 			{
 				"background-effect" :
 				{
 					"type" : "array",
-					"title" : "Background effect"
+					"title" : "Background effect",
+					"propertyOrder" : 3
 				},
 				"background-effect-args" :
 				{
@@ -816,7 +829,8 @@
 				"foreground-effect" :
 				{
 					"type" : "array",
-					"title" : "Boot effect"
+					"title" : "Boot effect",
+					"propertyOrder" : 1
 				},
 				"foreground-effect-args" :
 				{
@@ -826,7 +840,8 @@
 				"foreground-duration_ms" :
 				{
 					"type" : "integer",
-					"title" : "Boot effect duration"
+					"title" : "Boot effect duration",
+					"propertyOrder" : 2
 				}
 			},
 			"additionalProperties" : false
@@ -843,7 +858,8 @@
 					"type" : "boolean",
 					"format": "checkbox",
 					"title" : "Activate",
-					"required" : true
+					"required" : true,
+					"propertyOrder" : 1
 				},
 				"json" :
 				{
@@ -907,7 +923,8 @@
 					"type" : "boolean",
 					"format": "checkbox",
 					"title" : "Activate",
-					"default" : false
+					"default" : false,
+					"propertyOrder" : 1
 				},
 				"port" :
 				{
@@ -938,7 +955,8 @@
 					"type" : "boolean",
 					"format": "checkbox",
 					"title" : "Activate",
-					"default" : false
+					"default" : false,
+					"propertyOrder" : 1
 				},
 				"address" :
 				{
@@ -990,7 +1008,8 @@
 					"format": "checkbox",
 					"title" : "Activate",
 					"default" : true,
-					"required" : true
+					"required" : true,
+					"propertyOrder" : 1
 				},
 				"document_root" :
 				{
@@ -1085,7 +1104,7 @@
 					"colorOrder":
 					{
 						"type": "string",
-						"enum" : ["bgr", "rbg", "brg", "gbr", "grb"]
+						"enum" : ["rgb", "bgr", "rbg", "brg", "gbr", "grb"]
 					}
 				},
 				"additionalProperties" : false
diff --git a/libsrc/jsonserver/JsonClientConnection.cpp b/libsrc/jsonserver/JsonClientConnection.cpp
index 1fd65737..937e9948 100644
--- a/libsrc/jsonserver/JsonClientConnection.cpp
+++ b/libsrc/jsonserver/JsonClientConnection.cpp
@@ -46,7 +46,10 @@ JsonClientConnection::JsonClientConnection(QTcpSocket *socket)
 	// connect internal signals and slots
 	connect(_socket, SIGNAL(disconnected()), this, SLOT(socketClosed()));
 	connect(_socket, SIGNAL(readyRead()), this, SLOT(readData()));
-	connect( _hyperion, SIGNAL(componentStateChanged(hyperion::Components,bool)), this, SLOT(componentStateChanged(hyperion::Components,bool)));
+	connect(_hyperion, SIGNAL(componentStateChanged(hyperion::Components,bool)), this, SLOT(componentStateChanged(hyperion::Components,bool)));
+	
+	_timer_ledcolors.setSingleShot(false);
+	connect(&_timer_ledcolors, SIGNAL(timeout()), this, SLOT(streamLedcolorsUpdate()));
 }
 
 
@@ -644,6 +647,18 @@ void JsonClientConnection::handleServerInfoCommand(const Json::Value &, const st
 		info["ledDevices"]["available"].append(dev.first);
 	}
 
+	// get components
+	info["components"] = Json::Value(Json::arrayValue);
+	std::map<hyperion::Components, bool> components = _hyperion->getComponentRegister().getRegister();
+	for(auto comp : components)
+	{
+		Json::Value item;
+		item["id"] = comp.first;
+		item["name"] = hyperion::componentToIdString(comp.first);
+		item["title"] = hyperion::componentToString(comp.first);
+		item["enabled"] = comp.second;
+		info["components"].append(item);
+	}
 	
 	// Add Hyperion Version, build time
 	//Json::Value & version = 
@@ -977,29 +992,30 @@ void JsonClientConnection::handleComponentStateCommand(const Json::Value& messag
 	}
 }
 
-void JsonClientConnection::handleLedColorsCommand(const Json::Value&, const std::string &command, const int tan)
+void JsonClientConnection::handleLedColorsCommand(const Json::Value& message, const std::string &command, const int tan)
 {
 	// create result
-	Json::Value result;
-	result["success"] = true;
-	result["command"] = command;
-	result["tan"] = tan;
-	Json::Value & leds = result["result"] = Json::Value(Json::arrayValue);
+	std::string subcommand = message.get("subcommand","").asString();
+	_streaming_leds_reply["success"] = true;
+	_streaming_leds_reply["command"] = command;
+	_streaming_leds_reply["tan"] = tan;
 	
-	const PriorityMuxer::InputInfo & priorityInfo = _hyperion->getPriorityInfo(_hyperion->getCurrentPriority());
-	std::vector<ColorRgb> ledBuffer =  priorityInfo.ledColors;
-
-	for (ColorRgb& color : ledBuffer)
+	if (subcommand == "ledstream-start")
 	{
-		int idx = leds.size();
-		Json::Value & item = leds[idx];
-		item["index"] = idx;
-		item["red"]   = color.red;
-		item["green"] = color.green;
-		item["blue"]  = color.blue;
+		_streaming_leds_reply["command"] = command+"-ledstream-update";
+		_timer_ledcolors.start(125);
 	}
-	// send the result
-	sendMessage(result);
+	else if (subcommand == "ledstream-stop")
+	{
+		_timer_ledcolors.stop();
+	}
+	else
+	{
+		sendErrorReply("unknown subcommand",command,tan);
+		return;
+	}
+	
+	sendSuccessReply(command+"-"+subcommand,tan);
 }
 
 void JsonClientConnection::handleNotImplemented()
@@ -1137,3 +1153,27 @@ bool JsonClientConnection::checkJson(const Json::Value & message, const QString
 
 	return true;
 }
+
+
+void JsonClientConnection::streamLedcolorsUpdate()
+{
+	Json::Value & leds = _streaming_leds_reply["result"] = Json::Value(Json::arrayValue);
+
+	const PriorityMuxer::InputInfo & priorityInfo = _hyperion->getPriorityInfo(_hyperion->getCurrentPriority());
+	std::vector<ColorRgb> ledBuffer =  priorityInfo.ledColors;
+
+	for (ColorRgb& color : ledBuffer)
+	{
+		int idx = leds.size();
+		Json::Value & item = leds[idx];
+		item["index"] = idx;
+		item["red"]   = color.red;
+		item["green"] = color.green;
+		item["blue"]  = color.blue;
+	}
+
+	// send the result
+	sendMessage(_streaming_leds_reply);
+
+}
+
diff --git a/libsrc/jsonserver/JsonClientConnection.h b/libsrc/jsonserver/JsonClientConnection.h
index 8e4a49a1..6e0cb824 100644
--- a/libsrc/jsonserver/JsonClientConnection.h
+++ b/libsrc/jsonserver/JsonClientConnection.h
@@ -42,6 +42,7 @@ public:
 
 public slots:
 	void componentStateChanged(const hyperion::Components component, bool enable);
+	void streamLedcolorsUpdate();
 
 signals:
 	///
@@ -61,6 +62,7 @@ private slots:
 	///
 	void socketClosed();
 
+
 private:
 	///
 	/// Handle an incoming JSON message
@@ -173,7 +175,7 @@ private:
 	///
 	/// @param message the incoming message
 	///
-	void handleLedColorsCommand(const Json::Value &, const std::string &command, const int tan);
+	void handleLedColorsCommand(const Json::Value & message, const std::string &command, const int tan);
 
 	///
 	/// Handle an incoming JSON message of unknown type
@@ -251,5 +253,7 @@ private:
 	
 	/// 
 	QTimer _timer_ledcolors;
+	
+	Json::Value _streaming_leds_reply;
 
 };
diff --git a/libsrc/jsonserver/schema/schema-ledcolors.json b/libsrc/jsonserver/schema/schema-ledcolors.json
index ff92f097..93d5e95a 100644
--- a/libsrc/jsonserver/schema/schema-ledcolors.json
+++ b/libsrc/jsonserver/schema/schema-ledcolors.json
@@ -13,7 +13,7 @@
 		"subcommand": {
 			"type" : "string",
 			"required" : true,
-			"enum" : ["ledstream_stop","ledstream_start","testled","imagestream_start","imagestream_stop"]
+			"enum" : ["ledstream-stop","ledstream-start","testled","imagestream-start","imagestream-stop"]
 		},
 		"oneshot": {
 			"type" : "bool"
diff --git a/libsrc/kodivideochecker/KODIVideoChecker.cpp b/libsrc/kodivideochecker/KODIVideoChecker.cpp
index ee149c3a..365a54fe 100644
--- a/libsrc/kodivideochecker/KODIVideoChecker.cpp
+++ b/libsrc/kodivideochecker/KODIVideoChecker.cpp
@@ -4,6 +4,7 @@
 #include <QJsonArray>
 
 #include <kodivideochecker/KODIVideoChecker.h>
+#include <hyperion/Hyperion.h>
 
 using namespace hyperion;
 
@@ -120,11 +121,15 @@ void KODIVideoChecker::stop()
 
 void KODIVideoChecker::componentStateChanged(const hyperion::Components component, bool enable)
 {
-	if (component == COMP_KODICHECKER && _active != enable)
+	if (component == COMP_KODICHECKER)
 	{
-		if (enable) start();
-		else        stop();
-		Info(_log, "change state to %s", (enable ? "enabled" : "disabled") );
+		if (_active != enable)
+		{
+			if (enable) start();
+			else        stop();
+			Info(_log, "change state to %s", (_active ? "enabled" : "disabled") );
+		}
+		Hyperion::getInstance()->getComponentRegister().componentStateChanged(component, _active);
 	}
 }
 
diff --git a/libsrc/protoserver/ProtoServer.cpp b/libsrc/protoserver/ProtoServer.cpp
index 9de9cbb7..184321e6 100644
--- a/libsrc/protoserver/ProtoServer.cpp
+++ b/libsrc/protoserver/ProtoServer.cpp
@@ -93,10 +93,14 @@ void ProtoServer::sendImageToProtoSlaves(int priority, const Image<ColorRgb> & i
 
 void ProtoServer::componentStateChanged(const hyperion::Components component, bool enable)
 {
-	if (component == hyperion::COMP_FORWARDER && _forwarder_enabled != enable)
+	if (component == hyperion::COMP_FORWARDER)
 	{
-		_forwarder_enabled = enable;
-		Info(_log, "forwarder change state to %s", (enable ? "enabled" : "disabled") );
+		if (_forwarder_enabled != enable)
+		{
+			_forwarder_enabled = enable;
+			Info(_log, "forwarder change state to %s", (_forwarder_enabled ? "enabled" : "disabled") );
+		}
+		_hyperion->getComponentRegister().componentStateChanged(component, _forwarder_enabled);
 	}
 }
 
diff --git a/libsrc/udplistener/UDPListener.cpp b/libsrc/udplistener/UDPListener.cpp
index eaf0fbc9..37dc8bc6 100644
--- a/libsrc/udplistener/UDPListener.cpp
+++ b/libsrc/udplistener/UDPListener.cpp
@@ -25,15 +25,12 @@ UDPListener::UDPListener(const int priority, const int timeout, const QString& a
 	_bondage(shared ? QAbstractSocket::ShareAddress : QAbstractSocket::DefaultForPlatform)
 {
 	_server = new QUdpSocket(this);
-	_listenAddress = address.isEmpty()
-	                           ? QHostAddress::AnyIPv4 
-	                           : QHostAddress(address);
+	_listenAddress = address.isEmpty()? QHostAddress::AnyIPv4 : QHostAddress(address);
 
 	// Set trigger for incoming connections
 	connect(_server, SIGNAL(readyRead()), this, SLOT(readPendingDatagrams()));
-	
-	_hyperion->registerPriority("UDPLISTENER", _priority);
 
+	_hyperion->registerPriority("UDPLISTENER", _priority);
 }
 
 UDPListener::~UDPListener()
@@ -84,11 +81,15 @@ void UDPListener::stop()
 
 void UDPListener::componentStateChanged(const hyperion::Components component, bool enable)
 {
-	if (component == COMP_UDPLISTENER && _isActive != enable)
+	if (component == COMP_UDPLISTENER)
 	{
-		if (enable) start();
-		else        stop();
-		Info(_log, "change state to %s", (enable ? "enabled" : "disabled") );
+		if (_isActive != enable)
+		{
+			if (enable) start();
+			else        stop();
+			Info(_log, "change state to %s", (enable ? "enabled" : "disabled") );
+		}
+		_hyperion->getComponentRegister().componentStateChanged(component, enable);
 	}
 }
 
diff --git a/libsrc/utils/Components.cpp b/libsrc/utils/Components.cpp
new file mode 100644
index 00000000..8d1c8b69
--- /dev/null
+++ b/libsrc/utils/Components.cpp
@@ -0,0 +1 @@
+ 
diff --git a/libsrc/utils/jsonschema/QJsonSchemaChecker.cpp b/libsrc/utils/jsonschema/QJsonSchemaChecker.cpp
index 6b78e5aa..952f5642 100644
--- a/libsrc/utils/jsonschema/QJsonSchemaChecker.cpp
+++ b/libsrc/utils/jsonschema/QJsonSchemaChecker.cpp
@@ -108,7 +108,8 @@ void QJsonSchemaChecker::validate(const QJsonValue & value, const QJsonObject &s
  			; // nothing to do. value is present so always oke
  		else if (attribute == "id")
  			; // references have already been collected
- 		else if (attribute == "title" || attribute == "description"  || attribute == "default" || attribute == "format" || attribute == "advanced")
+ 		else if (attribute == "title" || attribute == "description"  || attribute == "default" || attribute == "format" 
+			|| attribute == "defaultProperties" || attribute == "propertyOrder")
  			; // nothing to do.
 		else
 		{
diff --git a/src/hyperiond/hyperiond.cpp b/src/hyperiond/hyperiond.cpp
index 42cc909a..b77c90e7 100644
--- a/src/hyperiond/hyperiond.cpp
+++ b/src/hyperiond/hyperiond.cpp
@@ -19,6 +19,7 @@
 
 #include <utils/jsonschema/JsonFactory.h> // DEPRECATED | Remove this only when the conversion have been completed from JsonCpp to QTJson
 #include <utils/jsonschema/QJsonFactory.h>
+#include <utils/Components.h>
 
 #include <hyperion/Hyperion.h>
 #include <hyperion/PriorityMuxer.h>
@@ -270,6 +271,7 @@ void HyperionDaemon::createKODIVideoChecker()
 	{
 		_kodiVideoChecker->start();
 	}
+	_hyperion->getComponentRegister().componentStateChanged(hyperion::COMP_KODICHECKER, _kodiVideoChecker->componentState());
 	connect( Hyperion::getInstance(), SIGNAL(componentStateChanged(hyperion::Components,bool)), _kodiVideoChecker, SLOT(componentStateChanged(hyperion::Components,bool)));
 }
 
@@ -319,6 +321,7 @@ void HyperionDaemon::startNetworkServices()
 	{
 		_boblightServer->start();
 	}
+	_hyperion->getComponentRegister().componentStateChanged(hyperion::COMP_BOBLIGHTSERVER, _boblightServer->componentState());
 	connect( Hyperion::getInstance(), SIGNAL(componentStateChanged(hyperion::Components,bool)), _boblightServer, SLOT(componentStateChanged(hyperion::Components,bool)));
 
 	// Create UDP listener if configuration is present
@@ -337,6 +340,7 @@ void HyperionDaemon::startNetworkServices()
 	{
 		_udpListener->start();
 	}
+	_hyperion->getComponentRegister().componentStateChanged(hyperion::COMP_UDPLISTENER, _udpListener->componentState());
 	connect( Hyperion::getInstance(), SIGNAL(componentStateChanged(hyperion::Components,bool)), _udpListener, SLOT(componentStateChanged(hyperion::Components,bool)));
 
 	// zeroconf description - $leddevicename@$hostname
@@ -429,13 +433,16 @@ void HyperionDaemon::createSystemFrameGrabber()
 				Info(  _log, "set screen capture device to '%s'", type.toUtf8().constData());
 			}
 			
-			if (type == "framebuffer")   createGrabberFramebuffer(grabberConfig);
+			bool grabberCompState = true;
+			if (type == "") { Info( _log, "screen capture device disabled"); grabberCompState = false; }
+			else if (type == "framebuffer")   createGrabberFramebuffer(grabberConfig);
 			else if (type == "dispmanx") createGrabberDispmanx();
 			else if (type == "amlogic")  { createGrabberAmlogic(); createGrabberFramebuffer(grabberConfig); }
 			else if (type == "osx")      createGrabberOsx(grabberConfig);
 			else if (type == "x11")      createGrabberX11(grabberConfig);
-			else WarningIf( type != "", _log, "unknown framegrabber type '%s'", type.toUtf8().constData());
-			InfoIf( type == "", _log, "screen capture device disabled");
+			else { Warning( _log, "unknown framegrabber type '%s'", type.toUtf8().constData()); grabberCompState = false; }
+			
+			_hyperion->getComponentRegister().componentStateChanged(hyperion::COMP_GRABBER, grabberCompState);
 		}
 	}
 }
@@ -452,6 +459,7 @@ void HyperionDaemon::createGrabberDispmanx()
 	QObject::connect(_dispmanx, SIGNAL(emitImage(int, const Image<ColorRgb>&, const int)), _protoServer, SLOT(sendImageToProtoSlaves(int, const Image<ColorRgb>&, const int)) );
 
 	_dispmanx->start();
+
 	Info(_log, "DISPMANX frame grabber created and started");
 #else
 	ErrorIf(_qconfig.contains("framegrabber"), _log, "The dispmanx framegrabber can not be instantiated, because it has been left out from the build");
@@ -541,6 +549,7 @@ void HyperionDaemon::createGrabberV4L2()
 {
 	// construct and start the v4l2 grabber if the configuration is present
 	bool v4lConfigured = _qconfig.contains("grabber-v4l2");
+	bool v4lStarted = false;
 	unsigned v4lEnableCount = 0;
 	
 	if (_qconfig["grabber-v4l2"].isArray())
@@ -581,12 +590,16 @@ void HyperionDaemon::createGrabberV4L2()
 			{
 				QObject::connect(_kodiVideoChecker, SIGNAL(grabbingMode(GrabbingMode)), grabber, SLOT(setGrabbingMode(GrabbingMode)));
 			}
-			InfoIf( enableV4l && grabber->start(), _log, "V4L2 grabber started");
+			if (enableV4l && grabber->start())
+			{
+				v4lStarted = true;
+				Info(_log, "V4L2 grabber started");
+			}
 			_v4l2Grabbers.push_back(grabber);
 			#endif
 		}
 	}
 
 	ErrorIf( (v4lEnableCount>0 && _v4l2Grabbers.size()==0), _log, "The v4l2 grabber can not be instantiated, because it has been left out from the build");
-
+	_hyperion->getComponentRegister().componentStateChanged(hyperion::COMP_V4L, (_v4l2Grabbers.size()>0 && v4lEnableCount>0 && v4lStarted) );
 }