h3n3/nspanel-lovelace-ui
1
0
Fork 0
mirror of https://github.com/joBr99/nspanel-lovelace-ui.git synced 2026-02-17 02:17:01 +01:00
Code Issues Packages Projects Releases Wiki Activity

Added links to ioBroker README

Browse Source
This commit is contained in:
Matthias Kleine
2022-08-27 12:28:57 +02:00
committed by GitHub
parent f946416d7d
commit 828a7dce94
1 changed files with 80 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
ioBroker/README.md
View File

@@ -10,35 +10,35 @@
- Screensaver Page with Time, Date and Weather Information. - Screensaver Page with Time, Date and Weather Information.
## Requirements ## Requirements
- ioBroker
- MQTT Broker/Client - [ioBroker](https://github.com/ioBroker/ioBroker)
- Javascript - [MQTT adapter](https://github.com/ioBroker/ioBroker.mqtt) in server mode or configured as client with Mosquitto (or another MQTT broker)
- devices (default) - [JavaScript adapter](https://github.com/ioBroker/ioBroker.javascript)
- all devices needs to be defined in the devices panel - [Devices adapter](https://github.com/ioBroker/ioBroker.devices)
- supported device roles are light, dimmer, blind, thermostat - [Accuweather adapter](https://github.com/iobroker-community-adapters/ioBroker.accuweather) for screensaver information
- all devices needs to be defined in the devices panel
## Note ## Note
Currently the names are pulled from the objects data field common.name.de.
If you use a different language please search and replace the "common.name.de" with your language. Currently the names are pulled from the objects data field ``common.name.de``.
If you use a different language please search and replace the ``common.name.de`` with your language.
You can find this in the device raw settings. You can find this in the device raw settings.
## Installation ## Installation
- Import this script into the ioBroker javascript instance and choose Typescript.
- Make sure the version of the adapter is not to old.
- Find the config variable and update to your needs.
- The format strings are not used right now.
- Make sure your device is connected with the mqtt instance. I didn't get it working with the sonoff adapter, but I didn't tried it too long.
- Create a state with a mqtt client or create one per hand. The mqtt adapter will not create the state CustomSend
- you only need to send a dummy message to cmnd/<yourPanel>/CustomSend
- then the state will be created
- Put the file icon_mapping.ts in the global folder
- Import this script into the ioBroker javascript instance and choose TypeScript. *Make sure the version of the adapter is not to old.*
- Find the config variable and update to your needs.
- Make sure your device is connected with the mqtt instance.
- Create the ``CustomSend`` state by
- sending a dummy message to ``cmnd/<yourPanel>/CustomSend`` (the mqtt adapter will create the object automatically)
- or create the object manually within ioBroker (expert mode required)
- Place the file ``icon_mapping.ts`` in a new script in the ``global`` folder (expert mode required)
## Hardware buttons ## Hardware buttons
If you like you can add special pages for the buttons. If you like you can add special pages for the buttons.
First you need to add this rule to Tasmota: Add this rule to Tasmota:
``` ```
Rule2 on Button1#state do Publish tele/%topic%/RESULT {"CustomRecv":"event,button1"} endon on Button2#state do Publish tele/%topic%/RESULT {"CustomRecv":"event,button2"} endon Rule2 on Button1#state do Publish tele/%topic%/RESULT {"CustomRecv":"event,button1"} endon on Button2#state do Publish tele/%topic%/RESULT {"CustomRecv":"event,button2"} endon
@@ -46,47 +46,57 @@ Rule2
``` ```
## Colors ## Colors
You can define colors this way and use them later in the PageItem element You can define colors this way and use them later in the PageItem element
```
```js
const BatteryFull: RGB = { red: 96, green: 176, blue: 62 } const BatteryFull: RGB = { red: 96, green: 176, blue: 62 }
const BatteryEmpty: RGB = { red: 179, green: 45, blue: 25 } const BatteryEmpty: RGB = { red: 179, green: 45, blue: 25 }
``` ```
## The config element in the script which needs to be configured ## The config element in the script which needs to be configured
```
```ts
var config: Config = { var config: Config = {
panelRecvTopic: "mqtt.0.tele.WzDisplay.RESULT", // This is the object where the panel send the data to. panelRecvTopic: 'mqtt.0.tele.WzDisplay.RESULT', // Object to receive data from the panel
panelSendTopic: "mqtt.0.cmnd.WzDisplay.CustomSend", // This is the object where data is send to the panel. panelSendTopic: 'mqtt.0.cmnd.WzDisplay.CustomSend', // Object to send data to the panel
firstScreensaverEntity: { ScreensaverEntity: "alias.0.Wetter.HUMIDITY", ScreensaverEntityIcon: "water-percent", ScreensaverEntityText: "Luft", ScreensaverEntityUnitText: "%" },
// Items which should be presented on the screensaver page // Items which should be presented on the screensaver page
secondScreensaverEntity: { ScreensaverEntity: "alias.0.Wetter.PRECIPITATION_CHANCE", ScreensaverEntityIcon: "weather-pouring", ScreensaverEntityText: "Regen", ScreensaverEntityUnitText: "%" }, firstScreensaverEntity: { ScreensaverEntity: 'alias.0.Wetter.HUMIDITY', ScreensaverEntityIcon: 'water-percent', ScreensaverEntityText: 'Luft', ScreensaverEntityUnitText: '%' },
thirdScreensaverEntity: { ScreensaverEntity: "alias.0.Batterie.ACTUAL", ScreensaverEntityIcon: "battery-medium", ScreensaverEntityText: "Batterie", ScreensaverEntityUnitText: "%" }, secondScreensaverEntity: { ScreensaverEntity: 'alias.0.Wetter.PRECIPITATION_CHANCE', ScreensaverEntityIcon: 'weather-pouring', ScreensaverEntityText: 'Regen', ScreensaverEntityUnitText: '%' },
fourthScreensaverEntity: { ScreensaverEntity: "alias.0.Pv.ACTUAL", ScreensaverEntityIcon: "solar-power", ScreensaverEntityText: "PV", ScreensaverEntityUnitText: "W" }, thirdScreensaverEntity: { ScreensaverEntity: 'alias.0.Batterie.ACTUAL', ScreensaverEntityIcon: 'battery-medium', ScreensaverEntityText: 'Batterie', ScreensaverEntityUnitText: '%' },
screenSaverDoubleClick: false, // Doubletouch needed for leaving screensaver. fourthScreensaverEntity: { ScreensaverEntity: 'alias.0.Pv.ACTUAL', ScreensaverEntityIcon: 'solar-power', ScreensaverEntityText: 'PV', ScreensaverEntityUnitText: 'W' },
timeoutScreensaver: 15, // Timeout for screensaver screenSaverDoubleClick: false, // Double touch needed to leave screensaver
dimmode: 8, // Display dim timeoutScreensaver: 15, // Timeout for screensaver
locale: "de_DE", // not used right now dimmode: 8, // Display dim
timeFormat: "%H:%M", // not used right now locale: 'de_DE', // not used right now
dateFormat: "%A, %d. %B %Y", // not used right now timeFormat: '%H:%M', // not used right now
weatherEntity: "alias.0.Wetter", dateFormat: '%A, %d. %B %Y', // not used right now
defaultColor: Off, // Default color of all elements weatherEntity: 'alias.0.Wetter',
defaultOnColor: RGB, // Default on state color for items defaultColor: Off, // Default color of all elements
defaultOffColor: RGB, // Default off state color for page defaultOnColor: RGB, // Default on state color for items
temperatureUnit: "°C", // Unit to append on temperature sensors defaultOffColor: RGB, // Default off state color for page
pages: [Wohnen, Strom, temperatureUnit: '°C', // Unit to append on temperature sensors
pages: [
Wohnen,
Strom,
{ {
"type": "cardThermo", type: 'cardThermo',
"heading": "Thermostat", heading: 'Thermostat',
"useColor": true, useColor: true,
"items": [<PageItem>{ id: "alias.0.WzNsPanel" }] items:
[<PageItem>{ id: 'alias.0.WzNsPanel' }
]
} }
], ],
button1Page: button1Page, // A cardEntities, cardThermo or nothing. This will be opened when pressing button1 button1Page: button1Page, // A cardEntities, cardThermo or nothing. This will be opened when pressing button1
button2Page: button2Page // you guess it button2Page: button2Page // you guess it
}; };
``` ```
The pageItem element: The pageItem element:
```
```ts
type PageItem = { type PageItem = {
id: string, // the element in ioBroker devices id: string, // the element in ioBroker devices
icon: (string | undefined), // the icon which should be displayed instead of the default detected. (not implemented) icon: (string | undefined), // the icon which should be displayed instead of the default detected. (not implemented)
@@ -101,37 +111,37 @@ type PageItem = {
} }
``` ```
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. 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.
``` ```ts
var button1Page: PageGrid = const button1Page: PageGrid =
{ {
"type": "cardGrid", type: 'cardGrid',
"heading": "Radio", heading: 'Radio',
"useColor": true, // should colors be enabled on this page, can be overridden in PageItem useColor: true, // should colors be enabled on this page, can be overridden in PageItem
"items": [ items: [
<PageItem>{ id: "alias.0.Radio.NJoy" }, <PageItem>{ id: 'alias.0.Radio.NJoy' },
<PageItem>{ id: "alias.0.Radio.Delta_Radio" }, <PageItem>{ id: 'alias.0.Radio.Delta_Radio' },
<PageItem>{ id: "alias.0.Radio.NDR2" }, <PageItem>{ id: 'alias.0.Radio.NDR2' },
] ]
}; };
``` ```
Pages array can look like this, so you can add the pages as object or define them in the array itself. This is up to you. Pages array can look like this, so you can add the pages as object or define them in the array itself. This is up to you.
``` ```ts
pages: [ pages: [
button1Page, button1Page,
{ {
"type": "cardEntities", type: 'cardEntities',
"heading": "Strom", heading: 'Strom',
"useColor": true, // should colors be enabled on this page, can be overridden in PageItem useColor: true, // should colors be enabled on this page, can be overridden in PageItem
"items": [ items: [
<PageItem>{ id: "alias.0.Netz", icon: "flash", interpolateColor: true, offColor: BatteryFull, onColor: Red, minValue: -1000, maxValue: 1000 }, <PageItem>{ id: 'alias.0.Netz', icon: 'flash', interpolateColor: true, offColor: BatteryFull, onColor: Red, minValue: -1000, maxValue: 1000 },
<PageItem>{ id: "alias.0.Hausverbrauch", icon: "flash", interpolateColor: true, offColor: BatteryFull, onColor: Red, maxValue: 1000 }, <PageItem>{ id: 'alias.0.Hausverbrauch', icon: 'flash', interpolateColor: true, offColor: BatteryFull, onColor: Red, maxValue: 1000 },
<PageItem>{ id: "alias.0.Pv", name: "Solar" ,icon: "solar-power", interpolateColor: true, offColor: Off, onColor: BatteryFull, maxValue: 1000 }, <PageItem>{ id: 'alias.0.Pv', name: 'Solar', icon: 'solar-power', interpolateColor: true, offColor: Off, onColor: BatteryFull, maxValue: 1000 },
<PageItem>{ id: "alias.0.Batterie", icon: "battery-medium", interpolateColor: true, offColor: BatteryEmpty, onColor: BatteryFull } <PageItem>{ id: 'alias.0.Batterie', icon: 'battery-medium', interpolateColor: true, offColor: BatteryEmpty, onColor: BatteryFull }
] ]
}] }
];
``` ```