How-To: Designing Perspective Dashboards in Ignition SCADA for Multi-Monitor Control Rooms

---
title: Perspective Multi-Monitor Layout Strategy
---
flowchart LR
    classDef default fill:#1f2937,stroke:#4b5563,color:#f3f4f6
    classDef primary fill:#2563eb,stroke:#1d4ed8,color:#ffffff
    classDef secondary fill:#059669,stroke:#047857,color:#ffffff
    classDef tertiary fill:#d97706,stroke:#b45309,color:#ffffff
    A["Ignition Gateway"] --> B["Control Room Client"]
    B --> C["Monitor 1: Plant Overview (Level 1)"]:::primary
    B --> D["Monitor 2: Process Detail (Level 2)"]:::secondary
    B --> E["Monitor 3: Alarm Summary (ISA-18.2)"]:::tertiary

When transitioning from legacy Vision modules or older SCADA systems to Inductive Automation’s Ignition Perspective, engineers often try to force pixel-perfect absolute layouts onto a responsive, web-based platform. This approach breaks down rapidly in a modern control room featuring varied monitor resolutions and aspect ratios. Building dashboards for multi-monitor setups requires a fundamental shift towards Flex and Coordinate containers.

Key Takeaways

• Flex Containers: The backbone of responsive SCADA design.
• Multi-Monitor Handling: Use the system.perspective.openPage() function to target specific displays.
• CSS Grid: Ideal for complex, rigidly aligned overview dashboards.
• Performance: Minimize deep nesting of views to reduce DOM complexity.

The Flaw of Absolute Positioning

Historically, HMI screens were designed for a single resolution (e.g., 1920×1080). If an operator moved the runtime to a 4K monitor, the graphics remained a small box in the corner or stretched disproportionately. Perspective solves this by leveraging modern web standards (HTML5/CSS3), meaning screens must be architected like responsive web applications rather than static drawings.

Using a Coordinate Container in percent mode works for simple graphics (like a single pump station), but it fails for data-dense dashboards where text scaling becomes unreadable. For high-performance overview screens (Level 1 displays), Flex containers are mandatory.

---
title: Container Selection Guide
---
pie
    "Flex Containers (Layouts & Menus)" : 60
    "Coordinate Containers (P&ID Graphics)" : 30
    "Breakpoint Containers (Mobile/Tablet)" : 10

Architecting the Multi-Monitor Session

In a standard web browser, opening multiple windows forces the user to manage URLs and tabs. In an industrial control room using the Ignition Perspective Workstation, the application must manage the physical screens autonomously.

To spawn views across multiple monitors on startup, use a session startup script with system.perspective.openPage(). You must utilize the Page ID to target specific physical screens configured in the Workstation application.

Recommended Container Hierarchy for Dashboards

Performance Optimization on the Edge

While Perspective is powerful, deeply nesting Views within Views causes a massive explosion in the Document Object Model (DOM) size. If your Level 1 dashboard contains 50 identical valve faceplates, and each faceplate uses 4 nested Flex containers, the client browser will struggle to render the thousands of DOM nodes. Always flatten your graphic architectures as much as possible and use SVGs for complex static geometry instead of grouping native Ignition drawing tools.

Conclusion

Designing for Ignition Perspective requires automation engineers to adopt web developer methodologies. By mastering Flex layouts, managing session Page IDs for multi-monitor workstations, and optimizing DOM depth, you can deliver high-performance, responsive dashboards that empower operators to act swiftly and decisively.

For tools to accelerate your SCADA development, visit the AutomationView Store.

FAQ

Can I still use P&ID style graphics in Perspective?

Yes. The best practice is to place the P&ID graphic inside a Coordinate container, and then embed that Coordinate container within a larger Flex layout that handles the rest of the dashboard.

How do I handle different aspect ratios (e.g., 16:9 vs 21:9)?

Utilize the basis and grow/shrink properties on your Flex container children. This allows certain widgets to expand and consume the extra horizontal space intelligently.