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

Updated ioBroker FAQ & Anleitungen (markdown)

kuckuckmann
2023-09-06 21:46:41 +02:00
parent dd593e38cf
commit 3ea89465b5
1 changed files with 50 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
ioBroker---FAQ-&-Anleitungen.md

@@ -27,6 +27,7 @@ In diesem Thread möchte ich damit beginnen, Einstellungen und Konfigurationen a
**21.)** WLED
**22.)** Fahrplananzeiger
**23.)** Shelly DUO Lampen
**24.)** Dynamisches Icon (CardGrid)
# **Changelog**
@@ -68,6 +69,7 @@ In diesem Thread möchte ich damit beginnen, Einstellungen und Konfigurationen a
09.04.2023 - Fahrplananzeiger - Erstellt
14.08.2023 - Shelly DUO lampen - Erstellt
15.08.2023 - Index Jump Menü - Erstellt
06.09.2023 - Dynamisches Icon (CardGrid) - Erstellt
</details>
@@ -1143,4 +1145,51 @@ let FahrplanEntities = <PageEntities>
<PageItem>{ id: 'alias.0.Shelly.ShellyDUO01', name: 'Shelly Duo GU10', minValueBrightness: 0, maxValueBrightness: 100, minValueColorTemp: 3000, maxValueColorTemp: 6465, interpolateColor: true, modeList: ['Color','White'], inSel_ChoiceState: true}
```
***
***
## **23.) Dynamisches Icon** (CardGrid)
* **Beschreibung:**
Auf der CardGrid kann man nun das Icon dynamisch austauschen lassen. Im Gegensatz zum Statewechsel bei Aliasen wie **Light**, **Door** oder **Window** wo man im PageItem **icon** und **icon2** vergeben kann, bietet sich mit dieser neuen die Funktion die Möglichkeit das Icon nach Belieben zu ändern.
* **Voraussetzung**
* TS-Skript in der Version 4.2.1.4
* Ein definiertes Skript welches Hilft das Icon zu tauschen
* Einen Alias vom Typ Info
* Einen Hilfs-Datenpunkt
* Einen Satz an Icons, die in Abhängigkeit vom Satus angezeigt werden sollen
* **Konfiguration**
**Hilfs-Datenpunkt**
Es wird ein Hilfs-Datenpunkt vom Typ String benötigt, in dem der Icon-Name geschrieben wird
**Alias**
Es wird ein Alias vom Typ **Info** benötigt. Der State **ACTUAL** (meist vom Typ Number) wird auf den Datenpunkt verlinkt, welcher den Wert enthält, anhand dessen das Skript auswerten kann, welches Icon zu welchem Status gesetzt werden soll.
Zusätzlich muss ein manueller State **USERICON** vom Typ String angelegt werden, welcher auf den Hilfs-Datenpunkt gelinkt wird.
**Skript**
Wie beschrieben wird ein Skript benötigt, welches einen Wert auswertet und anhand einer zu überlegenden Definition ein entsprechendes Icon in den Hilfs-Datenpunkt schreibt. Nachfolgend ein Screenshot von einem Beispiel Blockly welches für den Batteriestatus den Prozentwert auswertet und je nach Wert ein Icon setzt:
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/99131208/b120d3b7-2cbb-4688-a5fc-b1893afa0371)
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/99131208/63e008ba-cf48-4cd6-a32c-0898fc88ea3c)
Das Blockly an sich wird hier nicht zur Verfügung gestellt.
**TS-Skript**
Im TS-Skript bedarf es auf einer CardGrid ein Pageitem. Es muss dabei kein Icon definiert werden, da dieses über den Alias kommt.
```
<PageItem>{ id: 'alias.0.TestCard.BatteryCharge', prefixName: 'Batterie: ', name: "getState('state.batteryCharge').val", suffixName: '%', offColor: White , onColor: White, },
```
**Anwedungsbeispiele**
* WLAN Signalstärke darstellen
* Batterie/Akku Stand darstellen
***