Page History

Design display hierarchy and create navigation

Displays Navigation →  Tutorial | Concept | How-to Guide | ISA-101 |  Reference

Plan Display Hierarchy

Create four-level hierarchy:

Level 1 - Overview:

• Plant overview
• Key performance indicators
• Major alarms

Level 2 - Area:

• Process area graphics
• Area trends
• Local alarms

Level 3 - Detail:

• Equipment details
• Control faceplates
• Detailed trends

Level 4 - Support:

• Diagnostics
• Settings
• Reports

Create Main Overview

1. Displays → Draw → New
2. Name: Overview
3. Size: 1920×1080 (Full HD)

Add elements:

• Plant layout graphic
• KPI gauges (OEE, Production Rate)
• Alarm summary bar
• Navigation buttons

Apply Color Standards

Follow ISA-101 color guidelines:

Configure theme:

Build Process Graphic

Create area display:

1. Import P&ID as background
2. Add dynamic elements:

Tank:

• Rectangle with level fill
• Bind fill % to Tank1_Level
• Add value display
• Color by state

Pump:

• Import pump symbol
• Rotation animation when running
• Color: Gray (run) / White (stop)

Valve:

• Two-state symbol
• Bind to Valve1_Open
• Add position feedback

Create Control Faceplate

Design popup faceplate:

1. Size: 400×300
2. Elements:
   • Tag name and description
   • Current value (large font)
   • Setpoint input
   • Mode selector (Auto/Manual)
   • Trend sparkline
   • Open/Close buttons

Add Navigation

Create navigation bar:

1. Fixed position (top or bottom)
2. Buttons:
   • Home → Overview
   • Areas → Dropdown menu
   • Alarms → Alarm display
   • Trends → Trending
   • Reports → Reports menu

Navigation script:

csharp

@Display.OpenDisplay("Area1_Detail");
// Or with popup
@Display.OpenPopup("Motor1_Faceplate", 400, 300);

Build Alarm Banner

Add persistent alarm bar:

1. AlarmViewer control
2. Configure:
   • Show: Highest priority active
   • Height: 100 pixels
   • Columns: Time, Area, Description
   • Click to acknowledge

Create Symbols

Build reusable templates:

Motor Symbol:

1. Displays → Symbols
2. Create motor graphic
3. Add properties:
   • TagPrefix (e.g., "Motor1")
   • ShowFaceplate
4. Expressions:
   • Running: @Tag.{TagPrefix}_Running
   • Amps: @Tag.{TagPrefix}_Amps

Add Situational Awareness

Implement SA features:

• Analog values as text (not just graphics)
• Clear alarm indicators
• Trend sparklines
• Deviation indicators
• Performance metrics

Test Usability

Validation checklist:

• All navigation paths work
• Information hierarchy clear
• Response time < 2 seconds
• Color usage consistent
• Text readable at distance
• Critical info always visible

Performance Tips

• Limit points per display (< 200)
• Optimize graphics (vector over bitmap)
• Minimize animations
• Use display caching
• Preload common popups

Best Practices

• Follow ISA-101 guidelines
• Consistent navigation
• Minimize color use
• Gray backgrounds
• High contrast text
• Progressive disclosure
• Test with operators

Next Steps

• [Add Elements to Displays] - Advanced controls
• [Create Canvas Animations] - Dynamic graphics
• [Create Dashboards] - KPI displays

In this section...