Page History

Design

display hierarchy and create navigation.

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

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

In this section...

Prerequisites

• Completed tag configuration
• Understanding of process flow

Step 1: 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

Step 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

Step 3: Apply Color Standards

Follow ISA-101 color guidelines:

Configure theme:

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

Step 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

Step 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

Step 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);

Step 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

Step 8: Create Templates

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

Step 9: Add Situational Awareness

Implement SA features:

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

Step 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

Display 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