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

This commit is contained in:
Lord-Grey 2021-05-19 10:51:45 +02:00
parent 80d60c2406
commit 8d8ee8b3cd
10 changed files with 173 additions and 115 deletions

View File

@ -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-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 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="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>
@ -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">

View File

@ -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 (hardwareLedCount < 1) {
canSave = false;
}
if (canSave) {
if (!window.readOnlyMode) {
$('#btn_submit_controller').attr('disabled', false);
}
}
else {
$('#btn_submit_controller').attr('disabled', true);
if (canSave) {
if (!window.readOnlyMode) {
$('#btn_submit_controller').attr('disabled', false);
}
}
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);
}
}
}

View File

@ -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"))

View File

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

View File

@ -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);

View File

@ -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

View File

@ -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";

View File

@ -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": {

View File

@ -1,110 +1,110 @@
{
"type":"object",
"required":true,
"properties":{
"output" : {
"properties": {
"host": {
"type": "string",
"title":"edt_dev_spec_targetIp_title",
"default" : "127.0.0.1",
"propertyOrder" : 1
"title": "edt_dev_spec_targetIp_title",
"default": "127.0.0.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",
"propertyOrder" : 3
"access": "expert",
"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" : {
"type" : "number",
"title" : "edt_dev_spec_gamma_title",
"gamma": {
"type": "number",
"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" : {
"type" : "array",
"title" : "edt_dev_spec_whitepoint_title",
"whitepoint": {
"type": "array",
"title": "edt_dev_spec_whitepoint_title",
"options": {
"dependencies": {
"setFcConfig": true
}
},
"propertyOrder" : 10,
"default" : [255,255,255],
"maxItems" : 3,
"minItems" : 3,
"format" : "colorpicker",
"items" : {
"type" : "integer",
"minimum" : 0,
"propertyOrder": 10,
"default": [ 255, 255, 255 ],
"maxItems": 3,
"minItems": 3,
"format": "colorpicker",
"items": {
"type": "integer",
"minimum": 0,
"maximum": 255,
"default" : 255
"default": 255
}
}
},

View File

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