-
-
Notifications
You must be signed in to change notification settings - Fork 2
Custom Overrides for elements
If you want to style elements depending on their RAW value, you can use the 'Override settings depending on value' mode on the extended tab inside the element configuration bar.
Hit the button, to open up the JSON dialog and enter dependencies as follows:
{
">1000": {
"fontFamily": "Comic Sans MS",
"fontSize": 14,
"fill": "#FF0000"
}
}This will format a text element with font-size 14px, fontFamily Comic and the fill color will be FF0000 (red).
Note:
All available CSS properties can be applied to the overrides. Sometimes they include a minus, which you need to remove.
Means: font-family becomes fontFamily, animation-direction becomes animationDirection and so on.
Complete CSS properties can be found here: https://www.w3schools.com/cssref/index.php
You can add more dependencies seperated with a comma. See next section.
{
">1000": {
"fontFamily": "Comic Sans MS",
"fontSize": 14,
"fill": "#FF0000"
},
"<1000": {
"fontFamily": "Times New Roman",
"fontSize": 16,
"fill": "#538ea3"
}
}You can also use '>=' and '==' as conditions, which allows you more flexibility.
Please note:
The overrides will not return to the initial layout from itself. This means that if you have set a property for a value and it is exceeded or fallen below, you also have to set the opposite property for the respective exceedance or fall below.
If you want to change the colors or shadows of the animation lines, you can use the code below as an example and change the properties for color and filter to your own design or layout.
Code for the animation override:
{
">60": {
"stroke": "rgba(255, 115, 131,1)",
"filter": "drop-shadow(rgba(255, 115, 131, 0.8) 0px 3px 3px)"
}
}With the above example you add a light red color (stroke) and a shadow (filter) to the dots if the value is greater than 60. To modify the line, you can use the same settings inside the override for the line.
It is also possible, to use special overwrites for elements. They even can contain javascript calculations, to change the value itself (including decimal places), the unit or the border of circles and rectangles.
| Overwrite-Key | Explanation | Allows Javascript |
|---|---|---|
| value | Changes the value | yes |
| unit | Changes the unit | yes |
| default | Default values, if no condition is fulfilled | yes |
| append | Appends different text to the value | no |
| prepend | Prepends different text to the value | no |
| borderfillcolor | Border color of the circle or rectangle depending on the value | no |
| bordercolor | Base border color of the circle or rectangle | no |
| fillcolor | Fill color of the circle or rectangle itself | no |
| img_url | Change the URL of a picture | no |
| icon | Change the icon (e.g.: mdi:transmission-tower-export?flip=horizontal&rotate=270deg) | no |
{
">=1000": {
"unit": "kW",
"value": "val => parseFloat(val/1000).toFixed(2)"
},
"default": {
"unit": "W",
"value": "val => val.toFixed(0)"
}
}Here, the unit is changed to 'kW' and the value is calculated as a float, with 2 decimal places, if the raw-value exceeds or is 1000. If the value is below 1000, all things are set to the default key, which means a unit with 'W' and the value itself with no decimal places.
{
">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 this case, the border of the circle or rectangle is styled in 3 ways. Over 0, over 500 and over 1000. With this, you get a nice colored border depending on the value. Useful for production circles or rectangles to visually show, that the production is low (red), average (yellow) or good (green).
{
"Winter": {
"fill": "red"
},
"Summer": {
"fill": "rgb(161,211,67)"
}
}Here, the override is directly picked, if the value has an exact match.
{
">0": {
"icon": "mdi:transmission-tower-export?flip=horizontal&rotate=90deg"
}
}The first part is the icon itself (mdi:transmission-tower-export) followed by ?, if you want to use the parameters flip (accepts horizontal, vertical or horizontal,vertical) or rotate (accepts 0deg, 90deg, 180deg or 270deg).
Wenn Sie Elemente abhängig von ihrem RAW-Wert formatieren möchten, können Sie den Modus "Überschreiben Sie die Einstellungen je nach Wert" auf der erweiterten Registerkarte in der Elementkonfigurationsleiste verwenden.
Klicken Sie auf die Schaltfläche, um den JSON-Dialog zu öffnen und Abhängigkeiten wie folgt einzugeben:
{
">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.
Notiz:
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
Sie können weitere Abhängigkeiten durch Komma getrennt hinzufügen. Siehe nächsten Abschnitt.
{
">1000": {
"fontFamily": "Comic Sans MS",
"fontSize": 14,
"fill": "#FF0000"
},
"<1000": {
"fontFamily": "Times New Roman",
"fontSize": 16,
"fill": "#538ea3"
}
}Sie können auch „>=“ und „==“ als Bedingungen verwenden, was Ihnen mehr Flexibilität bietet.
Bitte beachten Sie:
Die Überschreibungen kehren nicht von selbst zum ursprünglichen Layout zurück. Das heißt, wenn Sie eine Eigenschaft für einen Wert eingestellt haben und dieser über- oder unterschritten wird, müssen Sie auch die gegenteilige Eigenschaft für die jeweilige Über- oder Unterschreitung festlegen.
Wenn Sie die Farben oder Schatten der Animationslinien ändern möchten, können Sie den folgenden Code als Beispiel verwenden und die Eigenschaften für Farbe und Filter an Ihr eigenes Design oder Layout anpassen.
Code für die Animationsüberschreibung:
{
">60": {
"stroke": "rgba(255, 115, 131,1)",
"filter": "drop-shadow(rgba(255, 115, 131, 0.8) 0px 3px 3px)"
}
}Im obigen Beispiel fügen Sie den Punkten eine hellrote Farbe (stroke) und einen Schatten (filter) hinzu, wenn der Wert größer als 60 ist. Um die Linie zu ändern, können Sie dieselben Einstellungen innerhalb der Überschreibung für die Linie verwenden.
Es ist auch möglich, spezielle Überschreibungen für Elemente zu verwenden. Sie können sogar Javascript-Berechnungen enthalten, um den Wert selbst (einschließlich Dezimalstellen), die Einheit oder den Rand von Kreisen und Rechtecken zu ändern.
| Überschreibschlüssel | Erklärung | Ermöglicht Javascript |
|---|---|---|
| value | Ändert den Wert | Ja |
| unit | Ändert die Einheit | Ja |
| default | Standardwerte, wenn keine Bedingung erfüllt ist | Ja |
| append | Hängt anderen Text an den Wert an | Nein |
| prepend | Stellt dem Wert einen anderen Text voran | Nein |
| borderfillcolor | Randfarbe des Kreises oder Rechtecks abhängig vom Wert | Nein |
| bordercolor | Grundrahmenfarbe des Kreises oder Rechtecks | Nein |
| fillcolor | Füllfarbe des Kreises oder Rechtecks selbst | Nein |
| img_url | Adresse des Bildes ändern | no |
| icon | Ändern des Icons (z.B.: mdi:transmission-tower-export?flip=horizontal&rotate=270deg) | no |
{
">=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.
{
">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.
{
"Winter": {
"fill": "red"
},
"Sommer": {
"fill": "rgb(161,211,67)"
}
}Hier wird die Überschreibung direkt ausgewählt, wenn der Wert genau übereinstimmt.
{
">0": {
"icon": "mdi:transmission-tower-export?flip=horizontal&rotate=90deg"
}
}Der erste Teil ist das Symbol selbst (mdi:transmission-tower-export), gefolgt von einem ?, wenn Sie die Parameter flip (akzeptiert: horizontal, vertical or horizontal,vertical) or rotate (akzeptiert: 0deg, 90deg, 180deg or 270deg) verwenden möchten.