xterra-overland-dashboard/docs/ui-wireframes.md

Pico Dashboard UI Wireframes

UI Goals

• Touchscreen-only
• Large touch targets
• Readable at a glance
• Minimal menu depth
• Fast access to relay controls
• Alarm visibility from every screen

Screen Size

Target display:

• 320x480
• Portrait orientation
• ST7796S

Global Layout

Top status bar:

• Battery SOC
• Communication status
• Active alarm indicator

Bottom navigation bar:

• Dash
• Battery
• Temps
• Power
• System

Dashboard Screen

Purpose:

Quick system overview.

Layout:

┌──────────────────────────────┐
│ SOC 82%     UART OK   ⚠ 0    │
├──────────────────────────────┤
│ Battery                      │
│ 13.2V   -6.4A   12.0 hr      │
├──────────────────────────────┤
│ Fridge                       │
│ Zone 1: 34.5°F               │
│ Zone 2: 36.0°F               │
├──────────────────────────────┤
│ Power                        │
│ Starlink OFF   Fridge ON     │
├──────────────────────────────┤
│ Dash Bat Temps Power System  │
└──────────────────────────────┘

Battery Screen

Purpose:

Detailed house battery status.

Layout:

┌──────────────────────────────┐
│ SOC 82%     UART OK   ⚠ 0    │
├──────────────────────────────┤
│ Battery                      │
│                              │
│ SOC:        82%              │
│ Voltage:    13.2V            │
│ Current:    -6.4A            │
│ Remaining:  82Ah             │
│ Runtime:    12.0 hr          │
│ Temp:       76°F             │
├──────────────────────────────┤
│ Dash Bat Temps Power System  │
└──────────────────────────────┘

Temperatures Screen

Purpose:

Show all DS18B20 temperature sensors and sensor health.

Layout:

┌──────────────────────────────┐
│ SOC 82%     UART OK   ⚠ 0    │
├──────────────────────────────┤
│ Temperatures                 │
│                              │
│ Fridge Zone 1   34.5°F   OK  │
│ Fridge Zone 2   36.0°F   OK  │
│ Rear Seat       71.2°F   OK  │
│ Outside Air     89.1°F   OK  │
├──────────────────────────────┤
│ Dash Bat Temps Power System  │
└──────────────────────────────┘

Fault example:

│ Outside Air     --.-°F  FAULT │

Power Screen

Purpose:

Control accessory relays.

Layout:

┌──────────────────────────────┐
│ SOC 82%     UART OK   ⚠ 0    │
├──────────────────────────────┤
│ Power Controls               │
│                              │
│ Starlink                     │
│ [        OFF        ]        │
│                              │
│ Fridge                       │
│ [         ON        ]        │
│                              │
│ Relay board drives Bosch     │
│ relays only.                 │
├──────────────────────────────┤
│ Dash Bat Temps Power System  │
└──────────────────────────────┘

System Screen

Purpose:

Show controller and communication health.

Layout:

┌──────────────────────────────┐
│ SOC 82%     UART OK   ⚠ 0    │
├──────────────────────────────┤
│ System                       │
│                              │
│ ESP32:        Online         │
│ UART:         Connected      │
│ WiFi API:     Available      │
│ Sensors:      4 / 4 OK       │
│ Ignition:     Off            │
│ Firmware:     TBD            │
├──────────────────────────────┤
│ Dash Bat Temps Power System  │
└──────────────────────────────┘

Alarm Overlay

Critical alarms should appear over any screen.

Layout:

┌──────────────────────────────┐
│        CRITICAL ALARM        │
├──────────────────────────────┤
│ Fridge Zone 1 High Temp      │
│                              │
│ Current: 48.2°F              │
│ Limit:   40.0°F              │
│                              │
│ [ ACKNOWLEDGE ]              │
└──────────────────────────────┘

Touch Target Guidelines

Minimum target size:

• 48 px tall
• Full-width buttons preferred for critical controls
• Avoid small corner-only touch targets

Navigation

Bottom navigation buttons:

• Dash
• Bat
• Temps
• Power
• System

The active screen should be visually highlighted.

Initial UI Priority

Build order:

1. Static dashboard screen
2. Bottom navigation
3. Battery screen
4. Temperature screen
5. Power screen
6. System screen
7. Alarm overlay
8. Relay command feedback
9. Communication failure state

Out of Scope for Initial UI

Not included in first UI version:

• Graphs
• Historical charts
• Settings menus
• WiFi configuration
• Touch keyboard
• OTA update controls