Skip to main content

Image

The Image element allows incorporating graphics, photographs, or icons into the synoptic. It is essential for displaying logos, equipment diagrams, complex visual states, or simply for decorating the interface. It supports standard web image formats.

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.

Image bolt (file)​

Allows uploading an image file.

Style​

Visual customization of the component.

Aspect Ratio (string)​

Defines the resizing behavior (Free or Fixed). Default is Fixed.

Hidden bolt (boolean)​

Makes the element invisible.

Background Color bolt (color)​

Background color (visible if the image is transparent).

Border Color bolt (color)​

Global border color.

Border Radius bolt (number)​

Corner rounding.

Border Width bolt (number)​

Global border thickness in pixels.

Border Style bolt (string)​

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

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.

Shadow (string)​

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