Page History

Build interactive operator displays and dashboards.

How-to → Pillars → Operator UI | Concept | Tutorial | How-to Guide

Where User Interface Fits

The UI layer is the human interaction point of your solution:

• Visualizes - Real-time data from the Unified Namespace
• Controls - Equipment through operator commands
• Analyzes - Historical trends and KPIs
• Alerts - Operators to alarm conditions
• Delivers - Information across all platforms

Core UI Components

Displays - Operational Screens

Primary operator UI for monitoring and control:

• Process Graphics - P&IDs, equipment status, animations
• Control Panels - Buttons, setpoints, mode selection
• Navigation - Multi-page applications with menus
• Popups - Detailed views and faceplates
• Responsive Layouts - Adapt to screen sizes

Dashboards - Analytics & KPIs

Executive and management information displays:

• Real-Time Metrics - Live KPI updates
• Charts & Graphs - Trend analysis
• Gauges & Indicators - Visual status
• Data Tables - Detailed information
• Drill-Down - Navigate from overview to details

Symbols & Graphics - Reusable Components

Library of intelligent graphic elements:

• Smart Symbols - Pre-built equipment graphics
• Custom Symbols - User-created components
• Animation - Dynamic behavior
• Templates - Parameterized graphics
• Libraries - Organized collections

Client Deployment - Multi-Platform Access

Deliver UI across all platforms:

• Rich Clients - Full-featured Windows applications
• Web Clients - Browser-based HTML5 access
• Mobile Apps - iOS and Android native apps
• Large Displays - Control room video walls
• Remote Access - Secure external connections

Display Designer

Design Canvas

Visual development environment:

1. Navigate to Displays → Pages
2. Click New Display or edit existing
3. Use design tools:
   • Drawing Tools - Shapes, lines, text
   • Control Palette - Buttons, inputs, lists
   • Symbol Library - Drag-drop components
   • Property Inspector - Configure behavior
   • Layout Tools - Align, distribute, group

Creating Pages

Build display pages:

1. Set page properties:
   • Size - Resolution (1920x1080, 1024x768)
   • Background - Color, gradient, image
   • Grid - Snap settings
   • Scaling - Fixed or responsive
2. Add visual elements
3. Configure navigation
4. Test in runtime

Graphics Elements

Basic Shapes

• Rectangle - Tanks, buildings, areas
• Ellipse - Pipes, vessels, indicators
• Polygon - Custom shapes
• Line - Connections, flows
• Text - Labels, values, messages

Controls

• Button - Commands and navigation
• TextBox - Data entry
• ComboBox - Selection lists
• CheckBox - Boolean options
• Slider - Analog adjustments
• ListBox - Multiple selections

Data Display

• TextOutput - Tag values
• Trend - Real-time charts
• Gauge - Analog indicators
• LED - Status lights
• ProgressBar - Levels and completion
• Table - Data grids

Animation Properties

Dynamic Properties

Configure runtime behavior:

• Visibility - Show/hide based on conditions
• Position - X/Y movement
• Size - Width/height scaling
• Rotation - Angle changes
• Color - Fill and stroke

Animation Examples

// Visibility based on state
Visible = @Tag.Motor.Running

// Color based on value
FillColor = @Tag.Tank.Level > 80 ? "Red" : 
            @Tag.Tank.Level > 50 ? "Yellow" : "Green"

// Position based on value
X = 100 + (@Tag.Valve.Position * 2)

// Rotation for gauge
Angle = @Tag.Pressure.Value * 2.7 - 135

// Size for bar graph
Height = @Tag.Tank.Level * 3

Navigation Setup

Page Navigation

Create multi-page applications:

1. Design individual pages
2. Add navigation controls:
   • Menu Bar - Top-level navigation
   • Tree View - Hierarchical navigation
   • Buttons - Direct page links
   • Tabs - Grouped pages
3. Configure navigation actions:

   OpenDisplay("Overview")
   OpenPopup("MotorFaceplate", @Tag.Motor1)
   CloseDisplay()

Popup Windows

Create detailed views:

• Faceplates - Equipment control panels
• Trends - Historical data
• Alarms - Acknowledgment screens
• Settings - Configuration dialogs
• Help - Context-sensitive information

Dashboard Creation

Dashboard Designer

Build analytical displays:

1. Navigate to Displays → Dashboards
2. Click New Dashboard
3. Select layout:
   • Grid - Tile arrangement
   • Flow - Responsive flow
   • Fixed - Absolute positioning
   • Tab - Multiple pages

Widget Types

Chart Widgets

• Line Chart - Trends over time
• Bar Chart - Comparisons
• Pie Chart - Proportions
• Area Chart - Cumulative values
• Scatter Plot - Correlations
• Heat Map - Matrix data

Indicator Widgets

• Gauge - Analog values
• Digital Display - Numeric values
• Progress Bar - Completion status
• Sparkline - Mini trends
• KPI Card - Metric with trend
• Status Light - Boolean states

Data Widgets

• Data Table - Tabular information
• Pivot Table - Data analysis
• Tree Map - Hierarchical data
• Timeline - Event sequences
• Calendar - Date-based data

Real-Time Updates

Configure dashboard refresh:

• Auto-Refresh - Periodic updates
• Push Updates - Real-time changes
• On-Demand - Manual refresh
• Partial Update - Widget-specific
• Cache Control - Performance optimization

Mobile Optimization

Design for mobile devices:

• Responsive Layout - Adapt to screen size
• Touch Controls - Finger-friendly buttons
• Gesture Support - Swipe, pinch, tap
• Simplified Graphics - Optimized for bandwidth
• Offline Mode - Cached data access

Symbol Development

Creating Custom Symbols

Build reusable components:

1. Go to Displays → Symbols
2. Click New Symbol
3. Design symbol graphics
4. Add parameters:
   • Tag Binding - Link to UDT
   • Properties - Configurable values
   • Methods - Symbol actions
5. Save to library

Symbol Example - Motor

xml

<Symbol Name="Motor">
  <Parameters>
    <Parameter Name="MotorTag" Type="Tag"/>
    <Parameter Name="Size" Type="Integer" Default="50"/>
  </Parameters>
  
  <Graphics>
    <Ellipse Width="{Size}" Height="{Size}"
             Fill="{MotorTag.Running ? 'Green' : 'Gray'}"/>
    <Text Value="{MotorTag.Speed}" 
          X="{Size/2}" Y="{Size+10}"/>
  </Graphics>
  
  <Animations>
    <Rotation Target="Ellipse" 
              Speed="{MotorTag.Speed/10}"
              Enabled="{MotorTag.Running}"/>
  </Animations>
</Symbol>

Symbol Libraries

Organize symbols:

• Standard Library - Common equipment
• Industry Library - Sector-specific
• Custom Library - Company standards
• Import/Export - Share between solutions

Smart Symbols

Pre-built intelligent components:

• Motor - Start/stop, speed, status
• Valve - Open/close, position
• Pump - Flow, pressure, status
• Tank - Level, temperature
• PID Loop - Setpoint, PV, output
• Conveyor - Speed, direction, load

Client Deployment

Rich Client (.NET)

Windows desktop application:

Features

• Full Graphics - WPF rendering
• Local Processing - Client scripts
• Multi-Monitor - Extended displays
• High Performance - Direct connection
• Offline Mode - Cached operation

Deployment

1. Install .NET Framework
2. Deploy client files
3. Configure connection:

   xml

   <ClientSettings>
     <Server>192.168.1.100</Server>
     <Port>9000</Port>
     <StartupDisplay>Overview</StartupDisplay>
     <AutoLogin>true</AutoLogin>
   </ClientSettings>

Web Client (HTML5)

Browser-based access:

Features

• Zero Install - No client software
• Cross-Platform - Any OS with browser
• Responsive - Desktop to tablet
• Secure - HTTPS/WSS
• Modern UI - HTML5/CSS3/JavaScript

Configuration

1. Enable web server in Runtime
2. Configure IIS or embedded server
3. Set security certificates
4. Access via browser:

   https://server:port/frameworkx

Mobile Apps

Native iOS and Android:

Features

• Native Performance - Optimized for mobile
• Push Notifications - Alarm alerts
• Offline Sync - Store and forward
• Device Integration - Camera, GPS
• Touch Optimized - Mobile gestures

Deployment

• iOS - App Store or enterprise
• Android - Play Store or APK
• Configuration - Server connection
• Security - Certificate pinning

Display Runtime Behavior

Data Updates

How displays receive data:

• Subscription - Register for tag changes
• Polling - Periodic value requests
• Events - Alarm and system events
• Commands - Operator writes
• Quality - Communication status

Performance Optimization

• Update Rates - Configure per display
• Dead Zones - Reduce unnecessary updates
• Grouping - Batch data requests
• Caching - Client-side storage
• Compression - Reduce bandwidth

User Interaction

• Click Events - Button presses
• Data Entry - Validation and limits
• Drag Operations - Slider movements
• Keyboard Shortcuts - Quick commands
• Touch Gestures - Mobile interactions

Security

Access Control

• Display Security - Who can open
• Control Security - Who can operate
• Area Security - Section access
• Feature Security - Function availability
• Time-Based - Shift restrictions

Security Configuration

Display: "Settings"
  ViewAccess: "Engineers, Administrators"
  ControlAccess: "Administrators"
  
Button: "StartPump"
  RequiredRole: "Operator, Supervisor"
  RequiredArea: "WaterTreatment"
  AuditLog: true

Best Practices

Display Design

• Follow ISA-101 HMI standards
• Use consistent color schemes
• Limit animations to meaningful changes
• Provide clear navigation paths
• Include help and documentation

Performance

• Optimize graphics for target resolution
• Minimize complex animations
• Use symbols for repeated elements
• Test on target hardware
• Monitor client performance

Usability

• Design for the operator's workflow
• Provide confirmation for critical actions
• Include alarm summaries on main displays
• Make navigation intuitive
• Test with actual users

Mobile Considerations

• Simplify for smaller screens
• Increase button sizes for touch
• Reduce data density
• Provide offline capability
• Test on various devices

Troubleshooting

Common UI Patterns

Pattern 1: Overview → Detail

Hierarchical navigation from plant to equipment:

• Plant overview with areas
• Area display with equipment
• Equipment faceplate with details
• Trend popup for history

Pattern 2: Alarm Response

Efficient alarm management workflow:

• Alarm banner on all displays
• Click to show alarm list
• Select to navigate to source
• Acknowledge with comment

Pattern 3: Control Room Layout

Multi-monitor configuration:

• Overview on main screen
• Alarms on dedicated monitor
• Trends on third screen
• Navigation on touchscreen

Pattern 4: Mobile Rounds

Field operator workflow:

• Equipment list by area
• Scan QR code for equipment
• Enter readings
• View instructions
• Report issues

Related Topics

• Display Designer - Design tools
• Symbols & Graphics - Symbol creation
• Security - Access control
• Performance Tuning - Optimization

AI Assistant Data

<details> <summary>Structured Information for AI Tools</summary>

json

{
  "module": "User Interface",
  "pillar": "Analyze & Visualize",
  "purpose": "Human-machine interface and data visualization",
  "components": {
    "displays": {
      "purpose": "Operational monitoring and control",
      "elements": ["Graphics", "Controls", "Navigation", "Popups"],
      "standards": "ISA-101 compliant"
    },
    "dashboards": {
      "purpose": "Analytics and KPI monitoring",
      "widgets": ["Charts", "Gauges", "Tables", "KPI Cards"],
      "features": ["Real-time updates", "Drill-down", "Mobile responsive"]
    },
    "symbols": {
      "purpose": "Reusable graphic components",
      "types": ["Smart Symbols", "Custom Symbols", "Libraries"],
      "capabilities": ["Parameters", "Animation", "Templates"]
    },
    "clients": {
      "rich": ".NET Windows application",
      "web": "HTML5 browser-based",
      "mobile": "iOS and Android apps",
      "api": "REST/GraphQL data access"
    }
  },
  "commonTasks": [
    "Design displays",
    "Create dashboards",
    "Build symbols",
    "Configure navigation",
    "Setup animations",
    "Deploy clients"
  ],
  "designPrinciples": [
    "ISA-101 HMI standards",
    "Situational awareness",
    "Consistent navigation",
    "Responsive design",
    "Performance optimization"
  ],
  "platforms": {
    "desktop": ["Windows", "Multi-monitor", "High performance"],
    "web": ["Cross-platform", "Zero install", "Responsive"],
    "mobile": ["Touch optimized", "Offline capable", "Push notifications"]
  }
}

</details>

In this section...