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:

Core UI Components

Displays - Operational Screens

Primary operator UI for monitoring and control:

Dashboards - Analytics & KPIs

Executive and management information displays:

Symbols & Graphics - Reusable Components

Library of intelligent graphic elements:

Client Deployment - Multi-Platform Access

Deliver UI across all platforms:

Display Designer

Design Canvas

Visual development environment:

  1. Navigate to Displays → Pages
  2. Click New Display or edit existing
  3. Use design tools:

Creating Pages

Build display pages:

  1. Set page properties:
  2. Add visual elements
  3. Configure navigation
  4. Test in runtime

Graphics Elements

Basic Shapes

Controls

Data Display

Animation Properties

Dynamic Properties

Configure runtime behavior:

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:
  3. Configure navigation actions:
    OpenDisplay("Overview")
OpenPopup("MotorFaceplate", @Tag.Motor1)
CloseDisplay()

Popup Windows

Create detailed views:

Dashboard Creation

Dashboard Designer

Build analytical displays:

  1. Navigate to Displays → Dashboards
  2. Click New Dashboard
  3. Select layout:

Widget Types

Chart Widgets

Indicator Widgets

Data Widgets

Real-Time Updates

Configure dashboard refresh:

Mobile Optimization

Design for mobile devices:

Symbol Development

Creating Custom Symbols

Build reusable components:

  1. Go to Displays → Symbols
  2. Click New Symbol
  3. Design symbol graphics
  4. Add parameters:
  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:

Smart Symbols

Pre-built intelligent components:

Client Deployment

Rich Client (.NET)

Windows desktop application:

Features

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

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

Deployment

Display Runtime Behavior

Data Updates

How displays receive data:

Performance Optimization

User Interaction

Security

Access Control

Security Configuration

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

Best Practices

Display Design

Performance

Usability

Mobile Considerations

Troubleshooting

SymptomLikely CauseSolution
Display won't openSecurity restrictionCheck user permissions
Graphics not updatingLost connectionVerify server connectivity
Slow performanceComplex graphicsSimplify animations and graphics
Wrong resolutionFixed sizingUse responsive layout
Values show #####Invalid bindingCheck tag references
Animation jumpyUpdate rate too slowIncrease refresh rate
Popup behind mainZ-order issueSet popup as topmost
Touch not workingWrong input modeEnable touch mode

Common UI Patterns

Pattern 1: Overview → Detail

Hierarchical navigation from plant to equipment:

Pattern 2: Alarm Response

Efficient alarm management workflow:

Pattern 3: Control Room Layout

Multi-monitor configuration:

Pattern 4: Mobile Rounds

Field operator workflow:

Related Topics

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>