Überschreibungen

Du bist hier:
Lesedauer: 5 Minuten

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!

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
"Bedingung(>,>=,=,<,<=)": {
"cssStyle-Eigenschaft": "Wert",
"spezielleÜberschreibung": "siehe Tabelle unten"
}
}
{ "Bedingung(>,>=,=,<,<=)": { "cssStyle-Eigenschaft": "Wert", "spezielleÜberschreibung": "siehe Tabelle unten" } }
{
  "Bedingung(>,>=,=,<,<=)": {
    "cssStyle-Eigenschaft": "Wert",
    "spezielleÜberschreibung": "siehe Tabelle unten"
  }
}

Überschreibung mit einer Bedingung

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
">1000": {
"fontFamily": "Comic Sans MS",
"fontSize": 14,
"fill": "#FF0000"
}
}
{ ">1000": { "fontFamily": "Comic Sans MS", "fontSize": 14, "fill": "#FF0000" } }
{
    ">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 findest Du hier: https://www.w3schools.com/cssref/index.php

Du kannst weitere Abhängigkeiten durch Komma getrennt hinzufügen. Siehe nächsten Abschnitt.

Hinweis:
Auch gibt es eine kleine Besonderheit zu beachten: Die Farbangaben, die Du bei W3Schools finden wirst, beziehen sich auf HTML-Elemente. Hier arbeiten wir allerdings mit SVG Elementen – dort nutzt man statt color -> stroke um den Rahmen zu gestalten und statt background-color -> fill, um den Hintergrund/die Füllung zu gestalten. Diese 2 Bedingungen musst Du beachten, damit deine Elemente die passenden Farben am richtigen Fleck erhalten!

Überschreibung mit 2 Bedingungen

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
">1000": {
"fontFamily": "Comic Sans MS",
"fontSize": 14,
"fill": "#FF0000"
},
"<1000": {
"fontFamily": "Times New Roman",
"fontSize": 16,
"fill": "#538ea3"
}
}
{ ">1000": { "fontFamily": "Comic Sans MS", "fontSize": 14, "fill": "#FF0000" }, "<1000": { "fontFamily": "Times New Roman", "fontSize": 16, "fill": "#538ea3" } }
{
    ">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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
">60": {
"stroke": "rgba(255, 115, 131,1)",
"filter": "drop-shadow(rgba(255, 115, 131, 0.8) 0px 3px 3px)"
}
}
{ ">60": { "stroke": "rgba(255, 115, 131,1)", "filter": "drop-shadow(rgba(255, 115, 131, 0.8) 0px 3px 3px)" } }
{
    ">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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
"default": {
"display": "() => {0_userdata.0.example_state} == true ? 'inline-block' : 'none'"
}
}
{ "default": { "display": "() => {0_userdata.0.example_state} == true ? 'inline-block' : 'none'" } }
{
    "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üsselErklärungJavascript
valueDiese Eigenschaft überschreibt den Wert bei Datenquellen Elementen, der dargestellt wird. Bei Kreisen und Rechtecken kann dies die Füllung des Elements und des Randes beeinflussenJa
unitDiese Eigenschaft überschreibt die EinheitJa
defaultDiese Eigenschaft setzt Standard-Werte, wenn keine Bedingung erfüllt istJa
appendHängt einen Text an den Wert anNein
prependStellt einen Text dem Wert voranNein
borderfillcolorRandfarbe des Kreises oder Rechtecks abhängig vom Wert (Hierfür muss bereits ‚Kontur entsprechend dem Wert ausfüllen‘ aktiviert sein)Nein
bordercolorFarbe des nicht gefüllten Bereichs bei Kreisen oder Rechtecken (Auch hier muss ‚Kontur entsprechend dem Wert ausfüllen‘ bereits aktiviert sein)Nein
fillcolorFüllfarbe des Kreises oder RechteckNein
img_urlAdresse eines Bildes ändern (z.B. Bild einer Wallbox und wenn das Auto angeschlossen ist, erscheint ein Stecker)Nein
iconIcon abändern (z.B. wie oben). Das Icon kann mit 2 weiteren Parametern angefordert werden:
mdi:transmission-tower-export?flip=horizontal&rotate=270deg
mdi:transmission-tower-export?flip=horizontal&rotate=270deg

Flip
Symbol kann horizontal und/oder vertikal gespiegelt werden

Rotate
Symbol kann um 90, 180 und 270 Grad gedreht werden
Nein

Mit Javascript

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
">=1000": {
"unit": "kW",
"value": "val => parseFloat(val/1000).toFixed(2)"
},
"default": {
"unit": "W",
"value": "val => val.toFixed(0)"
}
}
{ ">=1000": { "unit": "kW", "value": "val => parseFloat(val/1000).toFixed(2)" }, "default": { "unit": "W", "value": "val => val.toFixed(0)" } }
{
    ">=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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
"default": {
"value": "val => Number({0_userdata.0.Energiefluss_Test.verbrauch_1}) + val;"
}
}
{ "default": { "value": "val => Number({0_userdata.0.Energiefluss_Test.verbrauch_1}) + val;" } }
{
    "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}
{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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
"default": {
"value": "val => { const percentInWatt=Number(3000*{0_userdata.0.Energiefluss_Test.percentState})/100; return val - percentInWatt; }"
}
}
{ "default": { "value": "val => { const percentInWatt=Number(3000*{0_userdata.0.Energiefluss_Test.percentState})/100; return val - percentInWatt; }" } }
{
    "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
percentInWatt das Ergebis der Berechnung
Number(3000*{0_userdata.0.Energiefluss_Test.percentState})/100;
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
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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
">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"
}
}
{ ">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" } }
{
    ">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.

Bitte beachten: Damit Füllungen und Ränder für Rechtecke oder Kreise genutzt werden können, muss bei diesen im Tab ‚erweitert‘ die entsprechende Konfiguration bereits aktiviert sein. Hier legst Du nur die passende Überschreibung fest, die die Darstellung beeinflusst!

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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
"Winter": {
"fill": "red"
},
"Sommer": {
"fill": "rgb(161,211,67)"
}
}
{ "Winter": { "fill": "red" }, "Sommer": { "fill": "rgb(161,211,67)" } }
{
    "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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
">0": {
"icon": "mdi:transmission-tower-export?flip=horizontal&rotate=90deg"
}
}
{ ">0": { "icon": "mdi:transmission-tower-export?flip=horizontal&rotate=90deg" } }
{
    ">0": {
        "icon": "mdi:transmission-tower-export?flip=horizontal&rotate=90deg"
    }
}
Wie hat Dir der Beitrag gefallen?
Bewertung: 5/5 - abgegebene Bewertungen: 2

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert