P4 - Operator UI (How-to Guide)

Overview

The User Interface layer provides the visualization and interaction capabilities for your FrameworX solution. This is where operators monitor processes, analyze data, and control equipment through intuitive displays and dashboards. With support for rich desktop clients, web browsers, and mobile devices, the UI layer ensures the right information reaches the right people at the right time, regardless of their location or device.

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 interface 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:

Navigate to Displays → Pages
Click New Display or edit existing
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:

Set page properties:
- Size - Resolution (1920x1080, 1024x768)
- Background - Color, gradient, image
- Grid - Snap settings
- Scaling - Fixed or responsive
Add visual elements
Configure navigation
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:

Design individual pages
Add navigation controls:
- Menu Bar - Top-level navigation
- Tree View - Hierarchical navigation
- Buttons - Direct page links
- Tabs - Grouped pages

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:

Navigate to Displays → Dashboards
Click New Dashboard
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:

Go to Displays → Symbols
Click New Symbol
Design symbol graphics
Add parameters:
- Tag Binding - Link to UDT
- Properties - Configurable values
- Methods - Symbol actions
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

Install .NET Framework
Deploy client files

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

Enable web server in Runtime
Configure IIS or embedded server
Set security certificates
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

Symptom	Likely Cause	Solution
Display won't open	Security restriction	Check user permissions
Graphics not updating	Lost connection	Verify server connectivity
Slow performance	Complex graphics	Simplify animations and graphics
Wrong resolution	Fixed sizing	Use responsive layout
Values show #####	Invalid binding	Check tag references
Animation jumpy	Update rate too slow	Increase refresh rate
Popup behind main	Z-order issue	Set popup as topmost
Touch not working	Wrong input mode	Enable touch mode

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

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>

Page tree

P4 - Operator UI (How-to Guide)

Overview

Where User Interface Fits

Core UI Components

Displays - Operational Screens

Dashboards - Analytics & KPIs

Symbols & Graphics - Reusable Components

Client Deployment - Multi-Platform Access

Display Designer

Design Canvas

Creating Pages

Graphics Elements

Basic Shapes

Controls

Data Display

Animation Properties

Dynamic Properties

Animation Examples

Navigation Setup

Page Navigation

Popup Windows

Dashboard Creation

Dashboard Designer

Widget Types

Chart Widgets

Indicator Widgets

Data Widgets

Real-Time Updates

Mobile Optimization

Symbol Development

Creating Custom Symbols

Symbol Example - Motor

Symbol Libraries

Smart Symbols

Client Deployment

Rich Client (.NET)

Features

Deployment

Web Client (HTML5)

Features

Configuration

Mobile Apps

Features

Deployment

Display Runtime Behavior

Data Updates

Performance Optimization

User Interaction

Security

Access Control

Security Configuration

Best Practices

Display Design

Performance

Usability

Mobile Considerations

Troubleshooting

Common UI Patterns

Pattern 1: Overview → Detail

Pattern 2: Alarm Response

Pattern 3: Control Room Layout

Pattern 4: Mobile Rounds

Related Topics

AI Assistant Data