Einen Balken bauen, der sich an seinen Grenzen umfärbt

Fortgeschritten · 10 Min. · Anzeige

Ein Balken ist die günstigste Art, eine Zahl quer durch den Raum lesbar zu machen, und er kostet zwei Bindings: eines für seine Länge, eines für seine Farbe. Diese Anleitung zeigt beide plus die Anzeige — an einem Balken, den Sie für jeden Analogwert im Bild wiederverwenden können.
  • Einen Balken bauen, der sich an seinen Grenzen umfärbt — Value = 12, LoLimit = true
    Value = 12 LoLimit = true
  • Einen Balken bauen, der sich an seinen Grenzen umfärbt — Value = 58
    Value = 58
  • Einen Balken bauen, der sich an seinen Grenzen umfärbt — Value = 91, HiLimit = true
    Value = 91 HiLimit = true

Das Problem

Der übliche Balken besteht aus drei übereinandergelegten Rechtecken — grün, gelb, rot — mit Sichtbarkeitsdynamiken, die entscheiden, welches erscheint. Drei Objekte, die bei jeder Layoutänderung neu skaliert werden müssen, und drei Gelegenheiten, dass sich die Vergleiche überschneiden oder eine Lücke lassen.

Außerdem werden zwei unabhängige Tatsachen vermengt. Wie voll der Balken ist, kommt vom Wert; welche Farbe er hat, kommt von den Grenzen — und diese Grenzen haben üblicherweise Hysterese und Verzögerungen, die die Grafik nicht nachbauen sollte. Beides getrennt zu halten heißt: Die Meldelogik bleibt an einer Stelle, und der Balken zeigt nur an, was sie entschieden hat.

Was Sie brauchen

Eine Balkengrafik, deren Füllung ein Rechteck mit fester linker Kante ist — das Beispiel unten ist in voller Länge gezeichnet, und zwar mit Absicht: Die Rechnung leitet sich aus genau dieser Vollausschlag-Geometrie ab, die Zeichnung trägt die Zahlen also mit sich.

Aus der SPS brauchen Sie den Wert als Zahl und die beiden Grenzbits, die Ihre Meldelogik ohnehin liefert.

ParameterTypWofür
ValuestringDer Wert in Prozent, 0 bis 100.
HiLimitbooleanHI-Grenze, aus der Meldelogik.
LoLimitbooleanLO-Grenze, aus der Meldelogik.
ValueTextstringDie Zahl in der Anzeige, bereits formatiert.

Schritt für Schritt

  1. 1. Den Balken so lang machen wie den Wert

    Wählen Sie den Balken aus und fügen Sie ein Custom Attribute-Binding hinzu. Setzen Sie das Attribut auf width und den Ausdruck auf {{ParamProps.Value * 2.8}}.

    Der Balken im Beispiel beginnt bei x=20 und ist bei Vollausschlag 280 Einheiten lang, ein Prozent sind also 2,8 Einheiten. Weil die linke Kante sich nie bewegt, ist die Breite die gesamte Geometrie — mehr braucht kein Binding.

    Einen Balken bauen, der sich an seinen Grenzen umfärbt — Den Balken so lang machen wie den WertEinen Balken bauen, der sich an seinen Grenzen umfärbt — Den Balken so lang machen wie den Wert

  2. 2. Ihn aus den Grenzen einfärben

    Fügen Sie beim weiterhin ausgewählten Balken ein Cond. Fill (Multi-Bool)-Binding mit zwei Zeilen hinzu: HiLimit in Rot, dann LoLimit in Gelb, mit dem normalen Blau als Rückfallfarbe.

    Zwei Bindings auf demselben Element sind normal und gewöhnungswürdig — eines steuert die Geometrie, das andere das Aussehen, und sie kommen sich nie in die Quere.

    Einen Balken bauen, der sich an seinen Grenzen umfärbt — Ihn aus den Grenzen einfärbenEinen Balken bauen, der sich an seinen Grenzen umfärbt — Ihn aus den Grenzen einfärben

  3. 3. Die Anzeige ergänzen

    Wählen Sie die Zahlenanzeige aus und fügen Sie ein Text Content-Binding mit dem Namen ValueText hinzu. Ein Balken beantwortet auf einen Blick „ungefähr wie viel“; die Zahl beantwortet „genau wie viel“, wenn es jemand braucht — und ein Balken ohne sie schickt die Leute auf die Suche nach einem Faceplate.

    Einen Balken bauen, der sich an seinen Grenzen umfärbt — Die Anzeige ergänzenEinen Balken bauen, der sich an seinen Grenzen umfärbt — Die Anzeige ergänzen

Prüfen

Öffnen Sie Simulieren und ziehen Sie Value von 0 auf 100. Der Balken muss bei nichts anfangen und genau an der 100-%-Marke enden. Schießt er über die Spur hinaus oder bleibt davor stehen, passt der Faktor nicht zur Zeichnung.

Setzen Sie danach beide Grenzbits gleichzeitig. Das ist kein Zustand, den die Anlage erzeugen sollte, aber die Antwort muss trotzdem eindeutig sein — die obere Zeile gewinnt, jedes Mal.

Für die Simulation ist ein kostenloses Konto nötig. Für alles davor nicht.

Varianten

  • Ein senkrechter Balken. Steuern Sie stattdessen height und bewegen Sie die Oberkante mit einem zweiten Ausdruck auf y, damit der Balken von einer festen Basis nach oben wächst.
  • Im Ausdruck skalieren. Liegt der Tag in technischen Einheiten statt in Prozent vor, teilen Sie im selben Ausdruck durch den Bereich: {{ParamProps.Bar / 16 * 280}}.
  • Grenzen aus einer Zustandszahl. Ersetzen Sie das Multi-Bool durch Cond. Fill (Number), wenn Ihre Meldelogik ein Zustandswort statt einzelner Bits liefert.

Fragen

Woher kommt die 2,8?
Aus der Zeichnung. Der Balken ist bei Vollausschlag 280 Einheiten lang und der Wert läuft bis 100, ein Prozent sind also 2,8 Einheiten. Lesen Sie ihn aus Ihrer eigenen Grafik ab, statt diesen zu übernehmen.
Warum die Farbe nicht aus dem Wert berechnen?
Weil Grenzen üblicherweise Hysterese und Verzögerungen haben. Sie in der Grafik nachzubauen erzeugt zwei Stellen, die sich darüber uneinig sein können, ob die Anlage in Störung ist. Lassen Sie die Meldelogik entscheiden und den Balken anzeigen, was sie entschieden hat.
Kann ein Element zwei Bindings tragen?
Ja. Hier hat der Balken einen Breitenausdruck und eine Farbe — die normale Form für alles, dessen Größe und Aussehen aus verschiedenen Tatsachen stammen.
Warum ist der Balken zur Entwurfszeit voll gezeichnet?
Weil die Vollausschlag-Geometrie das ist, woraus sich die Rechnung ableitet. Voll gezeichnet lässt sich der Faktor direkt am Element ablesen, statt gemessen werden zu müssen.
Dieses Beispiel im Editor öffnen.svghmi herunterladen

Verwandte Tutorials

Einen Balken bauen, der sich an seinen Grenzen umfärbt — WinCC Unified & WinCC V8+ | DynSVG