Skip to main content
Version: 1.0.4

The Designer

The Designer is where operator screens are built. It runs in the browser, edits live — the gauge on your canvas is already moving — and publishes to LiveView, the runtime operators use.

The workspace

AreaContents
CanvasThe view being edited.
Component palette53 widgets, 9 drawing tools, and 1048 P&ID and electrical symbols.
Project browserViews, scripts, named queries and assets in the project.
Properties panelThe selected component's properties, with a bind control on each.
Binding managerConfigure the source and transforms for a bound property.
Event managerAttach actions to component events.
Namespace panelThe tag tree, for drag-to-bind.

Building a screen

  1. Create a view and pick its layout mode.
  2. Drop components from the palette.
  3. Bind properties to tags, expressions, other components or queries. → Property bindings
  4. Attach events — navigate, write a tag, run a script, show a notification. → Event actions
  5. Save. The view is served to LiveView immediately.

What makes a good screen

Three principles carry most of the value:

Show state, not data. An operator needs to know whether the line is healthy, not to read fourteen numbers and decide. Use colour, position and shape to make the abnormal obvious, and keep raw values available for when it is not.

Build one thing once. Twenty motors deserve one faceplate view, embedded twenty times with a parameter — not twenty screens. The visualization counterpart of a UDT is an embedded view.

Do the work on the tag, not on the screen. Units, scaling, formatting and deadband belong to the tag, where every screen inherits them. A formatting decision repeated in forty widgets is forty places to be inconsistent.

Live authoring

The canvas is connected to real data while you design. Bindings resolve, tags update, alarms annunciate. The live preview in the binding manager shows the resolved value with its transforms applied — so you find out that your expression divides by zero at commissioning-time, not at 03:00.

Concurrent editing

View resources are optimistically locked. Saving carries the revision you loaded; a concurrent save by someone else is rejected with a conflict rather than silently overwriting. Presence indicators show who else is in the project.

Assets

StoreScopeUse
File libraryGateway-wideShared images, models, documents (needs Manage the library)
Project filesOne projectAssets specific to this application
UploadsWorkspaceFiles written by scripts (system.files.*) and by the Upload widget

Assets are referenced by path, so a replaced file updates every screen that uses it.

Permissions

ActionPermission
Open the Designer, edit viewsManage the Designer
Export / import the view treeManage the Designer
Manage the file libraryManage the library
View published screensView projects, or a runtime role in LiveView

In this section

PageContents
Views & layoutLayout modes, embedded views, repeaters, navigation
Property bindingsTag, property and query bindings; transforms; indirection
Event actionsEvery action a component event can perform
Drawing & symbolsVector shapes, and the P&ID and electrical symbol library
LiveViewThe operator runtime
ComponentsThe complete widget reference