---
phase: 1
plan: 1
name: Foundation & Kiosk UI
type: execution
autonomous: true
wave: 1
depends_on: []

requirements:
  - 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

1. User can view current rainfall readings (Today, Hourly, MAR Accumulated, Yearly Accumulated) on the dashboard
2. User can view solar voltage and battery voltage with status indicator (HIGH/NORMAL/LOW) on the dashboard
3. User can view current date/time (HH:MM:SS DD-MM-YYYY) and station ID on the dashboard
4. User can view communication status (signal strength, connection status) and software version on the dashboard
5. User can navigate between Dashboard, Settings, and Calibration menus via main menu
6. User can access and modify station info, date/time, network settings, sensor thresholds, and ADC configuration
7. User can view live ADC channel readings and reset rainfall counters in calibration view
8. Dashboard updates automatically with real-time sensor data
9. 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

---

### Task 11: Add Touch-Optimized Navigation
**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