Overview

Traditionally, robotic cells require custom-built HMIs that are costly to produce and maintain. Widgets are the building blocks to create these customisable interfaces.

Widgets are configurable components that can be added to pages and popups.

They exist to:

• Allow flexibility when designing a page or popup.
• Provide a way to visualize real-time and historical data.
• Reduce the cost and complexity of building and maintaining project-specific HMIs

Typical Scenarios

Widgets are used when:

• A user needs dashboards for KPIs, charts, live telemetry, or equipment status
• Operators must interact with machine states, flags, or job parameters
• Integrators want to expose debugging or diagnostic widgets during commissioning
• Maintenance users need access to system logs and real-time values
• Project teams require page-based layouts for production-ready HMIs

Who Benefits

(Note: Operators cannot access the Tools Section.)

Feature Overview

Widgets can be found when creating or editing a page. To add a widget to a page, select the ’+’ icon and drag the widget onto the page.

All widgets share the same anatomy:

• States: This allows the widget’s state to be configured using StateExpressions. Currently, only enabling or disabling widgets can be done.
• Edit: This is the main configuration point for widgets.
• X: The widget can be removed from the page with this.
• Copy/Paste: When a widget is selected (i.e. by clicking in the area of a widget) an outline appears allowing the widget to be copy pasted using the Ctrl+C & Ctrl+V shortcuts. This functionality is supported across pages.

Widget Catalog

Button Widget

The Button widget allows users to perform certain actions when a button is pressed. This currently consists of the following:

• Program:
  • Starting a program
  • Stopping the running program
• Data Fields:
  • Set a Data Field to a fixed value

By editing the widget we can configure the properties and information displayed on the widget.

In this view, the Button widget can be configured as follows:

• Button Type: The action the button should perform, one of:
  • Start Python
  • Stop Python
  • Data Field Handler
• Button Text: The text to display on the button.
• Text Colour: The colour of the text on the button (either Light or Dark).
• Select Colour: The background colour of the button.
• Text Size: Configurable sizing of the text on the widget.
• Button Options: The action the button performs, depending on the set Button Type
  • Start Python
    • Select Python File: Select the python file to run when this button is pressed.
  • Data Field Handler
    • Select Datafield: Select a Data Field to set
    • Set Value: Set the selected Data Field to the set value

Usage With Data Fields

To use a button to set a Data Field value, select Data Field Handler as the Button Type, then choose the target Data Field and set the value to assign when the button is pressed.

Usage with Python

To use a button to start or stop a Python script, select Start Python or Stop Python as the Button Type, then select the Python file to run.

Data Field Widget

The Data Field widget enables users to view the value of data fields. When the widget is first created, it will look like:

By editing the widget we can configure the properties and information displayed on the widget.

In this view, a Data Field can be selected from the existing list of data fields and various fields can be configured:

• Title: A title to optionally display alongside the value of the Data Field.
• Data Field: The selected Data Field.
• Units: A unit to optionally display additional information about the data field (e.g. minutes, cycles, etc).
• Text & Title Sizes: Configurable sizing of the text on the widget.

The example below shows a Data Field widget configured to view a cycle counter data field:

Mapping values to human-readable outputs (e.g., system states, enums) can be useful. Use the value mapping functionality to map a data field value to a constant output:

The widget will now display the mapped value instead of it’s original value:

Editable Data Field Widget

The Editable Data Field Widget allows users to modify the value of Data Fields.

Editing the widget provides a similar interface as the Data Field Widget, but with a few additions:

• Use Dropdown Selection: This enables selecting mapped values from a dropdown instead of manual input.
• Define Editing Constraints: This constrains input values by the provided min and max limits. For number-based Data Fields, these are the numeric bounds; for string-based Data Fields, they define the minimum or maximum character count.

Once configured, the resulting widget should look like:

Modify the Data Field value by selecting the pen icon at the top right or clicking the value. This opens an input interface. On touch screen devices, a keypad appears for input without a physical keyboard.

If the provided input is larger than the constraints, saving the Data Field will be prohibited

Once a valid value has been input, pressing the submit value allows the Data Field to be set

Values can also be selected from a dropdown. The configuration is similar to the Data Field widget, however the Use Dropdown Selection option must be selected to allow the input to be provided by a dropdown.

This then allows Data Fields to be modified from a dropdown:

The editable state of the widget can also be modified by using StateExpressions. To do this, select the States input on the widget.

A new screen allows setting a condition using StateExpressions. For example, a widget can be disabled by checking a Data Field’s value and the main program’s running state. An additional field enables debugging by displaying the condition with current parameter values. The Show Values checkbox replaces the Data Field name with its value to reveal the full resolved expression.

The widget will have an overlay that blocks user input until the StateExpression condition becomes false.

Lifecycle Placement

Configuration & Scope (High-Level)

Configurable Aspects

• Page layouts and structure
• Widget types, data bindings, thresholds, aggregation modes
• Visibility rules based on roles
• Environment-level or project-level data sources

Scope Boundaries

• Pages exist within a project
• Data sources may resolve to environment-specific values
• Operators have restricted functionality (no Tools Section)
• Admins define global defaults and permissions

Related & Dependent Features

Related

• HMI Configuration & Environment Management
• Project & Application Management
• Deployment & Operations (Live Monitoring)
• Simulation Panel (if widgets are used during simulation)

Dependencies

• Data services (time-series, logs, metrics)
• WebSocket real-time service
• Role-based permission module
• Widget framework

Version & Compatibility Notes

• Feature evolves as part of V-Portal’s HMI system; pages remain compatible across minor versions unless a widget type is deprecated
• Real-time updates depend on WebSocket support in the target environment
• Page templates may differ across major platform revisions

Related Documentation

• Feature-specific Usage Notes (HMI design guidelines, known limitations)
• General HMI Configuration & Environment Management
• Core Features → HMI overview pages
• Best practices for simulation, environment setup, and operations