Refactor PR #957 (#1234)

3RD_PARTY_LICENSES

@@ -704,6 +704,64 @@ trademarks does not indicate endorsement of the trademark holder by Font
 Awesome, nor vice versa. **Please do not use brand logos for any purpose except
 to represent the company, product, or service to which they refer.**
 
+============
+Material Design Icons
+============
+
+Copyright (c) 2014, Austin Andrews (http://materialdesignicons.com/), with Reserved Font Name Material Design Icons.
+
+Copyright (c) 2014, Google (http://www.google.com/design/) uses the license at https://github.com/google/material-design-icons/blob/master/LICENSE
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
+
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+PREAMBLE The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects,
+to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and
+improved in partnership with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves.
+The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works.
+The fonts and derivatives, however, cannot be released under any other type of license.
+The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives.
+
+DEFINITIONS "Font Software" refers to the set of files released by the Copyright Holder(s) under this license and clearly marked as such.
+This may include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting, or substituting -- in part or in whole -- any of the components of the Original Version,
+by changing formats or by porting the Font Software to a new environment.
+
+"Author" refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software,
+to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions:
+
+Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself.
+
+Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software,
+provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files,
+human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user.
+
+No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder.
+This restriction only applies to the primary font name as presented to the users.
+
+The name(s) of the Copyright Holder(s) or the Author(s) of the Font Software shall not be used to promote,
+endorse or advertise any Modified Version, except to acknowledge the contribution(s) of the Copyright Holder(s) and the Author(s) or with their explicit written permission.
+
+The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license.
+The requirement for fonts to remain under this license does not apply to any document created using the Font Software.
+
+TERMINATION This license becomes null and void if any of the above conditions are not met.
+
+DISCLAIMER THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM,
+DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE.
+
 =====
 Gijgo
 =====
@@ -739,7 +797,7 @@ HIDAPI
 
  Copyright 2009, Alan Ott, Signal 11 Software.
  All Rights Reserved.
- 
+
  This software may be used by anyone for any reason so
  long as the copyright notice in the source files
  remains intact.
@@ -856,8 +914,8 @@ THE SOFTWARE.
 
 ## Markdown
 
-Copyright © 2004, John Gruber 
+Copyright © 2004, John Gruber
-http://daringfireball.net/ 
+http://daringfireball.net/
 All rights reserved.
 
 Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
@@ -1377,7 +1435,7 @@ tinkerforge
 
 Copyright (C) 2012-2013 Matthias Bolte <matthias@tinkerforge.com>
 Copyright (C) 2011 Olaf Lüke <olaf@tinkerforge.com>
- 
+
 Redistribution and use in source and binary forms of this file,
 with or without modification, are permitted.
 
@@ -1415,7 +1473,7 @@ Pulse-Eight Licensing       <license@pulse-eight.com>
     http://www.pulse-eight.net/
 
 
- 
+
                      GNU GENERAL PUBLIC LICENSE
                        Version 2, June 1991
 

README.md

@@ -1,4 +1,4 @@
-![Hyperion](https://raw.githubusercontent.com/hyperion-project/hyperion.ng/master/assets/webconfig/img/hyperion/hyperionlogo.png)
+![Hyperion](doc/logo.png)
 
 [![Latest-Release](https://img.shields.io/github/v/release/hyperion-project/hyperion.ng?include_prereleases)](https://github.com/hyperion-project/hyperion.ng/releases)
 [![GitHub Actions](https://github.com/hyperion-project/hyperion.ng/workflows/Hyperion%20CI%20Build/badge.svg?branch=master)](https://github.com/hyperion-project/hyperion.ng/actions)

assets/firmware/arduino/network_bridge/udpraw_serialadalight.py

@@ -138,7 +138,7 @@ to this service over the network.
         sys.stderr.write(
             '--- UDP to Serial redirector\n'
             '--- listening on udp port {a.localport}\n'
-	    '--- sending to {p.name}  {p.baudrate},{p.bytesize}{p.parity}{p.stopbits}\n'
+            '--- sending to {p.name}  {p.baudrate},{p.bytesize}{p.parity}{p.stopbits}\n'
             '--- type Ctrl-C / BREAK to quit\n'.format(p=ser, a=args))
 
     try:
@@ -153,7 +153,7 @@ to this service over the network.
 
     srv = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
     srv.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
-    srv.bind(('0.0.0.0', args.localport))
+    srv.bind(('0.0.0.0', args.localport)) # lgtm [py/bind-socket-all-network-interfaces]
 
     try:
         intentional_exit = False
@@ -165,14 +165,14 @@ to this service over the network.
                         if not data:
                             break
 
-			if args.ada:
+                        if args.ada:
-				numleds = len(data)/3
+                            numleds = len(data)/3
-				hi = (numleds-1)/256
+                            hi = (numleds-1)/256
-				lo = (numleds-1)&255
+                            lo = (numleds-1)&255
-				sum = hi^lo^0x55
+                            sum = hi^lo^0x55
-				ser.write ("Ada"+ chr(hi) + chr(lo) + chr(sum))
+                            ser.write ("Ada"+ chr(hi) + chr(lo) + chr(sum))
 
-                        ser.write(data)                 # get a bunch of bytes and send them
+                        ser.write(data)  # get a bunch of bytes and send them
                     except socket.error as msg:
                         if args.develop:
                             raise

assets/webconfig/content/about.html

@@ -1,76 +1,78 @@
 <div class="container-fluid">
-	<h3 class="page-header"><i class="fa fa-info-circle fa-fw"></i><span data-i18n="main_menu_about_token">About
+  <h3 class="page-header">
-			Hyperion</span></h3>
+    <i class="fa fa-info-circle fa-fw"></i><span data-i18n="main_menu_about_token">
-	<div class="row">
+      About
-		<div class="col-lg-12">
+      Hyperion
-			<div id="about_cont"></div>
+    </span>
+  </h3>
+  <div class="row">
+    <div class="col-lg-12">
+      <div id="about_cont"></div>
 
-		</div>
+    </div>
-		<div id="danger_act" class="col-lg-6" style="display:none;padding-top:20px">
+    <div id="danger_act" class="col-lg-6" style="display:none;padding-top:20px">
-			<h4>You found a hidden service menu!</h4>
+      <h4>You found a hidden service menu!</h4>
-			<button id="reset_cache" class="btn btn-danger">Reset Browser Cache</button>
+      <button id="reset_cache" class="btn btn-danger">Reset Browser Cache</button>
-			<button id="hyp_restart" class="btn btn-danger">Force Hyperion Restart</button>
+      <button id="hyp_restart" class="btn btn-danger">Force Hyperion Restart</button>
-		</div>
+    </div>
-	</div>
+  </div>
 </div>
 
 <script type="text/javascript">
-	performTranslation();
+  performTranslation();
 
-	var si = sysInfo.hyperion;
+  var si = window.sysInfo.hyperion;
-	var libs = { "Bootstrap 3": "https://getbootstrap.com/", "JQuery": "https://jquery.com/", "Bootstrap Colorpicker": "https://itsjavi.com/bootstrap-colorpicker/", "Bootstrap Toggle": "https://www.bootstraptoggle.com/", "Bootstrap Select": "https://developer.snapappointments.com/bootstrap-select/", "JSON-Editor": "https://www.jeremydorn.com/json-editor", "jQuery.i18n": "https://github.com/wikimedia/jquery.i18n", "metisMenu": "https://mm.onokumus.com/index.html", "download.js": "https://github.com/rndme/download", "gijgo": "https://gijgo.com/" };
+  var libs = { "Bootstrap 3": "https://getbootstrap.com/", "JQuery": "https://jquery.com/", "Bootstrap Colorpicker": "https://itsjavi.com/bootstrap-colorpicker/", "Bootstrap Toggle": "https://www.bootstraptoggle.com/", "Bootstrap Select": "https://developer.snapappointments.com/bootstrap-select/", "JSON-Editor": "https://www.jeremydorn.com/json-editor", "jQuery.i18n": "https://github.com/wikimedia/jquery.i18n", "metisMenu": "https://mm.onokumus.com/index.html", "download.js": "https://github.com/rndme/download", "gijgo": "https://gijgo.com/" };
-	var libh = "";
+  var libh = "";
-	var lang = [];
+  var lang = [];
-	var dcount = 0;
+  var dcount = 0;
 
-	for (var i = 0; i < availLang.length; i++)
+  for (var i = 0; i < availLang.length; i++)
-		lang.push($.i18n('general_speech_' + availLang[i]));
+    lang.push($.i18n('general_speech_' + availLang[i]));
-	lang.sort();
+  lang.sort();
-	for (key in libs)
+  for (key in libs)
-		libh += '<a href="' + libs[key] + '" target="_blank">' + key + '</a>, ';
+    libh += '<a href="' + libs[key] + '" target="_blank">' + key + '</a>, ';
-	libh += "<br/>" + $.i18n("about_credits");
+  libh += "<br/>" + $.i18n("about_credits");
-	lang = lang.toString().replace(/,/g, ", ");
+  lang = lang.toString().replace(/,/g, ", ");
 
-    // Github Issue bugreport infos
+  var info = '<pre>' + getSystemInfo() + '</pre>';
-    var sysInfo = getSystemInfo();
-    var info = '<pre>' + sysInfo + '</pre>';
 
-	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")), "System info (Github Issue)", $.i18n("about_3rd_party_licenses")];
+  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")), "System info (Github Issue)", $.i18n("about_3rd_party_licenses")];
-	var sc = [currentVersion, si.build, si.time, '(' + availLang.length + ')<p>' + lang + '</p><p><a href="https://github.com/hyperion-project/hyperion.ng" target="_blank">' + $.i18n("about_contribute") + '</a></p>', libh, info, '<pre><div id="3rdpartylicenses" style="overflow:scroll;max-height:400px"></div></pre>'];
+  var sc = [currentVersion, si.build, si.time, '(' + availLang.length + ')<p>' + lang + '</p><p><a href="https://github.com/hyperion-project/hyperion.ng" target="_blank">' + $.i18n("about_contribute") + '</a></p>', libh, info, '<pre><div id="3rdpartylicenses" style="overflow:scroll;max-height:400px"></div></pre>'];
 
-	createTable("", "atb", "about_cont");
+  createTable("", "atb", "about_cont");
-	for (var i = 0; i < fc.length; i++)
+  for (var i = 0; i < fc.length; i++)
-		$('.atb').append(createTableRow([fc[i], sc[i]], "atb", false));
+    $('.atb').append(createTableRow([fc[i], sc[i]], "atb", false));
 
-	$('#danger_trig').off().on('click', function () {
+  $('#danger_trig').off().on('click', function () {
-		dcount++;
+    dcount++;
-		if (dcount > 2)
+    if (dcount > 2)
-			$('#danger_act').toggle(true);
+      $('#danger_act').toggle(true);
-	});
+  });
 
-	$('#reset_cache').off().on('click', function () {
+  $('#reset_cache').off().on('click', function () {
-		localStorage.clear();
+    localStorage.clear();
-	});
+  });
 
-	$('#hyp_restart').off().on('click', function () {
+  $('#hyp_restart').off().on('click', function () {
-		initRestart();
+    initRestart();
-	});
+  });
 
-	var url = 'https://raw.githubusercontent.com/hyperion-project/hyperion.ng/master/3RD_PARTY_LICENSES';
+  var url = 'https://raw.githubusercontent.com/hyperion-project/hyperion.ng/master/3RD_PARTY_LICENSES';
-	fetch(url)
+  fetch(url)
-		.then(function (response) {
+    .then(function (response) {
-			if (!response.ok) {
+      if (!response.ok) {
-				$("#3rdpartylicenses").html('<a href="' + url + '">' + $.i18n("about_3rd_party_licenses_error") + '</a>');
+        $("#3rdpartylicenses").html('<a href="' + url + '">' + $.i18n("about_3rd_party_licenses_error") + '</a>');
-			}
+      }
-			else {
+      else {
-				response.text().then(function (text) {
+        response.text().then(function (text) {
-					$("#3rdpartylicenses").html('<code>' + text + '</code>');
+          $("#3rdpartylicenses").html('<code>' + text + '</code>');
-				});
+        });
-			}
+      }
-		})
+    })
-		.catch(function (rejected) {
+    .catch(function (rejected) {
-			$("#3rdpartylicenses").html('<a href="' + url + '">' + $.i18n("about_3rd_party_licenses_error") + '</a>');
+      $("#3rdpartylicenses").html('<a href="' + url + '">' + $.i18n("about_3rd_party_licenses_error") + '</a>');
-		});
+    });
 
-	removeOverlay();
+  removeOverlay();
 </script>

assets/webconfig/content/conf_colors.html

@@ -2,11 +2,23 @@
 <div class="container-fluid">
 	<div class="row">
 		<div class="col-lg-12">
-			<h3 class="page-header"><i class="fa fa-photo fa-fw"></i><span  data-i18n="main_menu_colors_conf_token">Image Processing</span></h3> 
+			<h3 class="page-header"><i class="fa fa-photo fa-fw"></i><span  data-i18n="main_menu_colors_conf_token">Image Processing</span></h3>
-			<div id="conf_cont"></div>
+
+      <div class="panel panel-default" style="border:0px;">
+        <div class="panel-heading panel-instance" style="border-radius:3px; border-bottom:0px;">
+          <div class="dropdown">
+            <a id="active_instance_dropdown" class="dropdown-toggle" data-toggle="dropdown" href="#" style="text-decoration:none;display:flex;align-items:center;">
+              <div id="active_instance_friendly_name"></div>
+              <div id="btn_hypinstanceswitch" style="white-space:nowrap;"><span class="mdi mdi-lightbulb-group mdi-24px" style="margin-right:0; margin-left:5px;"></span><span class="mdi mdi-menu-down mdi-24px"></span></div>
+            </a>
+            <ul id="hyp_inst_listing" class="dropdown-menu dropdown-alerts" style="cursor:pointer;"></ul>
+          </div>
+        </div>
+      </div>
+
+      <div id="conf_cont"></div>
 		</div>
 	</div>
 </div>
 
-
 <script src="/js/content_colors.js"></script>

assets/webconfig/content/conf_effect.html

@@ -2,6 +2,19 @@
 	<div class="row">
 		<div class="col-lg-12">
 			<h3 class="page-header"><i class="fa fa-spinner fa-fw"></i><span  data-i18n="main_menu_effect_conf_token">Effects</span></h3>
+
+      <div class="panel panel-default" style="border:0px;">
+        <div class="panel-heading panel-instance" style="border-radius:3px; border-bottom:0px;">
+          <div class="dropdown">
+            <a id="active_instance_dropdown" class="dropdown-toggle" data-toggle="dropdown" href="#" style="text-decoration:none;display:flex;align-items:center;">
+              <div id="active_instance_friendly_name"></div>
+              <div id="btn_hypinstanceswitch" style="white-space:nowrap;"><span class="mdi mdi-lightbulb-group mdi-24px" style="margin-right:0; margin-left:5px;"></span><span class="mdi mdi-menu-down mdi-24px"></span></div>
+            </a>
+            <ul id="hyp_inst_listing" class="dropdown-menu dropdown-alerts" style="cursor:pointer;"></ul>
+          </div>
+        </div>
+      </div>
+
 			<div id="conf_cont"></div>
 		</div>
 	</div>

assets/webconfig/content/conf_general.html

@@ -6,7 +6,7 @@
 			<div class="row">
 				<div class="col-lg-6" id="inst_desc">
 					<div class="panel panel-default">
-						<div class="panel-heading"><i class="fa fa-plus fa-fw"></i><span data-i18n="conf_general_inst_title"></span></div>
+						<div class="panel-heading panel-instance"><i class="mdi mdi-lightbulb-group mdi-24px"></i><span data-i18n="conf_general_inst_title"></span></div>
 						<div class="panel-body">
 							<div id="inst_desc_cont"></div>
 							<div id="itable"></div>

assets/webconfig/content/conf_leds.html

@@ -4,7 +4,20 @@
   <title>Hyperion - LED Device Configuration</title>
 </head>
 <div class="container-fluid">
-  <h3 class="page-header"><i class="fa fa-lightbulb-o fa-fw"></i><span data-i18n="main_menu_leds_conf_token">LED Hardware</span></h3>
+  <h3 class="page-header"><i class="mdi mdi-lightbulb-on fa-fw"></i><span data-i18n="main_menu_leds_conf_token">LED Hardware</span></h3>
+
+	<div class="panel panel-default" style="border:0px;">
+		<div class="panel-heading panel-instance" style="border-radius:3px; border-bottom:0px;">
+			<div class="dropdown">
+				<a id="active_instance_dropdown" class="dropdown-toggle" data-toggle="dropdown" href="#" style="text-decoration:none;display:flex;align-items:center;">
+          <div id="active_instance_friendly_name"></div>
+					<div id="btn_hypinstanceswitch" style="white-space:nowrap;"><span class="mdi mdi-lightbulb-group mdi-24px" style="margin-right:0; margin-left:5px;"></span><span class="mdi mdi-menu-down mdi-24px"></span></div>
+				</a>
+				<ul id="hyp_inst_listing" class="dropdown-menu dropdown-alerts" style="cursor:pointer;"></ul>
+			</div>
+		</div>
+	</div>
+
   <ul id="leds_cfg_nav" class="nav nav-tabs">
     <li class="active"><a data-toggle="tab" href="#menu_controller" data-i18n="conf_leds_nav_label_ledcontroller">LED Controller</a></li>
     <li><a data-toggle="tab" href="#menu_gencfg" data-i18n="conf_leds_nav_label_ledlayout">LED Layout</a></li>
@@ -364,12 +377,14 @@
               <p id="previewledcount" style="font-weight:bold"></p>
               <p id="previewledpower" style="font-weight:bold"></p>
               <div id="led_vis_help"></div>
-              <div class="col-lg-12 st_helper" style="padding-left:0px; padding-right:0px">
+              <div class="col-lg-12 st_helper" style="position:relative; padding-left:0px; padding-right:0px">
+                <canvas id="image_preview" style="position:absolute; z-index:0"></canvas>
                 <div id="leds_preview"></div>
               </div>
             </div>
             <div class="panel-footer">
               <button type="button" class="btn btn-danger" id="leds_prev_toggle_num"><i class="fa fa-info fa-fw"></i><span data-i18n="main_ledsim_btn_togglelednumber">toggle led numbers</span></button>
+              <button type="button" class="btn btn-danger" id="leds_prev_toggle_live_video"><i class="fa fa-fw fa-television"></i><span data-i18n="main_ledsim_btn_togglelivevideo">toggle live video</span></button>
               <button type="button" class="btn btn-primary" id="leds_prev_checklist"><i class="fa fa-info-circle fa-fw"></i><span data-i18n="conf_leds_layout_btn_checklist">toggle led numbers</span></button>
             </div>
           </div>

assets/webconfig/content/conf_network.html

@@ -1,12 +1,12 @@
 <div class="container-fluid">
 	<div class="row">
 		<div class="col-lg-12">
-			<h3 class="page-header"><i class="fa fa-sitemap fa-fw"></i><span  data-i18n="main_menu_network_conf_token">Network Services</span></h3> 
+			<h3 class="page-header"><i class="fa fa-sitemap fa-fw"></i><span  data-i18n="main_menu_network_conf_token">Network Services</span></h3>
 			<div id="conf_cont">
 				<div class="row" id="conf_cont_tok">
 					<div class="col-lg-6" id="tok_desc">
 						<div class="panel panel-default">
-							<div class="panel-heading"><i class="fa fa-key fa-fw"></i><span data-i18n="conf_network_tok_title"></span></div>
+							<div class="panel-heading panel-system"><i class="fa fa-key fa-fw"></i><span data-i18n="conf_network_tok_title"></span></div>
 							<div class="panel-body">
 								<div id="tok_desc_cont"></div>
 								<div id="tktable"></div>
@@ -34,4 +34,4 @@
 	</div>
 </div>
 
-<script src="/js/content_network.js"></script>
+<script src="/js/content_network.js"></script>

assets/webconfig/content/dashboard.html

@@ -1,98 +1,92 @@
-			<div class="container-fluid">
+<div class="container-fluid">
-				<div class="row">
+  <div class="row">
-					<div class="col-lg-12">
+    <div class="col-lg-12">
-						<h3 class="page-header"><i class="fa fa-dashboard fa-fw"></i><span  data-i18n="main_menu_dashboard_token">Dashboard</span></h3>
+      <h3 class="page-header"><i class="fa fa-dashboard fa-fw"></i><span data-i18n="main_menu_dashboard_token">Dashboard</span></h3>
-						<div id="dash_intro">
-						<div class="row">
-							<div class="col-md-6 col-xxl-4">
-								<div class="panel panel-default">
-									<div class="panel-heading">
-										<i class="fa fa-info-circle fa-fw"></i>
-										<span  data-i18n="dashboard_infobox_label_title">Information</span>
-									</div>
-									<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>
-												</tr>
-												<tr>
-													<td  data-i18n="conf_leds_contr_label_contrtype">LED type:</td>
-													<td id="dash_leddevice"></td>
-												</tr>
-												<tr>
-													<td  data-i18n="dashboard_infobox_label_instance">Instance</td>
-													<td id="dash_instance"></td>
-												</tr>
-												<tr>
-													<td  data-i18n="dashboard_infobox_label_ports">Ports</td>
-													<td id="dash_ports"></td>
-												</tr>
-												<tr>
-													<td  data-i18n="dashboard_infobox_label_currenthyp">Hyperion version:</td>
-													<td id="dash_currv">unknown</td>
-												</tr>
-												<tr>
-													<td  data-i18n="dashboard_infobox_label_watchedversionbranch">Watched version branch:</td>
-													<td id="dash_watchedversionbranch">unknown</td>
-												</tr>
-												<tr>
-													<td  data-i18n="dashboard_infobox_label_latesthyp">Latest version:</td>
-													<td id="dash_latev">unknown</td>
-												</tr>
-											</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>
-							</div>
-							<div class="col-md-6 col-xxl-3">
-								<div class="panel panel-default">
-									<div class="panel-heading">
-										<i class="fa fa-eye fa-fw"></i>
-										<span  data-i18n="dashboard_componentbox_label_title">Components status</span>
-									</div>
-									<div class="panel-body">
-										  <table class="table">
-											<thead>
-												<tr>
-													<th  data-i18n="dashboard_componentbox_label_comp">Component</th>
-													<th  data-i18n="dashboard_componentbox_label_status">Status</th>
-												</tr>
-											</thead>
-											<tbody id="tab_components">
-											</tbody>
-										</table>
-									</div>
-								</div>
-							</div>
-							<div class="col-md-12 col-xxl-5" style="display:none">
-								<div class="panel panel-default">
-									<div class="panel-heading">
-										<i class="fa fa-newspaper-o fa-fw"></i>
-										<span data-i18n="dashboard_newsbox_label_title">Visit Hyperion Blog</span>
-									</div>
-									<div class="panel-body">
-										<div id="dash_news" style="margin-bottom:7px"></div>
-										<a href="https://hyperion-project.org/blog/?pk_campaign=WebUI&pk_kwd=visitblog" target="_blank" data-i18n="dashboard_newsbox_visitblog"></a>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-					<!-- /.col-lg-12 -->
-				</div>
-				<!-- /.row -->
-			</div>
-			<!-- /.container-fluid -->
 
-<script src="/js/content_dashboard.js"></script>
+      <!-- Infobox -->
+      <div id="dash_intro">
+
+        <!-- Instance(s) -->
+        <div class="row instances">
+
+          <!-- Config status -->
+          <div class="col-md-6 col-xxl-4">
+            <div class="panel panel-default">
+              <div class="panel-heading panel-system">
+                <span id="dash_config_status">Status</span>
+              </div>
+              <div class="panel-body">
+                <table class="table borderless">
+                  <thead>
+                    <tr>
+                      <th colspan="3">
+                        <i class="mdi mdi-lan"></i>
+                        <span data-i18n="dashboard_infobox_label_ports">Ports</span>
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td></td>
+                      <td data-i18n="dashboard_infobox_label_port_proto">proto</td>
+                      <td id="dash_pbPort" style="text-align:right">unknown</td>
+                    </tr>
+                    <tr>
+                      <td></td>
+                      <td data-i18n="dashboard_infobox_label_port_flat">flat</td>
+                      <td id="dash_fbPort" style="text-align:right">unknown</td>
+                    </tr>
+                    <tr>
+                      <td></td>
+                      <td data-i18n="dashboard_infobox_label_port_json">json</td>
+                      <td id="dash_jsonPort" style="text-align:right">unknown</td>
+                    </tr>
+                    <tr>
+                      <td></td>
+                      <td data-i18n="dashboard_infobox_label_ports_websocket">websocket</td>
+                      <td id="dash_wsPorts" style="text-align:right">unknown</td>
+                    </tr>
+                  </tbody>
+                </table>
+                <table class="table borderless">
+                  <thead>
+                    <tr>
+                      <th colspan="3">
+                        <i class="mdi mdi-numeric"></i>
+                        <span data-i18n="about_version">Version</span>
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td></td>
+                      <td data-i18n="dashboard_infobox_label_currenthyp">Hyperion version:</td>
+                      <td id="dash_currv" style="text-align:right">unknown</td>
+                    </tr>
+                    <tr>
+                      <td></td>
+                      <td data-i18n="dashboard_infobox_label_watchedversionbranch">Watched version branch:</td>
+                      <td id="dash_watchedversionbranch" style="text-align:right">unknown</td>
+                    </tr>
+                    <tr>
+                      <td></td>
+                      <td data-i18n="dashboard_infobox_label_latesthyp">Latest version:</td>
+                      <td id="dash_latev" style="text-align:right">unknown</td>
+                    </tr>
+                  </tbody>
+                </table>
+                <hr>
+                <span id="versioninforesult"></span>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+      <!-- /.col-lg-12 -->
+    </div>
+    <!-- /.row -->
+  </div>
+  <!-- /.container-fluid -->
+
+  <script src="/js/content_dashboard.js"></script>

assets/webconfig/content/effects_configurator.html

@@ -1,7 +1,20 @@
 <div class="container-fluid">
 	<div class="row">
 		<div class="col-lg-12">
-			<h3 class="page-header"><i class="fa fa-cogs fa-fw"></i><span  data-i18n="main_menu_effectsconfigurator_token">Effects Configurator</span></h3> 
+			<h3 class="page-header"><i class="fa fa-cogs fa-fw"></i><span  data-i18n="main_menu_effectsconfigurator_token">Effects Configurator</span></h3>
+
+      <div class="panel panel-default" style="border:0px;">
+        <div class="panel-heading panel-instance" style="border-radius:3px; border-bottom:0px;">
+          <div class="dropdown">
+            <a id="active_instance_dropdown" class="dropdown-toggle" data-toggle="dropdown" href="#" style="text-decoration:none;display:flex;align-items:center;">
+              <div id="active_instance_friendly_name"></div>
+              <div id="btn_hypinstanceswitch" style="white-space:nowrap;"><span class="mdi mdi-lightbulb-group mdi-24px" style="margin-right:0; margin-left:5px;"></span><span class="mdi mdi-menu-down mdi-24px"></span></div>
+            </a>
+            <ul id="hyp_inst_listing" class="dropdown-menu dropdown-alerts" style="cursor:pointer;"></ul>
+          </div>
+        </div>
+      </div>
+
 			<div id="intro_effc">
 			</div>
 			<div class="row">
@@ -20,7 +33,7 @@
 									<td class="itd"><input class="form-control" type="text" id="name-input" /></td>
 								</tr>
 							</tbody>
-						</table>						
+						</table>
 						<div id="editor_container" />
 					</div>
 					 <div class="panel-footer" id="eff_footer">

assets/webconfig/content/ie_not_supported.html

@@ -5,7 +5,7 @@
 		<style> body {margin:auto; padding:2%; text-align:center; font-family:arial;}</style>
 	</head>
 	<body>
-		<img src="../img/hyperion/hyperionlogo.png" alt="Redefine ambient light!" style="margin-bottom:20px;">
+		<img src="../img/hyperion/logo_positiv.png" alt="Redefine ambient light!" style="margin-bottom:20px;">
 		<h2><span style="color:red">We are sorry, Internet Explorer is not supported!</span><br /><br /> Please use recent versions of Firefox, Chrome, Safari or MS Edge.</h2>
 	</body>
 </html>

assets/webconfig/content/login.html

@@ -1,35 +1,35 @@
 <div class="container" style="margin:20px auto;max-width:500px;">
-	<center>
+  <center>
-		<div>
+    <div>
-			<div class="panel panel-danger">
+      <div class="panel panel-danger">
-				<div class="panel-heading">
+        <div class="panel-heading panel-system">
-					<h3 class="panel-title">Login</h3>
+          <h3 class="panel-title">Login</h3>
-				</div>
+        </div>
-				<div class="panel-body">
+        <div class="panel-body">
-					<form>
+          <form>
-						<div class="form-group">
+            <div class="form-group">
-							<input name="password" class="form-control" type="password" id="password" placeholder="Password" autocomplete="off"/>
+              <input name="password" class="form-control" type="password" id="password" placeholder="Password" autocomplete="off" />
-							<input name="show_pw" type="checkbox" id="show_pw"/><label for="show_pw">Show/Hide Password</label>
+              <input name="show_pw" type="checkbox" id="show_pw" /><label for="show_pw">Show/Hide Password</label>
-						</div>
+            </div>
-						<div class="form-group">
+            <div class="form-group">
-							<button type="submit" class="btn btn-sm btn-success" id="btn_password" onclick="requestAuthorization(document.getElementById('password').value); return false;" disabled><i class="fa fa-fw fa-unlock"></i>Login</button>
+              <button type="submit" class="btn btn-sm btn-success" id="btn_password" onclick="requestAuthorization(document.getElementById('password').value); return false;" disabled><i class="fa fa-fw fa-unlock"></i>Login</button>
-						</div>
+            </div>
-					</form>
+          </form>
-				</div>
+        </div>
-			</div>
+      </div>
-		</div>
+    </div>
-	</center>
+  </center>
 </div>
 
 <script>
-removeOverlay();
+  removeOverlay();
 
-$('#password').off().on('input',function(e) {
+  $('#password').off().on('input', function (e) {
-	if(e.currentTarget.value.length >= 8)
+    if (e.currentTarget.value.length >= 8)
-		$('#btn_password').removeAttr('disabled');
+      $('#btn_password').removeAttr('disabled');
-});
+  });
 
-$('#show_pw').off().on('change',function(e) {
+  $('#show_pw').off().on('change', function (e) {
-	(e.currentTarget.checked ? $('#password').attr('type', 'text') : $('#password').attr('type', 'password'))
+    (e.currentTarget.checked ? $('#password').attr('type', 'text') : $('#password').attr('type', 'password'))
-});
+  });
 </script>

assets/webconfig/content/remote.html

@@ -1,5 +1,18 @@
 <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="panel panel-default" style="border:0px;">
+		<div class="panel-heading panel-instance" style="border-radius:3px; border-bottom:0px;">
+			<div class="dropdown">
+				<a id="active_instance_dropdown" class="dropdown-toggle" data-toggle="dropdown" href="#" style="text-decoration:none;display:flex;align-items:center;">
+          <div id="active_instance_friendly_name"></div>
+					<div id="btn_hypinstanceswitch" style="white-space:nowrap;"><span class="mdi mdi-lightbulb-group mdi-24px" style="margin-right:0; margin-left:5px;"></span><span class="mdi mdi-menu-down mdi-24px"></span></div>
+				</a>
+				<ul id="hyp_inst_listing" class="dropdown-menu dropdown-alerts" style="cursor:pointer;"></ul>
+			</div>
+		</div>
+	</div>
+
 	<div class="row">
 		<div class="col-md-12 col-lg-8 col-xxl-7">
 			<div class="panel panel-default" >

assets/webconfig/css/darkMode.css

@@ -14,6 +14,10 @@ body {
     border-color: #212121;
 }
 
+.navbar-default li a {
+    color: #C6C6C6 !important;
+}
+
 .panel-body {
     background-color: #424242;
 }
@@ -189,7 +193,7 @@ tr:hover td {
 }
 
 .dropdown-menu>li>a {
-    color: #2e6da4;
+    color: #DDDDDD;
 }
 
 /*Panels*/
@@ -220,6 +224,18 @@ tr:hover td {
     color: #DDDDDD;
 }
 
+.panel-default>.panel-system{
+    background-color: #0E83E7 !important;
+    border-color: #212121 !important;
+    color: #fff ;
+}
+
+.panel-default>.panel-instance{
+    background-color:#E18300 !important;
+    border-color: #212121 !important;
+    color: #DDDDDD;
+}
+
 .panel-footer {
     background-color: #424242 !important;
     border-top: 1px solid #616161 !important;
@@ -271,16 +287,16 @@ select.form-control {
 }
 
 .checklist li::before {
-    color: greenyellow;
+    color: #DDDDDD;
 }
 
-.checkbox-success input[type="checkbox"]:checked + label::before, .checkbox-success input[type="radio"]:checked + label::before {
+.checkbox input[type="checkbox"]:checked + label::before, .checkbox-success input[type="checkbox"]:checked + label::before, .checkbox-success input[type="radio"]:checked + label::before {
-    background-color: greenyellow;
+    border-color: #616161;
-    border-color: #5cb85c;
+    background-color: #212121;
 }
 
-.checkbox-success input[type="checkbox"]:checked + label::after, .checkbox-success input[type="radio"]:checked + label::after {
+.checkbox input[type="checkbox"]:checked + label::after, .checkbox-success input[type="checkbox"]:checked + label::after, .checkbox-success input[type="radio"]:checked + label::after {
-    color: #1e1e1e;
+    color: #DDDDDD;
 }
 
 .btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
@@ -416,7 +432,7 @@ button.close:hover {
 }
 
 .bs-callout-success {
-    border-left-color: greenyellow;
+    border-left-color: #67FF01;
 }
 
 .bs-callout-success h4 {

assets/webconfig/css/hyperion.css

@@ -2,12 +2,12 @@
 @font-face {
     font-family: "Roboto";
     src: url("../fonts/Roboto-Regular.woff") format('woff'),
-		 url("../fonts/Roboto-Regular.ttf") format('ttf');
+         url("../fonts/Roboto-Regular.ttf") format('ttf');
 }
 body{font-family:Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:15px;max-width:2000px;margin: 0 auto;}
 .form-group{margin-bottom:11px;}
 #page-content {
-	padding-bottom:50px;
+    padding-bottom:50px;
 }
 body{
     overflow-y: scroll;
@@ -15,22 +15,23 @@ body{
 /*
 #page-wrapper a[target=_blank]::after {
     content:"\f08e";
-	position:relative;
+    position:relative;
-	font:normal normal normal 10px/1 FontAwesome;
+    font:normal normal normal 10px/1 FontAwesome;
-	top:-3px;
+    top:-3px;
-	left:3px;
+    left:3px;
-	margin-right:5px;
+    margin-right:5px;
 }
 */
 /* fixed brand icon */
 @media (min-width: 768px){
-	.navbar-brand{position:fixed}
+    .navbar-brand{position:fixed}
+  #main-nav{position:absolute !important;}
 }
 
 /*mobile nav*/
 @media (max-width: 768px){
-	.navbar-toggle{position:fixed;right:0px;}
+    .navbar-toggle{position:fixed;right:0px;}
-	#main-nav{position:fixed;right:-200px;}
+    #main-nav{position:fixed;right:-200px;}
 }
 .navbar-toggle .icon-bar {
   background-color:#4c4c4c !important;
@@ -71,40 +72,78 @@ table.input-group{width:100%}
 @media (max-width: 767px) {.ltd{white-space:normal;}}
 
 /*icon spacing*/
-.fa-fw{margin-right:5px;}
+.fa-fw,.mdi-24px{margin-right:5px;}
 
 /*table*/
 table.borderless td,table.borderless th{border: none !important;}
 .borderless {margin-bottom:0px}
 table label{margin:0}
+table.first_cell_borderless td:first-child,table.first_cell_borderless th:first-child{border: none !important;}
 
 /*Header*/
-.navbar-brand{padding-top:0px;padding-bottom:5px;padding-left:20px;height:60px;}
+.navbar-brand{padding-top:4px;padding-bottom:0px;padding-left:2;}
-.sidebar{margin-top:62px;padding-top:20px;}
+.sidebar{margin-top:65px;}
 .dropdown{font-size:18px;}
 @media (max-width: 767px) {.sidebar{margin-top:0px;padding-top:0px !important;}}
-.page-header{margin-top:15px;}
+.page-header{margin-top:0px;}
+
+.navbar-top-links li a {
+    min-height: 64px;
+    display: flex;
+    align-items: center;
+}
+
+.navbar-default li a {
+    color: #303030 !important;
+}
+
+.sidebar ul li a.active{
+    padding-left:5px;
+    border-left:10px solid #0E83E7;
+}
+
+.sidebar ul li ul li a.active{
+    padding-left:27px;
+    border-left:10px solid #0E83E7;
+}
+
+.itbody td:not(:first-child){
+    width: 1px;
+    text-align: center;
+}
 
 /*Panels*/
 .panel-heading{font-size:18px;}
 .headcollapse{cursor:pointer;}
 .headcollapse a:hover{text-decoration:none;}
 .panel-default{
-	background-color:#fff !important;
+    background-color:#fff !important;
-	border-color:#d0d0d0 !important;
+    border-color:#d0d0d0 !important;
 }
 .panel-default>.panel-heading{
-	background-color:#f3f3f3 !important;
+    background-color:#F3F3F3  !important;
-	border-color:#ddd !important;
+    border-color:#ddd !important;
+}
+
+.panel-default > .panel-system, .panel-danger > .panel-system {
+    background-color: #0E83E7 !important;
+    border-color: #ddd !important;
+    color: #fff;
+}
+
+.panel-default>.panel-instance{
+    background-color:#E18300 !important;
+    border-color:#ddd !important;
+    color: #fff;
 }
 
 /*remote page*/
 @media (max-width: 500px) {.ssthead th:nth-child(1), .sstbody td:nth-child(1){display:none}}
 
 /*Dashboard*/
-.component-on{color:green;}
+.component-on{color: #67FF01;}
-.component-off{color:grey;}
+.component-off{color: grey;}
-#dash_news hr{margin:10px 0}
+#dash_news hr{margin: 10px 0}
 
 /*Colorpicker 2x*/
 .colorpicker-2x {z-index:99999}
@@ -114,16 +153,16 @@ table label{margin:0}
 
 /*Hint*/
 .info-hint{
-	background-color:rgb(236,236,236);
+    background-color:rgb(236,236,236);
-	border-radius:10px;
+    border-radius:10px;
 }
 .intro-hint{
-	padding:8px 8px 8px 14px;
+    padding:8px 8px 8px 14px;
-	margin:0px 0px 15px 0px;
+    margin:0px 0px 15px 0px;
-	border-left:8px solid #0088cc;
+    border-left:8px solid #0088cc;
-	border-top:1px solid #0088cc;
+    border-top:1px solid #0088cc;
-	box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.25);
+    box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.25);
-	font-size:97%;
+    font-size:97%;
 }
 
 /*Support page*/
@@ -151,6 +190,11 @@ table label{margin:0}
     margin-bottom: 0;
 }
 
+/*backported bootstrap 4 font weight*/
+.font-weight-bold {
+  font-weight: 700;
+}
+
 /*wizard button*/
 .btn-wizard {
     color: #fff;
@@ -174,8 +218,12 @@ table label{margin:0}
   border-style: none;
 }
 
+/*general instance management button*/
+[id^=instdel_], [id^=instren_] { padding: 0px 12px;}
+.mdi-lead-pencil, .mdi-delete-forever {font-size: 22px;}
+
 /*led preview & led visualisation*/
-#leds_canvas {background-color:#AAAAAA; position:absolute; margin:15px; background-image:url(/img/hyperion/hyperionlogo.png); background-repeat:no-repeat; background-position: center;}
+#leds_canvas {position:absolute; margin:15px; background-repeat:no-repeat; background-position: center;}
 .led { display:inline-block; border: 1px solid black; position:absolute; opacity:0.8; text-align:center; vertical-align:middle; padding:4px;  border-radius:2px;}
 .led_num, .led_prev_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;}
 .led_ex{height:15px;width:25px;border-radius:3px;display:inline-block;border:1px solid black}
@@ -189,36 +237,44 @@ table label{margin:0}
 
 /*Modal icons*/
 [class*="modal-icon"]{
-	padding:30px;
+    padding:30px;
-	border-radius: 60px;
+    border-radius: 60px;
-	color:white;
+    color:white;
-	font-size:50px !important;
+    font-size:50px !important;
 }
 .modal-icon-check{
-	background-color:#71c341;
+    background-color:#71c341;
 }
 .modal-icon-warning{
-	background-color:#f7c44a;
+    background-color:#f7c44a;
 }
 .modal-icon-error{
-	background-color:#d1322e;
+    background-color:#d1322e;
 }
 
 .modal-icon-edit{
-	background-color:#3579b6;
+    background-color:#3579b6;
 }
 
+/* Overlay for desktop devices */
 .overlay {
-	background-image: url('/img/hyperion/hyperionwhitelogo.png');
+    background-image: url('/img/hyperion/logo_negativ.png');
-	background-repeat: no-repeat;
+    background-repeat: no-repeat;
-	background-position: center center;
+    background-position: center center;
-	background-color: rgba(1, 1, 1, 0.7);
+    background-color: rgba(1, 1, 1, 0.7);
-	position: fixed;
+    position: fixed;
-	bottom: 0;
+    bottom: 0;
-	left: 0;
+    left: 0;
-	right: 0;
+    right: 0;
-	top: 0;
+    top: 0;
-	z-index:99999;
+    z-index:99999;
+}
+
+/* Overlay for mobile devices */
+@media (max-width: 768px) {
+  .overlay {
+    background-size: contain;
+  }
 }
 
 /*simple ripple effect for li a and btn*/
@@ -307,7 +363,7 @@ li a:active:after {
     color: #428bca;
 }
 .bs-callout-success {
-    border-left-color: #5cb85c;
+    border-left-color: #67FF01;
 }
 .bs-callout-success h4 {
     color: #5cb85c;
@@ -341,8 +397,8 @@ li a:active:after {
 @media (min-width: 1500px) {
   .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
     float: left;
-	padding-left:15px;
+    padding-left:15px;
-	padding-right:15px;
+    padding-right:15px;
   }
   .col-xxl-12 {
     width: 100%;
@@ -588,39 +644,39 @@ li a:active:after {
     left: 0;
 }
 .gj-resizable-w {
-	cursor: w-resize;
+    cursor: w-resize;
-	width: 7px;
+    width: 7px;
-	left: -5px;
+    left: -5px;
-	top: 0;
+    top: 0;
-	height: 100%;
+    height: 100%;
 }
 .gj-resizable-se {
-	cursor: se-resize;
+    cursor: se-resize;
-	width: 12px;
+    width: 12px;
-	height: 12px;
+    height: 12px;
-	right: 1px;
+    right: 1px;
-	bottom: 1px;
+    bottom: 1px;
 }
 .gj-resizable-sw {
-	cursor: sw-resize;
+    cursor: sw-resize;
-	width: 9px;
+    width: 9px;
-	height: 9px;
+    height: 9px;
-	left: -5px;
+    left: -5px;
-	bottom: -5px;
+    bottom: -5px;
 }
 .gj-resizable-nw {
-	cursor: nw-resize;
+    cursor: nw-resize;
-	width: 9px;
+    width: 9px;
-	height: 9px;
+    height: 9px;
-	left: -5px;
+    left: -5px;
-	top: -5px;
+    top: -5px;
 }
 .gj-resizable-ne {
-	cursor: ne-resize;
+    cursor: ne-resize;
-	width: 9px;
+    width: 9px;
-	height: 9px;
+    height: 9px;
-	right: -5px;
+    right: -5px;
-	top: -5px;
+    top: -5px;
 }
 
 .gj-dialog-footer {
@@ -815,11 +871,14 @@ li a:active:after {
   color: #fff;
 }
 
+.checkbox input[type="checkbox"]:checked + label::before,
 .checkbox-success input[type="checkbox"]:checked + label::before,
 .checkbox-success input[type="radio"]:checked + label::before {
   background-color: #5cb85c;
   border-color: #5cb85c;
 }
+
+.checkbox input[type="checkbox"]:checked + label::after,
 .checkbox-success input[type="checkbox"]:checked + label::after,
 .checkbox-success input[type="radio"]:checked + label::after {
   color: #fff;

assets/webconfig/i18n/cs.json

@@ -145,7 +145,8 @@
     "dashboard_infobox_label_instance": "Instance:",
     "dashboard_infobox_label_latesthyp": "Poslední dostupná verze Hyperionu",
     "dashboard_infobox_label_platform": "Platforma:",
-    "dashboard_infobox_label_ports": "Port (json|proto):",
+    "dashboard_infobox_label_ports": "Port",
+    "dashboard_infobox_label_ports_flat_proto": "Flatbuffer | Protobuffer:",
     "dashboard_infobox_label_smartacc": "Inteligentní přístup",
     "dashboard_infobox_label_statush": "Stav Hyperionu:",
     "dashboard_infobox_label_title": "Informace",
@@ -807,4 +808,4 @@
     "wiz_rgb_switchevery": "Přepínám barvu každých ...",
     "wiz_rgb_title": "Průvodce pořadí RGB Byte",
     "wiz_wizavail": "Průvodce je k dispozici"
-}
+}

assets/webconfig/i18n/de.json

@@ -133,7 +133,7 @@
     "conf_network_bobl_intro": "Boblight Empfänger",
     "conf_network_createToken_btn": "Erstelle Token",
     "conf_network_fbs_intro": "Google Flatbuffers Empfänger. Wird genutzt für schnellen Bildempfang.",
-    "conf_network_forw_intro": "Leite alles an eine zweite Hyperion Instanz weiter, diese kann dann mit einer anderen LED-Steuerung genutzt werden",
+    "conf_network_forw_intro": "Leite alles an eine zweite Hyperion Installation weiter, diese kann dann mit einer anderen LED-Steuerung genutzt werden",
     "conf_network_json_intro": "Der JSON-RPC-Port aller Hyperion-Instanzen, wird genutzt zur Fernsteuerung.",
     "conf_network_net_intro": "Einstellungen zum Netzwerk die für alle Netzwerk-Dienste gelten",
     "conf_network_proto_intro": "Der PROTO-Port aller Hyperion-Instanzen, wird genutzt für \"Bildstreams\" (HyperionScreenCap, Kodi Add-on, Android Hyperion Grabber, ...)",
@@ -164,7 +164,8 @@
     "dashboard_infobox_label_instance": "Instanz:",
     "dashboard_infobox_label_latesthyp": "Aktuellste Hyperion Version:",
     "dashboard_infobox_label_platform": "Plattform:",
-    "dashboard_infobox_label_ports": "Ports (flat|proto):",
+    "dashboard_infobox_label_ports": "Ports",
+    "dashboard_infobox_label_ports_flat_proto": "Flatbuffer | Protobuffer:",
     "dashboard_infobox_label_smartacc": "Schnellzugriff",
     "dashboard_infobox_label_statush": "Hyperion Status:",
     "dashboard_infobox_label_title": "Information",
@@ -779,7 +780,7 @@
     "main_ledsim_title": "LED-Visualisierung",
     "main_menu_about_token": "Über Hyperion",
     "main_menu_colors_conf_token": "Bildverarbeitung",
-    "main_menu_configuration_token": "Konfiguration",
+    "main_menu_configuration_token": "Instanzen",
     "main_menu_dashboard_token": "Dashboard",
     "main_menu_effect_conf_token": "Effekte",
     "main_menu_effectsconfigurator_token": "Effekt Konfigurator",

assets/webconfig/i18n/en.json

@@ -134,7 +134,7 @@
     "conf_network_bobl_intro": "Receiver for Boblight",
     "conf_network_createToken_btn": "Create Token",
     "conf_network_fbs_intro": "Google Flatbuffers Receiver. Used for fast image transmission.",
-    "conf_network_forw_intro": "Forward all input to a second Hyperion instance which could be driven with another led controller",
+    "conf_network_forw_intro": "Forward all input to a second Hyperion installation which could be driven with another led controller",
     "conf_network_json_intro": "The JSON-RPC-Port of all Hyperion instances, used for remote control.",
     "conf_network_net_intro": "Network related settings which are applied to all network services.",
     "conf_network_proto_intro": "The PROTO-Port of all Hyperion instances, used for picture streams (HyperionScreenCap, Kodi Addon, Android Hyperion Grabber, ...)",
@@ -165,7 +165,11 @@
     "dashboard_infobox_label_instance": "Instance:",
     "dashboard_infobox_label_latesthyp": "Latest Hyperion version:",
     "dashboard_infobox_label_platform": "Platform:",
-    "dashboard_infobox_label_ports": "Ports (flat|proto):",
+    "dashboard_infobox_label_ports": "Ports",
+    "dashboard_infobox_label_port_json": "JSON-Server:",
+    "dashboard_infobox_label_port_flat": "Flatbuffer:",
+    "dashboard_infobox_label_port_proto": "Protobuffer:",
+    "dashboard_infobox_label_ports_websocket": "WebSocket (ws|wss):",
     "dashboard_infobox_label_smartacc": "Smart Access",
     "dashboard_infobox_label_statush": "Hyperion status:",
     "dashboard_infobox_label_title": "Information",
@@ -747,6 +751,8 @@
     "general_country_ru": "Russia",
     "general_country_uk": "United Kingdom",
     "general_country_us": "United States",
+    "general_disabled": "disabled",
+    "general_enabled": "enabled",
     "general_speech_cs": "Czech",
     "general_speech_de": "German",
     "general_speech_en": "English",
@@ -808,7 +814,7 @@
     "main_ledsim_title": "LED Visualization",
     "main_menu_about_token": "About Hyperion",
     "main_menu_colors_conf_token": "Image Processing",
-    "main_menu_configuration_token": "Configuration",
+    "main_menu_configuration_token": "Instances",
     "main_menu_dashboard_token": "Dashboard",
     "main_menu_effect_conf_token": "Effects",
     "main_menu_effectsconfigurator_token": "Effects Configurator",

assets/webconfig/i18n/es.json

@@ -164,7 +164,8 @@
     "dashboard_infobox_label_instance": "Instancia:",
     "dashboard_infobox_label_latesthyp": "Última versión de Hyperion:",
     "dashboard_infobox_label_platform": "Plataforma:",
-    "dashboard_infobox_label_ports": "Puertos (json|proto):",
+    "dashboard_infobox_label_ports": "Puertos",
+    "dashboard_infobox_label_ports_flat_proto": "Flatbuffer | Protobuffer:",
     "dashboard_infobox_label_smartacc": "Acceso Inteligente",
     "dashboard_infobox_label_statush": "Estado de Hyperion:",
     "dashboard_infobox_label_title": "Información",
@@ -935,4 +936,4 @@
     "wiz_yeelight_intro1": "Este asistente configura el Hyperion para el sistema Yeelight. Las características son la detección automática de los Yeelights, ajustando cada luz a una posición específica en su imagen o desactivarla y ¡ajustar la configuración de Hyperion automáticamente! En resumen: ¡Todo lo que necesitas son algunos clics y listo!",
     "wiz_yeelight_title": "Asistente Yeelight",
     "wiz_yeelight_unsupported": "Sin soporte"
-}
+}

assets/webconfig/i18n/it.json

@@ -163,7 +163,8 @@
     "dashboard_infobox_label_instance": "Istanza:",
     "dashboard_infobox_label_latesthyp": "L'ultima versione di Hyperion:",
     "dashboard_infobox_label_platform": "Piattaforma:",
-    "dashboard_infobox_label_ports": "Porte (json|proto):",
+    "dashboard_infobox_label_ports": "Porte",
+    "dashboard_infobox_label_ports_flat_proto": "Flatbuffer | Protobuffer:",
     "dashboard_infobox_label_smartacc": "Accesso Smart",
     "dashboard_infobox_label_statush": "Status Hyperion:",
     "dashboard_infobox_label_title": "Informazioni",
@@ -908,4 +909,4 @@
     "wiz_yeelight_intro1": "Questi assistenti Configurano Hyperion per il sistema Yeelight. Le funzionalità sono: rilevamento automatico Yeelights, assegnazione di ciascuna luce a una specifica posizione nella tua immagine, disabilitazione luci, regolazione automatica delle impostazioni di Hyperion! In breve: tutto ciò che ti serve sono un paio di click e sei pronto!",
     "wiz_yeelight_title": "Assistente Yeelight",
     "wiz_yeelight_unsupported": "Non supportato"
-}
+}

assets/webconfig/i18n/nl.json

@@ -164,7 +164,8 @@
     "dashboard_infobox_label_instance": "Instantie",
     "dashboard_infobox_label_latesthyp": "Laatste Hyperion versie",
     "dashboard_infobox_label_platform": "Platform",
-    "dashboard_infobox_label_ports": "Poorten (flat|proto):",
+    "dashboard_infobox_label_ports": "Poorten",
+    "dashboard_infobox_label_ports_flat_proto": "Flatbuffer | Protobuffer:",
     "dashboard_infobox_label_smartacc": "Slimme toegang",
     "dashboard_infobox_label_statush": "Hyperion status:",
     "dashboard_infobox_label_title": "Informatie",
@@ -911,4 +912,4 @@
     "wiz_yeelight_intro1": "Deze wizards configureren Hyperion voor het Yeelight-systeem. Functies zijn de automatische detectie van de Yeelighs, waarbij elk licht op een specifieke positie op uw foto wordt ingesteld of uitgeschakeld en de Hyperion-instellingen automatisch worden afgestemd! Kortom: u heeft slechts enkele klikken nodig en u bent klaar!",
     "wiz_yeelight_title": "Yeelight Wizard",
     "wiz_yeelight_unsupported": "Niet ondersteund"
-}
+}

assets/webconfig/i18n/pl.json

@@ -164,7 +164,8 @@
     "dashboard_infobox_label_instance": "Instancja:",
     "dashboard_infobox_label_latesthyp": "Najnowsza wersja Hyperion:",
     "dashboard_infobox_label_platform": "Platforma:",
-    "dashboard_infobox_label_ports": "Porty (flat|proto):",
+    "dashboard_infobox_label_ports": "Porty",
+    "dashboard_infobox_label_ports_flat_proto": "Flatbuffer | Protobuffer:",
     "dashboard_infobox_label_smartacc": "Szybki dostęp",
     "dashboard_infobox_label_statush": "Status Hyperion:",
     "dashboard_infobox_label_title": "Informacje",
@@ -914,4 +915,4 @@
     "wiz_yeelight_intro1": "Ten kreator konfiguruje Hyperion dla systemu Yeelight. Funkcje obejmują automatyczne wykrywanie Yeelighów, ustawianie każdego światła w określonej pozycji na zdjęciu lub wyłączanie go i automatyczne dostrajanie ustawień Hyperiona! Krótko mówiąc: wystarczy kilka kliknięć i gotowe!",
     "wiz_yeelight_title": "Kreator Yeelight",
     "wiz_yeelight_unsupported": "Niewspierane"
-}
+}

assets/webconfig/i18n/ru.json

@@ -56,7 +56,8 @@
     "dashboard_infobox_label_instance": "Пример:",
     "dashboard_infobox_label_latesthyp": "Последняя версия Hyperion:",
     "dashboard_infobox_label_platform": "Платформа:",
-    "dashboard_infobox_label_ports": "Порты (flat|proto):",
+    "dashboard_infobox_label_ports": "Порты",
+    "dashboard_infobox_label_ports_flat_proto": "Flatbuffer | Protobuffer:",
     "dashboard_infobox_label_statush": "Статус Hyperion:",
     "dashboard_infobox_label_title": "Информация",
     "dashboard_infobox_message_updatesuccess": "Вы используете актуальную версию Hyperion.",
@@ -229,4 +230,4 @@
     "wiz_hue_username": "Пользователь ID:",
     "wiz_rgb_qgend": "...зеленый?",
     "wiz_rgb_qrend": "...красный?"
-}
+}

assets/webconfig/i18n/sv.json

@@ -164,7 +164,8 @@
     "dashboard_infobox_label_instance": "Instans:",
     "dashboard_infobox_label_latesthyp": "Senaste Hyperion-versionen:",
     "dashboard_infobox_label_platform": "Plattform",
-    "dashboard_infobox_label_ports": "Portar (flat|proto):",
+    "dashboard_infobox_label_ports": "Portar",
+    "dashboard_infobox_label_ports_flat_proto": "Flatbuffer | Protobuffer:",
     "dashboard_infobox_label_smartacc": "Smart Åtkomst",
     "dashboard_infobox_label_statush": "Hyperion-status:",
     "dashboard_infobox_label_title": "Information",
@@ -914,4 +915,4 @@
     "wiz_yeelight_intro1": "De här guiderna konfigurerar Hyperion för Yeelight-systemet. Funktionerna är Yeelights automatiska detektering, ställ in varje ljus till en specifik position på din bild eller inaktivera den och ställ in Hyperion-inställningarna automatiskt! Kort sagt: Några klick och du är klar!",
     "wiz_yeelight_title": "Yeelight-Guide",
     "wiz_yeelight_unsupported": "Utan stöd"
-}
+}

assets/webconfig/i18n/tr.json

@@ -107,7 +107,8 @@
     "dashboard_infobox_label_instance": "Olay",
     "dashboard_infobox_label_latesthyp": "En güncel Hyperion versiyonu:",
     "dashboard_infobox_label_platform": "Plaform:",
-    "dashboard_infobox_label_ports": "Portlar (flat|proto):",
+    "dashboard_infobox_label_ports": "Portlar",
+    "dashboard_infobox_label_ports_flat_proto": "Flatbuffer | Protobuffer:",
     "dashboard_infobox_label_smartacc": "Akıllı Erişim",
     "dashboard_infobox_label_statush": "Hyperion durumu:",
     "dashboard_infobox_label_title": "Bilgi",
@@ -528,4 +529,4 @@
     "wiz_rgb_qgend": "...yeşil?",
     "wiz_rgb_qrend": "...kırmızı?",
     "wiz_rgb_title": "RGB Byte Sıralaması Sihirbazı"
-}
+}

assets/webconfig/i18n/vi.json

@@ -144,7 +144,8 @@
     "dashboard_infobox_label_instance": "Ví dụ:",
     "dashboard_infobox_label_latesthyp": "Phiên bản Ambilight mới nhất:",
     "dashboard_infobox_label_platform": "Nền tảng:",
-    "dashboard_infobox_label_ports": "Cổng (flat | proto):",
+    "dashboard_infobox_label_ports": "Cổng",
+    "dashboard_infobox_label_ports_flat_proto": "Flatbuffer | Protobuffer:",
     "dashboard_infobox_label_smartacc": "Truy cập thông minh",
     "dashboard_infobox_label_statush": "Trạng thái:",
     "dashboard_infobox_label_title": "Thông tin",
@@ -806,4 +807,4 @@
     "wiz_rgb_switchevery": "Chuyển màu mỗi ...",
     "wiz_rgb_title": "Thuật sĩ đặt hàng Byte RGB",
     "wiz_wizavail": "Thuật sĩ có sẵn"
-}
+}

assets/webconfig/index.html

@@ -72,6 +72,9 @@
 	<!-- Custom Fonts -->
 	<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
 
+  	<!-- Material Design Icons - https://github.com/Templarian/MaterialDesign-Webfont -->
+	<link href="css/materialdesignicons.min.css" media="all" rel="stylesheet" type="text/css">
+
 	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 	<!--[if lt IE 9]>
@@ -83,7 +86,7 @@
 <body>
 	<noscript>
 		<div style="color:red;margin: 40px 0;text-align:center">
-			<img src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!">
+			<img src="img/hyperion/logo_positiv.png" alt="Redefine ambient light!">
 			<h3>Hyperion Web Configuration requires Javascript. Please enable Javascript in your browser for this page in order to use it!</h3>
 		</div>
 		<style type="text/css"> #loading_overlay, #wrapper{ display: none } </style>
@@ -93,7 +96,7 @@
 	<div id="wrapper">
 
 		<!-- Navigation -->
-		<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
+		<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0; min-height: 65px">
 			<div class="navbar-header">
 				<button type="button" class="navbar-toggle closed" aria-controls="navbar">
 					<span class="sr-only">Toggle navigation</span>
@@ -101,7 +104,7 @@
 					<span class="icon-bar middle-bar"></span>
 					<span class="icon-bar bottom-bar"></span>
 				</button>
-				<a class="navbar-brand" href="https://www.hyperion-project.org" target="_blank"><img src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!" height="55"></a>
+				<a class="navbar-brand" href="https://www.hyperion-project.org" target="_blank"><img id="navbar_brand_logo" src="img/hyperion/logo_positiv.png" alt="Redefine ambient light!" height="60"></a>
 
 			</div>
 			<!-- /.navbar-header -->
@@ -121,21 +124,6 @@
 					<i id="btn_darkmode_icon" class="fa fa-moon-o"></i>
 				</a>
 			</li>
-				<!-- instance switcher -->
-				<li class="dropdown" id="btn_hypinstanceswitch" style="display:none">
-					<a class="dropdown-toggle" data-toggle="dropdown" href="#">
-						<i class="fa fa-exchange fa-fw"></i> <i class="fa fa-caret-down"></i>
-					</a>
-					<ul id="hyp_inst_listing" class="dropdown-menu dropdown-alerts">
-					</ul>
-				</li>
-			<!--
-				<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>
@@ -216,17 +204,17 @@
 				<div class="sidebar-nav navbar-collapse">
 					<ul class="nav" id="side-menu">
 						<li> <a class="inactive mnava" href="#dashboard"><i class="fa fa-dashboard fa-fw"></i><span  data-i18n="main_menu_dashboard_token">Dashboard</span></a> </li>
+            <li> <a class="inactive mnava" href="#conf_general"><i class="fa fa-wrench fa-fw"></i><span  data-i18n="main_menu_general_conf_token">General</span></a> </li>
 						<li>
 							<a class="inactive"><i class="fa fa-cog fa-fw"></i><span  data-i18n="main_menu_configuration_token">Configuration</span><span class="fa arrow"></span></a>
 							<ul class="nav nav-second-level">
-								<li> <a class="inactive mnava" href="#conf_general"><i class="fa fa-wrench fa-fw"></i><span  data-i18n="main_menu_general_conf_token">General</span></a> </li>
+								<li> <a class="inactive mnava" href="#conf_leds"><i class="mdi mdi-lightbulb-on fa-fw"></i><span  data-i18n="main_menu_leds_conf_token">LED Hardware</span></a> </li>
-								<li> <a class="inactive mnava" href="#conf_leds"><i class="fa fa-lightbulb-o fa-fw"></i><span  data-i18n="main_menu_leds_conf_token">LED Hardware</span></a> </li>
-								<li> <a class="inactive mnava" href="#conf_grabber"><i class="fa fa-camera fa-fw"></i><span  data-i18n="main_menu_grabber_conf_token">Capturing Hardware</span></a> </li>
 								<li> <a class="inactive mnava" href="#conf_effect"><i class="fa fa-spinner fa-fw"></i><span  data-i18n="main_menu_effect_conf_token">Effects</span></a> </li>
 								<li> <a class="inactive mnava" href="#conf_colors"><i class="fa fa-photo fa-fw"></i><span  data-i18n="main_menu_colors_conf_token">Image Processing</span></a> </li>
-								<li> <a class="inactive mnava" href="#conf_network"><i class="fa fa-sitemap fa-fw"></i><span  data-i18n="main_menu_network_conf_token">Network</span></a> </li>
 							</ul>
 						</li>
+            <li> <a class="inactive mnava" href="#conf_grabber"><i class="fa fa-camera fa-fw"></i><span  data-i18n="main_menu_grabber_conf_token">Capturing Hardware</span></a> </li>
+            <li> <a class="inactive mnava" href="#conf_network"><i class="fa fa-sitemap fa-fw"></i><span  data-i18n="main_menu_network_conf_token">Network</span></a> </li>
 						<li> <a class="inactive mnava" href="#remote"><i class="fa fa-wifi fa-fw"></i><span  data-i18n="main_menu_remotecontrol_token">Remote Control</span></a>	</li>
 						<li> <a class="inactive mnava" href="#effects_configurator"><i class="fa fa-cogs fa-fw"></i><span  data-i18n="main_menu_effectsconfigurator_token">Effects Configurator</span></a>	</li>
 						<li> <a class="inactive mnava" href="#support"><i class="fa fa-info fa-fw"></i><span  data-i18n="main_menu_support_token">Support</span></a> </li>
@@ -248,17 +236,6 @@
 
 		<!-- Page Content -->
 		<div id="page-wrapper" style="padding-top:10px; overflow: hidden;">
-		<div id="dashboard_active_instance" style="display:none;padding:0 10px;margin:0">
-			<div class="bs-callout bs-callout-success">
-				<h4 id="dashboard_active_instance_friendly_name"></h4>
-			</div>
-		</div>
-		<div id="hyperion_global_setting_notify" style="display:none;padding:0 10px;margin:0">
-			<div class="bs-callout bs-callout-warning">
-				<h4 data-i18n="dashboard_message_global_setting_t"></h4>
-				<span data-i18n="dashboard_message_global_setting"></span>
-			</div>
-		</div>
 		<div id="hyperion_disabled_notify" style="display:none;padding:0 10px;margin:0">
 			<div class="bs-callout bs-callout-danger">
 				<h4 data-i18n="dashboard_alert_message_disabled_t"></h4>
@@ -306,7 +283,7 @@
 				<div id="wiz_header" class="modal-header"></div>
 				<div id="wizp1">
 					<div class="modal-body" style="text-align:center">
-						<img src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!" style="margin-bottom:15px">
+						<img id="wizard_logo" src="img/hyperion/logo_positiv.png" alt="Redefine ambient light!" style="margin-bottom:15px">
 						<div id="wizp1_body" ></div>
 					</div>
 					<div id="wizp1_footer" class="modal-footer" style="text-align:center"></div>
@@ -314,7 +291,7 @@
 				<div id="wizp2" style="display:none">
 					<center>
 						<div class="modal-body">
-							<img src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!" style="margin-bottom:15px">
+							<img id="wizard_logo" src="img/hyperion/logo_positiv.png" alt="Redefine ambient light!" style="margin-bottom:15px">
 							<div id="wizp2_body"></div>
 						</div>
 					</center>
@@ -323,7 +300,7 @@
 				<div id="wizp3" style="display:none">
 					<center>
 						<div class="modal-body">
-							<img src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!" style="margin-bottom:15px">
+							<img id="wizard_logo" src="img/hyperion/logo_positiv.png" alt="Redefine ambient light!" style="margin-bottom:15px">
 							<div id="wizp3_body"></div>
 						</div>
 					</center>

assets/webconfig/js/content_colors.js

@@ -1,5 +1,9 @@
 $(document).ready(function () {
   performTranslation();
+
+  // update instance listing
+  updateHyperionInstanceListing();
+
   var editor_color = null;
   var editor_smoothing = null;
   var editor_blackborder = null;
@@ -13,12 +17,12 @@ $(document).ready(function () {
     //smoothing
     $('#conf_cont').append(createRow('conf_cont_smoothing'));
     $('#conf_cont_smoothing').append(createOptPanel('fa-photo', $.i18n("edt_conf_smooth_heading_title"), 'editor_container_smoothing', 'btn_submit_smoothing'));
-    $('#conf_cont_smoothing').append(createHelpTable(window.schema.smoothing.properties, $.i18n("edt_conf_smooth_heading_title")));
+    $('#conf_cont_smoothing').append(createHelpTable(window.schema.smoothing.properties, $.i18n("edt_conf_smooth_heading_title"), "smoothingHelpPanelId"));
 
     //blackborder
     $('#conf_cont').append(createRow('conf_cont_blackborder'));
     $('#conf_cont_blackborder').append(createOptPanel('fa-photo', $.i18n("edt_conf_bb_heading_title"), 'editor_container_blackborder', 'btn_submit_blackborder'));
-    $('#conf_cont_blackborder').append(createHelpTable(window.schema.blackborderdetector.properties, $.i18n("edt_conf_bb_heading_title")));
+    $('#conf_cont_blackborder').append(createHelpTable(window.schema.blackborderdetector.properties, $.i18n("edt_conf_bb_heading_title"), "blackborderHelpPanelId"))
   }
   else {
     $('#conf_cont').addClass('row');
@@ -46,6 +50,14 @@ $(document).ready(function () {
   }, true, true);
 
   editor_smoothing.on('change', function () {
+    var smoothingEnable = editor_smoothing.getEditor("root.smoothing.enable").getValue();
+    if (smoothingEnable) {
+      showInputOptionsForKey(editor_smoothing, "smoothing", "enable", true);
+      $('#smoothingHelpPanelId').show();
+    } else {
+      showInputOptionsForKey(editor_smoothing, "smoothing", "enable", false);
+      $('#smoothingHelpPanelId').hide();
+    }
     editor_smoothing.validate().length || window.readOnlyMode ? $('#btn_submit_smoothing').attr('disabled', true) : $('#btn_submit_smoothing').attr('disabled', false);
   });
 
@@ -59,6 +71,17 @@ $(document).ready(function () {
   }, true, true);
 
   editor_blackborder.on('change', function () {
+    var blackborderEnable = editor_blackborder.getEditor("root.blackborderdetector.enable").getValue();
+    if (blackborderEnable) {
+      showInputOptionsForKey(editor_blackborder, "blackborderdetector", "enable", true);
+      $('#blackborderHelpPanelId').show();
+      $('#blackborderWikiLinkId').show();
+
+    } else {
+      showInputOptionsForKey(editor_blackborder, "blackborderdetector", "enable", false);
+      $('#blackborderHelpPanelId').hide();
+      $('#blackborderWikiLinkId').hide();
+    }
     editor_blackborder.validate().length || window.readOnlyMode ? $('#btn_submit_blackborder').attr('disabled', true) : $('#btn_submit_blackborder').attr('disabled', false);
   });
 
@@ -67,7 +90,9 @@ $(document).ready(function () {
   });
 
   //wiki links
-  $('#editor_container_blackborder').append(buildWL("user/advanced/Advanced.html#blackbar-detection", "edt_conf_bb_mode_title", true));
+  var wikiElement = $(buildWL("user/advanced/Advanced.html#blackbar-detection", "edt_conf_bb_mode_title", true));
+  wikiElement.attr('id', 'blackborderWikiLinkId');
+  $('#editor_container_blackborder').append(wikiElement);
 
   //create introduction
   if (window.showOptHelp) {

assets/webconfig/js/content_dashboard.js

@@ -1,126 +1,127 @@
-$(document).ready( function() {
+$(document).ready(function () {
-	performTranslation();
+  performTranslation();
 
-// 	function newsCont(t,e,l)
+  function updateComponents() {
-// 	{
+    $("div[class*='currentInstance']").remove();
-// 		var h = '<div style="padding-left:9px;border-left:6px solid #0088cc;">';
-// 		h += '<h4 style="font-weight:bold;font-size:17px">'+t+'</h4>';
-// 		h += e;
-// 		h += '<a href="'+l+'" class="" target="_blank"><i class="fa fa-fw fa-newspaper-o"></i>'+$.i18n('dashboard_newsbox_readmore')+'</a>';
-// 		h += '</div><hr/>';
-// 		$('#dash_news').append(h);
-// 	}
 
-// 	function createNews(d)
+    var instances_html = '<div class="col-md-6 col-xxl-4 currentInstance-"><div class="panel panel-default">';
-// 	{
+    instances_html += '<div class="panel-heading panel-instance">';
-// 		for(var i = 0; i<d.length; i++)
+    instances_html += '<div class="dropdown">';
-// 		{
+    instances_html += '<a id="active_instance_dropdown" class="dropdown-toggle" data-toggle="dropdown" href="#" style="text-decoration:none;display:flex;align-items:center;">';
-// 			if(i > 5)
+    instances_html += '<div id="active_instance_friendly_name"></div>';
-// 				break;
+    instances_html += '<div id="btn_hypinstanceswitch" style="white-space:nowrap;"><span class="mdi mdi-lightbulb-group mdi-24px" style="margin-right:0;margin-left:5px;"></span><span class="mdi mdi-menu-down mdi-24px"></span></div>';
-//
+    instances_html += '</a><ul id="hyp_inst_listing" class="dropdown-menu dropdown-alerts" style="cursor:pointer;"></ul>'
-// 			var title = d[i].title.rendered;
+    instances_html += '</div></div>';
-// 			var excerpt = d[i].excerpt.rendered;
-// 			var link = d[i].link+'?pk_campaign=WebUI&pk_kwd=news_'+d[i].slug;
-//
-// 			newsCont(title,excerpt,link);
-// 		}
-// 	}
-
-// 	function getNews()
-// 	{
-// 		var h = '<span style="color:red;font-weight:bold">'+$.i18n('dashboard_newsbox_noconn')+'</span>';
-// 		$.ajax({
-// 			url: 'https://hyperion-project.org/wp-json/wp/v2/posts?_embed',
-// 			dataType: 'json',
-// 			type: 'GET',
-// 			timeout: 2000
-// 		})
-// 		.done( function( data, textStatus, jqXHR ) {
-// 			if(jqXHR.status == 200)
-// 				createNews(data);
-// 			else
-// 				$('#dash_news').html(h);
-// 		})
-// 		.fail( function( jqXHR, textStatus ) {
-// 				$('#dash_news').html(h);
-// 		});
-// 	}
-
-//	getNews();
-
-	function updateComponents()
-	{
-		var components = window.comps;
-		var components_html = "";
-		for (var idx=0; idx<components.length;idx++)
-		{
-			if(components[idx].name != "ALL")
-				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
-		var hyperion_enabled = true;
-
-		components.forEach( function(obj) {
-			if (obj.name == "ALL")
-			{
-				hyperion_enabled = obj.enabled
-			}
-		});
-
-		var instancename = window.currentHyperionInstanceName;
-
-		$('#dash_statush').html(hyperion_enabled ? '<span style="color:green">'+$.i18n('general_btn_on')+'</span>' : '<span style="color:red">'+$.i18n('general_btn_off')+'</span>');
-		$('#btn_hsc').html(hyperion_enabled ? '<button class="btn btn-sm btn-danger" onClick="requestSetComponentState(\'ALL\',false)">'+$.i18n('dashboard_infobox_label_disableh', instancename)+'</button>' : '<button class="btn btn-sm btn-success" onClick="requestSetComponentState(\'ALL\',true)">'+$.i18n('dashboard_infobox_label_enableh', instancename)+'</button>');
-	}
-
-	// add more info
-	$('#dash_leddevice').html(window.serverConfig.device.type);
-	$('#dash_currv').html(window.currentVersion);
-	$('#dash_instance').html(window.currentHyperionInstanceName);
-	$('#dash_ports').html(window.serverConfig.flatbufServer.port+' | '+window.serverConfig.protoServer.port);
-	$('#dash_watchedversionbranch').html(window.serverConfig.general.watchedVersionBranch);
-
-	getReleases(function(callback){
-		if(callback)
-		{
-			$('#dash_latev').html(window.latestVersion.tag_name);
-
-			if (semverLite.gt(window.latestVersion.tag_name, window.currentVersion))
-				$('#versioninforesult').html('<div class="bs-callout bs-callout-warning" style="margin:0px"><a target="_blank" href="' + window.latestVersion.html_url + '">'+$.i18n('dashboard_infobox_message_updatewarning', window.latestVersion.tag_name) + '</a></div>');
-			else
-				$('#versioninforesult').html('<div class="bs-callout bs-callout-success" style="margin:0px">'+$.i18n('dashboard_infobox_message_updatesuccess')+'</div>');
-
-			}
-	});
 
 
+    instances_html += '<div class="panel-body">';
+    instances_html += '<table class="table borderless">';
+    instances_html += '<thead><tr><th style="vertical-align:middle"><i class="mdi mdi-lightbulb-on fa-fw"></i>';
+    instances_html += '<span>' + $.i18n('dashboard_componentbox_label_status') + '</span></th>';
 
-	//determine platform
+    var components = window.comps;
-	var grabbers = window.serverInfo.grabbers.available;
+    var hyperion_enabled = true;
-	var html = "";
+    components.forEach(function (obj) {
+      if (obj.name == "ALL") {
+        hyperion_enabled = obj.enabled;
+      }
+    });
 
-	if(grabbers.indexOf('dispmanx') > -1)
+    var instBtn = '<span style="display:block; margin:3px"><input id="instanceButton"'
-		html += 'Raspberry Pi';
+      + (hyperion_enabled ? "checked" : "") + ' type="checkbox" data-toggle="toggle" data-size="small" data-onstyle="success" data-on="'
-	else if(grabbers.indexOf('x11') > -1 || grabbers.indexOf('xcb') > -1)
+      + $.i18n('general_btn_on') + '" data-off="'
-		html += 'X86';
+      + $.i18n('general_btn_off') + '"></span>';
-	else if(grabbers.indexOf('osx')  > -1)
-		html += 'OSX';
-	else if(grabbers.indexOf('amlogic')  > -1)
-		html += 'Amlogic';
-	else
-		html += 'Framebuffer';
 
-	$('#dash_platform').html(html);
+    instances_html += '<th style="width:1px;text-align:right">' + instBtn + '</th></tr></thead></table>';
 
+    instances_html += '<table class="table borderless">';
+    instances_html += '<thead><tr><th colspan="3">';
+    instances_html += '<i class="fa fa-info-circle fa-fw"></i>';
+    instances_html += '<span>' + $.i18n('dashboard_infobox_label_title') + '</span>';
+    instances_html += '</th></tr></thead>';
+    instances_html += '<tbody><tr><td></td>';
+    instances_html += '<td>' + $.i18n('conf_leds_contr_label_contrtype') + '</td>';
+    instances_html += '<td style="text-align:right">' + window.serverConfig.device.type + '</td>';
+    instances_html += '</tr><tr></tbody></table>';
 
-	//interval update
+    instances_html += '<table class="table first_cell_borderless">';
-	updateComponents();
+    instances_html += '<thead><tr><th colspan="3">';
-	$(window.hyperion).on("components-updated",updateComponents);
+    instances_html += '<i class="fa fa-eye fa-fw"></i>';
+    instances_html += '<span>' + $.i18n('dashboard_componentbox_label_title') + '</span>';
+    instances_html += '</th></tr></thead>';
 
-	if(window.showOptHelp)
+    var tab_components = "";
-		createHintH("intro", $.i18n('dashboard_label_intro'), "dash_intro");
+    for (var idx = 0; idx < components.length; idx++) {
+      if (components[idx].name != "ALL") {
+        var comp_enabled = components[idx].enabled ? "checked" : "";
+        const general_comp = "general_comp_" + components[idx].name;
+        var componentBtn = '<input ' +
+          'id="' + general_comp + '" ' + comp_enabled +
+          ' type="checkbox" ' +
+          'data-toggle="toggle" ' +
+          'data-size="mini" ' +
+          'data-onstyle="success" ' +
+          'data-on="' + $.i18n('general_btn_on') + '" ' +
+          'data-off="' + $.i18n('general_btn_off') + '">';
 
-	removeOverlay();
+        tab_components += '<tr><td></td><td>' + $.i18n('general_comp_' + components[idx].name) + '</td><td style="text-align:right">' + componentBtn + '</td></tr>';
+      }
+    }
+
+    instances_html += '<tbody>' + tab_components + '</tbody></table>';
+    instances_html += '</div></div></div>';
+
+    $('.instances').prepend(instances_html);
+    updateUiOnInstance(window.currentHyperionInstance);
+    updateHyperionInstanceListing();
+
+    $('#instanceButton').bootstrapToggle();
+    $('#instanceButton').change(e => {
+      requestSetComponentState('ALL', e.currentTarget.checked);
+    });
+
+    for (var idx = 0; idx < components.length; idx++) {
+      if (components[idx].name != "ALL") {
+        $("#general_comp_" + components[idx].name).bootstrapToggle();
+        $("#general_comp_" + components[idx].name).bootstrapToggle(hyperion_enabled ? "enable" : "disable")
+        $("#general_comp_" + components[idx].name).change(e => {
+          requestSetComponentState(e.currentTarget.id.split('_')[2], e.currentTarget.checked);
+        });
+      }
+    }
+  }
+
+  // add more info
+  var fbPort = window.serverConfig.flatbufServer.enable ? window.serverConfig.flatbufServer.port : $.i18n('general_disabled');
+  $('#dash_fbPort').html(fbPort);
+  var pbPort = window.serverConfig.protoServer.enable ? window.serverConfig.protoServer.port : $.i18n('general_disabled');
+  $('#dash_pbPort').html(pbPort);
+
+  var jsonPort = window.serverConfig.jsonServer.port;
+  $('#dash_jsonPort').html(jsonPort);
+  var wsPorts = window.serverConfig.webConfig.port + ' | ' + window.serverConfig.webConfig.sslPort
+  $('#dash_wsPorts').html(wsPorts);
+
+  $('#dash_currv').html(window.currentVersion);
+  $('#dash_watchedversionbranch').html(window.serverConfig.general.watchedVersionBranch);
+
+  getReleases(function (callback) {
+    if (callback) {
+      $('#dash_latev').html(window.latestVersion.tag_name);
+
+      if (semverLite.gt(window.latestVersion.tag_name, window.currentVersion))
+        $('#versioninforesult').html('<div class="bs-callout bs-callout-warning" style="margin:0px"><a target="_blank" href="' + window.latestVersion.html_url + '">' + $.i18n('dashboard_infobox_message_updatewarning', window.latestVersion.tag_name) + '</a></div>');
+      else
+        $('#versioninforesult').html('<div class="bs-callout bs-callout-info" style="margin:0px">' + $.i18n('dashboard_infobox_message_updatesuccess') + '</div>');
+    }
+  });
+
+  //interval update
+  updateComponents();
+  $(window.hyperion).on("components-updated", updateComponents);
+
+  if (window.showOptHelp)
+    createHintH("intro", $.i18n('dashboard_label_intro'), "dash_intro");
+
+  removeOverlay();
 });

assets/webconfig/js/content_effects.js

@@ -1,5 +1,9 @@
 $(document).ready( function() {
 	performTranslation();
+
+	// update instance listing
+	updateHyperionInstanceListing();
+
 	var oldEffects = [];
 	var effects_editor = null;
 	var confFgEff = window.serverConfig.foregroundEffect.effect;
@@ -12,12 +16,12 @@ $(document).ready( function() {
 		//foreground effect
 		$('#conf_cont').append(createRow('conf_cont_fge'));
 		$('#conf_cont_fge').append(createOptPanel('fa-spinner', $.i18n("edt_conf_fge_heading_title"), 'editor_container_foregroundEffect', 'btn_submit_foregroundEffect'));
-		$('#conf_cont_fge').append(createHelpTable(window.schema.foregroundEffect.properties, $.i18n("edt_conf_fge_heading_title")));
+    $('#conf_cont_fge').append(createHelpTable(window.schema.foregroundEffect.properties, $.i18n("edt_conf_fge_heading_title"), "foregroundEffectHelpPanelId"));
 
 		//background effect
 		$('#conf_cont').append(createRow('conf_cont_bge'));
 		$('#conf_cont_bge').append(createOptPanel('fa-spinner', $.i18n("edt_conf_bge_heading_title"), 'editor_container_backgroundEffect', 'btn_submit_backgroundEffect'));
-		$('#conf_cont_bge').append(createHelpTable(window.schema.backgroundEffect.properties, $.i18n("edt_conf_bge_heading_title")));
+    $('#conf_cont_bge').append(createHelpTable(window.schema.backgroundEffect.properties, $.i18n("edt_conf_bge_heading_title"), "backgroundEffectHelpPanelId"));
 
 		//effect path
 		if(storedAccess != 'default')
@@ -64,11 +68,31 @@ $(document).ready( function() {
 		updateEffectlist();
 	});
 
-	foregroundEffect_editor.on('change',function() {
+  foregroundEffect_editor.on('change', function () {
+    var foregroundEffectEnable = foregroundEffect_editor.getEditor("root.foregroundEffect.enable").getValue();
+    if (foregroundEffectEnable) {
+      showInputOptionsForKey(foregroundEffect_editor, "foregroundEffect", "enable", true);
+      $('#foregroundEffectHelpPanelId').show();
+
+    } else {
+      showInputOptionsForKey(foregroundEffect_editor, "foregroundEffect", "enable", false);
+      $('#foregroundEffectHelpPanelId').hide();
+    }
+
 		foregroundEffect_editor.validate().length || window.readOnlyMode ? $('#btn_submit_foregroundEffect').attr('disabled', true) : $('#btn_submit_foregroundEffect').attr('disabled', false);
 	});
 
-	backgroundEffect_editor.on('change',function() {
+  backgroundEffect_editor.on('change', function () {
+    var backgroundEffectEnable = backgroundEffect_editor.getEditor("root.backgroundEffect.enable").getValue();
+    if (backgroundEffectEnable) {
+      showInputOptionsForKey(backgroundEffect_editor, "backgroundEffect", "enable", true);
+      $('#backgroundEffectHelpPanelId').show();
+
+    } else {
+      showInputOptionsForKey(backgroundEffect_editor, "backgroundEffect", "enable", false);
+      $('#backgroundEffectHelpPanelId').hide();
+    }
+
 		backgroundEffect_editor.validate().length || window.readOnlyMode ? $('#btn_submit_backgroundEffect').attr('disabled', true) : $('#btn_submit_backgroundEffect').attr('disabled', false);
 	});
 

assets/webconfig/js/content_effectsconfigurator.js

@@ -1,5 +1,9 @@
 $(document).ready(function () {
   performTranslation();
+
+	// update instance listing
+	updateHyperionInstanceListing();
+
   var oldDelList = [];
   var effectName = "";
   var imageData = "";
@@ -92,7 +96,7 @@ $(document).ready(function () {
 
         var desc = $.i18n(effects[idx].schemaContent.title + '_desc');
         if (desc === effects[idx].schemaContent.title + '_desc') {
-          desc = ""
+          desc = "";
         }
 
         $("#eff_desc").html(createEffHint($.i18n(effects[idx].schemaContent.title), desc));

assets/webconfig/js/content_general.js

@@ -5,7 +5,7 @@ $(document).ready( function() {
 	var confName;
 	var conf_editor = null;
 
-	$('#conf_cont').append(createOptPanel('fa-wrench', $.i18n("edt_conf_gen_heading_title"), 'editor_container', 'btn_submit'));
+	$('#conf_cont').append(createOptPanel('fa-wrench', $.i18n("edt_conf_gen_heading_title"), 'editor_container', 'btn_submit', 'panel-system'));
 	if(window.showOptHelp)
 	{
 		$('#conf_cont').append(createHelpTable(window.schema.general.properties, $.i18n("edt_conf_gen_heading_title")));
@@ -28,12 +28,12 @@ $(document).ready( function() {
 	// Instance handling
 	function handleInstanceRename(e)
 	{
-	
+
 		conf_editor.on('change',function() {
 		window.readOnlyMode ? $('#btn_cl_save').attr('disabled', true) : $('#btn_submit').attr('disabled', false);
 		window.readOnlyMode ? $('#btn_ma_save').attr('disabled', true) : $('#btn_submit').attr('disabled', false);
 		});
-		
+
 		var inst = e.currentTarget.id.split("_")[1];
 		showInfoDialog('renInst', $.i18n('conf_general_inst_renreq_t'), getInstanceNameByIndex(inst));
 
@@ -46,13 +46,6 @@ $(document).ready( function() {
 		});
 	}
 
-	function handleInstanceStartStop(e)
-	{
-		var inst = e.currentTarget.id.split("_")[1];
-		var start = (e.currentTarget.className == "btn btn-danger")
-		requestInstanceStartStop(inst, start)
-	}
-
 	function handleInstanceDelete(e)
 	{
 		var inst = e.currentTarget.id.split("_")[1];
@@ -68,22 +61,25 @@ $(document).ready( function() {
 		$('.itbody').html("");
 		for(var key in inst)
 		{
-			var startBtnColor = inst[key].running ? "success" : "danger";
+			var enable_style = inst[key].running ? "checked" : "";
-			var startBtnIcon = inst[key].running ? "stop" : "play";
+			var renameBtn = '<button id="instren_'+inst[key].instance+'" type="button" class="btn btn-primary"><i class="mdi mdi-lead-pencil""></i></button>';
-			var startBtnText = inst[key].running ? $.i18n('general_btn_stop') : $.i18n('general_btn_start');
-			var renameBtn = '<button id="instren_'+inst[key].instance+'" type="button" class="btn btn-primary"><i class="fa fa-fw fa-pencil"></i>'+$.i18n('general_btn_rename')+'</button>';
 			var startBtn = ""
 			var delBtn = "";
 			if(inst[key].instance > 0)
 			{
-				delBtn = '<button id="instdel_'+inst[key].instance+'" type="button" class="btn btn-warning"><i class="fa fa-fw fa-remove"></i>'+$.i18n('general_btn_delete')+'</button>';
+				delBtn = '<button id="instdel_'+inst[key].instance+'" type="button" class="btn btn-danger"><i class="mdi mdi-delete-forever""></i></button>';
-				startBtn = '<button id="inst_'+inst[key].instance+'" type="button" class="btn btn-'+startBtnColor+'"><i class="fa fa-fw fa-'+startBtnIcon+'"></i>'+startBtnText+'</button>';
+				startBtn = '<input id="inst_'+inst[key].instance+'"'+enable_style+' type="checkbox" data-toggle="toggle" data-onstyle="success font-weight-bold" data-on="'+$.i18n('general_btn_on')+'" data-offstyle="default font-weight-bold" data-off="'+$.i18n('general_btn_off')+'">';
+
 			}
-			$('.itbody').append(createTableRow([inst[key].friendly_name, renameBtn, startBtn, delBtn], false, true));
+			$('.itbody').append(createTableRow([inst[key].friendly_name, startBtn, renameBtn, delBtn], false, true));
 			$('#instren_'+inst[key].instance).off().on('click', handleInstanceRename);
-			$('#inst_'+inst[key].instance).off().on('click', handleInstanceStartStop);
+
+			$('#inst_'+inst[key].instance).bootstrapToggle();
+			$('#inst_'+inst[key].instance).change(e => {
+				requestInstanceStartStop(e.currentTarget.id.split('_').pop(), e.currentTarget.checked);
+			});
 			$('#instdel_'+inst[key].instance).off().on('click', handleInstanceDelete);
-			
+
 			window.readOnlyMode ? $('#instren_'+inst[key].instance).attr('disabled', true) : $('#btn_submit').attr('disabled', false);
 			window.readOnlyMode ? $('#inst_'+inst[key].instance).attr('disabled', true) : $('#btn_submit').attr('disabled', false);
 			window.readOnlyMode ? $('#instdel_'+inst[key].instance).attr('disabled', true) : $('#btn_submit').attr('disabled', false);

assets/webconfig/js/content_index.js

@@ -306,6 +306,13 @@ $(document).ready(function () {
     loadContent(e);
     window.scrollTo(0, 0);
   });
+
+  $(window).scroll(function(){
+    if ($(window).scrollTop() > 65)
+      $("#navbar_brand_logo").css("display", "none");
+    else
+      $("#navbar_brand_logo").css("display", "");
+    });
 });
 
 function suppressDefaultPwWarning() {

assets/webconfig/js/content_leds.js

@@ -5,6 +5,9 @@ var finalLedArray = [];
 var conf_editor = null;
 var blacklist_editor = null;
 var aceEdt = null;
+var imageCanvasNodeCtx;
+var canvas_height;
+var canvas_width;
 
 var devRPiSPI = ['apa102', 'apa104', 'ws2801', 'lpd6803', 'lpd8806', 'p9813', 'sk6812spi', 'sk6822spi', 'sk9822', 'ws2812spi'];
 var devRPiPWM = ['ws281x'];
@@ -39,8 +42,11 @@ function createLedPreview(leds, origin) {
 
   $('.st_helper').css("border", "8px solid grey");
 
-  var canvas_height = $('#leds_preview').innerHeight();
+  canvas_height = $('#leds_preview').innerHeight();
-  var canvas_width = $('#leds_preview').innerWidth();
+  canvas_width = $('#leds_preview').innerWidth();
+
+  imageCanvasNodeCtx = document.getElementById("image_preview").getContext("2d");
+  $('#image_preview').css({"width":canvas_width, "height":canvas_height});
 
   var leds_html = "";
   for (var idx = 0; idx < leds.length; idx++) {
@@ -415,6 +421,9 @@ $(document).ready(function () {
   // translate
   performTranslation();
 
+	// update instance listing
+	updateHyperionInstanceListing();
+
   //add intros
   if (window.showOptHelp) {
     createHintH("intro", $.i18n('conf_leds_device_intro'), "leddevice_intro");
@@ -552,6 +561,31 @@ $(document).ready(function () {
     toggleClass('#leds_prev_toggle_num', "btn-danger", "btn-success");
   });
 
+	// toggle live video
+	$('#leds_prev_toggle_live_video').off().on("click", function() {
+		setClassByBool('#leds_prev_toggle_live_video', window.imageStreamActive, "btn-success", "btn-danger");
+		if (window.imageStreamActive)
+		{
+			requestLedImageStop();
+      imageCanvasNodeCtx.clear();
+		}
+		else
+		{
+			requestLedImageStart();
+		}
+	});
+
+	$(window.hyperion).on("cmd-ledcolors-imagestream-update",function(event){
+    setClassByBool('#leds_prev_toggle_live_video', window.imageStreamActive, "btn-danger", "btn-success");
+    var imageData = (event.response.result.image);
+
+    var image = new Image();
+    image.onload = function() {
+      imageCanvasNodeCtx.drawImage(image, 0, 0, imageCanvasNodeCtx.canvas.width, imageCanvasNodeCtx.canvas.height);
+    };
+    image.src = imageData;
+	});
+
   // open checklist
   $('#leds_prev_checklist').off().on("click", function () {
     var liList = [$.i18n('conf_leds_layout_checkp1'), $.i18n('conf_leds_layout_checkp3'), $.i18n('conf_leds_layout_checkp2'), $.i18n('conf_leds_layout_checkp4')];
@@ -725,11 +759,11 @@ $(document).ready(function () {
       }
 
       if (ledType !== window.serverConfig.device.type) {
-        var hwLedCount = conf_editor.getEditor("root.generalOptions.hardwareLedCount")
+        var hwLedCount = conf_editor.getEditor("root.generalOptions.hardwareLedCount");
         if (hwLedCount) {
           hwLedCount.setValue(hwLedCountDefault);
         }
-        var colorOrder = conf_editor.getEditor("root.generalOptions.colorOrder")
+        var colorOrder = conf_editor.getEditor("root.generalOptions.colorOrder");
         if (colorOrder) {
           colorOrder.setValue(colorOrderDefault);
         }
@@ -830,7 +864,7 @@ $(document).ready(function () {
       //Disable General Options, as LED count will be resolved from device itself
       conf_editor.getEditor("root.generalOptions").disable();
 
-      var hostList = conf_editor.getEditor("root.specificOptions.hostList")
+      var hostList = conf_editor.getEditor("root.specificOptions.hostList");
       if (hostList) {
         var val = hostList.getValue();
         var showOptions = true;
@@ -875,7 +909,7 @@ $(document).ready(function () {
           case "nanoleaf":
             var token = conf_editor.getEditor("root.specificOptions.token").getValue();
             if (token === "") {
-              return
+              return;
             }
             params = { host: host, token: token };
             break;
@@ -1400,7 +1434,7 @@ var updateSelectList = function (ledType, discoveryInfo) {
   if (enumVals.length > 0) {
     updateJsonEditorSelection(specOpt, key, addSchemaElements, enumVals, enumTitelVals, enumDefaultVal, addSelect, addCustom);
   }
-}
+};
 
 async function discover_device(ledType, params) {
   const result = await requestLedDeviceDiscovery(ledType, params);
@@ -1519,27 +1553,6 @@ function updateElements(ledType, key) {
   }
 }
 
-function showInputOptions(path, elements, state) {
-  for (var i = 0; i < elements.length; i++) {
-    $('[data-schemapath="' + path + '.' + elements[i] + '"]').toggle(state);
-  }
-}
-
-function showInputOptionsForKey(editor, item, showForKey, state) {
-  var elements = [];
-  for (var key in editor.schema.properties[item].properties) {
-    if (showForKey !== key) {
-      var accessLevel = editor.schema.properties[item].properties[key].access;
-
-      //Only enable elements, if access level compliant
-      if (state && isAccessLevelCompliant(accessLevel)) {
-        elements.push(key);
-      }
-    }
-    showInputOptions("root." + item, elements, state);
-  }
-}
-
 function showAllDeviceInputOptions(showForKey, state) {
   showInputOptionsForKey(conf_editor, "generalOptions", showForKey, state);
   showInputOptionsForKey(conf_editor, "specificOptions", showForKey, state);

assets/webconfig/js/content_logging.js

@@ -153,16 +153,13 @@ $(document).ready(function () {
 
     $(window.hyperion).on("cmd-logging-update", function (event) {
 
-      messages = (event.response.result.messages);
+     var messages = (event.response.result.messages);
 
       if (messages.length != 0) {
         if (!createdCont) {
           createLogContainer();
           createdCont = true;
         }
-
-        var currentlogLevel = window.serverConfig.logger.level;
-
         updateLogOutput(messages)
       }
     });
@@ -177,13 +174,8 @@ $(document).ready(function () {
       });
 
       var currentlogLevel = window.serverConfig.logger.level;
-      var displayedLogLevel = conf_editor.getEditor("root.logger.level").getValue();
+      conf_editor.getEditor("root.logger.level").setValue(currentlogLevel);
-
+      location.reload();
-      //if ( currentlogLevel !== displayedLogLevel )
-      {
-        conf_editor.getEditor("root.logger.level").setValue(currentlogLevel);
-        location.reload();
-      }
     }
 
   });

assets/webconfig/js/content_network.js

@@ -12,35 +12,35 @@ $(document).ready( function() {
 	{
 		//network
 		$('#conf_cont').append(createRow('conf_cont_net'))
-		$('#conf_cont_net').append(createOptPanel('fa-sitemap', $.i18n("edt_conf_net_heading_title"), 'editor_container_net', 'btn_submit_net'));
+		$('#conf_cont_net').append(createOptPanel('fa-sitemap', $.i18n("edt_conf_net_heading_title"), 'editor_container_net', 'btn_submit_net', 'panel-system'));
 		$('#conf_cont_net').append(createHelpTable(window.schema.network.properties, $.i18n("edt_conf_net_heading_title")));
 
 		//jsonserver
 		$('#conf_cont').append(createRow('conf_cont_json'))
-		$('#conf_cont_json').append(createOptPanel('fa-sitemap', $.i18n("edt_conf_js_heading_title"), 'editor_container_jsonserver', 'btn_submit_jsonserver'));
+		$('#conf_cont_json').append(createOptPanel('fa-sitemap', $.i18n("edt_conf_js_heading_title"), 'editor_container_jsonserver', 'btn_submit_jsonserver', 'panel-system'));
 		$('#conf_cont_json').append(createHelpTable(window.schema.jsonServer.properties, $.i18n("edt_conf_js_heading_title")));
 
 		//flatbufserver
 		$('#conf_cont').append(createRow('conf_cont_flatbuf'))
-		$('#conf_cont_flatbuf').append(createOptPanel('fa-sitemap', $.i18n("edt_conf_fbs_heading_title"), 'editor_container_fbserver', 'btn_submit_fbserver'));
+		$('#conf_cont_flatbuf').append(createOptPanel('fa-sitemap', $.i18n("edt_conf_fbs_heading_title"), 'editor_container_fbserver', 'btn_submit_fbserver', 'panel-system'));
-		$('#conf_cont_flatbuf').append(createHelpTable(window.schema.flatbufServer.properties, $.i18n("edt_conf_fbs_heading_title")));
+    $('#conf_cont_flatbuf').append(createHelpTable(window.schema.flatbufServer.properties, $.i18n("edt_conf_fbs_heading_title"),"flatbufServerHelpPanelId"));
 
 		//protoserver
 		$('#conf_cont').append(createRow('conf_cont_proto'))
-		$('#conf_cont_proto').append(createOptPanel('fa-sitemap', $.i18n("edt_conf_pbs_heading_title"), 'editor_container_protoserver', 'btn_submit_protoserver'));
+		$('#conf_cont_proto').append(createOptPanel('fa-sitemap', $.i18n("edt_conf_pbs_heading_title"), 'editor_container_protoserver', 'btn_submit_protoserver', 'panel-system'));
-		$('#conf_cont_proto').append(createHelpTable(window.schema.protoServer.properties, $.i18n("edt_conf_pbs_heading_title")));
+    $('#conf_cont_proto').append(createHelpTable(window.schema.protoServer.properties, $.i18n("edt_conf_pbs_heading_title"),"protoServerHelpPanelId"));
 
 		//boblight
 		$('#conf_cont').append(createRow('conf_cont_bobl'))
-		$('#conf_cont_bobl').append(createOptPanel('fa-sitemap', $.i18n("edt_conf_bobls_heading_title"), 'editor_container_boblightserver', 'btn_submit_boblightserver'));
+		$('#conf_cont_bobl').append(createOptPanel('fa-sitemap', $.i18n("edt_conf_bobls_heading_title"), 'editor_container_boblightserver', 'btn_submit_boblightserver', 'panel-system'));
-		$('#conf_cont_bobl').append(createHelpTable(window.schema.boblightServer.properties, $.i18n("edt_conf_bobls_heading_title")));
+    $('#conf_cont_bobl').append(createHelpTable(window.schema.boblightServer.properties, $.i18n("edt_conf_bobls_heading_title"), "boblightServerHelpPanelId"));
 
 		//forwarder
 		if(storedAccess != 'default')
 		{
 			$('#conf_cont').append(createRow('conf_cont_fw'))
-			$('#conf_cont_fw').append(createOptPanel('fa-sitemap', $.i18n("edt_conf_fw_heading_title"), 'editor_container_forwarder', 'btn_submit_forwarder'));
+			$('#conf_cont_fw').append(createOptPanel('fa-sitemap', $.i18n("edt_conf_fw_heading_title"), 'editor_container_forwarder', 'btn_submit_forwarder', 'panel-system'));
-			$('#conf_cont_fw').append(createHelpTable(window.schema.forwarder.properties, $.i18n("edt_conf_fw_heading_title")));
+      $('#conf_cont_fw').append(createHelpTable(window.schema.forwarder.properties, $.i18n("edt_conf_fw_heading_title"),"forwarderHelpPanelId"));
 		}
 	}
 	else
@@ -87,7 +87,15 @@ $(document).ready( function() {
 		flatbufServer        : window.schema.flatbufServer
 	}, true, true);
 
-	conf_editor_fbs.on('change',function() {
+  conf_editor_fbs.on('change', function () {
+    var flatbufServerEnable = conf_editor_fbs.getEditor("root.flatbufServer.enable").getValue();
+    if (flatbufServerEnable) {
+      showInputOptionsForKey(conf_editor_fbs, "flatbufServer", "enable", true);
+      $('#flatbufServerHelpPanelId').show();
+    } else {
+      showInputOptionsForKey(conf_editor_fbs, "flatbufServer", "enable", false);
+      $('#flatbufServerHelpPanelId').hide();
+    }
 		conf_editor_fbs.validate().length || window.readOnlyMode ? $('#btn_submit_fbserver').attr('disabled', true) : $('#btn_submit_fbserver').attr('disabled', false);
 	});
 
@@ -100,7 +108,15 @@ $(document).ready( function() {
 		protoServer        : window.schema.protoServer
 	}, true, true);
 
-	conf_editor_proto.on('change',function() {
+  conf_editor_proto.on('change', function () {
+    var protoServerEnable = conf_editor_proto.getEditor("root.protoServer.enable").getValue();
+    if (protoServerEnable) {
+      showInputOptionsForKey(conf_editor_proto, "protoServer", "enable", true);
+      $('#protoServerHelpPanelId').show();
+    } else {
+      showInputOptionsForKey(conf_editor_proto, "protoServer", "enable", false);
+      $('#protoServerHelpPanelId').hide();
+    }
 		conf_editor_proto.validate().length || window.readOnlyMode ? $('#btn_submit_protoserver').attr('disabled', true) : $('#btn_submit_protoserver').attr('disabled', false);
 	});
 
@@ -113,11 +129,19 @@ $(document).ready( function() {
 		boblightServer     : window.schema.boblightServer
 	}, true, true);
 
-	conf_editor_bobl.on('change',function() {
+  conf_editor_bobl.on('change', function () {
+    var boblightServerEnable = conf_editor_bobl.getEditor("root.boblightServer.enable").getValue();
+    if (boblightServerEnable) {
+      showInputOptionsForKey(conf_editor_bobl, "boblightServer", "enable", true);
+      $('#boblightServerHelpPanelId').show();
+    } else {
+      showInputOptionsForKey(conf_editor_bobl, "boblightServer", "enable", false);
+      $('#boblightServerHelpPanelId').hide();
+    }
 		conf_editor_bobl.validate().length || window.readOnlyMode ? $('#btn_submit_boblightserver').attr('disabled', true) : $('#btn_submit_boblightserver').attr('disabled', false);
 	});
 
-	$('#btn_submit_boblightserver').off().on('click',function() {
+  $('#btn_submit_boblightserver').off().on('click', function () {
 		requestWriteConfig(conf_editor_bobl.getValue());
 	});
 
@@ -128,7 +152,15 @@ $(document).ready( function() {
 			forwarder          : window.schema.forwarder
 		}, true, true);
 
-		conf_editor_forw.on('change',function() {
+    conf_editor_forw.on('change', function () {
+      var forwarderEnable = conf_editor_forw.getEditor("root.forwarder.enable").getValue();
+      if (forwarderEnable) {
+        showInputOptionsForKey(conf_editor_forw, "forwarder", "enable", true);
+        $('#forwarderHelpPanelId').show();
+      } else {
+        showInputOptionsForKey(conf_editor_forw, "forwarder", "enable", false);
+        $('#forwarderHelpPanelId').hide();
+      }
 			conf_editor_forw.validate().length || window.readOnlyMode ? $('#btn_submit_forwarder').attr('disabled', true) : $('#btn_submit_forwarder').attr('disabled', false);
 		});
 
@@ -213,6 +245,6 @@ $(document).ready( function() {
 	})
 
 	checkApiTokenState(window.serverConfig.network.apiAuth);
-	
+
 	removeOverlay();
 });

assets/webconfig/js/content_remote.js

@@ -1,6 +1,9 @@
 $(document).ready(function () {
   performTranslation();
 
+  // update instance listing
+  updateHyperionInstanceListing();
+
   var oldEffects = [];
   var cpcolor = '#B500FF';
   var mappingList = window.serverSchema.properties.color.properties.imageToLedMappingType.enum;

assets/webconfig/js/content_webconfig.js

@@ -3,7 +3,7 @@
 
 	var conf_editor = null;
 
-	$('#conf_cont').append(createOptPanel('fa-wrench', $.i18n("edt_conf_webc_heading_title"), 'editor_container', 'btn_submit'));
+	$('#conf_cont').append(createOptPanel('fa-wrench', $.i18n("edt_conf_webc_heading_title"), 'editor_container', 'btn_submit', 'panel-system'));
 	if(window.showOptHelp)
 	{
 		$('#conf_cont').append(createHelpTable(window.schema.webConfig.properties, $.i18n("edt_conf_webc_heading_title")));

assets/webconfig/js/hyperion.js

@@ -82,7 +82,7 @@ function initWebSocket()
 			else if (document.location.port == '' && document.location.protocol == "https:")
 				window.jsonPort = '443';
 			else
-				window.jsonPort = document.location.port;	
+				window.jsonPort = document.location.port;
 			window.websocket = (document.location.protocol == "https:") ? new WebSocket('wss://'+document.location.hostname+":"+window.jsonPort) : new WebSocket('ws://'+document.location.hostname+":"+window.jsonPort);
 
 			window.websocket.onopen = function (event) {

assets/webconfig/js/ui_utils.js

@@ -190,19 +190,15 @@ function initLanguageSelection() {
 }
 
 function updateUiOnInstance(inst) {
-  if (inst != 0) {
+  $("#active_instance_friendly_name").text(window.serverInfo.instance[inst].friendly_name);
-    var currentURL = $(location).attr("href");
+  if (window.serverInfo.instance.filter(entry => entry.running).length > 1) {
-    if (currentURL.indexOf('#conf_network') != -1 || currentURL.indexOf('#update') != -1 || currentURL.indexOf('#conf_webconfig') != -1 || currentURL.indexOf('#conf_grabber') != -1 || currentURL.indexOf('#conf_logging') != -1)
+    $('#btn_hypinstanceswitch').toggle(true);
-      $("#hyperion_global_setting_notify").fadeIn("fast");
+    $('#active_instance_dropdown').prop('disabled', false);
-    else
+    $('#active_instance_dropdown').css('cursor', 'pointer');
-      $("#hyperion_global_setting_notify").attr("style", "display:none");
+  } else {
-
+    $('#btn_hypinstanceswitch').toggle(false);
-    $("#dashboard_active_instance_friendly_name").html($.i18n('dashboard_active_instance') + ': ' + window.serverInfo.instance[inst].friendly_name);
+    $('#active_instance_dropdown').prop('disabled', true);
-    $("#dashboard_active_instance").removeAttr("style");
+    $("#active_instance_dropdown").css('cursor', 'default');
-  }
-  else {
-    $("#hyperion_global_setting_notify").fadeOut("fast");
-    $("#dashboard_active_instance").attr("style", "display:none");
   }
 }
 
@@ -260,17 +256,17 @@ function showInfoDialog(type, header, message) {
     $('#id_footer').html('<button type="button" class="btn btn-danger" data-dismiss="modal">' + $.i18n('general_btn_ok') + '</button>');
   }
   else if (type == "select") {
-    $('#id_body').html('<img style="margin-bottom:20px" src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!">');
+    $('#id_body').html('<img style="margin-bottom:20px" id="id_logo" src="img/hyperion/logo_positiv.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-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_body').html('<img style="margin-bottom:20px" id="id_logo" src="img/hyperion/logo_positiv.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_body').html('<img id="id_logo" src="img/hyperion/logo_positiv.png" alt="Redefine ambient light!">');
     $('#id_footer').html('<b>' + $.i18n('InfoDialog_nowrite_foottext') + '</b>');
   }
   else if (type == "import") {
@@ -294,22 +290,22 @@ function showInfoDialog(type, header, message) {
     $('#id_body_rename').html('<i style="margin-bottom:20px" class="fa fa-key modal-icon-edit"><br>');
     $('#id_body_rename').append('<h4>' + header + '</h4>');
     $('#id_body_rename').append('<input class="form-control" id="oldPw" placeholder="Old" type="text"> <br />');
-    $('#id_body_rename').append('<input class="form-control" id="newPw" placeholder="New" type="text">');
+    $('#id_body_rename').append('<input class="form-control" id="newPw" placeholder="New" type="password">');
     $('#id_footer_rename').html('<button type="button" id="id_btn_ok" class="btn btn-success" data-dismiss-modal="#modal_dialog_rename" disabled><i class="fa fa-fw fa-save"></i>' + $.i18n('general_btn_ok') + '</button>');
     $('#id_footer_rename').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 == "checklist") {
-    $('#id_body').html('<img style="margin-bottom:20px" src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!">');
+    $('#id_body').html('<img style="margin-bottom:20px" id="id_logo" src="img/hyperion/logo_positiv.png" alt="Redefine ambient light!">');
     $('#id_body').append('<h4 style="font-weight:bold;text-transform:uppercase;">' + $.i18n('infoDialog_checklist_title') + '</h4>');
     $('#id_body').append(header);
     $('#id_footer').html('<button type="button" class="btn btn-primary" data-dismiss="modal">' + $.i18n('general_btn_ok') + '</button>');
   }
   else if (type == "newToken") {
-    $('#id_body').html('<img style="margin-bottom:20px" src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!">');
+    $('#id_body').html('<img style="margin-bottom:20px" id="id_logo" src="img/hyperion/logo_positiv.png" alt="Redefine ambient light!">');
     $('#id_footer').html('<button type="button" class="btn btn-primary" data-dismiss="modal">' + $.i18n('general_btn_ok') + '</button>');
   }
   else if (type == "grantToken") {
-    $('#id_body').html('<img style="margin-bottom:20px" src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!">');
+    $('#id_body').html('<img style="margin-bottom:20px" id="id_logo" src="img/hyperion/logo_positiv.png" alt="Redefine ambient light!">');
     $('#id_footer').html('<button type="button" class="btn btn-primary" data-dismiss="modal" id="tok_grant_acc">' + $.i18n('general_btn_grantAccess') + '</button>');
     $('#id_footer').append('<button type="button" class="btn btn-danger" data-dismiss="modal" id="tok_deny_acc">' + $.i18n('general_btn_denyAccess') + '</button>');
   }
@@ -322,6 +318,9 @@ function showInfoDialog(type, header, message) {
   if (type == "select" || type == "iswitch")
     $('#id_body').append('<select id="id_select" class="form-control" style="margin-top:10px;width:auto;"></select>');
 
+  if (getStorage("darkMode", false) == "on")
+    $('#id_logo').attr("src", 'img/hyperion/logo_negativ.png');
+
   $(type == "renInst" || type == "changePassword" ? "#modal_dialog_rename" : "#modal_dialog").modal({
     backdrop: "static",
     keyboard: false,
@@ -330,7 +329,7 @@ function showInfoDialog(type, header, message) {
 
   $(document).on('click', '[data-dismiss-modal]', function () {
     var target = $(this).attr('data-dismiss-modal');
-    $(target).modal('hide');
+    $(target).modal('hide'); // lgtm [js/xss-through-dom]
   });
 }
 
@@ -808,14 +807,14 @@ function createRow(id) {
   return el;
 }
 
-function createOptPanel(phicon, phead, bodyid, footerid) {
+function createOptPanel(phicon, phead, bodyid, footerid, css) {
   phead = '<i class="fa ' + phicon + ' fa-fw"></i>' + phead;
   var pfooter = document.createElement('button');
   pfooter.className = "btn btn-primary";
   pfooter.setAttribute("id", footerid);
   pfooter.innerHTML = '<i class="fa fa-fw fa-save"></i>' + $.i18n('general_button_savesettings');
 
-  return createPanel(phead, "", pfooter, "panel-default", bodyid);
+  return createPanel(phead, "", pfooter, "panel-default", bodyid, css);
 }
 
 function compareTwoValues(key1, key2, order = 'asc') {
@@ -872,7 +871,7 @@ function sortProperties(list) {
   });
 }
 
-function createHelpTable(list, phead) {
+function createHelpTable(list, phead, panelId) {
   var table = document.createElement('table');
   var thead = document.createElement('thead');
   var tbody = document.createElement('tbody');
@@ -911,10 +910,10 @@ function createHelpTable(list, phead) {
   table.appendChild(thead);
   table.appendChild(tbody);
 
-  return createPanel(phead, table);
+  return createPanel(phead, table, undefined, undefined, undefined, undefined, panelId);
 }
 
-function createPanel(head, body, footer, type, bodyid) {
+function createPanel(head, body, footer, type, bodyid, css, panelId) {
   var cont = document.createElement('div');
   var p = document.createElement('div');
   var phead = document.createElement('div');
@@ -927,7 +926,11 @@ function createPanel(head, body, footer, type, bodyid) {
     type = 'panel-default';
 
   p.className = 'panel ' + type;
-  phead.className = 'panel-heading';
+  if (typeof panelId != 'undefined') {
+    p.setAttribute("id", panelId);
+  }
+
+  phead.className = 'panel-heading ' + css;
   pbody.className = 'panel-body';
   pfooter.className = 'panel-footer';
 
@@ -1116,7 +1119,8 @@ function handleDarkMode() {
 
   setStorage("darkMode", "on", false);
   $('#btn_darkmode_icon').removeClass('fa fa-moon-o');
-  $('#btn_darkmode_icon').addClass('fa fa-sun-o');
+  $('#btn_darkmode_icon').addClass('mdi mdi-white-balance-sunny');
+  $('#navbar_brand_logo').attr("src", 'img/hyperion/logo_negativ.png');
 }
 
 function isAccessLevelCompliant(accessLevel) {
@@ -1134,3 +1138,24 @@ function isAccessLevelCompliant(accessLevel) {
   }
   return isOK
 }
+
+function showInputOptions(path, elements, state) {
+  for (var i = 0; i < elements.length; i++) {
+    $('[data-schemapath="' + path + '.' + elements[i] + '"]').toggle(state);
+  }
+}
+
+function showInputOptionsForKey(editor, item, showForKey, state) {
+  var elements = [];
+  for (var key in editor.schema.properties[item].properties) {
+    if (showForKey !== key) {
+      var accessLevel = editor.schema.properties[item].properties[key].access;
+
+      //Always disable all elements, but only enable elements, if access level compliant
+      if (!state || isAccessLevelCompliant(accessLevel)) {
+        elements.push(key);
+      }
+    }
+  }
+  showInputOptions("root." + item, elements, state);
+}

assets/webconfig/js/wizard.js

@@ -53,6 +53,9 @@ function startWizardRGB() {
   $('#wizp2_body').append('<table class="table borderless" style="width:200px"><tbody><tr><td class="ltd"><label>' + $.i18n('wiz_rgb_qrend') + '</label></td><td class="itd"><select id="wiz_r_select" class="form-control wselect"></select></td></tr><tr><td class="ltd"><label>' + $.i18n('wiz_rgb_qgend') + '</label></td><td class="itd"><select id="wiz_g_select" class="form-control wselect"></select></td></tr></tbody></table>');
   $('#wizp2_footer').html('<button type="button" class="btn btn-primary" id="btn_wiz_save"><i class="fa fa-fw fa-save"></i>' + $.i18n('general_btn_save') + '</button><button type="button" class="btn btn-primary" id="btn_wiz_checkok" style="display:none" data-dismiss="modal"><i class="fa fa-fw fa-check"></i>' + $.i18n('general_btn_ok') + '</button><button type="button" class="btn btn-danger" id="btn_wiz_abort"><i class="fa fa-fw fa-close"></i>' + $.i18n('general_btn_cancel') + '</button>');
 
+  if (getStorage("darkMode", false) == "on")
+    $('#wizard_logo').attr("src", 'img/hyperion/logo_negativ.png');
+
   //open modal
   $("#wizard_modal").modal({
     backdrop: "static",
@@ -429,6 +432,9 @@ function startWizardCC() {
   $('#wizp2_body').html('<div id="wiz_cc_desc" style="font-weight:bold"></div><div id="editor_container_wiz"></div>');
   $('#wizp2_footer').html('<button type="button" class="btn btn-primary" id="btn_wiz_back"><i class="fa fa-fw fa-chevron-left"></i>' + $.i18n('general_btn_back') + '</button><button type="button" class="btn btn-primary" id="btn_wiz_next">' + $.i18n('general_btn_next') + '<i style="margin-left:4px;"class="fa fa-fw fa-chevron-right"></i></button><button type="button" class="btn btn-warning" id="btn_wiz_save" style="display:none"><i class="fa fa-fw fa-save"></i>' + $.i18n('general_btn_save') + '</button><button type="button" class="btn btn-danger" id="btn_wiz_abort"><i class="fa fa-fw fa-close"></i>' + $.i18n('general_btn_cancel') + '</button>');
 
+  if (getStorage("darkMode", false) == "on")
+    $('#wizard_logo').attr("src", 'img/hyperion/logo_negativ.png');
+
   //open modal
   $("#wizard_modal").modal({
     backdrop: "static",
@@ -669,6 +675,9 @@ function startWizardPhilipsHue(e) {
   $('#wizp2_footer').html('<button type="button" class="btn btn-primary" id="btn_wiz_save" style="display:none"><i class="fa fa-fw fa-save"></i>' + $.i18n('general_btn_save') + '</button><button type="button" class="btn btn-danger" id="btn_wiz_abort"><i class="fa fa-fw fa-close"></i>' + $.i18n('general_btn_cancel') + '</button>');
   $('#wizp3_body').html('<span>' + $.i18n('wiz_hue_press_link') + '</span> <br /><br /><center><span id="connectionTime"></span><br /><i class="fa fa-cog fa-spin" style="font-size:100px"></i></center>');
 
+  if (getStorage("darkMode", false) == "on")
+    $('#wizard_logo').attr("src", 'img/hyperion/logo_negativ.png');
+
   //open modal
   $("#wizard_modal").modal({
     backdrop: "static",
@@ -832,8 +841,8 @@ async function identify_hue_device(hostAddress, username, id) {
   await requestLedDeviceIdentification('philipshue', params);
 
   if (!window.readOnlyMode) {
-    $('#btn_wiz_save').attr('disabled', false);  
+    $('#btn_wiz_save').attr('disabled', false);
-  } 
+  }
 }
 
 function getHueIPs() {
@@ -1233,6 +1242,9 @@ function startWizardYeelight(e) {
     + $.i18n('general_btn_save') + '</button><buttowindow.serverConfig.device = d;n type="button" class="btn btn-danger" id="btn_wiz_abort"><i class="fa fa-fw fa-close"></i>'
     + $.i18n('general_btn_cancel') + '</button>');
 
+  if (getStorage("darkMode", false) == "on")
+    $('#wizard_logo').attr("src", 'img/hyperion/logo_negativ.png');
+
   //open modal
   $("#wizard_modal").modal({ backdrop: "static", keyboard: false, show: true });
 
@@ -1499,6 +1511,9 @@ function startWizardAtmoOrb(e) {
     + $.i18n('general_btn_save') + '</button><buttowindow.serverConfig.device = d;n type="button" class="btn btn-danger" id="btn_wiz_abort"><i class="fa fa-fw fa-close"></i>'
     + $.i18n('general_btn_cancel') + '</button>');
 
+  if (getStorage("darkMode", false) == "on")
+    $('#wizard_logo').attr("src", 'img/hyperion/logo_negativ.png');
+
   //open modal
   $("#wizard_modal").modal({ backdrop: "static", keyboard: false, show: true });
 

cmake/packages.cmake

@@ -35,7 +35,7 @@ SET ( CPACK_PACKAGE_NAME "Hyperion" )
 SET ( CPACK_PACKAGE_DESCRIPTION_SUMMARY "Hyperion is an open source ambient light implementation" )
 SET ( CPACK_PACKAGE_DESCRIPTION_FILE "${CMAKE_SOURCE_DIR}/README.md" )
 
-# Replease "+", as cmake/rpm has an issue if "+" occurs in CPACK_PACKAGE_VERSION 
+# Replease "+", as cmake/rpm has an issue if "+" occurs in CPACK_PACKAGE_VERSION
 string(REPLACE "+" "." HYPERION_PACKAGE_VERSION ${HYPERION_VERSION})
 SET ( CPACK_PACKAGE_FILE_NAME "Hyperion-${HYPERION_PACKAGE_VERSION}-${CMAKE_SYSTEM_NAME}-${CMAKE_SYSTEM_PROCESSOR}")
 
@@ -90,8 +90,8 @@ if(WIN32)
 	STRING(REGEX REPLACE "\\\\" "\\\\\\\\" CPACK_PACKAGE_ICON ${CPACK_PACKAGE_ICON})
 endif()
 file(TO_NATIVE_PATH "${CMAKE_CURRENT_SOURCE_DIR}/cmake/nsis/installer.ico" NSIS_HYP_ICO)
-file(TO_NATIVE_PATH "${CMAKE_CURRENT_SOURCE_DIR}/cmake/nsis/hyperion-logo.bmp" NSIS_HYP_LOGO_HORI)
+file(TO_NATIVE_PATH "${CMAKE_CURRENT_SOURCE_DIR}/cmake/nsis/header.bmp" NSIS_HYP_LOGO_HORI)
-file(TO_NATIVE_PATH "${CMAKE_CURRENT_SOURCE_DIR}/cmake/nsis/hyperion-logo-vert.bmp" NSIS_HYP_LOGO_VERT)
+file(TO_NATIVE_PATH "${CMAKE_CURRENT_SOURCE_DIR}/cmake/nsis/logo.bmp" NSIS_HYP_LOGO_VERT)
 STRING(REGEX REPLACE "\\\\" "\\\\\\\\" NSIS_HYP_ICO "${NSIS_HYP_ICO}")
 STRING(REGEX REPLACE "\\\\" "\\\\\\\\" NSIS_HYP_LOGO_VERT "${NSIS_HYP_LOGO_VERT}")
 STRING(REGEX REPLACE "\\\\" "\\\\\\\\" NSIS_HYP_LOGO_HORI "${NSIS_HYP_LOGO_HORI}")

libsrc/leddevice/dev_net/LedDeviceYeelight.cpp

@@ -234,12 +234,12 @@ int YeelightLight::writeCommand( const QJsonDocument &command, QJsonArray &resul
 			if ( ! _tcpSocket->waitForBytesWritten(WRITE_TIMEOUT.count()) )
 			{
 				QString errorReason = QString ("(%1) %2").arg(_tcpSocket->error()).arg( _tcpSocket->errorString());
-				log ( 2, "Error:", "bytesWritten: [%d], %s", bytesWritten, QSTRING_CSTR(errorReason));
+				log ( 2, "Error:", "bytesWritten: [%lld], %s", bytesWritten, QSTRING_CSTR(errorReason));
 				this->setInError ( errorReason );
 			}
 			else
 			{
-				log ( 3, "Success:", "Bytes written   [%d]", bytesWritten );
+				log ( 3, "Success:", "Bytes written   [%lld]", bytesWritten );
 
 				// Avoid to overrun the Yeelight Command Quota
 				qint64 elapsedTime = QDateTime::currentMSecsSinceEpoch() - _lastWriteTime;
@@ -258,7 +258,7 @@ int YeelightLight::writeCommand( const QJsonDocument &command, QJsonArray &resul
 			{
 				do
 				{
-					log ( 3, "Reading:", "Bytes available [%d]", _tcpSocket->bytesAvailable() );
+					log ( 3, "Reading:", "Bytes available [%lld]", _tcpSocket->bytesAvailable() );
 					while ( _tcpSocket->canReadLine() )
 					{
 						QByteArray response = _tcpSocket->readLine();
@@ -338,7 +338,7 @@ bool YeelightLight::streamCommand( const QJsonDocument &command )
 			{
 				int error = _tcpStreamSocket->error();
 				QString errorReason = QString ("(%1) %2").arg(error).arg( _tcpStreamSocket->errorString());
-				log ( 1, "Error:", "bytesWritten: [%d], %s", bytesWritten, QSTRING_CSTR(errorReason));
+				log ( 1, "Error:", "bytesWritten: [%lld], %s", bytesWritten, QSTRING_CSTR(errorReason));
 
 				if ( error == QAbstractSocket::RemoteHostClosedError )
 				{
@@ -353,7 +353,7 @@ bool YeelightLight::streamCommand( const QJsonDocument &command )
 			}
 			else
 			{
-				log ( 3, "Success:", "Bytes written   [%d]", bytesWritten );
+				log ( 3, "Success:", "Bytes written   [%lld]", bytesWritten );
 				rc = true;
 			}
 		}