Hyperion Switcher + cleanup (#423)

* upd * update * update * update schemachecker * ... * fix lowest priority * zeroconf updates (#421) (#3) * zeroconf: add ip make names more uniq * tune dns name for webconfig * update * update * update * update ui * ... * min val for gamma * lost somewhere this * add status to hyperion object * update ui
2025-03-01 10:33:28 +00:00 · 2017-03-24 10:17:36 +01:00
parent c6fa40fa87
commit 8e12d189b0
25 changed files with 253 additions and 109 deletions
--- a/assets/webconfig/content/about.html
+++ b/assets/webconfig/content/about.html
@@ -4,6 +4,11 @@
 		<div class="col-lg-6">
 			<div id="about_cont"></div>
 		</div>
+		<div id="danger_act"class="col-lg-6" style="display:none">
+			<h4>You found a hidden service menu!</h4>
+			<button id="reset_cache" class="btn btn-danger">Reset Browser Cache</button>
+			<button id="hyp_restart" class="btn btn-danger">Force Hyperion Restart</button>
+		</div>
 	</div>
 </div>

@@ -14,6 +19,7 @@
 	var libs = {"Bootstrap 3" : "http://getbootstrap.com/", "JQuery" : "https://jquery.com/", "Bootstrap Colorpicker" : "https://itsjavi.com/bootstrap-colorpicker/", "JSON-Editor" : "http://jeremydorn.com/json-editor/", "jQuery.i18n" : "https://github.com/wikimedia/jquery.i18n", "metisMenu" : "http://mm.onokumus.com/index.html", "download.js" : "http://danml.com/download.html", "gijgo" : "http://gijgo.com/"};
 	var libh = "";
 	var lang = [];
+	var dcount = 0;
 	
 	for(var i = 0; i<availLang.length; i++)
 		lang.push($.i18n('general_speech_'+availLang[i]));
@@ -23,11 +29,24 @@
 	
 	lang = lang.toString().replace(/,/g,", ");
 	
-	var fc = [$.i18n("about_version"),$.i18n("about_build"),$.i18n("about_builddate"),$.i18n("about_translations"),$.i18n("about_resources", $.i18n("general_webui_title"))];
+	var fc = ['<span id="danger_trig">'+$.i18n("about_version")+'<span>',$.i18n("about_build"),$.i18n("about_builddate"),$.i18n("about_translations"),$.i18n("about_resources", $.i18n("general_webui_title"))];
 	var sc = [currentVersion,si.build,si.time,'('+availLang.length+')<p>'+lang+'</p><p><a href="https://hyperion-project.org/contribute/?pk_campaign=WebUI&pk_kwd=about_contribute" target="_blank">'+$.i18n("about_contribute")+'</a></p>',libh];

 	createTable("","atb","about_cont");
 	for(var i = 0; i<fc.length; i++)
 		$('.atb').append(createTableRow([fc[i],sc[i]], "atb", false, true));
 		
+	$('#danger_trig').off().on('click',function(){
+		dcount++;
+		if(dcount > 2)
+			$('#danger_act').toggle(true);
+	});
+	
+	$('#reset_cache').off().on('click',function(){
+		localStorage.clear();
+	});
+	
+	$('#hyp_restart').off().on('click',function(){
+		initRestart();
+	});
 </script>
--- a/assets/webconfig/content/dashboard.html
+++ b/assets/webconfig/content/dashboard.html
@@ -13,6 +13,10 @@
 									<div class="panel-body">
 										<table class="table borderless">
 											<tbody>
+												<tr>
+													<td  data-i18n="dashboard_infobox_label_statush"></td>
+													<td id="dash_statush" style="font-weight:bold">unknown</td>
+												</tr>
 												<tr>
 													<td  data-i18n="dashboard_infobox_label_platform">Platform:</td>
 													<td id="dash_platform"></td>
@@ -40,6 +44,9 @@
 											</tbody>
 										</table>
 										<hr>
+										<p style="font-weight:bold" data-i18n="dashboard_infobox_label_smartacc">Smart Access<p>
+										<span id="btn_hsc"></span>
+										<hr>
 										<span id="versioninforesult"></span>
 									</div>
 								</div>
--- a/assets/webconfig/content/remote.html
+++ b/assets/webconfig/content/remote.html
@@ -1,16 +1,7 @@
 <div class="container-fluid">
-<h3 class="page-header"><i class="fa fa-wifi fa-fw"></i><span data-i18n="main_menu_remotecontrol_token">Remote Control</span></h3>
-</div>
-
-<div class="container-fluid">
+	<h3 class="page-header"><i class="fa fa-wifi fa-fw"></i><span data-i18n="main_menu_remotecontrol_token">Remote Control</span></h3>
 	<div class="row">
-
-	</div>
-</div>
-
-<div  class="container-fluid">
-	<div class="row">
-		<div class="col-lg-8 col-xxl-7">
+		<div class="col-md-12 col-lg-8 col-xxl-7">
 			<div class="panel panel-default" >
 				<div class="panel-heading"><i class="fa fa-wifi fa-fw"></i><span data-i18n="remote_input_label">Source selection</span></div>
 				<div class="panel-body">
@@ -20,7 +11,7 @@
 			</div>
 		</div>

-		<div class="col-lg-4 col-xxl-5">
+		<div class="col-md-6 col-lg-4 col-xxl-5">
 			<div class="panel panel-default" >
 				<div class="panel-heading"><i class="fa fa-wifi fa-fw"></i><span data-i18n="remote_components_label">Components control</span></div>
 				<div class="panel-body" id="comp_intro">
@@ -28,12 +19,8 @@
 				</div>
 			</div>
 		</div>
-	</div>
-</div>

-<div  class="container-fluid">
-	<div class="row">
-		<div class="col-lg-6 col-xxl-4">
+		<div class="col-md-6 col-lg-6 col-xxl-4">
 			<div class="panel panel-default" >
 				<div class="panel-heading"><i class="fa fa-wifi fa-fw"></i><span data-i18n="remote_color_label">Colors/Effects</span></div>
 				<div class="panel-body" id="color_intro">
@@ -67,7 +54,7 @@
 				</div>
 			</div>
 		</div>
-		<div class="col-lg-6 col-xxl-3">
+		<div class="col-md-6 col-lg-6 col-xxl-3">
 			<div class="panel panel-default" >
 				<div class="panel-heading"><i class="fa fa-wifi fa-fw"></i><span data-i18n="remote_maptype_label">Mapping types</span></div>
 				<div class="panel-body" id="maptype_intro">
@@ -75,7 +62,7 @@
 				</div>
 			</div>
 		</div>
-		<div class="col-lg-6 col-xxl-5">
+		<div class="col-md-6 col-lg-6 col-xxl-5">
 			<div class="panel panel-default" >
 				<div class="panel-heading"><i class="fa fa-wifi fa-fw"></i><span data-i18n="remote_adjustment_label"></span></div>
 				<div class="panel-body" id="adjust_content">
@@ -84,5 +71,4 @@
 		</div>
 	</div>
 </div>
-
 <script src="/js/content_remote.js" ></script>
--- a/assets/webconfig/i18n/de.json
+++ b/assets/webconfig/i18n/de.json
@@ -37,6 +37,7 @@
 	"general_btn_on" : "An",
 	"general_btn_next" : "Weiter",
 	"general_btn_back" : "Zurück",
+	"general_btn_iswitch" : "Switch",
 	"dashboard_label_intro" : "Das Dashboard zeigt dir Informationen zum Systemstatus, ob Updates verfügbar sind, den Komponentenstatus sowie die letzten Blog-Posts vom Hyperion Team.",
 	"dashboard_infobox_label_title" : "Information",
 	"dashboard_infobox_label_currenthyp" : "Deine Hyperion Version:",
@@ -46,6 +47,10 @@
 	"dashboard_infobox_label_ports" : "Ports (json|proto):",
 	"dashboard_infobox_message_updatewarning" : "Eine aktuellere Version von Hyperion ist verfügbar! (V$1)",
 	"dashboard_infobox_message_updatesuccess" : "Du nutzt die aktuellste Version von Hyperion.",
+	"dashboard_infobox_label_statush" : "Hyperion Status:",
+	"dashboard_infobox_label_smartacc" : "Schnellzugriff",
+	"dashboard_infobox_label_enableh" : "Aktiviere Hyperion",
+	"dashboard_infobox_label_disableh" : "Deaktiviere Hyperion",
 	"dashboard_componentbox_label_title" : "Komponenten Status",
 	"dashboard_componentbox_label_comp" : "Komponente",
 	"dashboard_componentbox_label_status" : "Status",
@@ -88,7 +93,7 @@
 	"conf_helptable_expl" : "Erklärung",
 	"conf_effect_path_intro" : "Definiere weitere Effekt-Pfade, wenn nötig.",
 	"conf_effect_fgeff_intro" : "Definiere einen Start Effekt/Farbe, dieser wird angezeigt, wenn Hyperion startet für die angegebene Dauer.",
-	"conf_effect_bgeff_intro" : "Definiere einen Hintergrund Effekt/Farbe, dieser wird aktiv, wenn Hyperion sich im Leerlauf befindet. (Das gilt ebenfalls für temporäres abschalten mithilfe der Kodi Überwachung).",
+	"conf_effect_bgeff_intro" : "Definiere einen Hintergrund Effekt/Farbe. Dieser wird aktiv, wenn Hyperion sich im Leerlauf befindet. Wird immer mit Priorität 255 gestartet.",
 	"conf_leds_device_intro" : "Wähle eine Methode zur Steuerung deiner LEDs aus, sie sind unterteilt in verschiedene Kategorien. Neben den allgemeinen Optionen die für alle gültig sind, gibt es auch spezfische die sich unterscheiden je nach Wahl.",
 	"conf_leds_layout_intro" : "Du benötigst ebenfalls ein LED Layout, welches deine LED-Positionen wiederspiegelt. Das klassische Layout wird für gewöhnlichen für TVs verwendet, Hyperion unterstützt aber auch LED Wände (Matrix). Die Ansicht des LAYOUTS ist die perspektive VOR dem Fernseher, nicht dahinter.",
 	"conf_leds_nav_label_ledcontroller" : "LED Steuerung",
@@ -187,6 +192,7 @@
 	"remote_input_status" : "Status/Aktion",
 	"remote_input_duration" : "Dauer:",
 	"remote_input_ip" : "IP:",
+	"remote_input_clearall" : "Lösche alle Effekte/Farben",
 	"remote_components_label" : "Komponentensteuerung",
 	"remote_components_intro" : "Starte und stoppe Komponenten von Hyperion. $1",
 	"remote_optgroup_usreffets" : "Benutzer Effekte",
@@ -273,6 +279,8 @@
 	"infoDialog_import_comperror_text" : "Dein Browser unterstützt leider keinen Import. Bitte versuche es mit einem anderen Browser erneut.",
 	"infoDialog_import_confirm_title" : "Bestätige Import",
 	"infoDialog_import_confirm_text" : "Bist du sicher, dass du die Konfigurations-Datei \"$1\" importieren möchtest? Diese Aktion kann nicht rückgängig gemacht werden!",
+	"InfoDialog_iswitch_title" : "Hyperion switcher",
+	"InfoDialog_iswitch_text" : "Sollte in deinem lokalen Netzwerk Hyperion mehr als einmal laufen, kannst du hier zwischen den Web Konfigurationen hin und her schalten. Wähle dazu die Instanz unten aus und switche!",
 	"wiz_rgb_title" : "RGB Byte Reihenfolge Assistent",
 	"wiz_rgb_intro1" : "Dieser Assisent wird dir dabei helfen die richtige Byte Reihenfolge für deine leds zu finden. Klicke auf Fortfahren um zu beginnen.",
 	"wiz_rgb_intro2" : "Wann benötigt man diesen Assistenten? Zur Erstkonfiguration oder wenn deine LEDs zb rot leuchten sollten, sie aber blau oder grün sind.",
--- a/assets/webconfig/i18n/en.json
+++ b/assets/webconfig/i18n/en.json
@@ -37,6 +37,7 @@
 	"general_btn_on" : "On",
 	"general_btn_next" : "Next",
 	"general_btn_back" : "Back",
+	"general_btn_iswitch" : "Switch",
 	"dashboard_label_intro" : "The dashboard give you a quick overview about the status of Hyperion and show you the latest news of the Hyperion Blog.",
 	"dashboard_infobox_label_title" : "Information",
 	"dashboard_infobox_label_currenthyp" : "Your Hyperion version:",
@@ -46,6 +47,10 @@
 	"dashboard_infobox_label_ports" : "Ports (json|proto):",
 	"dashboard_infobox_message_updatewarning" : "A newer version of Hyperion is available! ($1)",
 	"dashboard_infobox_message_updatesuccess" : "You run the latest version of Hyperion.",
+	"dashboard_infobox_label_statush" : "Hyperion status:",
+	"dashboard_infobox_label_smartacc" : "Smart Access",
+	"dashboard_infobox_label_enableh" : "Enable Hyperion",
+	"dashboard_infobox_label_disableh" : "Disable Hyperion",
 	"dashboard_componentbox_label_title" : "Components status",
 	"dashboard_componentbox_label_comp" : "Component",
 	"dashboard_componentbox_label_status" : "Status",
@@ -88,7 +93,7 @@
 	"conf_helptable_expl" : "Explanation",
 	"conf_effect_path_intro" : "Define more effect paths if necessary.",
 	"conf_effect_fgeff_intro" : "Define a booteffect or color, which is shown during Hyperion startup for the defined duration.",
-	"conf_effect_bgeff_intro" : "Define a background effect, which us shown during \"idle\". (also temporarily via Kodi Watch)",
+	"conf_effect_bgeff_intro" : "Define a background effect/color, which is shown during Hyperion \"idle\". Sarts always with priority channel 255.",
 	"conf_leds_device_intro" : "Hyperion supports a lot of controllers to transmit data to your target device. Select a LED controller out of the sorted list and configure it. We have chosen the best default settings for each device.",
 	"conf_leds_layout_intro" : "You need also a led layout, which reflects your led positions. The classic layout is the usual used tv frame, but we also support led matrix (led walls) creation. The view on this layout is ALWAYS of the FRONT of your TV.",
 	"conf_leds_nav_label_ledcontroller" : "LED Controller",
@@ -187,6 +192,7 @@
 	"remote_input_status" : "Status/Action",
 	"remote_input_duration" : "Duration:",
 	"remote_input_ip" : "IP:",
+	"remote_input_clearall" : "Clear all Effects/Colors",
 	"remote_components_label" : "Components control",
 	"remote_components_intro" : "Enable and disable components of Hyperion during runtime. $1",
 	"remote_optgroup_usreffets" : "User Effects",
@@ -273,6 +279,8 @@
 	"infoDialog_import_comperror_text" : "Sad! Your browser doesn't support a import. Please try again with another browser.",
 	"infoDialog_import_confirm_title" : "Confirm import",
 	"infoDialog_import_confirm_text" : "Are you sure to import \"$1\"? This process can't be reverted!",
+	"InfoDialog_iswitch_title" : "Hyperion switcher",
+	"InfoDialog_iswitch_text" : "If you run Hyperion more than once in your local network, you could switch between the web configurations. Select the Hyperion instance below and switch!",
 	"wiz_rgb_title" : "RGB Byte Order Wizard",
 	"wiz_rgb_intro1" : "This wizard will guide you through the finding process of the correct color order for your leds. Click on continue to begin.",
 	"wiz_rgb_intro2" : "When do you need this wizard? Example: You set the color red, but you get green or blue. You could also use it for first configuration.",
--- a/assets/webconfig/index.html
+++ b/assets/webconfig/index.html
@@ -91,6 +91,11 @@
 			<!-- /.navbar-header -->

 			<ul class="nav navbar-top-links navbar-right">
+				<li class="dropdown" id="btn_instanceswitch" style="display:none">
+					<a>		
+						<i class="fa fa-exchange fa-fw"></i>
+					</a>
+				</li>
 				<li class="dropdown" id="btn_open_ledsim">
 					<a>		
 						<i class="fa fa-television fa-fw"></i>
--- a/assets/webconfig/js/content_dashboard.js
+++ b/assets/webconfig/js/content_dashboard.js
@@ -57,6 +57,10 @@ $(document).ready( function() {
 			components_html += '<tr><td>'+$.i18n('general_comp_'+components[idx].name)+'</td><td><i class="fa fa-circle component-'+(components[idx].enabled?"on":"off")+'"></i></td></tr>';
 		}
 		$("#tab_components").html(components_html);
+		
+		//info
+		$('#dash_statush').html(serverInfo.hyperion.off? '<span style="color:red">'+$.i18n('general_btn_off')+'</span>':'<span style="color:green">'+$.i18n('general_btn_on')+'</span>');
+		$('#btn_hsc').html(serverInfo.hyperion.off? '<button class="btn btn-sm btn-success" onClick="requestSetComponentState(\'ALL\',true)">'+$.i18n('dashboard_infobox_label_enableh')+'</button>' : '<button class="btn btn-sm btn-danger" onClick="requestSetComponentState(\'ALL\',false)">'+$.i18n('dashboard_infobox_label_disableh')+'</button>');
 	}
 	
 	// add more info
--- a/assets/webconfig/js/content_index.js
+++ b/assets/webconfig/js/content_index.js
@@ -1,5 +1,6 @@
 $(document).ready( function() {
 	var uiLock = false;
+	var prevSess = 0;

 	loadContentTo("#container_connection_lost","connection_lost");
 	loadContentTo("#container_restart","restart");
@@ -34,6 +35,26 @@ $(document).ready( function() {
 			uiLock = false;
 		}

+		var sess = serverInfo.hyperion.sessions;
+		if (sess.length != prevSess)
+		{
+			wSess = [];
+			prevSess = sess.length;
+			for(var i = 0; i<sess.length; i++)
+			{
+				if(sess[i].type == "_hyperiond-http._tcp.")
+				{
+					wSess.push(sess[i]);  
+				}
+			}
+			
+			if (wSess.length > 1)
+				$('#btn_instanceswitch').toggle(true);
+			else
+				$('#btn_instanceswitch').toggle(false);
+		}
+
+		
 	}); // end cmd-serverinfo

 	$(hyperion).one("cmd-sysinfo", function(event) {
--- a/assets/webconfig/js/content_remote.js
+++ b/assets/webconfig/js/content_remote.js
@@ -54,9 +54,9 @@ $(document).ready(function() {
 			else
 			{
 				if(sColor[key].key == "brightness" || sColor[key].key == "backlightThreshold")
-					property = '<input id="cr_'+sColor[key].key+'" type="number" class="form-control" min="0.0" max="1.0" step="0.05" value="'+value+'"/>';
+					property = '<input id="cr_'+sColor[key].key+'" type="number" class="form-control" min="0" max="1.0" step="0.05" value="'+value+'"/>';
 				else
-					property = '<input id="cr_'+sColor[key].key+'" type="number" class="form-control" min="0.01" max="4.0" step="0.1" value="'+value+'"/>';
+					property = '<input id="cr_'+sColor[key].key+'" type="number" class="form-control" min="0.1" max="4.0" step="0.1" value="'+value+'"/>';
 				
 				$('.crtbody').append(createTableRow([title, property], false, true));
 				$('#cr_'+sColor[key].key).off().on('change', function(e){
@@ -88,19 +88,15 @@ $(document).ready(function() {
 		var data = "";
 		var prios = serverInfo.priorities
 		var i;
+		var clearAll = false;

 		for(i = 0; i < prios.length; i++)
 		{
-			var origin   = prios[i].origin;
-			if(typeof origin !== "undefined" && origin != "")
-			{
-				origin = origin.split("@");
-				var ip = origin[1];
-				origin = origin[0];
-			}
-			else
-				origin = "System";
-
+			var origin   = prios[i].origin ? prios[i].origin : "System";
+			origin = origin.split("@");
+			var ip = origin[1];
+			origin = origin[0];
+			
 			var owner    = prios[i].owner;
 			var active   = prios[i].active;
 			var visible  = prios[i].visible;
@@ -120,9 +116,17 @@ $(document).ready(function() {
 			if(ip)
 				origin += '<br/><span style="font-size:80%; color:grey;">'+$.i18n('remote_input_ip')+' '+ip+'</span>';
 			if(compId == "EFFECT")
+			{
 				owner = $.i18n('remote_effects_label_effects')+'  '+owner;
+				if(priority != 255)
+					clearAll = true;
+			}
 			if(compId == "COLOR")
-				owner = (owner == "Off") ? $.i18n('general_btn_off') : $.i18n('remote_color_label_color')+'  '+'<div style="width:18px; height:18px; border-radius:20px; margin-bottom:-4px; border:1px grey solid; background-color: rgb('+prios[i].value.RGB+'); display:inline-block" title="RGB: ('+prios[i].value.RGB+')"></div>';
+			{
+				owner = $.i18n('remote_color_label_color')+'  '+'<div style="width:18px; height:18px; border-radius:20px; margin-bottom:-4px; border:1px grey solid; background-color: rgb('+prios[i].value.RGB+'); display:inline-block" title="RGB: ('+prios[i].value.RGB+')"></div>';
+				if(priority != 255)
+					clearAll = true;
+			}
 			if(compId == "GRABBER")
 				owner = $.i18n('general_comp_GRABBER')+': ('+owner+')';
 			if(compId == "V4L")
@@ -136,7 +140,7 @@ $(document).ready(function() {
 			
 			var btn = '<button id="srcBtn'+i+'" type="button" '+btn_state+' class="btn btn-'+btn_type+' btn_input_selection" onclick="requestSetSource('+priority+');">'+btn_text+'</button>';
 			
-			if((compId == "EFFECT" || compId == "COLOR") && priority < 254)
+			if((compId == "EFFECT" || compId == "COLOR") && priority != 255)
 				btn += '<button type="button" class="btn btn-sm btn-danger" style="margin-left:10px;" onclick="requestPriorityClear('+priority+');"><i class="fa fa-close"></button>';
 			
 			if(btn_type != 'default')
@@ -145,7 +149,9 @@ $(document).ready(function() {
 		var btn_auto_color = (serverInfo.priorities_autoselect? "btn-success" : "btn-danger");
 		var btn_auto_state = (serverInfo.priorities_autoselect? "disabled" : "enabled");
 		var btn_auto_text = (serverInfo.priorities_autoselect? $.i18n('general_btn_on') : $.i18n('general_btn_off'));
-		$('#auto_btn').html('<button id="srcBtn'+i+'" type="button" '+btn_auto_state+' class="btn '+btn_auto_color+'" style="margin:10px;display:inline-block;" onclick="requestSetSource(\'auto\');">'+$.i18n('remote_input_label_autoselect')+' ('+btn_auto_text+')</button>');
+		var btn_call_state = (clearAll? "enabled" : "disabled");
+		$('#auto_btn').html('<button id="srcBtn'+i+'" type="button" '+btn_auto_state+' class="btn '+btn_auto_color+'" style="margin-right:5px;display:inline-block;" onclick="requestSetSource(\'auto\');">'+$.i18n('remote_input_label_autoselect')+' ('+btn_auto_text+')</button>');
+		$('#auto_btn').append('<button type="button" '+btn_call_state+' class="btn btn-danger" style="display:inline-block;" onclick="requestClearAll();">'+$.i18n('remote_input_clearall')+'</button>');
 		
 		var max_width=100;
 		$('.btn_input_selection').each(function() {
@@ -167,7 +173,7 @@ $(document).ready(function() {
 			else
 				btn_style = 'btn-primary';

-			$('#mappingsbutton').append('<button type="button" id="lmBtn_'+mappingList[ix]+'" class="btn '+btn_style+'" style="margin:10px;min-width:200px" onclick="requestMappingType(\''+mappingList[ix]+'\');">'+$.i18n('remote_maptype_label_'+mappingList[ix])+'</button><br/>');
+			$('#mappingsbutton').append('<button type="button" id="lmBtn_'+mappingList[ix]+'" class="btn '+btn_style+'" style="margin:3px;min-width:200px" onclick="requestMappingType(\''+mappingList[ix]+'\');">'+$.i18n('remote_maptype_label_'+mappingList[ix])+'</button><br/>');
 		}
 	}

@@ -182,20 +188,21 @@ $(document).ready(function() {
 			enable_icon  = (components[idx].enabled? "fa-play" : "fa-stop");
 			comp_name    = components[idx].name;
 			comp_btn_id  = "comp_btn_"+comp_name;
+			comp_goff	 = serverInfo.hyperion.off? "disabled" : "enabled";
 			
 			// create btn if not there
 			if ($("#"+comp_btn_id).length == 0)
 			{
-				d='<p><button type="button" id="'+comp_btn_id+'" class="btn '+enable_style
+				d='<span style="display:block;margin:3px"><button type="button" '+comp_goff+' 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> '+$.i18n('general_comp_'+components[idx].name)+'</p>';
+					+')"><i id="'+comp_btn_id+'_icon" class="fa '+enable_icon+'"></i></button> '+$.i18n('general_comp_'+components[idx].name)+'</span>';
 				$('#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)+')');
+				$('#'+comp_btn_id).attr("onclick",'requestSetComponentState(\''+comp_name+'\','+(!components[idx].enabled)+')').attr(comp_goff);
 			}
 		}
 	}
--- a/assets/webconfig/js/hyperion.js
+++ b/assets/webconfig/js/hyperion.js
@@ -22,6 +22,7 @@ var loggingStreamActive = false;
 var loggingHandlerInstalled = false;
 var watchdog = 0;
 var debugMessagesActive = true;
+var wSess = [];

 function initRestart()
 {
@@ -224,6 +225,11 @@ function requestPriorityClear(prio)
 	sendToHyperion("clear", "", '"priority":'+prio+'');
 }

+function requestClearAll()
+{
+	sendToHyperion("clearall");
+}
+
 function requestPlayEffect(effectName, duration)
 {	
 	sendToHyperion("effect", "", '"effect":{"name":"'+effectName+'"},"priority":'+webPrio+',"duration":'+validateDuration(duration)+',"origin":"'+webOrigin+'"');
--- a/assets/webconfig/js/settings.js
+++ b/assets/webconfig/js/settings.js
@@ -115,4 +115,24 @@ $(document).ready( function() {
 	//hide menu elements
 	if (storedAccess != 'expert')
 		$('#load_webconfig').toggle(false);
+	
+	
+	// instance switcher
+	$('#btn_instanceswitch').off().on('click',function() {
+		var lsys = sysInfo.system.hostName+':'+serverConfig.webConfig.port;
+		showInfoDialog('iswitch', $.i18n('InfoDialog_iswitch_title'), $.i18n('InfoDialog_iswitch_text'));
+		
+		for (var i = 0; i<wSess.length; i++)
+		{
+			
+			if(lsys != wSess[i].host+':'+wSess[i].port)
+				$('#id_select').append(createSelOpt('http://'+wSess[i].address+':'+wSess[i].port, wSess[i].name))
+		}
+
+		$('#id_btn_saveset').off().on('click',function() {		
+			$("#loading_overlay").addClass("overlay");
+			window.location.href = $('#id_select').val()
+		});
+		
+	});
 });
--- a/assets/webconfig/js/ui_utils.js
+++ b/assets/webconfig/js/ui_utils.js
@@ -154,6 +154,11 @@ function showInfoDialog(type,header,message)
 		$('#id_footer').html('<button type="button" id="id_btn_saveset" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-fw fa-save"></i>'+$.i18n('general_btn_saveandreload')+'</button>');
 		$('#id_footer').append('<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-fw fa-close"></i>'+$.i18n('general_btn_cancel')+'</button>');
 	}
+	else if (type == "iswitch"){
+		$('#id_body').html('<img style="margin-bottom:20px" src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!">');
+		$('#id_footer').html('<button type="button" id="id_btn_saveset" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-fw fa-exchange"></i>'+$.i18n('general_btn_iswitch')+'</button>');
+		$('#id_footer').append('<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-fw fa-close"></i>'+$.i18n('general_btn_cancel')+'</button>');
+	}
 	else if (type == "uilock"){
 		$('#id_body').html('<img src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!">');
 		$('#id_footer').html('<b>'+$.i18n('InfoDialog_nowrite_foottext')+'</b>');
@@ -174,7 +179,7 @@ function showInfoDialog(type,header,message)
 	$('#id_body').append('<h4 style="font-weight:bold;text-transform:uppercase;">'+header+'</h4>');
 	$('#id_body').append(message);
 	
-	if(type == "select")
+	if(type == "select" || type == "iswitch")
 		$('#id_body').append('<select id="id_select" class="form-control" style="margin-top:10px;width:auto;"></select>');
 	
 	$("#modal_dialog").modal({
@@ -228,28 +233,22 @@ function createHint(type, text, container)

 function valValue(id,value,min,max)
 {
-	//TODO: Do not use parser, all values are now typeof number
-	value = parseInt(value)
-	if(typeof value === 'number')
+	if(typeof max === 'undefined' || max == "")
+		max = 999999;
+	
+	if(value > max)	
 	{
-		if(typeof max === 'undefined' || max == "")
-			max = 999999;
-		
-		if(value > max)	
-		{
-			$('#'+id).val(max);
-			showInfoDialog("warning","",$.i18n('edt_msg_error_maximum_incl',max));
-			return max;
-		}
-		else if(value < min)
-		{
-			$('#'+id).val(min);
-			showInfoDialog("warning","",$.i18n('edt_msg_error_minimum_incl',min));
-			return min;
-		}
-		return value;		
+		$('#'+id).val(max);
+		showInfoDialog("warning","",$.i18n('edt_msg_error_maximum_incl',max));
+		return max;
 	}
-	return value;
+	else if(value < min)
+	{
+		$('#'+id).val(min);
+		showInfoDialog("warning","",$.i18n('edt_msg_error_minimum_incl',min));
+		return min;
+	}
+	return value;		
 }

 function readImg(input,cb)