Shapes bearbeiten

Shapes erstellen

Navigieren Sie in der linken Seitenleiste zur gewünschten Shapegruppe und klicken Sie anschließend oben in der Aktionsleiste auf Hinzufügen. Geben Sie den Namen des neuen Shapes im folgenden Dialog ein. Wenn Ihr Shape nur einen einzigen Datenpunkt enthalten soll, aktivieren Sie die Option Shape mit einzelnem Datenpunkt. Für weitere Details zu dieser Option lesen Sie bitte Objekttypen in der Shape-Bibliothek Falls die Menüpunkte deaktiviert sind, wählen Sie bitte zuerst eine Shapegruppe aus.

Shape bearbeiten

In der Bildschirmmitte wird das aktuell ausgewählte Shape grafisch dargestellt, wie es schlussendlich auch auf dem Anlagebild aussehen wird. Rechts daneben stehen einige generelle Einstellungen des Shapes zur Verfügung:

Name

Der Name des Shapes, wie er in der Shape-Bibliothek angezeigt wird. Verwenden Sie die Schaltfläche Übersetzungen bearbeiten, um den Namen mehrsprachig zu ändern.

Veraltet

Markiert ein Shape als “veraltet”. Dies soll Benutzern mitteilen, dass das Shape nicht mehr weiter in Produktivsystemen verwendet werden soll und in Zukunft aus der Shape-Bibliothek entfernt wird.

Statussymbole anzeigen

Auf dem Anlagebild werden rechts neben dem Shape automatisch Statussymbole bezüglich Handeingriff und Alarmzustand angezeigt. Wenn Sie diese Standardsymbole lieber durch eigene Visualisierungen ersetzen möchten, können Sie diese Option deaktivieren und stattdessen selbst SVG-Code und Verhaltensregeln konfigurieren (siehe Handbetrieb und Alarmstatus verknüpfter Anlagebilder visualisieren).

Shapeverwendung

Zeigt eine Liste aller Anlagebilder-Widgets an, auf denen das entsprechende Shape platziert ist. Klicken Sie einen Eintrag in der Liste an, um direkt zum entsprechenden Anlagebild zu springen.

Shapevorschau und Simulator

Neben den Einstellungen wird auf der linken Seite eine Vorschau des Shapes angezeigt. Standardmäßig wird der SVG-Code angezeigt, wie er auf der Registerkarte Code definiert ist. Wenn Sie auf Simulator starten klicken oder in der Tabelle darunter einen Testwert eingeben, werden die Testwerte entsprechend der Verhaltensregeln auf das Shape angewendet.

Die Vorschau bietet ein paar weitere Ansichtsoptionen zum Überprüfen des Shapes an:

Begrenzungsrahmen anzeigen	Zeigt den Begrenzungsrahmen des Shapes an, d.h. die Position und Größe des SVG-Bildausschnittes (Viewport).
Verbindungsstellen anzeigen	Zeigt die Verbindungsstellen an, d.h. kleine Dreiecke, die die Position und Ausrichtung anzeigen, von wo aus Verbindungen gezeichnet werden können. Siehe Shape-Verbindungsstellen.
Drehen	Dreht die Vorschau in 90°-Schritten. Die Rotation wirkt sich nur auf die Vorschau aus, nicht auf das Shape selbst.

SVG-Code eines Shapes bearbeiten

Klicken Sie rechts oberhalb der Shape-Einstellungen auf Code, um den SVG-Quellcode des Shapes anzuzeigen. Um die Visualisierung des Shapes zu bearbeiten, können Sie den SVG-Code direkt im Textfeld bearbeiten oder per Kopieren und Einfügen aus Drittprogrammen wie Adobe Illustrator, Affinity Designer oder Inkscape einfügen.

Bemerkung

In dieser Anleitung werden Grundkenntnisse von SVG vorausgesetzt. Eine kurze Einführung finden Sie unter SVG-Referenz.

Um bestimmte Elemente durch Verhaltensregeln abhängig von aktuellen Datenpunktmesswerten oder -eigenschaften zu animieren, müssen sie erst eindeutig gekennzeichnet werden. Dies machen Sie, indem Sie den entsprechenden Elementen eine eindeutige ID im SVG-Code zuweisen:

<path id="Background" fill="#ED145B" d="M10,0L20,20H0L10,0z" />
<path id="OperationState" fill="#FFFFFF" d="M10,5L15,15H5L10,5z" />

Warnung

Die IDs LinkedAlarmStatus, LinkedManualMode und ShapeLabel sind reservierte IDs mit spezieller Bedeutung. Mehr dazu erfahren Sie im Abschnitt Handbetrieb und Alarmstatus verknüpfter Anlagebilder visualisieren.

Verhaltensregeln eines Shapes bearbeiten

Wie Sie Shapes mit Verhaltensregeln animieren, wird im eigenen Kapitel Shape-Verhalten beschrieben.

Handbetrieb und Alarmstatus verknüpfter Anlagebilder visualisieren

Bei verknüpften Shapes können die Zustände Handbetrieb und Alarmstatus des Sprungziels ebenfalls visualisiert werden. Das Sprungziel ist in der Regel ein anderes Anlagebild oder eine Gruppe.

Wechseln Sie zunächst zur Codeansicht des Shapes, und erstellen Sie die gewünschte Visualisierung (beispielsweise einen Pfad oder eine Gruppe von Elementen). Geben Sie dem Element bzw. der Gruppe eines der folgenden ID-Attribute, damit es nur dann angezeigt wird, wenn der entsprechende Zustand eintritt:

LinkedManualMode

Das Element wird angezeigt, wenn einer der platzierten Datenpunkte im Shape auf Handbetrieb steht.

LinkedAlarmStatus

Das Element wird angezeigt, wenn einer der platzierten Datenpunkte im Shape auf Alarm steht.

Beispiele

<path id="LinkedAlarmStatus" fill="#ED145B" d="M10,0L20,20H0L10,0z" />
<g id="LinkedManualMode">
  <circle fill="#CCCCCC" cx="10" cy="10" r="10" />
  <circle fill="#FFFFFF" cx="10" cy="10" r="5" />
</g>

Warnung

Verwenden Sie jedes dieser speziellen IDs höchstens einmal pro Shape.

Shape-Name automatisch im Shape anzeigen

Geben Sie einem <text>-Element im Shape-Quellcode die ID ShapeLabel, damit es automatisch mit dem Shape-Namen (Bezeichnung) des entsprechenden Shapes gefüllt wird.

Die Bezeichnung eines Shapes können Sie auf dem Anlagebild für jedes platzierte Shape individuell über die Seitenleiste Eigenschaften setzen.

Beispiel

<text id="ShapeLabel" x="50" y="10" fill="black" text-anchor="middle" />

Das selbe Shape mit zwei verschiedenen Bezeichnungen

Warnung

Verwenden Sie diese spezielle ID höchstens einmal pro Shape.

Shape-Verbindungsstellen

Damit ein Shape auf dem Anlagebild mit anderen Shapes verbunden werden kann, müssen Sie sogenannte Verbindungsstellen in Ihrem Shape definieren. Jede Verbindungsstelle hat eine Position und eine Richtung und kann auf dem Anlagebild mit beliebig vielen Shapes verbunden werden.

Die Verbindungsstellen müssen im <defs>-Block stehen, der als erstes Element innerhalb des <svg>-Blocks definiert werden muss.

<svg version="1.1" id="AvelonVentilationCrossFlow"  xmlns:xlink="http://www.w3.org/1999/xlink"
     x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<defs>
  <stub direction="left" x="0" y="50"></stub>
  <stub direction="right" x="100" y="50"></stub>
  <stub direction="up" x="50" y="0"></stub>
  <stub direction="down" x="50" y="100"></stub>
</defs>
<!-- Graphic elements -->
</svg>

Um die Verbindungsstellen in der Shapevorschau anzuzeigen, klicken Sie im Vorschaubereich auf Verbindungsstellen anzeigen.

Warnung

Beachten Sie, dass die Reihenfolge der <stub>-Elemente entscheidend ist. Wenn Sie ein Shape auf einem Anlagebild platziert und mit anderen Shapes verbunden haben und anschließend die <stub>-Elemente entfernen, neu ordnen oder weitere hinzufügen, kann dies unvorhergesehene Auswirkungen auf bereits vorhandene Verbindungen haben. Bitte kontrollieren Sie deshalb nach einer Änderung unbedingt nochmals alle bereits platzierten Shapes und ihre Verbindung.

Kontextabhängige Farben

Standardmäßig sind Farben, die im SVG-Code eines Shapes definiert sind, fix. Solange alle Elemente eines Shapes auf einem Element mit einer soliden Füllung platziert werden, ist dies für die meisten Anwendungsfälle in Ordnung. Wenn Elemente wie Texte oder dünne Linien jedoch nicht auf Elementen mit einer soliden Füllung platziert sind, werden sie unter Umständen nicht wie erwartet angezeigt, falls der Benutzer das Shape auf einem Anlagebild mit dunklem Hintergrund verwendet, oder generell im dunklen Modus arbeitet.

Um Probleme in solchen Fällen zu vermeiden, können Sie den Elementen die folgenden CSS-Klassen zuweisen, damit sich ihre Farbe automatisch an den Kontext anpasst.

theme-fill	Setzt die Füllfarbe des Elements automatisch auf die Farbe des aktuellen Themes.
theme-stroke	Setzt die Linienfarbe des Elements automatisch auf die Farbe des aktuellen Themes.
contrast-fill	Setzt die Füllfarbe des Elements automatisch auf die passende kontextabhängige Kontrastfarbe.
contrast-stroke	Setzt die Linienfarbe des Elements automatisch auf die passende kontextabhängige Kontrastfarbe.

Bemerkung: theme-fill und theme-stroke entsprechen der Farbe des aktuellen Themes (dunkel oder hell). Wenn der Hintergrund des Anlagebildes jedoch auf eine feste Farbe gesetzt wird, passen sich diese Farben entsprechend an, d.h. sie erscheinen dunkel auf dunklem Hintergrund und hell auf hellem Hintergrund. contrast-fill und contrast-stroke hingegen nehmen eine Kontrastfarbe an, d.h. sie erscheinen hell auf dunklem Hintergrund bzw. dunkel auf hellem Hintergrund.

Beispiel

<text x="0" y="0" class="contrast-fill">Context-aware text</text>
<line x1="0" y1="0" x2="100" y2="100" class="contrast-stroke" stroke-width="1"/>
<rect x="0" y="0" width="100" height="100" class="theme-fill contrast-stroke" stroke-width="1"/>

Vermeiden Sie ein explizites fill-Attribut, wenn theme-fill oder contrast-fill verwendet wird, oder ein explizites stroke-Attribut, wenn theme-stroke oder contrast-stroke verwendet wird, da diese mit den kontextabhängigen Farben interferieren können.