Einen Füllstand aus einem Analogwert ansteuern
Fortgeschritten · 12 Min. · Behälter
Level = 8 LevelLow = true 
Level = 45 
Level = 94 LevelHigh = true
Das Problem
Ein Füllstand wird meist als Rechteck mit einer Höhendynamik gebaut. Damit wächst das Rechteck aber von seiner Oberkante nach unten statt vom Behälterboden nach oben. Also kämpfen Sie mit einer zweiten Dynamik auf der Y-Position dagegen an, oder Sie zeichnen den Behälter kopfüber und drehen ihn — und in beiden Fällen muss der Nächste, der das Bild öffnet, erst herausfinden, was Sie getan haben.
Die Skalierung ist die andere Hälfte des Problems. Bildkoordinaten sind Pixel, der Tag ist in Prozent, also muss irgendwo umgerechnet werden. In der SPS heißt das, Bildgeometrie in den Steuerungscode zu schreiben. In einem Skript ist es für den nächsten Kollegen unsichtbar.
Ein dynamisches SVG legt die Umrechnung dorthin, wo sie hingehört: in die Grafik — ein Ausdruck, im Widget gespeichert, von dem sonst niemand im Projekt wissen muss.
Was Sie brauchen
Eine Behältergrafik, deren Flüssigkeit eine einzige Gruppe ist, in voller Höhe gezeichnet und auf den Behälter zugeschnitten. So ist das Beispiel unten aufgebaut: Die Flüssigkeit rutscht aus ihrem Zuschnitt heraus, statt ihre Größe zu ändern. Oberfläche und Körper bewegen sich dadurch gemeinsam, und ein Binding erledigt die ganze Arbeit.
Aus der SPS brauchen Sie den Füllstand als Zahl in Prozent sowie die beiden Grenzbits, die Ihre Meldelogik ohnehin liefert.
| Parameter | Typ | Wofür |
|---|---|---|
| Level | string | Füllstand in Prozent, 0 bis 100. |
| LevelHigh | boolean | HI-Grenze. Wahr, wenn der Füllstand über dem oberen Sollwert liegt. |
| LevelLow | boolean | LO-Grenze. Wahr, wenn der Füllstand unter dem unteren Sollwert liegt. |
| LevelText | string | Die Zahl in der Anzeige, bereits formatiert. |
Schritt für Schritt
1. Die Flüssigkeit mit einem Ausdruck bewegen
Wählen Sie die Flüssigkeitsgruppe aus und fügen Sie ein Custom Attribute-Binding hinzu. Setzen Sie das Attribut auf
transformund den Ausdruck auf:translate(0, {{216 - ParamProps.Level * 2.16}})216 ist die Höhe des zugeschnittenen Bereichs in der Zeichnung, 2,16 diese Höhe geteilt durch 100. Bei
Level = 100ist der Versatz null und der Behälter liest sich als voll; bei 0 ist die Flüssigkeit um ihre gesamte Höhe aus dem Sichtbereich gerutscht.
2. An den Grenzen umfärben
Wählen Sie den Flüssigkeitskörper aus und fügen Sie ein Cond. Fill (Multi-Bool)-Binding mit zwei Zeilen hinzu:
LevelHighin Rot, dannLevelLowin Gelb. Die Rückfallfarbe bleibt das normale Blau.Die Farbe sitzt auf der Flüssigkeit statt auf einer separaten Warnleuchte, weil ein zu voller Behälter schon aus der Entfernung falsch aussehen soll und nicht erst beim Lesen einer kleinen Anzeige daneben.
3. Die Zahl anzeigen
Wählen Sie den Anzeigetext aus und fügen Sie ein Text Content-Binding mit dem Namen
LevelTexthinzu. Nehmen Sie einen String statt einer Zahl: Die Formatierung — Nachkommastellen, das Prozentzeichen, ob ein unsicherer Messwert als---erscheint — ist eine Entscheidung, die dorthin gehört, wo der Tag skaliert wird, nicht in die Grafik.
Prüfen
Öffnen Sie Simulieren und ziehen Sie Level von 0 auf 100. Die Oberfläche muss die volle Höhe des Behälters durchlaufen und genau an der oberen und unteren Marke stehen bleiben. Bleibt sie davor stehen oder läuft darüber hinaus, passen die beiden Zahlen im Ausdruck nicht zur Zeichnung.
Setzen Sie danach LevelHigh und achten Sie darauf, dass sich der gesamte Körper umfärbt, nicht nur eine Umrandung.
Für die Simulation ist ein kostenloses Konto nötig. Für alles davor nicht.
Varianten
- Ein liegender Behälter. Derselbe Ausdruck mit dem Versatz in X statt in Y:
translate({{…}}, 0), mit der Breite des Zuschnitts statt seiner Höhe. - Von oben füllen. Lassen Sie das Minus weg:
translate(0, {{ParamProps.Level * 2.16 - 216}})schiebt die Flüssigkeit von oben herein — so sieht ein sich entleerender Trichter aus. - Grenzen aus einer Zustandszahl. Liefert Ihre Meldelogik ein einzelnes Zustandswort statt einzelner Bits, ersetzen Sie das Multi-Bool durch Cond. Fill (Number) und geben jedem Wert eine eigene Zeile.
Fragen
- Warum die Flüssigkeit bewegen, statt ihre Größe zu ändern?
- Weil ein Rechteck von seiner Oberkante aus wächst. Eine reine Höhendynamik lässt die Flüssigkeit deshalb von der Behälterdecke hängen, statt auf dem Boden zu stehen. Einen vollhohen Körper aus einem Zuschnitt zu schieben braucht ein Binding statt zwei, und die Oberfläche kommt gratis mit.
- Woher kommen 216 und 2,16?
- Aus der Zeichnung. 216 ist die Höhe des zugeschnittenen Bereichs im Behälter, 2,16 ist diese Höhe geteilt durch 100, weil der Füllstand in Prozent ankommt. Lesen Sie beide aus Ihrer eigenen Grafik ab, statt diese zu übernehmen.
- Kann ich den Wert auch im Ausdruck skalieren?
- Ja — liegt der Tag in Litern statt in Prozent vor, teilen Sie im selben Ausdruck durch das Fassungsvermögen. Ein Widget, das das Volumen eines bestimmten Behälters kennt, passt allerdings nur zu diesem einen; meist ist es besser, einen Prozentwert zu übergeben und die Grafik wiederverwendbar zu halten.
- Warum sitzt der Zuschnitt auf einem anderen Element als die Transformation?
- Weil ein Zuschnitt im eigenen Koordinatenraum des Elements aufgelöst wird. Sitzt er auf der Gruppe, die sich bewegt, bewegt er sich mit — dann wird nie etwas abgeschnitten und die Flüssigkeit läuft aus dem Behälter heraus. Die äußere Gruppe hält den Zuschnitt und bleibt stehen, die innere trägt die Transformation.