ℹ️ Ultimate-Funktion. Das CSS-Styling steht ab QuickHMI 14.9.1 mit einer Ultimate-Lizenz zur Verfügung.

Mit dem CSS-Styling gestalten Sie das Erscheinungsbild Ihrer Visualisierung im Web-Viewer über eigene CSS-Regeln. So legen Sie Farben, Schriften, Rahmen, Abstände und weitere Darstellungseigenschaften zentral fest, ohne jedes Steuerelement einzeln im Editor anzupassen.

Wie es zusammenspielt

Das CSS-Styling besteht aus drei Bausteinen, die ineinandergreifen:

• CSS-Manager: Hier hinterlegen Sie Ihre CSS-Regeln in benannten CSS-Dateien und gruppieren sie bei Bedarf nach Kategorien.
• Selektoren am Steuerelement: Jedes Steuerelement erhält im Web-Viewer eine eindeutige ID (CssId) sowie automatische und eigene Klassen (CssClasses). Über diese Selektoren greifen Ihre Regeln gezielt auf einzelne Elemente, ganze Seiten oder Elementtypen zu.
• Web-Viewer (Laufzeit): Beim Ausführen bindet QuickHMI Ihre CSS-Dateien automatisch in die Web-Oberfläche ein und wendet die Regeln auf die passenden Elemente an.

Wo das CSS-Styling wirkt

Das CSS-Styling betrifft die Darstellung im Web-Viewer. Sie ergänzen damit das Standard-Erscheinungsbild der Visualisierung um eigene Gestaltungsregeln. Die Zuweisung der Regeln erfolgt vollständig im Editor; im laufenden Betrieb ist kein weiterer Schritt nötig.

Die Themen im Überblick

• CSS-Manager: CSS-Dateien anlegen, benennen und verwalten.
• Elemente ansprechen: CssId, CssClasses und die automatischen qh--Klassen als Selektoren.
• Praxisbeispiele: typische Styling-Aufgaben Schritt für Schritt.