The Displays module creates the Operator UI that runs on desktop, web and mobile users.

Modules → Displays | Tutorial | How-to Guide | Reference

Displays Module Overview

The Displays module creates the Operator UI that run identically across desktop, web, and mobile platforms using a unified designer and WebAssembly technology for high-performance visualization.

Key Concepts

  • *Display/Screen*: Page or dialog for operator user interfaces
  • *Layout*: Frame organization with sidebars, top bars, and main content areas
  • *Client*: Each operator connection interacting with displays
  • *Canvas Displays*: Process synoptics with fixed element relationships
  • *Dashboard Displays*: Responsive grid-based data presentation
  • *RESS*: Responsive Design + Server-Side Components for device optimization

Canvas Displays and Dashboard Displays

Canvas Displays: Process synoptics with fixed element relationships
Maintain element relationships during resize, ideal for process diagrams and P&IDs.

Dashboard Displays: Responsive grid-based data presentation
Reorganize blocks based on window size, perfect for KPIs and data visualization.

RESS Technology for Mobile Client

  • The feature: Both Canvas and Dashboards displays, can be responsive, adapting automatically to user screen size and devices. 
  • The problem that remains: responsive UI does not solve the issues that a display designed originally to large desktop will never be practical for mobile users.
  • The solution: RESS = Responsive Design + Server-Side Components

RESS Technology: Server detects device class (phone, tablet, desktop) and delivers optimized content while maintaining responsive behavior within each class. This provides fast loading with flexible layouts.

RESS means fast + flexible: we detect your device on the server, send only the right page for it, and the layout still responds smoothly to in-between screen sizes.

How RESS works: the server recognizes your device class (phone, tablet, desktop) and delivers a light, tailored page—images, code, and content sized for that device. The page is still responsive, so it adapts fluidly between breakpoints. You get the speed of adaptive delivery with the flexibility of responsive design. See it in action:

Runtime Behavior

Client Types

  • *Rich Client*: Native Windows desktop application
  • *Smart Client*: Lightweight desktop client
  • *Web Client*: Browser-based access
  • *Mobile Client*: Touch-optimized mobile interface

Themes

 Switch visual styles without redesign

Features Highlights

  • *Design Once, Deploy Everywhere* - Single configuration for all platforms
  • *WebAssembly Performance* - Near-native speed in browsers
  • *Unified Designer* - One tool for both HMI graphics and web dashboards
  • *.NET WPF and HTML5* - Dual technology support from single design
  • *Smart Symbol Library* - Extensive collection of industrial graphics
  • *Data Template Integration* - Automatic symbol-to-tag connections
  • *Multi-Language Support* - Runtime language switching
  • *Units Conversion* - Automatic metric/imperial conversion
  • *Self-Aware SCADA* - Dynamic display generation from asset models
  • *Multi-Frame Layouts* - Complex display compositions
  • *Touch Optimization* - Gesture support for mobile devices

Explanation - to understand concepts

→ Modules / User Interactions / Displays Module

Tutorials - to learn by doing

→ Tutorials /   User Interactions / Displays Module Tutorial

How-to Guides - to accomplish specific tasks

→ How-to Guides / User Interactions / Displays Module How-to Guide

Reference - technical details

→ Technical Reference /  User Interactions / Displays Module Reference


  

In this section...