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
- Right-click target folder
- New → PxPage
- Name appropriately
- Open in PX Editor
- Design layout
- 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
- Consistency: Same layout patterns
- Hierarchy: Important info prominent
- Grouping: Related items together
- White space: Do not overcrowd
- 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
- Plan layout before building
- Use consistent templates
- Follow color standards
- Design for target screens
- Keep pages focused
Development
- Use meaningful names
- Test bindings thoroughly
- Optimize for performance
- Document custom elements
- Version control pages
Maintenance
- Update when points change
- Review for accuracy
- Gather operator feedback
- 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.