node-red-contrib-knx-ultimate
Version:
Control your KNX intallation via Node-Red! A bunch of KNX nodes, with integrated Philips HUE control and ETS group address importer. Easy to use and highly configurable.
249 lines (221 loc) • 12.3 kB
HTML
<script type="text/javascript" src="resources/node-red-contrib-knx-ultimate/htmlUtils.js"></script>
<script type="text/javascript">
RED.nodes.registerType('hue-config', {
category: 'config',
defaults: {
host: { value: "" },
name: { value: "Hue Bridge" },
bridgeid: { value: "" }
},
credentials: {
username: { type: "password" },
clientkey: { type: "password" }
},
oneditprepare: function () {
// Go to the help panel
try {
RED.sidebar.show("help");
} catch (error) { }
var node = this;
if (this.bridgeid === undefined || this.bridgeid === '') {
$("#divDetails").hide()
} else {
$("#divDetails").show()
}
// #region "CONNECTION TO THE BRIDGE"
$("#getinfocam").click(function () {
$.getJSON("KNXUltimateGetHueBridgeInfo?IP=" + $("#node-config-input-host").val() + "&serverId=" + node.id, (data) => {
if (data.hasOwnProperty("error")) {
RED.notify(JSON.stringify(data.error),
{
modal: true,
fixed: false,
type: 'error'
});
return;
}
$("#node-config-input-bridgeid").val(data.bridgeid);
$("#node-config-input-name").val(data.name);
var myNotification = RED.notify("Please press the Link button on the HUE Bridge, then click OK. \nYou can also set the credentials manually by cliking SET CREDENTIALS MANUALLY.",
{
modal: true,
fixed: true,
type: 'info',
buttons: [
{
text: "OK",
click: function (e) {
$("#mainWindow").hide();
$("#waitWindow").show();
// Send the infos to Supergiovane
$.getJSON("KNXUltimateRegisterToHueBridge?IP=" + $("#node-config-input-host").val() + "&serverId=" + node.id, (data) => {
this.value = "Connect";
this.disabled = false;
if (data.hasOwnProperty("error")) {
RED.notify(JSON.stringify(data.error),
{
modal: true,
fixed: false,
type: 'error'
});
this.disabled = false;
$("#divDetails").hide()
$("#mainWindow").show();
$("#waitWindow").hide();
return;
}
// Expected { bridge: bridgeConfig, user: createdUser }
$("#node-config-input-name").val(data.bridge.data.name);
// $("#node-config-input-host").val(data.bridge.data.ipaddress);
$("#node-config-input-username").val(data.user.username);
$("#node-config-input-clientkey").val(data.user.clientkey);
$("#node-config-input-bridgeid").val(data.bridge.data.bridgeid);
$("#mainWindow").show();
$("#waitWindow").hide();
$("#divDetails").show()
}).error(function (jqXHR, textStatus, errorThrown) {
RED.notify("Something went wrong. Please create at least a KNX Gateway node first.",
{
modal: false,
fixed: false,
type: 'error'
})
$("#mainWindow").show();
$("#waitWindow").hide();
});
myNotification.close();
}
},
{
text: "SET CREDENTIALS MANUALLY",
click: function (e) {
myNotification.close();
$("#mainWindow").show();
$("#node-config-input-clientkey").removeAttr('disabled');
$("#node-config-input-username").removeAttr('disabled');
$("#DIVrevealBridgeSecrets").hide();
$("#BUTTONrevealBridgeSecrets").hide()
$("#divDetails").show()
$("#waitWindow").hide();
$("#divConnectButton").hide();
}
},
{
text: "CANCEL",
click: function (e) {
myNotification.close();
$("#mainWindow").show();
$("#waitWindow").hide();
//$("#DIVrevealBridgeSecrets").hide()
//$("#BUTTONrevealBridgeSecrets").hide()
}
}]
});
}).error(function (jqXHR, textStatus, errorThrown) {
RED.notify("Something went wrong. Please check the bridge's IP.",
{
modal: false,
fixed: false,
type: 'error'
})
return;
});
});
//#endregion
$("#revealBridgeSecrets").click(function () {
$("#DIVrevealBridgeSecrets").hide();
$.getJSON("KNXUltimateGetPlainHueBridgeCredentials?serverId=" + node.id, (data) => {
$("#TEXTrevealBridgeSecrets").val("Username:" + data.username + "\nClientkey:" + data.clientkey);
$("#DIVrevealBridgeSecrets").show();
}).error(function (jqXHR, textStatus, errorThrown) {
RED.notify("Something went wrong " + errorThrown,
{
modal: false,
fixed: false,
type: 'error'
})
$("#DIVrevealBridgeSecrets").hide();
});
})
},
oneditsave: function () {
// Return to the info tab
try {
RED.sidebar.show("info");
} catch (error) { }
},
label: function () {
return typeof this.name === undefined ? "Hue Bridge " + this.host : this.name + " " + this.host;
}
});
</script>
<script type="text/html" data-template-name="hue-config">
<div id="waitWindow" hidden>
<br/><br/><p align="center"><i class="fa-solid fa-hourglass-start fa-spin-pulse fa-4x"></i><br/><br/>
Wait, i'm talking to your HUE bridge...
</p>
</div>
<div id="mainWindow">
<div class="form-row">
<b><span data-i18n="hue-config.properties.title"></span></b>  <span style="color:red" data-i18n="[html]hue-config.properties.helplink"></span>
<p align='center'> <img src='https://raw.githubusercontent.com/Supergiovane/node-red-contrib-knx-ultimate/master/img/huehub.jpg' width='30%'></p>
<p><font color="red">CAUTION:</font> other coexisting third-party HUE nodes may cause problems and shall be uninstalled.</p>
</div>
<div class="form-row">
<label for="node-config-input-host">
<i class="fa fa-server"></i> IP</label>
<input type="text" id="node-config-input-host" placeholder="Write here the HUE bridge's IP, then click CONNECT">
</div>
<div class="form-row" id="divConnectButton">
<label><i class="fa fa-sign-in"></i> Register</label>
<input type="button" id="getinfocam" class="ui-button ui-corner-all ui-widget"
style="background-color:#AEE1FF;width:150px" value="CONNECT">
</div>
<div id="divDetails" hidden>
<div class="form-row">
<label for="node-config-input-name">
<i class="fa fa-tag"></i>
<span data-i18n="hue-config.properties.node-config-input-name" </span>
</label>
<input type="text" id="node-config-input-name"><data-i18n="[Title]hue-config.properties.node-config-input-name"
style="margin-left:5px;">
</div>
<div class="form-row">
<label for="node-config-input-bridgeid">
<i class="fa fa-tag"></i>
Bridge ID
</label>
<input type="text" id="node-config-input-bridgeid">
</div>
<div class="form-row">
<label for="node-config-input-username"> Username</label>
<input type="password" id="node-config-input-username" placeholder="" disabled>
</div>
<div class="form-row">
<label for="node-config-input-clientkey"> Client Key</label>
<input type="password" id="node-config-input-clientkey" placeholder="" disabled>
</div>
<div class="form-row" id="BUTTONrevealBridgeSecrets">
<label><i class="fa fa-magic"></i> Secrets</label>
<input type="button" id="revealBridgeSecrets" class="ui-button ui-corner-all ui-widget"
style="background-color:#ffb1ae;width:150px" value="Reveal">
</div>
<div class="form-row" id="DIVrevealBridgeSecrets" hidden>
<label><i class="fa fa-file-text-o"></i> -> </label>
<textarea type="textarea" rows="3" cols="250" id="TEXTrevealBridgeSecrets"></textarea>
</div>
</div>
</div>
</script>
<script type="text/markdown" data-help-name="hue-config">
This node registers to the Hue Bridge.
Just set the Bridge's IP and click **CONNECT**.
You can also manually set the credentials.
**General**
|Property|Description|
|--|--|
| IP | Put here the bridge's IP (the IP must be fixed) |
| CONNECT | This button will start the registering process with HUE Bridge. The bridge ID field is automatically read from the bridge after pressing **CONNECT**. You can then choose to register new credentials, or to **SET CREDENTIALS MANUALLY**. If you choose to set credentials manually, just fill in the fields. |
| Name | The bridge's name |
| Reveal | Reveals the secret key pair Username and Client Key, so you can copy and use it wherever you want. |
</script>