Advanced

PLCVisu CSS Editor – Technische Dokumentation

PLCVisu CSS Editor – Allgemeine Einführung

Der PLCVisu CSS Editor ermöglicht es Ihnen, globale visuelle Stylingregeln für Ihre Benutzeroberflächenkomponenten mithilfe standardmäßiger CSS-Syntax zu definieren. Es ist ein leistungsstarkes Werkzeug, um das Erscheinungsbild und Verhalten von SVG-Elementen, Buttons, Ausgaben, Tabellen und anderen UI-Steuerelementen anzupassen – ohne deren Logik oder Struktur zu verändern.

Hauptmerkmale:

Globale Gültigkeit: Alle Styles, die im CSS Editor definiert werden, gelten für alle passenden Elemente in der gesamten Anwendung.
Standard-CSS-Syntax: Verwendet konventionelle CSS-Selektoren (#id, .class, Pseudoklassen wie :hover, etc.).
Live-Styling: Änderungen werden sofort im Frontend wirksam, sobald sie gespeichert sind.
Element-Zuweisung: Styles können angewendet werden über:
- id="..."-Attribute bei SVG- und Steuerelementen
- class="..."-Definitionen, die über das Feld „Class“ im Eigenschaftenbereich (Property Panel) jedes Steuerelements zugewiesen werden

Workflow-Übersicht:

CSS Editor aufrufen
Navigieren Sie zu:
Burger-Menü → CSS Editor
Styling-Regeln definieren
Verwenden Sie beliebige gültige CSS-Regeln (innerhalb des unterstützten Teilbereichs), um Steuerelemente und SVGs zu gestalten.
Klassen zuweisen
Für UI-Steuerelemente (z. B. Buttons, Ausgaben, Tabellen) eine CSS-Klasse zuweisen: Öffnen Sie den „Seiten“-Editor (Pages), wählen Sie ein Steuerelement aus, gehen Sie rechts zum Bereich „Eigenschaften“ (Control Properties) und scrollen Sie zum Feld „Class“. Dort vergeben Sie den Klassennamen, den Sie später im CSS Editor referenzieren. (Oder durch die id)
Hinweis: Groß- und Kleinschreibung ist relevant!
Speichern und Anwenden
Klicken Sie auf „Save“ im CSS Editor. Laden Sie das Frontend oder die Seite neu, um die visuellen Änderungen zu sehen.

Unterstützte Funktionen

CSS-Funktion	Status	Hinweise
`fill`, `stroke`	✅ Ja	Volle Farbkontrolle für SVG-Elemente
`opacity`	✅ Ja	Kann mit `transition` animiert werden
`transform: scale()`	✅ Ja	Funktioniert reibungslos
`transform: rotate()`	✅ Ja	Dreht das Element bei Hover oder anderem Zustand
`transform: translate()`	✅ Ja	Verschiebt Elemente räumlich
`transition`	✅ Ja	Animiert `transform`, `fill`, `stroke`, `opacity` usw.
`cursor: pointer`	✅ Ja	Nützlich für Hover-Indikatoren
`stroke-width`	✅ Ja	Verändert dynamisch die Liniendicke
`stroke-dasharray`	✅ Ja	Erlaubt gestrichelte Linien und Übergänge mit Animationseffekt
`stroke-linecap`	✅ Ja	Abgerundete Linienenden werden unterstützt
`:hover`	✅ Ja	Vollständig unterstützt
`:not()`	✅ Ja	Logische Negation funktioniert
Mehrere Selektoren	✅ Ja	Komma-separierte IDs werden gleichmäßig angewendet

Noch nicht unterstützt

CSS-Funktion	Status	Hinweise
[code_block_23]	❌ Nein	Keine sichtbare Wirkung
[code_block_24]	❌ Nein	Elemente werden nicht versteckt oder angezeigt
[code_block_25]	❌ Nein	Interaktion bleibt unverändert
[code_block_26]	❌ Nein	Kein visueller Effekt, wird ignoriert
[code_block_27]	❌ Nein	Kein sichtbarer Weichzeichner
[code_block_28] / [code_block_29] (für Ecken)	❌ Nein	Abgerundete Ecken werden nicht dargestellt

Anwendungsbeispiele

Beispiel: Individuelles Styling für ein Basis-Ausgabe-Element (Basic Output Control)

Um ein benutzerdefiniertes Styling auf ein Basis-Ausgabe-Steuerelement anzuwenden, vergeben Sie über das Feld „Class“ im Eigenschaftsbereich des Steuerelements einen Klassennamen (z. B. [code_block_30]). Definieren Sie anschließend die passenden Regeln im CSS Editor:

[code_block_31]

Beispiel: Individuelles Styling für einen Button

Um einem Button in PLCVisu ein eigenes Styling zu geben, tragen Sie einen Klassennamen in das Feld „Class“ im Eigenschaftenbereich ein (z. B. primary-button). Definieren Sie dann das gewünschte Verhalten im CSS Editor:

[code_block_32]

Ergebnis:

Der Button erscheint in einem leuchtenden Blau mit weißer Schrift.
Beim Hover vergrößert er sich leicht und wird dunkler.
Beim Klicken dunkelt er weiter ab und schrumpft etwas.
Der Button bleibt voll funktional und kann Aktionen oder Navigation auslösen.

Beispiel: Individuelles Styling für Karten-Steuerelemente (Map Controls)

Um das Erscheinungsbild einer Karte (z. B. Google Maps) visuell zu verbessern, weisen Sie dem Kartensteuerelement eine Klasse über das Feld „Class“ zu – z. B. custom-map. Verwenden Sie anschließend den CSS Editor:

[code_block_33]

SVG-Beispiele

Schritt-für-Schritt-Anleitung für SVG-Styling

Ein SVG vorbereiten
Erstellen oder laden Sie eine SVG-Datei mit klar definierten [code_block_34]-Attributen (z. B. [code_block_35]).
SVG hochladen
Navigieren Sie zu:
Burger-Menü → Steuerelemente (Controls) → Elemente (Elements) → + Hinzufügen (+ Add)
Laden Sie Ihre SVG-Datei hier hoch.
SVG auf einer Seite einfügen
Gehen Sie zu:
Seiten (Pages) → Editor → Benutzerdefinierte Elemente (Custom Elements)
Ziehen Sie das hochgeladene SVG in ein beliebiges Layout-Containerfeld.
SVG mit CSS gestalten
Öffnen Sie den CSS Editor (über das Burger-Menü) und definieren Sie Regeln wie:

1. Transparenz- und Skalierungsbeispiel

[code_block_36]

2. Rotationsbeispiel:

[code_block_37]

3. SVG-Rahmen-Animation

Ein SVG-Element startet mit einem gestrichelten roten Rahmen und wird beim Hover grün, dicker und glatt:

[code_block_38]

⚠️ Einschränkung: Tabellen-Styling (Table Styling) per CSS-Klassen

Während die meisten Steuerelemente in PLCVisu visuell per CSS gestaltet werden können, reagieren die Tabellen-Steuerelemente (z. B. Basis-Tabelle, editierbare Tabelle) nicht auf externe CSS-Klassen, die auf Zeilen, Zellen oder interne Strukturen zielen.

Über das Feld „Class“ zugewiesene Klassen wirken nicht auf die gerenderte Zeilen- oder Zellenstruktur.

Selektoren wie .table-highlight td, .table-highlight tr:hover oder .table-highlight zeigen keine sichtbare Wirkung.

Die interne Renderlogik nutzt möglicherweise kapselnde Komponenten, Custom Renderer oder nicht-standardisierte DOM-Strukturen (z. B. Canvas oder Shadow DOM).

Die Gestaltung des Tabellen-Erscheinungsbilds muss derzeit über die integrierten Stylingoptionen in der Steuerungskonfiguration erfolgen.

Inhaltsangabe: