Page History

Design display hierarchy

and create navigation.

Displays

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

Plan Display Hierarchy

Create four-level hierarchy:

1. Creating new Layout

1. Go to Displays → Layouts
2. Click on Insert New
   1. Layout Name: LayoutDemo
3. Press OK button
4. On the Panels, you will be able to see different formats, that can be edited by changing the "Edit" option.
5. Change the Panel to Center
6. In the table on the bottom, you can choose different displays to be under Page, Mobile, MobileLandscape (if needed, create different displays to use here)

2. Changing Layouts in Runtime

1. In the Displays → Draw, add two buttons
2. Double-click the first button, and under Label Text add: Startup Layout
3. Go to Dynamics, set Actions and choose OpenLayout
4. In Layout, type Startup
5. Repeat the procedure for the second button, but this time, the configuration is below:
   1. Label Text: Layout Demo
   2. Layout: LayoutDemo
6. Run the solution
7. Click the buttons to see the layout changing

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:

1. Displays → Themes
2. Create ISA101 theme
3. Apply to all displays

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

In this section...