Mobile-Responsive PX Graphics (Niagara 4.6+)

Problem

Graphics designed on desktop look broken or unreadable on tablets and phones. Touch targets are too small or layouts overflow.

Solution

1. Use Scroll Containers for Flexible Layouts

• Wrap large graphics in a scroll container instead of forcing everything on one screen
• Set scroll container to fill available screen space and let content scroll
• Much better experience than squeezing everything into fixed-size viewport

2. Implement Viewport Scaling

• In PX page properties, set scaling mode to "Fit to Screen" or "Responsive"
• Avoid fixed pixel positioning—use percentage-based or relative sizing
• Test on common screen sizes: 7", 10", 15.6" tablets and 5–6" phones

3. Mobile-First Design Approach

• Start designing for smallest screen first (phone)
• Add complexity as screen size increases
• Example: 5" phone shows only critical setpoint + status. 10" tablet adds history. 15" monitor adds detailed diagnostics

4. Touch-Friendly Buttons and Controls

• Minimum button size 48×48 pixels for touch (vs. 24×24 for mouse)
• Provide visual feedback on press (highlight, color change)
• Space buttons at least 10 pixels apart to avoid accidental taps

5. Test on Actual Devices

• Desktop preview is misleading—always test on target tablet/phone
• Check landscape and portrait orientations
• Verify touch responsiveness and performance

Example Mobile Layout

• 5" phone: Setpoint, mode, status only
• 10" tablet: Add trend sparkline, fault indicator
• 15" desktop: Full control panel with diagnostics, trending, alarms