Überschreibungen
Alle Elemente, die mit einer Datenquelle versehen werden können, können Überschreibungen erhalten. Diese Überschreibungen dienen der benutzerdefinierten Darstellung der Elemente, basierend des aktuellen Wertes.
Um Überschreibungen auf den Elementen anzuwenden, gehe auf den Tab ‚erweitert‘ und wähle ganz unten ‚Überschreibung festlegen‘ aus. Daraufhin öffnet sich ein Dialog, in dem die Bedingungen nach folgendem Muster eingegeben werden können. Auch bieten die Überschreibungen „spezielle Überschreibungen“ an, die nicht nur aus reinem CSS bestehen, sondern auch Funktionen beinhalten können. Diese sind in der unten stehenden Tabelle beschrieben!
{
"Bedingung(>,>=,=,<,<=)": {
"cssStyle-Eigenschaft": "Wert",
"spezielleÜberschreibung": "siehe Tabelle unten"
}
}
Einfache Überschreibung mit einer Bedingung
{
">1000": {
"fontFamily": "Comic Sans MS",
"fontSize": 14,
"fill": "#FF0000"
}
}
Dadurch wird ein Textelement mit der Schriftgröße 14 Pixel, der Schriftart Family Comic und der Füllfarbe FF0000 (rot) formatiert.
Bitte beachten:
Alle verfügbaren CSS-Eigenschaften können auf diese Überschreibungen angewendet werden. Manchmal enthalten sie ein Minus, welches Sie entfernen müssen. Bedeutet: font-family wird zu fontFamily, animation-direction wird zu animationDirection und so weiter.
Vollständige CSS-Eigenschaften finden Sie hier: https://www.w3schools.com/cssref/index.php
Du kannst weitere Abhängigkeiten durch Komma getrennt hinzufügen. Siehe nächsten Abschnitt.
Mit 2 Bedingungen
{
">1000": {
"fontFamily": "Comic Sans MS",
"fontSize": 14,
"fill": "#FF0000"
},
"<1000": {
"fontFamily": "Times New Roman",
"fontSize": 16,
"fill": "#538ea3"
}
}
Du kannst auch „>=“ und „==“ als Bedingungen verwenden, was Dir mehr Flexibilität bietet.
Bitte beachten:
Die Überschreibungen kehren nicht von selbst zum ursprünglichen Layout zurück. Das heißt, wenn Du eine Eigenschaft für einen Wert eingestellt hast und dieser über- oder unterschritten wird, musst Du auch die gegenteilige Eigenschaft für die jeweilige Über- oder Unterschreitung festlegen.
Beispiel für Animationslinien
Animationslinien bieten 2 getrennte Überschreibungen an. Einmal für die Linie und einmal für die Animation selbst.
Im folgenden Beispiel wird die Animation passend gesteuert:
{
">60": {
"stroke": "rgba(255, 115, 131,1)",
"filter": "drop-shadow(rgba(255, 115, 131, 0.8) 0px 3px 3px)"
}
}
Im obigen Beispiel fügst Du den Punkten eine hellrote Farbe (stroke) und einen Schatten (filter) hinzu, wenn der Wert größer als 60 ist. Um die Linie zu ändern, kannst Du dieselben Einstellungen innerhalb der Überschreibung für die Linie verwenden.
Animationslinie in Abhängigkeit einer anderen Datenquelle ein-/ausblenden
Für einen Anwendungsfall, wo eine Linie nur dargestellt werden soll, wenn eine andere Bedingung erfüllt ist, kannst Du auch einen zusätzlichen Datenpunkt abfragen, der auf diese Bedingung geprüft wird. Dies ist z.B. im folgenden Fall sinnvoll, wenn das Auto den aktuellen Ladestrom übermittelt, man jedoch überprüfen möchte, ob das Fahrzeug auch gerade zu Hause auflädt.
{
"default": {
"display": "() => {0_userdata.0.example_state} == true ? 'inline-block' : 'none'"
}
}
Wir legen hier einen Default Schlüssel an, der für diese Linie immer gültig ist, wenn andere Bedingungen nicht zutreffen. Die Eigenschaft display ist die CSS-Eigenschaft der Anzeige. Hier wird geprüft, ob der Datenpunkt true ist. Wenn ja, wird inline-block (Anzeige der Linie/Animation) zurückgegeben. Andernfalls none – keine Anzeige.
Bitte beachten: Der Datenpunkt wird abgefragt, sobald der Datenpunkt des Elements, auf dem die Überschreibung liegt, aktualisiert wird. Somit kann eine Verzögerung auftreten!
Spezielle Überschreibungen
| Schlüssel | Erklärung | Javascript |
|---|---|---|
| value | Diese Eigenschaft überschreibt den Wert | Ja |
| unit | Diese Eigenschaft überschreibt die Einheit | Ja |
| default | Diese Eigenschaft setzt Standard-Werte, wenn keine Bedingung erfüllt ist | Ja |
| append | Hängt einen Text an den Wert an | Nein |
| prepend | Stellt einen Text dem Wert voran | Nein |
| borderfillcolor | Randfarbe des Kreises oder Rechtecks abhängig vom Wert (Hierfür muss bereits ‚Kontur entsprechend dem Wert ausfüllen‘ aktiviert sein) | Nein |
| bordercolor | Farbe des nicht gefüllten Bereichs bei Kreisen oder Rechtecken (Auch hier muss ‚Kontur entsprechend dem Wert ausfüllen‘ bereits aktiviert sein) | Nein |
| fillcolor | Füllfarbe des Kreises oder Rechteck | Nein |
| img_url | Adresse eines Bildes ändern (z.B. Bild einer Wallbox und wenn das Auto angeschlossen ist, erscheint ein Stecker) | Nein |
| icon | Icon abändern (z.B. wie oben). Das Icon kann mit 2 weiteren Parametern angefordert werden:mdi:transmission-tower-export?flip=horizontal&rotate=270degFlip Symbol kann horizontal und/oder vertikal gespiegelt werden Rotate Symbol kann um 90, 180 und 270 Grad gedreht werden | Nein |
Mit Javascript
{
">=1000": {
"unit": "kW",
"value": "val => parseFloat(val/1000).toFixed(2)"
},
"default": {
"unit": "W",
"value": "val => val.toFixed(0)"
}
}
Hier wird die Einheit auf ‚kW‘ geändert und der Wert als Gleitkommazahl mit 2 Dezimalstellen berechnet, wenn der Rohwert 1000 überschreitet oder beträgt. Liegt der Wert unter 1000, werden alle Dinge auf den Standardschlüssel gesetzt, also eine Einheit mit ‚W‘ und dem Wert selbst ohne Dezimalstellen.
Abfrage mit zusätzlichen Datenpunkten
{
"default": {
"value": "val => Number({0_userdata.0.Energiefluss_Test.verbrauch_1}) + val;"
}
}
Bei Änderung der zugehörigen Datenquelle des Elements, wird zusätzlich der Wert der angegebenen Datenquelle abgeholt und kann für weitere Berechnungen verwendet werden. In diesem Fall wandeln wir ihn in eine Zahl um und verwenden die Additionsfunktion, um den Wert der zugehörigen Datenquelle hinzuzufügen. Der zusätzlich abzufragende Datenpunkt muss in geschweiften Klammern {state} angegeben werden, damit er erkannt wird.
Komplexere Berechnung mit zusätzlichen Datenpunkten
Es ist auch möglich, komplexere Funktionen zu erstellen, die mit Variablen arbeiten. Im folgenden Beispiel berechnen wir den Wert anhand eines prozentualen Datenpunktes, wenn die maximale Leistung von z.B. 3000W bekannt ist.
{
"default": {
"value": "val => { const percentInWatt=Number(3000*{0_userdata.0.Energiefluss_Test.percentState})/100; return val - percentInWatt; }"
}
}
Die Wahl des Variablennamen bleibt dem Benutzer überlassen – muss jedoch dem JavaScript-Standard entsprechen. Wir weisen hier der Variablen percentInWatt das Ergebis der Berechnung Number(3000*{0_userdata.0.Energiefluss_Test.percentState})/100; zu. Danach ziehen wir diesen Wert vom originalen Wert der Datenquelle ab und geben das Ergebnis über das return Statement zurück.
Bitte beachten:
Der zusätzlich bereitgestellte Datenpunkt wird nur abgeholt, wenn sich der zugehörige Datenpunkt des Elements ändert!
Für Füllungen und Ränder
{
">0": {
"borderfillcolor": "#FF0000",
"bordercolor": "rgb(255,206,74)",
"fillcolor": "#FF0000"
},
">500": {
"borderfillcolor": "rgb(255,206,74)",
"bordercolor": "#000000",
"fillcolor": "rgb(255,206,74)"
},
">1000": {
"borderfillcolor": "#A1D343",
"bordercolor": "rgb(255,206,74)",
"fillcolor": "#A1D343"
}
}
In diesem Fall wird der Rand des Kreises oder Rechtecks auf drei Arten gestaltet. Über 0, über 500 und über 1000. Damit erhält man je nach Wert einen schönen farbigen Rand. Nützlich für Produktionskreise oder Rechtecke, um visuell anzuzeigen, dass die Produktion niedrig (rot), durchschnittlich (gelb) oder gut (grün) ist.
Mit direktem Vergleich des Wertes
Überschreibungen können auch auf direkte Werte abgestimmt sein. Wenn Du z.B. in einem Datenpunkt von einem Wetter-Adapter die Jahreszeit abfragst und dieser Frühjahr, Sommer, Herbst und Winter liefert, kannst Du direkt auf diese Werte in den Überschreibungen zugreifen und Bedingungen an sie knüpfen, um z.B. einen passenden Text, ein Symbol anzuzeigen oder eben eine passende Farbe zu nutzen.
{
"Winter": {
"fill": "red"
},
"Sommer": {
"fill": "rgb(161,211,67)"
}
}
Hier wird das Element z.B. mit einer roten Füllung versehen, wenn der Datenpunkt Winter beinhaltet.
Icons
Auch lassen sich Icons in Abhängigkeit des Wertes ersetzen. Hier möchten wir erreichen, das z.B. wenn der Wert der Netzeinspeisung größer als 0 ist, das Icon mdi:transmission-tower-export horizontal gespiegelt (flip=horizontal) und um 90 Grad im Uhrzeigersinn gedreht (rotate=90deg) ist.
{
">0": {
"icon": "mdi:transmission-tower-export?flip=horizontal&rotate=90deg"
}
}