mirror of
https://github.com/joBr99/nspanel-lovelace-ui.git
synced 2026-02-21 13:44:45 +01:00
Updated ioBroker Card Definitionen (Seiten) (markdown)
@@ -3,7 +3,7 @@
|
|||||||
|
|
||||||
4 vertikal angeordnete Steuerelemente (Erstellung der "PageItem" siehe [ioBroker ALIAS Definition](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen))
|
4 vertikal angeordnete Steuerelemente (Erstellung der "PageItem" siehe [ioBroker ALIAS Definition](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen))
|
||||||
|
|
||||||
```
|
```ruby
|
||||||
var Sprechender_eindeutiger_Seitenname = <PageEntities>
|
var Sprechender_eindeutiger_Seitenname = <PageEntities>
|
||||||
{
|
{
|
||||||
"type": "cardEntities",
|
"type": "cardEntities",
|
||||||
@@ -28,7 +28,7 @@ var Sprechender_eindeutiger_Seitenname = <PageEntities>
|
|||||||
|
|
||||||
6 horizontal angeordnete Steuerelemente (in 2 Reihen je 3 Steuerelemente) (Erstellung der "PageItem" siehe [ioBroker ALIAS Definition](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen))
|
6 horizontal angeordnete Steuerelemente (in 2 Reihen je 3 Steuerelemente) (Erstellung der "PageItem" siehe [ioBroker ALIAS Definition](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen))
|
||||||
|
|
||||||
```
|
```ruby
|
||||||
var Sprechender_eindeutiger_Seitenname = <PageGrid>
|
var Sprechender_eindeutiger_Seitenname = <PageGrid>
|
||||||
{
|
{
|
||||||
"type": "cardGrid",
|
"type": "cardGrid",
|
||||||
@@ -61,7 +61,7 @@ Es wird muss ein Alias vom Gerätetyp "Feueralarm" wie folgt erstellt werden:
|
|||||||

|

|
||||||
|
|
||||||
**Beispiel der Seitenerstellung:**
|
**Beispiel der Seitenerstellung:**
|
||||||
```
|
```ruby
|
||||||
let Unlock_Service = <PageUnlock>
|
let Unlock_Service = <PageUnlock>
|
||||||
{
|
{
|
||||||
'type': 'cardUnlock',
|
'type': 'cardUnlock',
|
||||||
@@ -76,7 +76,7 @@ let Unlock_Service = <PageUnlock>
|
|||||||
|
|
||||||
(Erstellung des alias.0.Alarm siehe [ioBroker ALIAS Definition](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen))
|
(Erstellung des alias.0.Alarm siehe [ioBroker ALIAS Definition](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen))
|
||||||
|
|
||||||
```
|
```ruby
|
||||||
let Alarmseite = <PageAlarm>
|
let Alarmseite = <PageAlarm>
|
||||||
{
|
{
|
||||||
"type": "cardAlarm",
|
"type": "cardAlarm",
|
||||||
@@ -116,7 +116,7 @@ let Alarmseite = <PageAlarm>
|
|||||||
> **Definition ab TS-Version 3.9.0** (Breaking Changes)
|
> **Definition ab TS-Version 3.9.0** (Breaking Changes)
|
||||||
|
|
||||||
**alexa2-Adapter**
|
**alexa2-Adapter**
|
||||||
```
|
```ruby
|
||||||
let Alexa = <PageMedia>
|
let Alexa = <PageMedia>
|
||||||
{
|
{
|
||||||
'type': 'cardMedia',
|
'type': 'cardMedia',
|
||||||
@@ -152,7 +152,7 @@ let Alexa = <PageMedia>
|
|||||||
```
|
```
|
||||||
|
|
||||||
**spotify-premium Adapter**
|
**spotify-premium Adapter**
|
||||||
```
|
```ruby
|
||||||
let SpotifyPremium = <PageMedia>
|
let SpotifyPremium = <PageMedia>
|
||||||
{
|
{
|
||||||
"type": "cardMedia",
|
"type": "cardMedia",
|
||||||
@@ -179,7 +179,7 @@ let SpotifyPremium = <PageMedia>
|
|||||||
```
|
```
|
||||||
**Volumio-Player**
|
**Volumio-Player**
|
||||||
|
|
||||||
```
|
```ruby
|
||||||
let VolumioBoss = <PageMedia>
|
let VolumioBoss = <PageMedia>
|
||||||
{
|
{
|
||||||
'type': 'cardMedia',
|
'type': 'cardMedia',
|
||||||
@@ -222,7 +222,7 @@ let VolumioBoss = <PageMedia>
|
|||||||

|

|
||||||
|
|
||||||
> Beispiel: Erstellung des "PageItem" und Alias vom Typ "Info" siehe (https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker---FAQ-&-Anleitungen#5-qr-code-page) by Kuckuckmann
|
> Beispiel: Erstellung des "PageItem" und Alias vom Typ "Info" siehe (https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker---FAQ-&-Anleitungen#5-qr-code-page) by Kuckuckmann
|
||||||
```
|
```ruby
|
||||||
var Sprechender_eindeutiger_Seitenname = <PageQR>
|
var Sprechender_eindeutiger_Seitenname = <PageQR>
|
||||||
{
|
{
|
||||||
"type": "cardQR",
|
"type": "cardQR",
|
||||||
@@ -235,7 +235,7 @@ var Sprechender_eindeutiger_Seitenname = <PageQR>
|
|||||||
```
|
```
|
||||||
|
|
||||||
**Parameter:**
|
**Parameter:**
|
||||||
```
|
```ruby
|
||||||
hidePassword: true/false
|
hidePassword: true/false
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -254,7 +254,7 @@ hidePassword: true/false
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
```
|
```ruby
|
||||||
var Sprechender_eindeutiger_Seitenname = <PageThermo>
|
var Sprechender_eindeutiger_Seitenname = <PageThermo>
|
||||||
{
|
{
|
||||||
"type": "cardThermo",
|
"type": "cardThermo",
|
||||||
@@ -289,7 +289,7 @@ stepValue: Schrittgröße der Temperaturänderungen (Beispiel: 0,5°C Schritte e
|
|||||||
|
|
||||||
Beispiel: Erstellung des "PageItem" und Alias vom Typ "Info"
|
Beispiel: Erstellung des "PageItem" und Alias vom Typ "Info"
|
||||||
|
|
||||||
```
|
```ruby
|
||||||
var CardPowerExample = <PagePower>
|
var CardPowerExample = <PagePower>
|
||||||
{
|
{
|
||||||
"type": "cardPower",
|
"type": "cardPower",
|
||||||
@@ -308,7 +308,7 @@ var CardPowerExample = <PagePower>
|
|||||||
**Parameter:**
|
**Parameter:**
|
||||||
Es gibt nur einen einzigen externen Datenpunkt (anzulegen in **0_userdata.0.**), auf den ein Alias vom Typ "**Info**" zugreift. Dieser muss mit einem JSON-Objekt in nachfolgender Struktur befüllt werden. Der Alias-Datenpunkt "**ACTUAL**" sollte hierbei auf diesen neuen Datenpunkt in "**0_userdata.0.**) gebunden sein.
|
Es gibt nur einen einzigen externen Datenpunkt (anzulegen in **0_userdata.0.**), auf den ein Alias vom Typ "**Info**" zugreift. Dieser muss mit einem JSON-Objekt in nachfolgender Struktur befüllt werden. Der Alias-Datenpunkt "**ACTUAL**" sollte hierbei auf diesen neuen Datenpunkt in "**0_userdata.0.**) gebunden sein.
|
||||||
|
|
||||||
```
|
```ruby
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
"id": 0,
|
"id": 0,
|
||||||
@@ -396,7 +396,7 @@ Die Datenpunkte zu den entsprechenden Piktogrammen (id's) sollten mit den jeweil
|
|||||||
|
|
||||||
Für eine abweichende Darstellung ist das JSON entsprechend zu befüllen. Wenn eine Entität nicht visualisiert werden soll, so sollte in allen Werten zur id ein leerer String **""** übergeben werden. Beispiel:
|
Für eine abweichende Darstellung ist das JSON entsprechend zu befüllen. Wenn eine Entität nicht visualisiert werden soll, so sollte in allen Werten zur id ein leerer String **""** übergeben werden. Beispiel:
|
||||||
|
|
||||||
```
|
```ruby
|
||||||
{
|
{
|
||||||
"id": 3,
|
"id": 3,
|
||||||
"value": "",
|
"value": "",
|
||||||
@@ -412,7 +412,7 @@ Für eine abweichende Darstellung ist das JSON entsprechend zu befüllen. Wenn e
|
|||||||
|
|
||||||
Ein kleines einfaches Javascript von @l4rs, für die erzeugung des JSON-String.
|
Ein kleines einfaches Javascript von @l4rs, für die erzeugung des JSON-String.
|
||||||
|
|
||||||
```
|
```ruby
|
||||||
/**
|
/**
|
||||||
* generate an JSON for display Power-Card on NSPanel
|
* generate an JSON for display Power-Card on NSPanel
|
||||||
* Source: https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Card-Definitionen-(Seiten)#cardpower-ab-ts-script-v341
|
* Source: https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Card-Definitionen-(Seiten)#cardpower-ab-ts-script-v341
|
||||||
@@ -486,7 +486,7 @@ Es wird lediglich ein Alias vom Gerätetyp "Info" benötigt:
|
|||||||

|

|
||||||
|
|
||||||
**PageItem Beispiel:**
|
**PageItem Beispiel:**
|
||||||
```
|
```ruby
|
||||||
let CardChartExample = <PageChart>
|
let CardChartExample = <PageChart>
|
||||||
{
|
{
|
||||||
"type": "cardChart",
|
"type": "cardChart",
|
||||||
@@ -511,7 +511,7 @@ let CardChartExample = <PageChart>
|
|||||||
[Zum Blockly](https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/Blockly/CardChart.xml)
|
[Zum Blockly](https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/Blockly/CardChart.xml)
|
||||||
|
|
||||||
## **Javascript für History Adapter**
|
## **Javascript für History Adapter**
|
||||||
```
|
```ruby
|
||||||
var sourceDP = 'alias.0.Wohnzimmer.Heizung.ACTUAL';
|
var sourceDP = 'alias.0.Wohnzimmer.Heizung.ACTUAL';
|
||||||
var targetDP = '0_userdata.0.Test.chartTest';
|
var targetDP = '0_userdata.0.Test.chartTest';
|
||||||
var rangeHours = 24;
|
var rangeHours = 24;
|
||||||
@@ -580,7 +580,7 @@ on({id: sourceDP, change: "any"}, async function (obj) {
|
|||||||
* yAxisTicks: Skala des Wertebereiches der Y-Achse als Array oder ObjektId zu einem Datenpunkt welcher die Skala enthält
|
* yAxisTicks: Skala des Wertebereiches der Y-Achse als Array oder ObjektId zu einem Datenpunkt welcher die Skala enthält
|
||||||
* onColor: Farbe des Graphen
|
* onColor: Farbe des Graphen
|
||||||
|
|
||||||
```
|
```ruby
|
||||||
let CardLChartExample = <PageChart>
|
let CardLChartExample = <PageChart>
|
||||||
{
|
{
|
||||||
"type": "cardLChart",
|
"type": "cardLChart",
|
||||||
@@ -606,7 +606,7 @@ Zu definieren ist der Pfad für den Datenpunkt (im Beispiel 0.userdata.0.NSPanel
|
|||||||
Es ist darauf zu achten, die Anzahl an Werten aus der Datenbank möglichst gering zu halten. Im nachfolgenden Beispiel wurden diese nochmals aggregiert. Die Summe an Zeichen für das Payload an die HMI des NSPanels ist begrenzt. Falls zu viele Werte verarbeitet werden, wird der Payload von der HMI gekürzt und die folge wäre eine schwarze Seite resultierend aus einem Fehlerzustand.
|
Es ist darauf zu achten, die Anzahl an Werten aus der Datenbank möglichst gering zu halten. Im nachfolgenden Beispiel wurden diese nochmals aggregiert. Die Summe an Zeichen für das Payload an die HMI des NSPanels ist begrenzt. Falls zu viele Werte verarbeitet werden, wird der Payload von der HMI gekürzt und die folge wäre eine schwarze Seite resultierend aus einem Fehlerzustand.
|
||||||
|
|
||||||
## **Javascript für Influx2**
|
## **Javascript für Influx2**
|
||||||
```
|
```ruby
|
||||||
const Debug = true;
|
const Debug = true;
|
||||||
|
|
||||||
const NSPanel_Path = '0_userdata.0.NSPanel.';
|
const NSPanel_Path = '0_userdata.0.NSPanel.';
|
||||||
@@ -704,7 +704,7 @@ on({ id: Sensor, change: 'any' }, async function (obj) {
|
|||||||
```
|
```
|
||||||
|
|
||||||
## **Javascript für History adapter**
|
## **Javascript für History adapter**
|
||||||
```
|
```ruby
|
||||||
const sourceDP = 'alias.0.Wohnzimmer.Heizung.ACTUAL';
|
const sourceDP = 'alias.0.Wohnzimmer.Heizung.ACTUAL';
|
||||||
const targetDP = '0_userdata.0.Test.chartTest';
|
const targetDP = '0_userdata.0.Test.chartTest';
|
||||||
const numberOfHoursAgo = 24; // Period of time in hours which shall be visualized
|
const numberOfHoursAgo = 24; // Period of time in hours which shall be visualized
|
||||||
|
|||||||
Reference in New Issue
Block a user