h3n3/nspanel-lovelace-ui
1
0
Fork 0
mirror of https://github.com/joBr99/nspanel-lovelace-ui.git synced 2025-12-20 14:37:01 +01:00
Code Issues Packages Projects Releases Wiki Activity

Added support for GridPages

Browse Source 
Added color support
Color interpolation
This commit is contained in:
britzelpuf
2022-03-21 00:00:54 +01:00
parent 7a37f58b51
commit a8f2c9d91d
2 changed files with 259 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

328
ioBroker/NsPanelTs.ts
View File

@@ -1,3 +1,13 @@
type RGB = {
red: number,
green: number,
blue: number
};
const Red: RGB = { red: 255, green: 0, blue: 0 };
const White: RGB = { red: 255, green: 255, blue: 255 };
const Blue: RGB = { red: 68, green: 115, blue: 158 };
type Payload = {
payload: string;
};
@@ -5,17 +15,21 @@ type Payload = {
type Page = {
type: string,
heading: string
}
};
interface PageEntities extends Page {
type: "cardEntities",
items: string[]
}
items: PageItem[]
};
interface PageGrid extends Page {
type: "cardGrid",
items: PageItem[]
};
interface PageThermo extends Page {
type: "cardThermo",
item: string
}
item: PageItem
};
type Config = {
panelRecvTopic: string,
panelSendTopic: string,
@@ -35,11 +49,21 @@ type Config = {
rightEntityIcon: number,
rightEntityText: string,
rightEntityUnitText: string | null,
pages: (PageThermo | PageEntities)[],
button1Page: (PageThermo | PageEntities | null),
button2Page: (PageThermo | PageEntities | null),
}
defaultColor: RGB,
gridPageOnColor: RGB,
gridPageOffColor: RGB,
pages: (PageThermo | PageEntities | PageGrid)[],
button1Page: (PageThermo | PageEntities | PageGrid | null),
button2Page: (PageThermo | PageEntities | PageGrid | null),
};
type PageItem = {
id: string,
icon: (string | undefined),
onColor: (RGB | undefined),
offColor: (RGB | undefined),
useColor: (boolean | undefined)
}
var subscriptions: any = {};
var pageId = 0;
@@ -49,10 +73,10 @@ var page1: PageEntities =
"type": "cardEntities",
"heading": "Haus",
"items": [
"alias.0.Rolladen_Eltern",
"alias.0.Erker",
"alias.0.Küche",
"alias.0.Wand"
<PageItem>{ id: "alias.0.Rolladen_Eltern" },
<PageItem>{ id: "alias.0.Erker" },
<PageItem>{ id: "alias.0.Küche", useColor: true },
<PageItem>{ id: "alias.0.Wand", useColor: true }
]
};
@@ -61,22 +85,21 @@ var page2: PageEntities =
"type": "cardEntities",
"heading": "Strom",
"items": [
"alias.0.Netz",
"alias.0.Hausverbrauch",
"alias.0.Pv",
"alias.0.Batterie"
<PageItem>{ id: "alias.0.Netz" },
<PageItem>{ id: "alias.0.Hausverbrauch" },
<PageItem>{ id: "alias.0.Pv" },
<PageItem>{ id: "alias.0.Batterie" }
]
};
var button1Page: PageEntities =
var button1Page: PageGrid =
{
"type": "cardEntities",
"heading": "Knopf1",
"type": "cardGrid",
"heading": "Radio",
"items": [
"alias.0.Schlafen",
"alias.0.Stern",
"delete",
"delete"
<PageItem>{ id: "alias.0.Radio.NJoy" },
<PageItem>{ id: "alias.0.Radio.Delta_Radio" },
<PageItem>{ id: "alias.0.Radio.NDR2" },
]
};
@@ -86,11 +109,8 @@ var button2Page: PageEntities =
"type": "cardEntities",
"heading": "Knopf2",
"items": [
"delete",
"delete",
"alias.0.Schlafen",
"alias.0.Stern"
<PageItem>{ id: "alias.0.Schlafen" },
<PageItem>{ id: "alias.0.Stern" }
]
};
@@ -111,14 +131,15 @@ var config: Config = {
timeFormat: "%H:%M",
dateFormat: "%A, %d. %B %Y",
weatherEntity: "alias.0.Wetter",
gridPageOffColor: Blue,
gridPageOnColor: White,
defaultColor: Blue,
temperatureUnit: "°C",
pages: [page1, page2,
{
"type": "cardThermo",
"heading": "Thermostat",
"item": "alias.0.WzNsPanel"
"item": <PageItem>{ id: "alias.0.WzNsPanel" }
}
],
button1Page: button1Page,
@@ -132,6 +153,9 @@ schedule("0 * * * *", function () {
SendDate();
});
// Only monitor the extra nodes if one or both are present
var updateArray: string[] = [];
if (config.rightEntity !== null && existsState(config.rightEntity)) {
@@ -201,18 +225,22 @@ function HandleMessage(typ: string, method: string, page: number, words: Array<s
}
function GeneratePage(page: Page): void {
var retMsgs: Array<Payload> = [];
if (page.type == "cardEntities") {
retMsgs = GenerateEntitiesPage(<PageEntities>config.pages[pageId])
} else if (page.type == "cardThermo") {
retMsgs = GenerateThermoPage(pageId, <PageThermo>config.pages[pageId])
}
SendToPanel(retMsgs)
switch (page.type) {
case "cardEntities":
SendToPanel(GenerateEntitiesPage(<PageEntities>page));
break;
case "cardThermo":
SendToPanel(GenerateThermoPage(<PageThermo>page));
break;
case "cardGrid":
SendToPanel(GenerateGridPage(<PageGrid>page));
break;
}
}
function HandleHardwareButton(method: string): void {
let page: (PageThermo | PageEntities);
let page: (PageThermo | PageEntities | PageGrid);
if (config.button1Page !== null && method == "button1") {
page = config.button1Page;
}
@@ -222,15 +250,18 @@ function HandleHardwareButton(method: string): void {
else {
return;
}
SendToPanel({ payload: "wake" });
switch (page.type) {
case "cardEntities":
SendToPanel(GenerateEntitiesPage(page));
break;
case "cardThermo":
SendToPanel(GenerateThermoPage(0, page));
break;
}
log("button1");
GeneratePage(page);
//SendToPanel({ payload: "wake" });
// switch (page.type) {
// case "cardEntities":
// SendToPanel(GenerateEntitiesPage(page));
// break;
// case "cardThermo":
// SendToPanel(GenerateThermoPage(0, page));
// break;
// }
}
function HandleStartupProcess(): void {
@@ -270,78 +301,110 @@ function SendTime(): void {
function GenerateEntitiesPage(page: PageEntities): Payload[] {
var out_msgs: Array<Payload> = [];
out_msgs = [{ payload: "pageType,cardEntities" }, { payload: "entityUpdHeading," + page.heading }]
let pageData = "entityUpd";
page.items.forEach(function (id, i) {
pageData += CreateEntity(id, i + 1);
})
out_msgs.push({ payload: pageData });
out_msgs.push({ payload: GeneratePageElements(page.items, 4) });
return out_msgs
}
function CreateEntity(id: string, placeId: number): string {
var type = "delete"
var iconId = 0
var name = "FriendlyName"
if (id == "delete") {
return ",delete,,,,"
}
function GenerateGridPage(page: PageGrid): Payload[] {
var out_msgs: Array<Payload> = [];
out_msgs = [{ payload: "pageType,cardGrid" }, { payload: "entityUpdHeading," + page.heading }]
out_msgs.push({ payload: GeneratePageElements(page.items, 6, true) });
return out_msgs
}
function GeneratePageElements(pageItems: PageItem[], maxItems: number, useColors: boolean = false): string {
let pageData = "entityUpd";
for (let index = 0; index < maxItems; index++) {
if (pageItems[index] !== undefined) {
pageData += CreateEntity(pageItems[index], index + 1, useColors);
}
else {
pageData += CreateEntity(<PageItem>{ id: "delete" }, index + 1);
}
}
return pageData;
}
function CreateEntity(pageItem: PageItem, placeId: number, useColors: boolean = false): string {
var iconId = 0
if (pageItem.id == "delete") {
return ",delete,,,,,"
}
var name: string;
var type: string;
// ioBroker
if (existsObject(id)) {
let o = getObject(id)
if (existsObject(pageItem.id)) {
let o = getObject(pageItem.id)
var val = null;
name = o.common.name.de
if (existsState(id + ".GET")) {
val = getState(id + ".GET").val;
RegisterEntityWatcher(id + ".GET", id, placeId);
if (existsState(pageItem.id + ".GET")) {
val = getState(pageItem.id + ".GET").val;
RegisterEntityWatcher(pageItem.id + ".GET", pageItem.id, placeId);
}
else if (existsState(id + ".SET")) {
val = getState(id + ".SET").val;
RegisterEntityWatcher(id + ".SET", id, placeId);
else if (existsState(pageItem.id + ".SET")) {
val = getState(pageItem.id + ".SET").val;
RegisterEntityWatcher(pageItem.id + ".SET", pageItem.id, placeId);
}
var iconColor = rgb_dec565(useColors ? config.gridPageOffColor : config.defaultColor);
switch (o.common.role) {
case "light":
type = "light"
iconId = 1
var optVal = "0"
if (val === true || val === "true")
if (val === true || val === "true") {
optVal = "1"
return "," + type + "," + id + "," + iconId + "," + "17299," + name + "," + optVal
iconColor = rgb_dec565(useColors ? config.gridPageOnColor : config.defaultColor);
}
return "," + type + "," + pageItem.id + "," + iconId + "," + iconColor + "," + name + "," + optVal
case "dimmer":
type = "light"
iconId = 1
var optVal = "0"
if (existsState(id + ".ON_ACTUAL")) {
val = getState(id + ".ON_ACTUAL").val;
RegisterEntityWatcher(id + ".ON_ACTUAL", id, placeId);
if (existsState(pageItem.id + ".ON_ACTUAL")) {
val = getState(pageItem.id + ".ON_ACTUAL").val;
RegisterEntityWatcher(pageItem.id + ".ON_ACTUAL", pageItem.id, placeId);
}
else if (existsState(id + ".ON_SET")) {
val = getState(id + ".ON_SET").val;
RegisterEntityWatcher(id + ".ON_SET", id, placeId);
else if (existsState(pageItem.id + ".ON_SET")) {
val = getState(pageItem.id + ".ON_SET").val;
RegisterEntityWatcher(pageItem.id + ".ON_SET", pageItem.id, placeId);
}
if (val === true || val === "true")
if (val === true || val === "true") {
optVal = "1"
return "," + type + "," + id + "," + iconId + "," + "17299," + name + "," + optVal
if ((pageItem.useColor || useColors) && existsState(pageItem.id + ".ACTUAL")) {
let iconColorRgb =
Interpolate(
pageItem.onColor !== undefined ? pageItem.onColor : config.gridPageOffColor,
pageItem.offColor !== undefined ? pageItem.offColor : config.gridPageOnColor,
(getState(pageItem.id + ".ACTUAL").val / 100)
);
iconColor = rgb_dec565(iconColorRgb);
}
}
return "," + type + "," + pageItem.id + "," + iconId + "," + iconColor + "," + name + "," + optVal
case "blind":
type = "shutter"
iconId = 0
return "," + type + "," + id + "," + iconId + "," + "17299," + name + ","
return "," + type + "," + pageItem.id + "," + iconId + "," + iconColor + "," + name + ","
case "info":
case "value.temperature":
type = "text"
var optVal = "0"
if (existsState(id + ".ON_ACTUAL")) {
optVal = getState(id + ".ON_ACTUAL").val + " " + GetUnitOfMeasurement(id + ".ON_ACTUAL");
RegisterEntityWatcher(id + ".ON_ACTUAL", id, placeId);
if (existsState(pageItem.id + ".ON_ACTUAL")) {
optVal = getState(pageItem.id + ".ON_ACTUAL").val + " " + GetUnitOfMeasurement(pageItem.id + ".ON_ACTUAL");
RegisterEntityWatcher(pageItem.id + ".ON_ACTUAL", pageItem.id, placeId);
}
else if (existsState(id + ".ACTUAL")) {
optVal = getState(id + ".ACTUAL").val;
RegisterEntityWatcher(id + ".ACTUAL", id, placeId);
else if (existsState(pageItem.id + ".ACTUAL")) {
optVal = getState(pageItem.id + ".ACTUAL").val;
RegisterEntityWatcher(pageItem.id + ".ACTUAL", pageItem.id, placeId);
}
if (o.common.role == "value.temperature") {
@@ -349,15 +412,15 @@ function CreateEntity(id: string, placeId: number): string {
optVal += config.temperatureUnit;
}
else {
optVal += GetUnitOfMeasurement(id + ".ACTUAL");
optVal += GetUnitOfMeasurement(pageItem.id + ".ACTUAL");
}
return "," + type + "," + id + "," + iconId + "," + "17299," + name + "," + optVal;
return "," + type + "," + pageItem.id + "," + iconId + "," + iconColor + "," + name + "," + optVal;
case "button":
type = "button";
iconId = 3;
var optVal = "PRESS";
return "," + type + "," + id + "," + iconId + "," + "17299," + name + "," + optVal;
return "," + type + "," + pageItem.id + "," + iconId + "," + + iconColor + "," + name + "," + optVal;
default:
return ",delete,,,,"
@@ -365,7 +428,7 @@ function CreateEntity(id: string, placeId: number): string {
}
}
return ",delete,,,,"
return ",delete,,,,,"
}
function RegisterEntityWatcher(id: string, entityId: string, placeId: number): void {
@@ -402,8 +465,8 @@ function GetUnitOfMeasurement(id: string): string {
return "";
}
function GenerateThermoPage(pageNum: number, page: PageThermo): Payload[] {
var id = page.item
function GenerateThermoPage(page: PageThermo): Payload[] {
var id = page.item.id
var out_msgs: Array<Payload> = [];
out_msgs.push({ payload: "pageType,cardThermo" });
@@ -432,11 +495,38 @@ function GenerateThermoPage(pageNum: number, page: PageThermo): Payload[] {
return out_msgs
}
function setIfExists(id: string, value: any, type: string | null = null): boolean {
if (type === null) {
if (existsState(id)) {
setState(id, value);
return true;
}
}
else {
let obj = getObject(id);
if (existsState(id) && obj.common.type !== undefined && obj.common.type === type) {
log(id)
setState(id, value);
return true;
}
}
return false;
}
function toggleState(id: string): boolean {
let obj = getObject(id);
if (existsState(id) && obj.common.type !== undefined && obj.common.type === "boolean") {
setState(id, !getState(id).val);
return true;
}
return false;
}
function HandleButtonEvent(words): void {
let id = words[4]
if (words[6] == "OnOff" && existsObject(id)) {
var action = false
if (words[7] == "1")
action = true
@@ -459,8 +549,12 @@ function HandleButtonEvent(words): void {
setState(id + ".STOP", true)
if (words[6] == "down")
setState(id + ".CLOSE", true)
if (words[6] == "button")
setState(id + ".SET", true)
if (words[6] == "button") {
let switchOn = true;
if (words[5] !== "1")
switchOn = false;
toggleState(id + ".SET") ? true : toggleState(id + ".ON_SET")
}
if (words[6] == "positionSlider")
setState(id + ".SET", parseInt(words[7]))
@@ -500,7 +594,7 @@ function GenerateDetailPage(type: string, entityId: string): Payload[] {
if (val)
switchVal = "1"
out_msgs.push({ payload: "entityUpdateDetail," + icon + "," + "17299," + switchVal + ",disable,disable,disable" })
out_msgs.push({ payload: "entityUpdateDetail," + icon + "," + "17299," + switchVal + ",disable,disable,disable" })
}
if (o.common.role == "dimmer") {
@@ -564,35 +658,31 @@ function HandleScreensaverUpdate(): void {
let temperature: string =
existsState(config.weatherEntity + ".ACTUAL") ? getState(config.weatherEntity + ".ACTUAL").val :
existsState(config.weatherEntity + ".TEMP") ? getState(config.weatherEntity + ".TEMP").val: "null";
existsState(config.weatherEntity + ".TEMP") ? getState(config.weatherEntity + ".TEMP").val : "null";
let humidity = getState(config.weatherEntity + ".HUMIDITY").val;
let payloadString =
"weatherUpdate,?" + GetAccuWeatherIcon(parseInt(icon)) + "?"
+ temperature + " " + config.temperatureUnit + "?26?"
+ humidity + " %?" ;
"weatherUpdate,?" + GetAccuWeatherIcon(parseInt(icon)) + "?"
+ temperature + " " + config.temperatureUnit + "?26?"
+ humidity + " %?";
if(existsState(config.leftEntity))
{
if (existsState(config.leftEntity)) {
let u1 = getState(config.leftEntity).val;
payloadString += config.leftEntityText + "?" + config.leftEntityIcon + "?" + u1 + " " + config.leftEntityUnitText + "?";
}
else
{
else {
payloadString += "???";
}
if(existsState(config.rightEntity))
{
if (existsState(config.rightEntity)) {
let u2 = getState(config.rightEntity).val;
payloadString += config.rightEntityText + "?" + config.rightEntityIcon + "?" + u2 + " " + config.rightEntityUnitText;
}
else
{
else {
payloadString += "??";
}
SendToPanel(<Payload>{ payload: payloadString});
SendToPanel(<Payload>{ payload: payloadString });
}
}
@@ -671,3 +761,23 @@ function GetAccuWeatherIcon(icon: number): number {
}
}
function GetBlendedColor(percentage: number): RGB {
if (percentage < 50)
return Interpolate(config.gridPageOffColor, config.gridPageOnColor, percentage / 50.0);
return Interpolate(Red, White, (percentage - 50) / 50.0);
}
function Interpolate(color1: RGB, color2: RGB, fraction: number): RGB {
var r: number = InterpolateNum(color1.red, color2.red, fraction);
var g: number = InterpolateNum(color1.green, color2.green, fraction);
var b: number = InterpolateNum(color1.blue, color2.blue, fraction);
return <RGB>{ red: Math.round(r), green: Math.round(g), blue: Math.round(b) };
}
function InterpolateNum(d1: number, d2: number, fraction: number): number {
return d1 + (d2 - d1) * fraction;
}
function rgb_dec565(rgb: RGB): number {
return ((Math.floor(rgb.red / 255 * 31) << 11) | (Math.floor(rgb.green / 255 * 63) << 5) | (Math.floor(rgb.blue / 255 * 31)))
}

54
ioBroker/README.md
View File

@@ -73,17 +73,19 @@ var config: Config = {
timeFormat: "%H:%M", // not used right now
dateFormat: "%A, %d. %B %Y", // not used right now
weatherEntity: "alias.0.Wetter",
defaultColor: RGB, // Default color of all elements
gridPageOnColor: RGB, // Default on color on grid page
gridPageOffColor: RGB, // Default off color on grid page
temperatureUnit: "°C", // Unit to append on temperature sensors
pages: [
{
"type": "cardEntities", // card type (cardEntities, cardThermo)
"heading": "Testseite", // heading
"items": [ // items array (up to 4 on cardEntities, 1 for cardThermo)
"alias.0.Rolladen_Eltern", // device which must be configured in the device panel. Use only the folder for the device, not the set, get states ...
"alias.0.Erker",
"alias.0.Küche",
"alias.0.Wand"
<PageItem>{ id: "alias.0.Rolladen_Eltern" }, // device which must be configured in the device panel. Use only the folder for the device, not the set, get states ...
<PageItem>{ id: "alias.0.Erker" },
<PageItem>{ id: "alias.0.Küche", useColor: true },
<PageItem>{ id: "alias.0.Wand", useColor: true }
]
},
@@ -91,10 +93,10 @@ var config: Config = {
"type": "cardEntities",
"heading": "Strom",
"items": [
"alias.0.Netz",
"alias.0.Hausverbrauch",
"alias.0.Pv",
"alias.0.Batterie"
<PageItem>{ id: "alias.0.Netz" },
<PageItem>{ id: "alias.0.Hausverbrauch" },
<PageItem>{ id: "alias.0.Pv" },
<PageItem>{ id: "alias.0.Batterie" }
]
},
@@ -109,18 +111,29 @@ var config: Config = {
};
```
The pageItem element:
```
type PageItem = {
id: string, // the element in ioBroker devices
icon: (string | undefined), // the icon which should be displayed instead of the default detected. (not implemented)
onColor: (RGB | undefined), // the color the item will get when active
offColor: (RGB | undefined), // the color the item will get when inactive
useColor: (boolean | undefined) // override colors, only Grid pages has colors enabled per default
}
```
If you want you can create dedicated objects, so you don't need to declare them again. Then you can use tehm in the pages array and button pages.
```
var button1Page: PageEntities =
var button1Page: PageGrid =
{
"type": "cardEntities",
"heading": "Knopf1",
"type": "cardGrid",
"heading": "Radio",
"items": [
"alias.0.Schlafen",
"alias.0.Stern",
"delete",
"delete"
<PageItem>{ id: "alias.0.Radio.NJoy" },
<PageItem>{ id: "alias.0.Radio.Delta_Radio" },
<PageItem>{ id: "alias.0.Radio.NDR2" },
]
};
```
@@ -134,11 +147,10 @@ pages: [
"type": "cardEntities",
"heading": "Strom",
"items": [
"alias.0.Netz",
"alias.0.Hausverbrauch",
"alias.0.Pv",
"alias.0.Batterie"
<PageItem>{ id: "alias.0.Netz" },
<PageItem>{ id: "alias.0.Hausverbrauch" },
<PageItem>{ id: "alias.0.Pv" },
<PageItem>{ id: "alias.0.Batterie" }
]
}]
```