Skip to main content

Shape

The Shape element is a versatile visual container component (similar to an HTML div) that allows creating backgrounds, panels, headers, or visual groupings within the synoptic. It is essential for aesthetic design and interface organization.

Properties marked with bolt allow dynamization from an expression with variables.

General​

Basic identification and position configuration.

Name (string)​

Unique identifier of the element.

Description (string)​

Optional descriptive text.

X bolt (number)​

Horizontal position in pixels.

Y bolt (number)​

Vertical position in pixels.

Z bolt (number)​

Depth index (z-index).

Width bolt (number)​

Width of the element in pixels.

Height bolt (number)​

Height of the element in pixels.

Style​

Visual customization of the component.

Hidden bolt (boolean)​

Makes the element invisible.

Background Color bolt (color)​

Fill color of the container.

Border Color bolt (color)​

Global border color.

Border Color [Top/Bottom/Left/Right] (color)​

Specific color for each side.

Border Radius bolt (number)​

Corner rounding.

Border Width bolt (number)​

Global border thickness in pixels.

Border Width [Top/Bottom/Left/Right] (number)​

Specific thickness for each side.

Border Style bolt (string)​

Global stroke type (Solid, Dotted, Hidden, etc.).

Border Style [Top/Bottom/Left/Right] (string)​

Specific stroke type for each side.

Rotate bolt (number)​

Rotation angle in degrees.

Transition (string)​

CSS transition definition.

Anchor Point [Vert./Horiz.] (string)​

Defines which edge of the element acts as the fixed position reference. Extremely useful when dynamically resizing elements (e.g., a progress bar): if you anchor vertically to "Bottom", increasing the height will cause the element to grow upwards, keeping its base fixed on the synoptic.

Background Fill (object)​

Allows creating a progressive fill effect (0-100%) over the shape's background. It is configured by defining the Direction, Color, an initial Value, and a Variable to dynamize it.

Use Case: Visualizing a water tank level. By setting the direction "Bottom to Top", if the associated variable is 50, the shape will appear half-filled with the selected color.

Shadow (string)​

Allows selecting a predefined shadow level (None, Small, Medium, Large).