Advanced

PLCVisu CSS Editor – Technical Documentation

PLCVisu CSS Editor – General Introduction

The PLCVisu CSS Editor allows you to globally define visual styling rules for your user interface components using standard CSS syntax. It is a powerful tool to customize the appearance and behavior of SVG elements, buttons, outputs, tables, and other UI controls — without changing their logic or structure.

Key Characteristics:

• Global Scope: All styles defined in the CSS Editor apply to all matching elements across the entire application.
• Standard CSS Syntax: Follows conventional CSS selectors (#id, .class, pseudo-classes like :hover, etc.).
• Live Styling: Changes are applied immediately in the frontend upon saving.
• Element Targeting: Styles can be applied using either:
  • id="..." attributes for SVG and control elements
  • class="..." definitions, assigned via the "Class" field in each control’s property panel

Workflow Overview:

1. Access the CSS Editor
   Navigate to:

   Burger Menu → CSS Editor

2. Define Styling Rules
   Use any valid CSS rules (within the supported subset) to style controls and SVGs.

3. Assign Classes to Controls
   For UI controls (e.g. buttons, outputs, tables), assign a CSS class. Go to the "Pages" Editor select a control, got to "control properties" on the right side and via the “Class” field (scroll down) you define the Class you refering later in the CSS Ediot (note: beachte groß und klein schreibung )

4. Save and Apply
   Click Save in the CSS Editor. Reload the frontend or page to see the visual changes.

Supported Features

CSS Feature	Status	Notes
fill, stroke	✅ Yes	Full color control for SVG elements
opacity	✅ Yes	Can be animated with transition
transform: scale()	✅ Yes	Works smoothly
transform: rotate()	✅ Yes	Rotates element on hover or other state
transform: translate()	✅ Yes	Moves elements spatially
transition	✅ Yes	Animates transform, fill, stroke, opacity, etc.
cursor: pointer	✅ Yes	Useful for hover indicators
stroke-width	✅ Yes	Dynamically changes line thickness
stroke-dasharray	✅ Yes	Allows dashed lines and animation-like transitions
stroke-linecap	✅ Yes	Rounded line ends supported
:hover	✅ Yes	Fully supported
:not()	✅ Yes	Logical negation confirmed
Multiple selectors	✅ Yes	Comma-separated IDs apply uniformly

---

Not (Yet) Supported

CSS Feature	Status	Notes
[code_block_23]	❌ No	No effect observed
[code_block_24]	❌ No	Does not hide or show elements
[code_block_25]	❌ No	Interaction remains unchanged
[code_block_26]	❌ No	No visual effect, ignored
[code_block_27]	❌ No	No visible blur detected
[code_block_28] / [code_block_29] (for corners)	❌ No	Rounded corners not rendered

---

Working Examples

Example: Custom Styling for Basic Output Control

To apply custom styling to a Basic Output control, assign a class name via the "Class" field in the control’s property panel (e.g. [code_block_30]). Then define the corresponding styles in the CSS Editor:

[code_block_31]

---

Example: Custom Styling for Button Control

To apply styling to a button in PLCVisu, enter a class name in the "Class" field (e.g. [code_block_32]) of the button’s property panel. Then define the visual behavior in the CSS Editor.

[code_block_33]

Result:

• The button appears in a bright blue with white text.

• On hover, it scales slightly and darkens.

• On click, it darkens further and shrinks slightly.

• The button remains fully functional and can trigger actions or navigation.

---

Example: Custom Styling for Map Controls

To visually enhance the appearance of a map (e.g. Google Maps), assign a class to the Map Control via the “Class” field, such as [code_block_34]. Then use the CSS Editor to define its visual behavior:

[code_block_35]

SVG Examples

Step-by-Step Setup for SVG editing

1. Prepare an SVG
   Create or download an SVG file with identifiable [code_block_36] attributes (e.g. [code_block_37]).

2. Upload the SVG
   Go to:
   Burger Menu → Controls → Elements → + Add
   Upload your SVG file here.

3. Insert the SVG into a Page
   Navigate to:
   Pages → Editor → Custom Elements
   Drag & drop the uploaded SVG into your container layout.

4. Style the SVG with CSS
   Go to the CSS Editor (via Burger Menu) and enter rules like:

1. Transparency and Scaling Example

[code_block_38]

2. Rotating Example

[code_block_39]

3. SVG Border Animation

An SVG element starts with a dashed red outline and becomes solid green and thicker on hover.

[code_block_40]

⚠️ Limitation: Table Styling via CSS Classes

While most controls in PLCVisu can be visually customized via CSS, the Table controls (e.g., Basic Table, Editable Table) do not respond to external CSS targeting of rows, cells, or internal table structures.

• Classes assigned to the control via the “Class” field do not penetrate into the rendered row or cell structure.
• Selectors like [code_block_41], [code_block_42], or even [code_block_43] have no visible effect.
• The internal rendering mechanism may rely on encapsulated components, custom renderers, or non-standard DOM elements (e.g., Canvas or Shadow DOM).

Table appearance must currently be controlled via the built-in styling options provided in the control configuration.