Niagara PX Page Development

PX (Presentation XML) pages are Niagara's native graphics format for creating operator interfaces. Well-designed PX pages improve operator efficiency, reduce errors, and enhance system understanding.

PX Page Fundamentals

What is a PX Page?

• XML-based graphics definition
• Rendered in browser or Workbench
• Data binding to BAS points
• Interactive controls
• Responsive layouts

Page Structure

<?xml version="1.0" encoding="UTF-8"?>
<px:PxPage xmlns:px="http://niagara.tridium.com/px"
           width="1920" height="1080">
  <!-- Background and layout -->
  <!-- Widgets and bindings -->
  <!-- Navigation elements -->
</px:PxPage>

---

Creating PX Pages

Using PX Editor

1. Right-click target folder
2. New → PxPage
3. Name appropriately
4. Open in PX Editor
5. Design layout
6. Add widgets and bindings

Page Types

System Overview

• Site/building summary
• Key metrics dashboard
• Alarm summary
• Navigation to details

Equipment Detail

• Schematic/graphic view
• All equipment points
• Status indicators
• Control interface

Floor Plan

• Building layout
• Zone temperatures
• Equipment locations
• Color-coded status

Charts/Trends

• History displays
• Multi-point comparison
• Time range selection

---

Widget Library

Value Display Widgets

Label

• Static or bound text
• Formatting options
• Style customization

BoundLabel

<px:BoundLabel ord="slot:/AHU1/SAT/out">
  <px:format>%.1f°F</px:format>
</px:BoundLabel>

ValueDisplay

• Value with facets
• Status indication
• Alarm coloring

Input Widgets

TextField

• Numeric entry
• Text entry
• Validation support

Slider

• Analog value adjustment
• Min/max limits
• Step size

Button

• Action trigger
• State toggle
• Navigation

ComboBox

• Enumeration selection
• Mode selection
• Dropdown list

Graphic Widgets

Image

• Background graphics
• Equipment symbols
• Status indicators

Shapes

• Rectangle, ellipse, line
• Color fill
• Border styles

Gauge

• Circular gauge display
• Linear gauge
• Ranges and colors

---

Data Binding

ORD Binding

Connect widgets to points using ORD (Object Resolution Descriptor):

<px:BoundLabel ord="slot:/AHU1/SAT/out"/>

Binding Types

Value Binding

• Display current value
• Update in real-time

Action Binding

• Trigger point actions
• Set values on click

Property Binding

• Read point properties
• Display configurations

Relative Bindings

When page is under equipment:

<px:BoundLabel ord="slot:./SAT/out"/>

---

Styling and Appearance

CSS Styling

Apply consistent styles:

<px:StyleSheet>
  .alarm-high { background-color: #FF0000; }
  .alarm-normal { background-color: #00FF00; }
  .label-header { font-size: 16px; font-weight: bold; }
</px:StyleSheet>

Conditional Formatting

Change appearance based on value:

<px:ConditionalStyle>
  <px:condition test="value > 80">
    <px:style class="alarm-high"/>
  </px:condition>
</px:ConditionalStyle>

Color Conventions

Standardize colors across pages:

Condition	Color
Normal	Green
Alarm	Red
Warning	Yellow/Orange
Off/Disabled	Gray
Heating	Orange/Red
Cooling	Blue

---

Navigation

Navigation Widgets

HyperlinkButton

<px:HyperlinkButton text="View Details" 
                    href="slot:/Graphics/AHU1_Detail.px"/>

NavTree

• Hierarchical navigation
• Expandable folders
• Customizable icons

Navigation Structure

Breadcrumb Navigation

Show current location:

<px:Breadcrumb depth="3"/>

---

Layout Best Practices

Screen Resolution

Design for target displays:

• Minimum: 1280x720
• Standard: 1920x1080
• Consider mobile access

Layout Principles

1. Consistency: Same layout patterns
2. Hierarchy: Important info prominent
3. Grouping: Related items together
4. White space: Do not overcrowd
5. Alignment: Grid-based alignment

Information Hierarchy

---

Equipment Graphics

Schematic Approach

Show equipment with process flow:

• Air handling unit with airflow
• Piping with flow direction
• Dampers and valves
• Sensors at measurement points

Symbol Standards

Use consistent symbols:

• Temperature: Thermometer icon
• Pressure: Gauge icon
• Status: LED indicators
• Damper: Blade symbol
• Valve: Gate/globe symbol

Dynamic Elements

Animate based on status:

• Fan rotation when running
• Valve position indication
• Flow direction arrows
• Temperature color gradients

---

Performance Optimization

Page Load Time

• Limit widget count (<100 per page)
• Optimize image sizes
• Minimize nested layouts
• Use efficient bindings

Update Performance

• Avoid excessive polling
• Use COV subscriptions
• Limit visible bindings
• Cache static content

Image Guidelines

• Use SVG for scalable graphics
• Optimize PNG/JPG file size
• Appropriate resolution
• Consider lazy loading

---

Common Page Templates

AHU Overview

Typical Display Elements:

• Setpoints: SAT: 55°F, DAP: 1.5"
• Status: Mode: Cool, State: On
• Alarms: Active/None

VAV Zone

---

Troubleshooting

Display Issues

• Check binding ORDs
• Verify point paths
• Test in browser
• Check permissions

Binding Errors

• Invalid ORD path
• Point does not exist
• Permission denied
• Network issue

Performance Issues

• Too many widgets
• Large images
• Excessive bindings
• Memory constraints

---

Best Practices Summary

Design

1. Plan layout before building
2. Use consistent templates
3. Follow color standards
4. Design for target screens
5. Keep pages focused

Development

1. Use meaningful names
2. Test bindings thoroughly
3. Optimize for performance
4. Document custom elements
5. Version control pages

Maintenance

1. Update when points change
2. Review for accuracy
3. Gather operator feedback
4. Refine over time

---

References

• Niagara PX Editor Documentation
• Tridium Graphics Guidelines
• ISA-101: HMI Standards

---

Good graphics tell the operator what they need to know at a glance. Every element should have a purpose—if it does not help the operator, remove it.