Shapes and Styling

Every item on an HMI Screen, from a plain rectangle to a Pipe or a live Switch, is placed the same way: drag a tile out of the Add menu onto the canvas, or click a tile to drop it centered on whatever part of the canvas is currently visible. Clicking the same tile (or a different one) several times in a row cascades each new Shape a little further down-right, so repeated clicks never stack invisibly on top of each other.

This page covers the Shapes, Text, and Picture categories, plus every generic styling option available on a plain Shape. Controls, Indicators, and Machines covers everything with its own live behavior instead.

Moving, resizing, and rotating

Every Shape, regardless of type, is manipulated the same way in Mouse mode:

• Move: click and drag anywhere inside the Shape.
• Resize: drag one of the 8 handles around a selected Shape's own border.
• Rotate: drag the small handle above the top-center resize handle.
• Delete: select it and press Delete or Backspace.

While dragging, the Shape snaps against other Shapes' edges, centers, and matching sizes, and against the canvas border, unless the Alt key is held to temporarily disable snapping for that one drag. See Organizing and Reusing Screens for the full snapping configuration.

Shapes

The Add > Shapes category holds 22 basic geometric primitives, useful on their own or as building blocks combined into a custom icon via Group, Merge shapes, or Keep outline (see Organizing and Reusing Screens):

Shape	Notes
Rectangle
Rounded square
Circle	Resize non-uniformly to get an ellipse
Triangle	Isoceles, apex pointing up
Right triangle	Right angle at the bottom-left corner
Diamond
Pentagon
Hexagon
Heptagon
Octagon
Star	5-point
Star (4-point)
Parallelogram
Trapezoid
Kite
Cross	Equal-armed plus sign
Semicircle	Flat edge on the bottom
Quarter circle	A quarter-wedge silhouette
Ring	A donut/annulus outline
Moon	A crescent
Cylinder	The classic flowchart/database silhouette: useful as a lightweight storage vessel where the full Liquid tank (see Controls, Indicators, and Machines) is more than you need
Block arrow	A thick, closed, fillable flow-direction arrow. Different from the Connexions category's own Arrow, which is a thin connector meant to link two Shapes together, not a plain decorative shape (see Controls, Indicators, and Machines)

Custom shape and Modulable line

Two entries in Add > Shapes are editable directly on the canvas instead of having a fixed silhouette:

• Custom shape: starts as a plain square. In its style menu, Add point / Remove point add or drop vertices; drag any vertex directly on the canvas to reshape it. A vertex can be dragged anywhere, even outside the shape's own current box — the box itself grows or shifts to fit wherever you drop it, so there's no artificial limit to how far you can reshape it. Because its own vertices already are its resize mechanism, a Custom shape has no box resize handles (rotation still works normally). Everything else — border, background/gradient, text color, Static/Dynamic binding, Notifications — works exactly like any other Shape.
• Modulable line: the same add/remove/drag-anywhere point editing as a Custom shape, but forms an open line instead of a closed, fillable shape. Its thickness and color are the same Border size / Border color fields every Shape has (labeled Thickness / Line color here instead); since an open line has no interior to fill, background, gradient, text color, the Static/Dynamic toggle, and Notifications are all hidden for this one.

Text items

The Add > Text category places floating text:

• Text: a plain, freely editable label. Double-click to type.
• Date, Time, Date & time: a live, auto-updating clock display, formatted according to a preset you choose from the style menu (no free typing: what you see is what every operator sees, always current).
• Dynamic text: shows a bound sibling's live value directly, with no static text of its own. Wire it up the same way as any other Dynamic-mode binding, see Dynamic Bindings and Notifications.

Every Text item supports the same border and background/gradient fields described below as a plain Shape — they default to invisible (no border, transparent background), so an existing Text item looks exactly the same until you explicitly add one.

Any plain Shape can also carry its own text label: double-click it in Mouse mode to type directly onto it, styled via the same Text color field described below.

Pictures

Add > Picture opens your operating system's file picker. Pick an image (PNG, JPEG, and so on) and it's placed on the canvas as a resizable, rotatable Shape, styled with a real border and background frame behind the image itself. The image itself never distorts when you resize the Shape to a different aspect ratio; it simply keeps its own proportions inside the new frame.

Large source images are downscaled automatically before being stored, so a multi-megapixel photo doesn't bloat the Screen's own saved size. The image data travels with the Screen itself (in its saved and exported content), so there's nothing extra to manage or re-upload later.

tip

Project > Import SVG works the same way but for a vector .svg file, placed as the same kind of Shape. Unlike a photo, an SVG import shows only background color, opacity, and the solid/gradient toggle in its style menu, no border, since a border rarely makes sense on a logo or icon. It also never gets downscaled: a vector image has no fixed resolution to lose.

Styling a plain Shape

Right-click any plain Shape (not a live Control, which has its own dedicated style options — see Controls, Indicators, and Machines) to open its style menu:

• Name: every Shape has a unique name, auto-generated at creation and editable here. This is what "Depends on" bindings and any future reference to this Shape use to identify it.
• Proportional: locks width and height together (a perfect square) at all times. Turning it on immediately squares the Shape's current box (using whichever side is currently larger); every resize afterward keeps it square, whichever handle you drag. Not offered for a Pipe, Valve, decorative connector, or a Custom shape/Modulable line — none of these have the generic box resize this locks.
• Border size and Border color.
• Background color, with a Solid / Gradient toggle. Gradient blends a second color across the Shape in a chosen direction (up, down, left, right).
• Background opacity.
• Text color, for the Shape's own optional double-click text label.
• Static / Dynamic toggle: switches from these fixed colors to a live "Depends on" binding instead. See Dynamic Bindings and Notifications.
• Notifications: configure threshold alerts on this Shape's own live value, if it has one. See Dynamic Bindings and Notifications.
• Save as: turns this one Shape into a reusable template in your own palette. See Organizing and Reusing Screens.
• Delete.

Every color field across the editor, not just this menu, shows a row of one-click favorite color swatches next to the native color picker. Configure your own set from Preferences > Favorite colors: add, remove, or edit any swatch, and it updates everywhere immediately.