Symbol Designer

Mit dem Symbol Designer in OctoMesh Refinery Studio können Sie wiederverwendbare grafische Symbole für Process Diagrams und Dashboards erstellen. Diese Symbole können dynamische Eigenschaften enthalten, die ihr Erscheinungsbild basierend auf Runtime-Daten ändern.

Symbol Libraries

Symbol Libraries sind Container, die Ihre Symbole organisieren. Navigieren Sie zu UI > Symbol Libraries, um Ihre Bibliotheken zu verwalten.

Eine neue Bibliothek erstellen

1. Klicken Sie auf NEW LIBRARY
2. Geben Sie einen Namen für Ihre Bibliothek ein
3. Klicken Sie auf CREATE

Nach dem Erstellen einer Bibliothek können Sie ihren Inhalt anzeigen und Symbole hinzufügen.

Bibliotheksaktionen

• Import SVG: Vorhandene SVG-Dateien als Symbole importieren
• New Symbol: Ein neues Symbol von Grund auf erstellen

Die Oberfläche des Symbol Designers

Wenn Sie ein Symbol erstellen oder bearbeiten, öffnet sich der Symbol Designer mit einem Zeichenflächenbereich und mehreren Panels.

Toolbar

Die Toolbar am oberen Rand bietet grundlegende Werkzeuge:

Werkzeug	Tastenkürzel	Beschreibung
Undo/Redo	Ctrl+Z / Ctrl+Shift+Z	Änderungen rückgängig machen oder wiederholen
Select	V	Elemente auswählen und verschieben
Pan	H	Ausschnitt der Zeichenfläche verschieben
Connect	C	Verbindungen zwischen Elementen erstellen
Zoom In/Out	-	Zoomstufe anpassen
Fit to View	-	Gesamten Inhalt in den Ansichtsbereich einpassen
Show Grid	-	Rastersichtbarkeit umschalten
Snap to Grid	-	Raster-Einrasten aktivieren/deaktivieren
Show Names	-	Elementnamen auf der Zeichenfläche anzeigen
Import SVG	-	Eine SVG-Datei importieren
Group/Ungroup	Ctrl+G / Ctrl+Shift+G	Elemente gruppieren oder Gruppierung aufheben
Delete	Delete	Ausgewählte Elemente entfernen

Linkes Panel – Elementpalette

Das linke Panel enthält Tabs zum Hinzufügen von Inhalten zu Ihrem Symbol:

Tab PRIMITIVES

Ziehen Sie primitive Formen per Drag-and-drop auf die Zeichenfläche:

Shapes:

• Rectangle: Rechteckige Formen mit optional abgerundeten Ecken
• Ellipse: Kreise und Ovale
• Polygon: Geschlossene Formen mit mehreren Seiten

Lines:

• Line: Gerade Linien mit optionalen Markierungen
• Polyline: Verbundene Liniensegmente
• Path: Komplexe SVG-Pfade mit Kurven

Content:

• Text: Textbeschriftungen
• Image: Eingebettete Bilder oder SVG-Grafiken

Tab SYMBOLS

Durchsuchen und verwenden Sie Symbole aus anderen Bibliotheken innerhalb Ihres Symbols (verschachtelte Symbole).

Tab SETTINGS

Konfigurieren Sie Symbol-Metadaten und Zeichenflächeneinstellungen:

Symbol:

• Name: Anzeigename des Symbols
• Description: Optionale Beschreibung

Canvas:

• Width/Height: Abmessungen der Zeichenfläche in Pixeln

Grid:

• Size: Rasterabstand in Pixeln

Metadata:

• Version: Versionsnummer (z. B. „1.0.0")
• Category: Kategorie zur Organisation
• Tags: Kommagetrennte Tags für die Suche

Tab STYLES

Definieren Sie wiederverwendbare Stilvorlagen für Ihre Symbolelemente.

Rechtes Panel – Elementeigenschaften

Das rechte Panel zeigt die Eigenschaften des ausgewählten Elements.

Tab PROPERTIES

Wenn Sie ein Element auswählen, zeigt der Tab Properties seine konfigurierbaren Optionen:

General:

• Name: Elementbezeichner
• Type: Elementtyp (schreibgeschützt)
• Visible: Sichtbarkeit umschalten

Position:

• X/Y: Position auf der Zeichenfläche

Style:

• Fill Color: Hintergrundfarbe mit Deckkraft
• Stroke Color: Rahmenfarbe mit Deckkraft
• Stroke Width: Rahmendicke
• Line Type: Solid, Dashed, Dotted, Dash-Dot, Long Dash

Elementspezifische Einstellungen: Zusätzliche Optionen je nach Elementtyp (z. B. Eckenradius bei Rechtecken).

Transform Properties (Exposures)

Transform Properties ermöglichen es Ihrem Symbol, sich dynamisch anhand von Eingabewerten zu ändern. So erstellen Sie interaktive, datengesteuerte Symbole.

Eine Transform Property erstellen

1. Klicken Sie auf den Tab EXPOSURES
2. Klicken Sie auf ADD PROPERTY

Konfigurieren Sie die Eigenschaft:

Feld	Beschreibung
Name	Eigenschaftsbezeichner (z. B. „FillLevel")
Type	Number, Color, Boolean oder String
Min/Max	Wertebereich (für Zahlen)
Step	Inkrementschritt
Unit	Anzeigeeinheit (z. B. %, °, px)
Default	Anfangswert
Description	Optionale Beschreibung

Nach dem Speichern erscheint die Eigenschaft im EXPOSURES-Panel:

Bindings erstellen

Bindings verbinden eine Transform Property mit Elementattributen. Klicken Sie auf Edit Bindings, um zu konfigurieren, wie sich die Eigenschaft auf Elemente auswirkt.

Klicken Sie auf ADD BINDING, um ein neues Binding zu erstellen:

Binding-Konfiguration:

Feld	Beschreibung
Target	Zu transformierendes Element
Effect	Welches Attribut geändert wird
Anchor	Ankerpunkt der Transformation (für einige Effekte)
Expression	Formel, die value als Eingabe verwendet

Verfügbare Effekte:

Effekt	Beschreibung
Width/Height (px)	Elementabmessungen ändern
Rotation	Element drehen (Grad)
Offset X/Y	Elementposition verschieben
Scale	Gleichmäßige Skalierung
Scale X/Y	Gerichtete Skalierung
Fill Color	Füllfarbe ändern
Fill Opacity	Fülltransparenz ändern
Stroke Color	Rahmenfarbe ändern
Stroke Opacity	Rahmentransparenz ändern
Opacity	Gesamttransparenz
Visibility	Element ein-/ausblenden
Fill Level	Visualisierung der Tank-/Balkenfüllung (0-1)
Pass to Child Property	Wert an verschachteltes Symbol weiterleiten
Animation Enable/Disable	Animationen steuern

Beispiele für Ausdrücke:

// Pass value directly
value

// Scale 0-100 to 0-360 (for rotation)
value * 3.6

// Linear interpolation
lerp(value, 0, 100, 0, 360)

// Clamp to range
clamp(value, 0, 100)

// Color gradient based on value
lerpColor(value, 0, 100, "#00ff00", "#ff0000")

Fill-Level-Effekt

Der Fill-Level-Effekt ist speziell für Tank- und Anzeigevisualisierungen konzipiert:

Wenn er an ein Rectangle gebunden ist, füllt er die Form von unten nach oben basierend auf dem Wert (0 = leer, 1 = voll).

Simulation-Panel

Das Simulation-Panel ermöglicht es Ihnen, Ihre Transform Properties in Echtzeit zu testen, ohne den Designer zu verlassen.

Verwenden Sie den Schieberegler oder das Eingabefeld, um Werte zu ändern und die Ergebnisse sofort auf der Zeichenfläche zu sehen:

• Slider: Ziehen, um den Wert zu ändern
• Input: Genauen Wert eingeben
• Reset to default: Standardwert wiederherstellen
• RESET ALL: Alle Eigenschaften zurücksetzen

Animationen

Der Tab ANIMATIONS ermöglicht es Ihnen, SVG-Animationen zu Elementen hinzuzufügen:

• Attribute Animation: Beliebiges SVG-Attribut animieren
• Transform Animation: Drehen, skalieren, verschieben
• Motion Animation: Entlang eines Pfads bewegen
• Flow Particles: Partikeleffekte entlang von Pfaden

Animationen können über Transform Properties mit dem Effekt „Animation Enable/Disable" gesteuert werden.

Tastenkürzel

Tastenkürzel	Aktion
Ctrl+Z	Rückgängig
Ctrl+Y / Ctrl+Shift+Z	Wiederholen
Ctrl+C	Auswahl kopieren
Ctrl+V	Einfügen
Ctrl+D	Duplizieren
Delete	Auswahl löschen
Ctrl+G	Auswahl gruppieren
Ctrl+Shift+G	Gruppierung aufheben
Ctrl+A	Alles auswählen
Escape	Auswahl aufheben / Abbrechen
Pfeiltasten	Auswahl verschieben (1 px oder Raster-Einrasten)
Shift+Pfeiltasten	Um 10 px verschieben
V	Select-Werkzeug
H	Pan-Werkzeug
C	Connect-Werkzeug

Symbole speichern

Klicken Sie in der Toolbar auf SAVE, um Ihr Symbol zu speichern. Das Sternchen (*) neben dem Symbolnamen kennzeichnet nicht gespeicherte Änderungen.

Symbole verwenden

Nach der Erstellung können Symbole:

• In Process Diagrams verwendet werden: Symbole aus Bibliotheken auf Diagramm-Zeichenflächen ziehen
• An Runtime-Daten gebunden werden: Transform Properties mit Live-Daten von OctoMesh-Entitäten verbinden
• In anderen Symbolen verschachtelt werden: Komplexe Kompositionen durch Einbetten von Symbolen in Symbole erstellen

Best Practices

1. Verwenden Sie aussagekräftige Namen: Benennen Sie Ihre Eigenschaften und Elemente beschreibend
2. Legen Sie passende Bereiche fest: Konfigurieren Sie Min/Max-Werte, die zu Ihren Daten passen
3. Testen Sie mit der Simulation: Testen Sie Ihre Bindings immer vor dem Speichern
4. Organisieren Sie mit Kategorien: Verwenden Sie Kategorien und Tags für eine einfache Auffindbarkeit
5. Dokumentieren Sie Ihre Symbole: Fügen Sie Beschreibungen hinzu, damit andere Benutzer Ihre Symbole verstehen
6. Versionieren Sie Ihre Symbole: Aktualisieren Sie Versionsnummern bei wesentlichen Änderungen