Files

admin f839a24c27 feat(phase-1): implement Foundation & Kiosk UI

- Add Flask backend with SocketIO for real-time updates
- Implement sensor service with mock data generation
- Create Dashboard UI with rainfall, voltage, status displays
- Create Settings UI with station, network, ADC, sensor configuration
- Create Calibration UI with live ADC readings and rainfall reset
- Touch-optimized interface with 64px touch targets for 7" display

Implements: DASH-01 through DASH-09, UI-01 through UI-03,
SETT-01 through SETT-08, CAL-01 through CAL-04, BACK-01 through BACK-03

2026-03-12 06:15:23 +08:00

4.7 KiB

Raw Permalink Blame History

phase, plan, name, type, autonomous, wave, depends_on, requirements

phase

plan

name

type

autonomous

wave

depends_on

requirements

Foundation & Kiosk UI

execution

true

DASH-01

DASH-02

DASH-03

DASH-04

DASH-05

DASH-06

DASH-07

DASH-08

DASH-09

UI-01

UI-02

UI-03

SETT-01

SETT-02

SETT-03

SETT-04

SETT-05

SETT-06

SETT-07

SETT-08

CAL-01

CAL-02

CAL-03

CAL-04

BACK-01

BACK-02

BACK-03

Phase 1 Plan: Foundation & Kiosk UI

Objective

Build the foundational Flask backend with real-time sensor data API and the 7" touchscreen kiosk UI (port 8080) displaying rainfall readings, voltage status, date/time, station ID, communication status, and software version. Include Settings and Calibration menus for configuration access.

Context

This is the first vertical slice — each layer works end-to-end before adding persistence or network transmission. The research selected Flask + Flask-SocketIO + Bootstrap for Pi Zero 2 W performance.

Success Criteria

User can view current rainfall readings (Today, Hourly, MAR Accumulated, Yearly Accumulated) on the dashboard
User can view solar voltage and battery voltage with status indicator (HIGH/NORMAL/LOW) on the dashboard
User can view current date/time (HH:MM:SS DD-MM-YYYY) and station ID on the dashboard
User can view communication status (signal strength, connection status) and software version on the dashboard
User can navigate between Dashboard, Settings, and Calibration menus via main menu
User can access and modify station info, date/time, network settings, sensor thresholds, and ADC configuration
User can view live ADC channel readings and reset rainfall counters in calibration view
Dashboard updates automatically with real-time sensor data
Touch interface responds with large touch targets (minimum 48px) optimized for 7" 1024x600 display

Tasks

Task 1: Initialize Project Structure & Dependencies

Type: auto
Description: Create project directory structure and requirements.txt
Verification: ls -la src/ shows proper structure, pip install -r requirements.txt succeeds

Task 2: Create Flask Backend with SocketIO

Type: auto
Description: Set up Flask app with SocketIO, routes folder structure, and base configuration
Verification: python src/app.py starts server on port 8080, /api/status returns JSON

Task 3: Implement Sensor Service with Mock Data

Type: auto
Description: Create sensor service that generates realistic mock rainfall/voltage readings
Verification: /api/sensors returns valid sensor data structure with all fields

Task 4: Create Status API Endpoint

Type: auto
Description: Implement /api/status returning station ID, date/time, software version
Verification: API returns all required status fields

Task 5: Create Settings API Endpoints

Type: auto
Description: Implement /api/settings GET/POST for station, network, ADC, thresholds
Verification: GET returns settings, POST updates settings, data persists to JSON

Task 6: Create Calibration API Endpoints

Type: auto
Description: Implement /api/calibration for live ADC readings and rainfall reset
Verification: Returns live ADC values, reset endpoint clears rainfall counters

Task 7: Build Dashboard HTML/CSS/JS

Type: auto
Description: Create main dashboard template with rainfall, voltage, status displays
Verification: Dashboard renders with all required elements, responsive to 1024x600

Task 8: Implement Real-Time Updates via SocketIO

Type: auto
Description: Frontend connects to SocketIO, receives live sensor updates every second
Verification: Dashboard auto-updates without page refresh

Task 9: Build Settings UI

Type: auto
Description: Create settings pages for station info, date/time, network, ADC config, thresholds
Verification: All settings accessible and modifiable through UI forms

Task 10: Build Calibration UI

Type: auto
Description: Create calibration view showing live ADC readings with channel info
Verification: Shows 4 channels with type, ADC value, datum, calculated reading

Type: auto
Description: Implement main menu with large touch targets (64px), back buttons, 7" optimized CSS
Verification: Navigation works with touch, all targets >= 48px

Task 12: Final Integration & Testing

Type: auto
Description: Verify all 27 requirements met, test server startup, verify all pages load
Verification: All requirements traceable, no console errors, server stable

4.7 KiB Raw Permalink Blame History