Überschreibungen

de

Chinese (Simplified) Dutch English French German Italian Polish Portuguese Russian Slovak Spanish Ukrainian

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"
  }
}

Ü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 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

{
    ">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

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

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

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.

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.

{
    "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"
    }
}