Refactor LED-Device handling in UI and make element naming consistent

assets/webconfig/content/conf_leds.html

@@ -6,17 +6,17 @@
 <div class="container-fluid">
   <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 panel-default" style="border:0px;">
-		<div class="panel-heading panel-instance" style="border-radius:3px; border-bottom:0px;">
+    <div class="panel-heading panel-instance" style="border-radius:3px; border-bottom:0px;">
-			<div class="dropdown">
+      <div class="dropdown">
-				<a id="active_instance_dropdown" class="dropdown-toggle" data-toggle="dropdown" href="#" style="text-decoration:none;display:flex;align-items:center;">
+        <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>
+          <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>
+        </a>
-				<ul id="hyp_inst_listing" class="dropdown-menu dropdown-alerts" style="cursor:pointer;"></ul>
+        <ul id="hyp_inst_listing" class="dropdown-menu dropdown-alerts" style="cursor:pointer;"></ul>
-			</div>
+      </div>
-		</div>
+    </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>
@@ -40,7 +40,7 @@
               <div class="bs-callout bs-callout-info" style="margin-top:0px"><h4 data-i18n="dashboard_infobox_label_title">Information</h4><span data-i18n="conf_leds_device_info_log"> In case your LEDs do not work, check here for errors: </span> <a onclick="SwitchToMenuItem('MenuItemLogging')" data-i18n="main_menu_logging_token" style="cursor:pointer"></a></div>
             </div>
             <div class="panel-footer" style="text-align:right">
-              <button id='btn_test_controller' class="btn btn-primary hidden" disabled data-toggle="tooltip" data-placement="top" title="Identify configured device by lighting it up">
+              <button id='btn_test_controller' class="btn btn-primary" disabled data-toggle="tooltip" data-placement="top" title="Identify configured device by lighting it up">
                 <i class="fa fa-fw fa-save"></i><span data-i18n="wiz_identify">Identify/Test</span>
               </button>
               <button id='btn_submit_controller' class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Save the device's connectivity configuration">

assets/webconfig/js/content_leds.js

@@ -46,7 +46,7 @@ function createLedPreview(leds, origin) {
   canvas_width = $('#leds_preview').innerWidth();
 
   imageCanvasNodeCtx = document.getElementById("image_preview").getContext("2d");
-  $('#image_preview').css({"width":canvas_width, "height":canvas_height});
+  $('#image_preview').css({ "width": canvas_width, "height": canvas_height });
 
   var leds_html = "";
   for (var idx = 0; idx < leds.length; idx++) {
@@ -562,25 +562,23 @@ $(document).ready(function () {
   });
 
   // toggle live video
-  $('#leds_prev_toggle_live_video').off().on("click", function() {
+  $('#leds_prev_toggle_live_video').off().on("click", function () {
     setClassByBool('#leds_prev_toggle_live_video', window.imageStreamActive, "btn-success", "btn-danger");
-    if (window.imageStreamActive)
+    if (window.imageStreamActive) {
-    {
       requestLedImageStop();
       imageCanvasNodeCtx.clear();
     }
-    else
+    else {
-    {
       requestLedImageStart();
     }
   });
 
-  $(window.hyperion).on("cmd-ledcolors-imagestream-update",function(event){
+  $(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() {
+    image.onload = function () {
       imageCanvasNodeCtx.drawImage(image, 0, 0, imageCanvasNodeCtx.canvas.width, imageCanvasNodeCtx.canvas.height);
     };
     image.src = imageData;
@@ -703,6 +701,8 @@ $(document).ready(function () {
       var hwLedCountDefault = 1;
       var colorOrderDefault = "rgb";
 
+      $('#btn_test_controller').hide();
+
       switch (ledType) {
         case "cololight":
         case "wled":
@@ -771,11 +771,38 @@ $(document).ready(function () {
     });
 
     conf_editor.on('change', function () {
-      //Check, if device can be identified/tested and/or saved
+      // //Check, if device can be identified/tested and/or saved
       var canIdentify = false;
       var canSave = false;
 
       switch (ledType) {
+
+        case "atmoorb":
+        case "fadecandy":
+        case "tinkerforge":
+        case "tpm2net":
+        case "udpe131":
+        case "udpartnet":
+        case "udph801":
+        case "udpraw":
+          var host = conf_editor.getEditor("root.specificOptions.host").getValue();
+          if (host !== "") {
+            canSave = true;
+          }
+          break;
+
+        case "philipshue":
+          var host = conf_editor.getEditor("root.specificOptions.host").getValue();
+          var username = conf_editor.getEditor("root.specificOptions.username").getValue();
+          if (host !== "" && username != "") {
+            var useEntertainmentAPI = conf_editor.getEditor("root.specificOptions.useEntertainmentAPI").getValue();
+            var clientkey = conf_editor.getEditor("root.specificOptions.clientkey").getValue();
+            if (!useEntertainmentAPI || clientkey !== "") {
+              canSave = true;
+            }
+          }
+          break;
+
         case "cololight":
         case "wled":
           var hostList = conf_editor.getEditor("root.specificOptions.hostList").getValue();
@@ -799,62 +826,32 @@ $(document).ready(function () {
             }
           }
           break;
-
-        case "adalight":
-          var output = conf_editor.getEditor("root.specificOptions.output").getValue();
-          if (output !== "NONE" && output !== "SELECT" && output !== "") {
-            canIdentify = true;
-          }
-        case "atmo":
-        case "dmx":
-        case "karate":
-        case "sedu":
-        case "tpm2":
-        case "apa102":
-        case "apa104":
-        case "ws2801":
-        case "lpd6803":
-        case "lpd8806":
-        case "p9813":
-        case "sk6812spi":
-        case "sk6822spi":
-        case "sk9822":
-        case "ws2812spi":
-        case "piblaster":
-          var output = conf_editor.getEditor("root.specificOptions.output").getValue();
-          if (output !== "NONE" && output !== "SELECT" && output !== "") {
-            canSave = true;
-          }
-          break;
         default:
           canIdentify = false;
           canSave = true;
       }
 
       if (!conf_editor.validate().length) {
-
         if (canIdentify) {
-          $("#btn_test_controller").removeClass('hidden');
+          $("#btn_test_controller").show();
           $('#btn_test_controller').attr('disabled', false);
-        }
+        } else {
-        else {
+          $('#btn_test_controller').hide();
           $('#btn_test_controller').attr('disabled', true);
         }
+      } else {
+        canSave = false;
+      }
 
-        var hardwareLedCount = conf_editor.getEditor("root.generalOptions.hardwareLedCount").getValue();
+      if (canSave) {
-        if (hardwareLedCount < 1) {
+        if (!window.readOnlyMode) {
-          canSave = false;
+          $('#btn_submit_controller').attr('disabled', false);
-        }
-
-        if (canSave) {
-          if (!window.readOnlyMode) {
-            $('#btn_submit_controller').attr('disabled', false);
-          }
-        }
-        else {
-          $('#btn_submit_controller').attr('disabled', true);
         }
       }
+      else {
+        $('#btn_submit_controller').attr('disabled', true);
+      }
+
       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);
       window.readOnlyMode ? $('#leds_custom_save').attr('disabled', true) : $('#btn_submit').attr('disabled', false);
@@ -890,9 +887,9 @@ $(document).ready(function () {
             conf_editor.getEditor(specOptPath + "host").setValue(val);
             break;
         }
-      }
 
-      showAllDeviceInputOptions("hostList", showOptions);
+        showAllDeviceInputOptions("hostList", showOptions);
+      }
     });
 
     conf_editor.watch('root.specificOptions.host', () => {
@@ -904,8 +901,10 @@ $(document).ready(function () {
       else {
         let params = {};
         switch (ledType) {
+
           case "cololight":
             params = { host: host };
+            getProperties_device(ledType, host, params);
             break;
 
           case "nanoleaf":
@@ -914,33 +913,70 @@ $(document).ready(function () {
               return;
             }
             params = { host: host, token: token };
+            getProperties_device(ledType, host, params);
             break;
 
           case "wled":
             params = { host: host, filter: "info" };
+            getProperties_device(ledType, host, params);
             break;
           default:
         }
-
-        getProperties_device(ledType, host, params);
       }
     });
 
     conf_editor.watch('root.specificOptions.output', () => {
       var output = conf_editor.getEditor("root.specificOptions.output").getValue();
       if (output === "NONE" || output === "SELECT" || output === "") {
+
+        $('#btn_submit_controller').attr('disabled', true);
+        $('#btn_test_controller').attr('disabled', true);
+        $('#btn_test_controller').hide();
+
         conf_editor.getEditor("root.generalOptions.hardwareLedCount").setValue(1);
         showAllDeviceInputOptions("output", false);
       }
       else {
         showAllDeviceInputOptions("output", true);
         let params = {};
+        var canIdentify = false;
         switch (ledType) {
+          case "adalight":
+            canIdentify = true;
+            break;
           case "atmo":
           case "karate":
             params = { serialPort: output };
             getProperties_device(ledType, output, params);
             break;
+          case "dmx":
+          case "sedu":
+          case "tpm2":
+          case "apa102":
+          case "apa104":
+          case "ws2801":
+          case "lpd6803":
+          case "lpd8806":
+          case "p9813":
+          case "sk6812spi":
+          case "sk6822spi":
+          case "sk9822":
+          case "ws2812spi":
+          case "piblaster":
+          default:
+        }
+
+        if (!conf_editor.validate().length) {
+          if (canIdentify) {
+            $("#btn_test_controller").show();
+            $('#btn_test_controller').attr('disabled', false);
+          } else {
+            $('#btn_test_controller').hide();
+            $('#btn_test_controller').attr('disabled', true);
+          }
+          if (!window.readOnlyMode) {
+            $('#btn_submit_controller').attr('disabled', false);
+          }
         }
       }
     });
@@ -1233,6 +1269,8 @@ function saveLedConfig(genDefLayout = false) {
       break;
   }
 
+  
+
   //Rewrite whole LED & Layout configuration, in case changes were done accross tabs and no default layout
   if (genDefLayout !== true) {
     result.ledConfig = getLedConfig();
@@ -1439,6 +1477,9 @@ var updateSelectList = function (ledType, discoveryInfo) {
 };
 
 async function discover_device(ledType, params) {
+
+  $('#btn_submit_controller').attr('disabled', true);
+
   const result = await requestLedDeviceDiscovery(ledType, params);
 
   var discoveryResult;
@@ -1479,6 +1520,7 @@ async function getProperties_device(ledType, key, params) {
       }
       else {
         $('#btn_submit_controller').attr('disabled', true);
+        $('#btn_test_controller').attr('disabled', true);
       }
     }
   }

libsrc/hyperion/SettingsManager.cpp

@@ -391,12 +391,30 @@ bool SettingsManager::handleConfigUpgrade(QJsonObject& config)
 							Warning(_log, "Instance [%u]: HwLedCount/Layout mismatch! Setting Hardware LED count to number of LEDs configured via layout", _instance);
 							hwLedcount = layoutLedCount;
 							newDeviceConfig["hardwareLedCount"] = hwLedcount;
-
-							config["device"] = newDeviceConfig;
 							migrated = true;
 						}
 					}
 				}
+
+				if (newDeviceConfig.contains("type"))
+				{
+					QString type = newDeviceConfig["type"].toString();
+					if (type == "atmoorb" || type == "fadecandy" || type == "philipshue" )
+					{
+						if (newDeviceConfig.contains("output"))
+						{
+							newDeviceConfig["host"] = newDeviceConfig["output"].toString();
+							newDeviceConfig.remove("output");
+							migrated = true;
+						}
+					}
+				}
+
+				if (migrated)
+				{
+					config["device"] = newDeviceConfig;
+					Debug(_log, "LED-Device records migrated");
+				}
 			}
 
 			if (config.contains("grabberV4L2"))

libsrc/hyperion/schema/schema-ledConfig.json

@@ -147,7 +147,6 @@
 		"ledBlacklist": {
 			"type": "array",
 			"title": "conf_leds_layout_blacklist_rules_title",
-			"minimum": 1,
 			"uniqueItems": true,
 			"items": {
 				"type": "object",

libsrc/leddevice/dev_net/LedDeviceAtmoOrb.cpp

@@ -50,7 +50,7 @@ bool LedDeviceAtmoOrb::init(const QJsonObject &deviceConfig)
 	if ( LedDevice::init(deviceConfig) )
 	{
 
-		_multicastGroup     = deviceConfig["output"].toString(MULTICAST_GROUP_DEFAULT_ADDRESS);
+		_multicastGroup     = deviceConfig["host"].toString(MULTICAST_GROUP_DEFAULT_ADDRESS);
 		_multiCastGroupPort = static_cast<quint16>(deviceConfig["port"].toInt(MULTICAST_GROUP_DEFAULT_PORT));
 		_useOrbSmoothing    = deviceConfig["useOrbSmoothing"].toBool(false);
 		_skipSmoothingDiff  = deviceConfig["skipSmoothingDiff"].toInt(0);

libsrc/leddevice/dev_net/LedDeviceFadeCandy.cpp

@@ -55,7 +55,7 @@ bool LedDeviceFadeCandy::init(const QJsonObject& deviceConfig)
 		}
 		else
 		{
-			_host = deviceConfig["output"].toString("127.0.0.1");
+			_host = deviceConfig["host"].toString("127.0.0.1");
 			_port = deviceConfig["port"].toInt(STREAM_DEFAULT_PORT);
 
 			//If host not configured the init fails

libsrc/leddevice/dev_net/LedDevicePhilipsHue.cpp

@@ -12,7 +12,7 @@ namespace {
 bool verbose = false;
 
 // Configuration settings
-const char CONFIG_ADDRESS[] = "output";
+const char CONFIG_ADDRESS[] = "host";
 //const char CONFIG_PORT[] = "port";
 const char CONFIG_USERNAME[] = "username";
 const char CONFIG_CLIENTKEY[] = "clientkey";

libsrc/leddevice/schemas/schema-atmoorb.json

@@ -16,11 +16,10 @@
       "access": "advanced",
       "propertyOrder": 2
     },
-    "output": {
+    "host": {
       "type": "string",
       "title": "edt_dev_spec_multicastGroup_title",
       "default": "239.255.255.250",
-      "access": "expert",
       "propertyOrder": 3
     },
     "port": {

libsrc/leddevice/schemas/schema-fadecandy.json

@@ -1,110 +1,110 @@
 {
 	"type":"object",
 	"required":true,
-	"properties":{
+	"properties": {
-		"output" : {
+		"host": {
 			"type": "string",
-			"title":"edt_dev_spec_targetIp_title",
+			"title": "edt_dev_spec_targetIp_title",
-			"default" : "127.0.0.1",
+			"default": "127.0.0.1",
-			"propertyOrder" : 1
+			"propertyOrder": 1
 		},
-		"port" : {
+		"port": {
 			"type": "number",
-			"title":"edt_dev_spec_port_title",
+			"title": "edt_dev_spec_port_title",
 			"default": 7890,
-			"propertyOrder" : 2
+			"propertyOrder": 2
 		},
 		"latchTime": {
 			"type": "integer",
-			"title":"edt_dev_spec_latchtime_title",
+			"title": "edt_dev_spec_latchtime_title",
 			"default": 0,
-			"append" : "edt_append_ms",
+			"append": "edt_append_ms",
 			"minimum": 0,
 			"maximum": 1000,
-			"access" : "expert",
+			"access": "expert",
-			"propertyOrder" : 3
+			"propertyOrder": 3
 		},
 		"setFcConfig": {
 			"type": "boolean",
-			"title":"edt_dev_spec_FCsetConfig_title",
+			"title": "edt_dev_spec_FCsetConfig_title",
 			"default": false,
-			"propertyOrder" : 4
+			"propertyOrder": 4
 		},
 		"manualLed": {
 			"type": "boolean",
-			"title":"edt_dev_spec_FCmanualControl_title",
+			"title": "edt_dev_spec_FCmanualControl_title",
 			"default": false,
 			"options": {
 				"dependencies": {
 					"setFcConfig": true
 				}
 			},
-			"propertyOrder" : 5
+			"propertyOrder": 5
 		},
 		"ledOn": {
 			"type": "boolean",
-			"title":"edt_dev_spec_FCledToOn_title",
+			"title": "edt_dev_spec_FCledToOn_title",
 			"default": false,
 			"options": {
 				"dependencies": {
 					"setFcConfig": true
 				}
 			},
-			"propertyOrder" : 6
+			"propertyOrder": 6
 		},
 		"interpolation": {
 			"type": "boolean",
-			"title":"edt_dev_spec_interpolation_title",
+			"title": "edt_dev_spec_interpolation_title",
 			"default": false,
 			"options": {
 				"dependencies": {
 					"setFcConfig": true
 				}
 			},
-			"propertyOrder" : 7
+			"propertyOrder": 7
 		},
 		"dither": {
 			"type": "boolean",
-			"title":"edt_dev_spec_dithering_title",
+			"title": "edt_dev_spec_dithering_title",
 			"default": false,
 			"options": {
 				"dependencies": {
 					"setFcConfig": true
 				}
 			},
-			"propertyOrder" : 8
+			"propertyOrder": 8
 		},
-		"gamma" : {
+		"gamma": {
-			"type" : "number",
+			"type": "number",
-			"title" : "edt_dev_spec_gamma_title",
+			"title": "edt_dev_spec_gamma_title",
 			"default": 1.0,
-			"minimum" : 0.1,
+			"minimum": 0.1,
 			"maximum": 5.0,
 			"options": {
 				"dependencies": {
 					"setFcConfig": true
 				}
 			},
-			"propertyOrder" : 9
+			"propertyOrder": 9
 		},
-		"whitepoint" : {
+		"whitepoint": {
-			"type" : "array",
+			"type": "array",
-			"title" : "edt_dev_spec_whitepoint_title",
+			"title": "edt_dev_spec_whitepoint_title",
 			"options": {
 				"dependencies": {
 					"setFcConfig": true
 				}
 			},
-			"propertyOrder" : 10,
+			"propertyOrder": 10,
-			"default" : [255,255,255],
+			"default": [ 255, 255, 255 ],
-			"maxItems" : 3,
+			"maxItems": 3,
-			"minItems" : 3,
+			"minItems": 3,
-			"format" : "colorpicker",
+			"format": "colorpicker",
-			"items" : {
+			"items": {
-				"type" : "integer",
+				"type": "integer",
-				"minimum" : 0,
+				"minimum": 0,
 				"maximum": 255,
-				"default" : 255
+				"default": 255
 			}
 		}
 	},

libsrc/leddevice/schemas/schema-philipshue.json

@@ -2,7 +2,7 @@
   "type": "object",
   "required": true,
   "properties": {
-    "output": {
+    "host": {
       "type": "string",
       "title": "edt_dev_spec_targetIp_title",
       "default": "",