Synoptics

The Synoptics module lets you create interactive vector diagrams of plants and devices. A synoptic is a graphic canvas where shapes, icons, text and images change their appearance in realtime based on field values.

The module consists of three pages:

• Listing — browse, create and manage synoptics;
• Editor — design synoptics with a visual editor;
• Realtime viewer — display synoptics with live data.

Key concepts

Synoptic document — a graphic canvas with configurable width and height (default 1920 × 1080 px) containing a list of elements.

Element — a geometric shape, icon, image or text placed on the canvas. Each element has visual properties (color, size, opacity) and can change its appearance through animations.

Animation — a conditional rule on an element. It defines: when it activates (conditions on a variable value), how the element changes (style overrides), and whether the transition is immediate or gradual.

Component — a special synoptic document containing reusable elements. A component can be instanced on other synoptics, and when the component is modified, all its instances update automatically.

Component parameter — a variable declared on a component (e.g. device, label). Animation conditions can reference parameters instead of specific tags; each instance provides concrete values (a tree node, a text, etc.), and at runtime the system resolves the parameter to the actual tag. This allows a single reusable blueprint across many similar devices. A parameter can be read through different accessors (.value, .valid, .path, .message).

Synoptics listing

The listing page shows all synoptics organized in two sections:

• Pages — displayed as a horizontal swipeable carousel;
• Components — displayed as a paginated grid.

Search and sort

• Search — filters synoptics by name across both pages and components;
• Sort — by most recent, A → Z, or Z → A.

Create a new synoptic

1. Click New synoptic
2. Enter a name, choose the type (Page or Component) and the canvas dimensions
3. Confirm to open the editor

Synoptic settings

From the listing, click the settings icon on a synoptic card to:

• Rename the synoptic;
• Change the background color (persistent);
• Delete the synoptic.

Image library

The Image library is a shared repository of images that can be used in synoptic elements (logos, plant photos, custom icons, backgrounds, etc.). Images uploaded to the library are available to all synoptics in the system.

How to open it

There are two entry points:

• From the listing page — click the settings (gear) icon in the top-right toolbar and select Image library from the menu;
• From the editor — when an image element is selected, click the image preview in the Style panel; the same library modal opens within the image picker.

What you can do

The library modal provides a two-tab interface:

Supported upload formats: PNG, JPEG, WebP, GIF.

Editor

The editor is the main authoring tool. It provides a full visual editing experience on an SVG canvas.

Layout

The editor is organized as follows:

• Canvas — the SVG drawing area, with optional grid and alignment guides;
• Action bar (bottom-left) — undo, redo, background color picker, link to the live view and (when there are unsaved changes) Save / Cancel buttons;
• Tools dock (floating) — shape tools, selection and Hand tool. Can be dragged and snapped to the top, bottom or left edge of the canvas;
• Components dock (floating) — opens from the tools dock when you select the Components button, showing the available reusable components to drag onto the canvas;
• Dock panels (floating, appears on demand) — opens when you start editing an element's style (e.g. by double-clicking it). Contains the Animations, Parameters, Style, Transform, Layers and Events panels organized as resizable tab groups.

Navigating the canvas

Adding elements

In the tools dock, select a shape: rectangle, circle, triangle, polygon, line, icon, image or text. Then click (or click-and-drag) on the canvas to place the element.

Selecting and moving elements

Resizing elements

Drag one of the 8 handles (corners and edges) on a selected element.

Editing text

Double-click a text element to enter inline editing mode. Press Enter or Esc to confirm.

With the Text tool active, a single click on a text element enters editing mode directly.

Styling elements

To open the Style panel for an element, double-click the element on the canvas. The dock panel opens with the editable properties of the selected element (and the default animation state pre-selected).

Available options depend on the element type and include: fill color, stroke, font size, opacity, rotation, border radius, shadows, and more.

The Style panel is organized in sections (Appearance, Stroke, Shadow, Text, Content) that you can collapse independently to focus on what you are editing.

Adding images

1. Select the Image tool from the tools dock
2. Click on the canvas to place the image (click-and-drag for custom size)
3. The image picker modal opens with two options:
   • Library — choose from uploaded images with search and drag-drop upload
   • URL — enter an external URL with live preview
4. Confirm the selection

Image style options

With an image element selected, the Style panel shows:

Alignment and distribution

With two or more elements selected, alignment buttons appear to:

• Align — left, center, right, top, middle, bottom;
• Distribute — evenly spaced horizontally or vertically.

Layer management

The Layers panel shows all elements as a list, from front (top) to back (bottom).

• Reorder — drag a row to change the z-order;
• Rename — right-click an element and choose "Rename" to assign a descriptive name;
• Visibility — toggle the eye icon to show/hide an element in the editor;
• Lock — toggle the lock icon to prevent selection and dragging;

Canvas settings

Background color

Click the color picker button in the action bar (next to undo/redo) to change the canvas background color in realtime.

Resize canvas

Open the resize dialog from the settings to change the canvas dimensions. Optionally rescale all existing elements proportionally.

Dock panel layout

The right-side dock automatically adapts based on which panels you are using.

Within either mode, the panels are organized as tabs in dockable groups. You can:

• Drag a tab to a different group to reorganize the layout;
• Resize the dividers between groups;
• Switch tabs within a group to navigate between panels.

Your custom layout and the active mode are remembered across sessions.

Undo and redo

Saving

Press Ctrl + S or click the Save button that appears in the action bar when there are unsaved changes. Next to it, a Cancel button reverts the document to its last saved state.

Animations

Animations bind realtime values to the visual appearance of elements.

Adding an animation

1. Select an element on the canvas
2. In the Animations panel, click Add animation state
3. Name the state (e.g. "Alarm active")
4. Define the conditions:
   • Click + Add condition
   • Use the tree picker to select a variable (tag)
   • Choose an operator (e.g. =, >, ≥, between)
   • Enter the threshold value
5. Click the palette icon on the state to open the Style panel and define the visual override
6. Reorder states by priority: when multiple states match, the topmost one wins

The Default state (marked with a star) is always present and acts as the fallback when no other state matches.

Condition logic

• + Add AND condition — adds another condition to the same group (all must be true);
• + Add OR group — adds an alternative group (at least one group must be true).

Cross-plant conditions

The variable picker allows selecting tags from any available plant, not just the one associated with the synoptic. The realtime system automatically subscribes to all referenced plants.

Simulating a state

Click the play icon on a state header to force that animation on the canvas visually, useful for verifying the appearance without waiting for actual conditions to trigger.

Test console

The Test Console lets you manually force values on tags (without affecting the field) and verify that animations activate correctly before saving.

To open it, right-click on the canvas and choose Advanced → Simulator. The console appears as a floating, draggable panel.

Hover and press events

Each animation state can define additional style overrides for hover (mouse over) and press (mouse down) interactions. Configure these in the Events panel.

Transitions

Enable transitions on an animation state to apply style changes gradually. Configure the transition duration in milliseconds for smooth visual effects.

Components

Components are reusable synoptic documents that can be instanced across multiple pages.

Creating a component from scratch

1. From the listing, click New synoptic and choose type Component
2. Design the component in the editor as you would any synoptic
3. Declare parameters in the Parameters panel (top right of the editor)

Creating a component from selection

1. Select two or more elements on a page canvas
2. Right-click and choose Create Component
3. Name the component
4. The selected elements are replaced by an instance of the new component

Component parameters

Parameters make components configurable per instance (e.g. device, label).

1. In the component editor, click + Add parameter in the Parameters panel
2. Name the parameter (e.g. device)
3. In animation conditions, choose Parameter mode in the variable picker to bind to the parameter instead of a specific tag

Parameter accessors

A parameter can be read in four different ways without duplication:

Path expressions (advanced)

For tags relative to a parameter, compose a path with the parameter as anchor and additional literal steps (e.g. [@device, "ST", "INV Status"]) to bind a condition to a measure relative to the parameter device.

Instancing a component on a page

1. Open the Components dock at the bottom of the editor
2. Drag a component onto the canvas, or use the tools dock
3. Select the instance and open the Style panel
4. In the Parameters section, assign a value to each parameter:
   • Text — a literal value (e.g. INV-001)
   • Tree reference — select a specific node from the tree (e.g. an Inverter device)
5. Save with Ctrl + S

Editing a component

Open the component from the synoptics listing and edit it like any other synoptic. All instances of the component automatically reflect the changes.

Detaching a component instance

Right-click on a component instance and choose Detach to replace it with the resolved individual elements. This breaks the link to the component definition.

Realtime viewer

The realtime viewer displays a synoptic with live data from the field.

• Elements react automatically based on their animation conditions and the current tag values;
• The viewer supports multi-plant subscriptions: a single synoptic can reference tags from multiple plants;
• Component instances are fully resolved recursively, with parameters mapped to their assigned values;
• Text interpolation replaces dynamic placeholders with live values;
• Pan and zoom are available for navigation.

Keyboard shortcuts

File and history

Selection and editing

Alignment

Canvas navigation

Tools

Press a single letter (no modifiers) to switch tool:

Frequently asked questions

How do I switch between the editor and the realtime viewer?

You can navigate freely between the two pages without losing your work. Unsaved changes are preserved in the browser session. The Save / Cancel buttons in the action bar reappear when you return if there are pending changes.

Can a synoptic reference tags from multiple plants?

Yes. The variable picker allows selecting tags from any available plant. The realtime system automatically subscribes to all referenced plants.

What happens if I modify a component?

All instances of that component on every page are updated automatically. You do not need to update each instance individually.

How do I test animations without live data?

Use the Test Console to manually set variable values and see how animations react. You can also click the play icon on an animation state to force-preview it on the canvas.

What is the difference between a page and a component?

A page is a standalone synoptic meant for direct visualization. A component is a reusable building block that can be instanced on pages (or other components), with configurable parameters for each instance.