Tutorials

Eine Seite je Aufgabe. Jede zeigt das fertige Widget in allen Zuständen, führt durch die nötigen Bindings und endet mit der Datei im Editor.

10 Tutorials

Meldezustände auf jedes Anlagensymbol bringen
Die Meldedarstellung sollte auf jedem Symbol im Bild gleich sein — und sie sollte nicht verlangen, das Symbol neu zu zeichnen.
Fortgeschritten · 11 Min.
Visibility (Number) · Stroke Color · Fill Opacity
Einen Manometerzeiger auf einen Prozesswert ausrichten
Ein Rundinstrument liest sich auf einen Blick, wie es eine Zahl nie tut — man sieht den Zeiger im grünen Bereich stehen, ohne etwas zu lesen.
Einsteiger · 10 Min.
Rotation · Cond. Fill (Number) · Text Content
Einen Balken bauen, der sich an seinen Grenzen umfärbt
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.
Fortgeschritten · 10 Min.
Custom Attribute · Cond. Fill (Multi-Bool) · Text Content
Ein Förderband vorwärts oder rückwärts laufend anzeigen
Ein Transport, der in beide Richtungen läuft, muss sagen, wohin er gerade läuft — und die übliche Antwort, die Pfeile zweimal zu zeichnen und eine Garnitur aus…
Einsteiger · 9 Min.
Flip Horizontal · Cond. Fill (Boolean) · Translation X
Einen Livewert mit Farbe und Signalgüte anzeigen
Eine Zahl im Bild nützt nur, wenn man erkennen kann, ob man ihr glauben darf.
Einsteiger · 8 Min.
Text Content · Fill Color · Visibility (Boolean)
Maschinenzustände aus einem SPS-Zustandswort anzeigen
Eine Maschine, die ihren Zustand als eine einzige Ganzzahl liefert — 0 gestoppt, 1 läuft, 2 Störung, 3 Wartung —, sollte dafür ein Binding brauchen und nicht e…
Einsteiger · 9 Min.
Cond. Fill (Number) · Text Content · Visibility (Number)
Einen Motor als laufend, gestoppt oder gestört anzeigen
Zwei Bits und ein Drehzahlwert sind alles, was ein Motorsymbol braucht.
Einsteiger · 8 Min.
Cond. Fill (Boolean) · Visibility (Boolean) · Text Content
Eine Rohrleitung nach Medium einfärben und nach Durchfluss verbreitern
Rohrleitungen sind meist der statische Hintergrund eines Bildes — und damit verschenkt.
Einsteiger · 8 Min.
Cond. Stroke (Number) · Stroke Width · Stroke Opacity
Einen Füllstand aus einem Analogwert ansteuern
Ein Füllstand in Prozent ist eine Zahl, und die Grafik dazu sollte ein Binding sein.
Fortgeschritten · 12 Min.
Custom Attribute · Cond. Fill (Multi-Bool) · Text Content
Ein Ventil als offen, geschlossen, fahrend oder gestört anzeigen
Ein Ventil im Bild muss eine Frage auf einen Blick beantworten: Steht es dort, wo es stehen soll?
Einsteiger · 10 Min.
Cond. Fill (Multi-Bool) · Rotation · Text Content

Nach Binding-Typ stöbern

Tutorials | DynSVG