Shapes bearbeiten

Shapes erstellen

Navigieren Sie in der linken Seitenleiste zur gewünschten Shapegruppe und klicken Sie anschließend oben in der Aktions­­leiste 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.

Warnung

Beachten Sie, dass Änderungen an der Shape-Bibliothek dazu führen, dass der Änderungs­­verlauf aller Anlagebilder in Ihrem Kundenkonto gelöscht wird. Das bedeutet, dass Sie Änderungen an Ihren Anlagebildern, die Sie vor den Anpassungen in der Shape-Bibliothek vorgenommen haben, nicht mehr rückgängig machen können.

Shapegruppen bearbeiten

Wenn Sie eine Shapegruppe in der linken Seitenleiste auswählen, können Sie die folgenden Einstellungen der Gruppe bearbeiten:

Name

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

Veraltet

Markiert eine Shapegruppe als „veraltet“. Dies soll Benutzern mitteilen, dass die Shapes in dieser Shapegruppe nicht mehr weiter in Produktiv­­systemen verwendet werden sollen und in Zukunft aus der Shape-Bibliothek entfernt werden.

Shape bearbeiten

Wenn Sie ein Shape in der linken Seitenleiste auswählen, können Sie auf der rechten Bildschirm­­seite das visuelle Erscheinungs­­bild und das Verhalten des Shapes konfigurieren.

Allgemeine Eigenschaften

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 Produktiv­­systemen verwendet werden soll und in Zukunft aus der Shape-Bibliothek entfernt wird. Veraltete Shapes werden in der Shape-Bibliothek-Seitenleiste durchgestrichen angezeigt.

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).

Steuerfeld beim Anklicken öffnen

Standardmäßig wird das Steuerfeld angezeigt, wenn der Benutzer auf das Shape auf dem Anlagebild klickt. Dort werden die einzelnen Datenpunkte angezeigt und können vom Benutzer verändert werden. Sie können das Steuerfeld deaktivieren, indem Sie diese Option deaktivieren. Dies ist nützlich für rein dekorative Shapes, die keine Informationen anzeigen oder Interaktionen anbieten sollen, aber es kann auch für komplexere Shapes verwendet werden, bei denen nur bestimmte Bereiche des Shapes einen bestimmten Wert auf den Datenpunkt schreiben sollen, ohne dass ein Steuerfeld angezeigt wird, wie z. B. Schaltflächen, Schieberegler oder Raum­­automatisierungs-Shapes.

Beachten Sie, dass das Steuerfeld nicht angezeigt wird, wenn das gesamte Shape von einem Element überdeckt wird, das eine Aktion „Beim Anklicken“, „Bei Drücken“ oder „Beim Darüberstreichen“ hat, ganz unabhängig von dieser Option.

Gerätekennzeichnung (Systemnamenpräfix)

Bei den meisten Shapes haben die Systemnamen in den einzelnen Verhaltens­­regeln ein gemeinsames Präfix, das die Anlage, die das Shape darstellt, kennzeichnet. Um zu vermeiden, dass Sie dasselbe Präfix in allen Verhaltens­­regeln wiederholt eingeben müssen, können Sie dieses Feld auf das gemeinsame Präfix der Systemnamen setzen. Der Wert sollte ein gültiger regulärer Ausdruck sein und wird anschließend automatisch dem Systemnamen­­ausdruck in jeder einzelnen unten stehenden Verhaltens­­regel vorangestellt. Dies hat keine Auswirkungen auf die eigentliche Funktionalität des Shapes, beschleunigt jedoch das Erstellen und Anpassen von Verhaltens­­regeln, weil dieser gemeinsame Teil des System­­namens nicht manuell für jede Verhaltens­­regel wiederholt eingegeben werden muss.

Shapeverwendung

Zeigt eine Liste aller Anlagebild-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 Begrenzungs­­rahmen des Shapes an, d.h. die Position und Größe des SVG-Bild­­ausschnittes (Viewport).
Verbindungsstellen anzeigen	Zeigt die Verbindungs­­stellen an, d.h. kleine Dreiecke, die die Position und Ausrichtung anzeigen, von wo aus Verbindungen gezeichnet werden können. Siehe Shape-Verbindungs­­stellen.
Vorschau im dunklen (bzw. hellen) Modus	Schaltet zwischen hellem und dunklem Modus hin und her, damit Sie sich die Vorschau des Shapes in beiden Modi anschauen können. Verwenden Sie kontext­­abhängige Farben, um den bestmöglichen Kontrast der Shapes in beiden Modi zu gewährleisten. Wenn Sie den Shape-Designer verlassen, wird der Modus auf das in Ihrem Benutzerkonto konfigurierte Design zurückgesetzt.
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 oder Inkscape einfügen.

Sie können den automatischen Zeilenumbruch im Code-Editor durch Klicken auf Zeilenumbruch ein- bzw. ausschalten.

Bemerkung

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

Um bestimmte Elemente durch Verhaltens­­regeln abhängig von aktuellen Datenpunkt­­messwerten 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 in den Abschnitten Handbetrieb und Alarmstatus verknüpfter Anlagebilder visualisieren und Shape-Bezeichnung automatisch im Shape anzeigen.

Verhaltensregeln eines Shapes bearbeiten

Wie Sie Shapes mit Verhaltens­­regeln 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-Bezeichnung automatisch im Shape anzeigen

Setzen Sie das id-Attribut auf einem <text>-Element im SVG-Quellcode auf ShapeLabel, damit dem Text automatisch die Bezeichnung des entsprechenden Shapes zugewiesen wird, wenn das Shape auf einem Anlagebild platziert 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, welche in der Eigenschaften-Seitenleiste jedes Shapes individuell gesetzt werden können.

Warnung

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

Shape-Verbindungsstellen

Damit Sie das Shape im Anlagebild mit anderen Shapes mit einer sichtbaren Verbindungslinie verbinden können, müssen Sie entsprechende Verbindungs­­punkte auf dem Shape definieren. Diese werden im Shape-Designer und im Bearbeitungs­­modus des Anlagebildes mit kleinen Pfeilen angedeutet.

Jeder Verbindungspunkt besteht aus einer Position und einer Richtung und kann mit beliebig vielen Shapes auf dem Anlagebild verbunden werden.

Verbindungspunkte werden am Anfang des SVG-Codes innerhalb des <defs>-Elements mit einem <stub>-Tag festgelegt. Diese sind genaugenommen nicht Teil der SVG-Spezifikation und werden nur angezeigt, wenn man sie im Vorschaubereich über die Option Verbindungsstellen anzeigen einblendet.

Jedes <stub>-Element besitzt die folgenden Attribute:

x	x-Koordinate der Ankerposition
y	y-Koordinate der Ankerposition
direction	Die Richtung, in der die Verbindungslinie das Shape verlässt. Erlaubte Werte sind right (rechts), left (links), up (oben) und down (unten).

Um die Koordinaten einer Verbindungsstelle zu bestimmen, können Sie den Mauszeiger über die Shape-Vorschau bewegen. Die aktuellen Koordinaten werden in der unteren rechten Ecke der Shape-Vorschau angezeigt.

Wenn Sie die Option Verbindungsstellen anzeigen oben links aktivieren, werden die Verbindungsstellen auf dem Shape angzeeigt. Unten rechts sehen Sie die aktuellen Koordinaten des Mauszeigers relativ zum Shape.

Beispiel

<svg version="1.1" id="AvelonVentilationCrossFlow"
     x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100">
  <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>
  <!-- Visual elements -->
</svg>

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.

Bemerkung

Standardmäßig werden Shapes im Anlagebild an einem Raster von 10 mal 10 Pixeln ausgerichtet, und die Verbindungs­­punkte der Standard-Shapes befinden sich in der Regel an Koordinaten, die ein Vielfaches von 10 sind. Wir empfehlen daher, die Verbindungs­­punkte in Ihren Shapes ebenfalls an Koordinaten zu platzieren, die ein Vielfaches von 10 sind, um sicherzu­­stellen, dass die Verbindungs­­linien stets sauber ausgerichtet sind.

Kontextabhängige Farben

Standardmäßig sind Farben, die im SVG-Code eines Shapes definiert sind, statisch. Solange alle Elemente eines Shapes auf einem Element mit einer soliden Füllung platziert werden, ist dies für die meisten Anwendungsfälle kein Problem. 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 kontext­­abhängige Kontrast­­farbe.
contrast-stroke	Setzt die Linienfarbe des Elements automatisch auf die passende kontext­­abhängige Kontrast­­farbe.

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.

Wenn Sie im hellen Modus arbeiten und Textelemente mit schwarzer Füllfarbe erstellen (links), können diese für Benutzer, die den dunklen Modus verwenden, praktisch unsichtbar werden (rechts). Beachten Sie außerdem, wie die quadratischen Kästchen mit der dezenten Umrandung im dunklen Modus zu unschönen Blöcken werden, da ihre Farben statisch gesetzt sind:

Indem Sie die statische Füllung fill="..." Ihrer Textelemente durch die dynamische CSS-Klasse class="contrast-fill" ersetzen, stellt das System sicher, dass der Text immer mit der richtigen Kontrastfarbe angezeigt wird, abhängig vom aktuellen Modus. Verwenden Sie analog class="contrast-stroke" für die Linienfarbe von Rechtecken oder anderen Elementen, um sicherzustellen, dass auch deren Umrandung mit der richtigen Kontrastfarbe angezeigt wird:

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 kontext­­abhängigen Farben interferieren können.

Bemerkung

Während benutzer­­definierte SVG-basierte Shapes über die oben beschriebenen CSS-Klassen dynamische kontext­­abhängige Farben unterstützen, funktionieren einfache Shapes wie Text-Shapes und geometrische Shapes wie Rechteck-, Ellipse-, Linien- oder Polygon-Shapes etwas anders.

Text-Shapes passen ihre Farbe standardmäßig automatisch an den aktuellen Modus an, es sei denn, es ist eine spezifische Farbe auf dem Shape gesetzt.

Geometrische Shapes passen ihre Farbe standardmäßig nicht automatisch an den aktuellen Modus an, aber Sie können dieses Verhalten bei Bedarf aktivieren, indem Sie die Option Helligkeit automatisch anpassen in der Eigenschaften-Seitenleiste des Shapes einschalten. Weitere Informationen zu dieser Option finden Sie unter Farben.

Fixierte Elemente

Wenn Sie Elemente zu Ihrem Shape hinzufügen möchten, die von der Rotation des Shapes auf dem Anlagebild nicht beeinflusst werden, können Sie den entsprechenden Elementen im SVG-Code das Attribut fixed="true" hinzufügen.

Beispiel

<rect x="0" y="0" width="100" height="100" fill="none" class="contrast-stroke"/>
<path d="m 100 100 h -100 l 50 -50 z" class="contrast-fill contrast-stroke" fill-opacity="0.1"/>
<rect x="40" y="15" width="20" height="20" class="contrast-fill contrast-stroke" fill-opacity="0.1"/>
<text x="50" y="29" text-anchor="middle" class="contrast-fill" fixed="true">ΔT</text>

Wenn Sie mehrere Elemente fixieren möchten, können Sie diese in einem <g>-Element gruppieren und das Attribut der Gruppe hinzufügen.

<rect x="0" y="0" width="100" height="100" fill="none" class="contrast-stroke"/>
<path d="m 100 100 h -100 l 50 -50 z" class="contrast-fill contrast-stroke" fill-opacity="0.1"/>
<g fixed="true">
  <rect x="40" y="15" width="20" height="20" class="contrast-fill contrast-stroke" fill-opacity="0.1"/>
  <text x="50" y="29" text-anchor="middle" class="contrast-fill">ΔT</text>
</g>

Das Beispiel demonstriert, wie der Text im kleinen Rechteck auch bei Rotation des Shapes richtig herum angezeigt wird.