Page History

Design display hierarchy and create navigation.

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

1.

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

2. 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

3. Apply Color Standards

Follow ISA-101 color guidelines:

4. 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

5. 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

6. 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);

7. 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

8. 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

9. Add Situational Awareness

Implement SA features:

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

10. 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

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

In this section...