# TCKRTUIYO - Rainfall Station RTU Web Interface

> **Current Version**: v1 (Flask) - See `src/`
> **Next Version**: v2 (React) - See `v2/` (in development)

A modern web-based interface for a Base Station/Real-Time Unit (RTU) rainfall monitoring system, designed for a 7" capacitive touchscreen display (1024x600). The system monitors and logs rainfall and related sensors, transmits data to a server, and provides both a kiosk-mode local display and a full HD remote interface.

## Features

### Current (Phase 1-2 Complete)
- **Dashboard** - Real-time rainfall readings (Today, Hourly, MAR Accumulated, Yearly Accumulated)
- **Voltage Monitoring** - Solar and battery voltage with status indicators (HIGH/NORMAL/LOW)
- **Status Display** - Date/time, station ID, communication status, software version
- **Real-time Updates** - Auto-refresh via Socket.IO
- **Settings** - Station info, date/time, network, ADC channels, sensor thresholds
- **Calibration** - Live ADC readings (4 channels), rainfall counter reset
- **File Management** - View, navigate, delete CSV files; generate tidEDA formatted files

### Coming Soon (Phase 3-4)
- Network transmission (FTP, SFTP, SCP, WebDAV)
- Remote HD access (port 9090) with authentication

## Hardware

- **Primary**: Raspberry Pi Zero 2 W
- **Alternative**: Raspberry Pi 3B
- **Display**: 7-inch capacitive touchscreen (1024x600)

## Tech Stack

### v1 (Active - Flask)
- **Backend**: Flask + Flask-SocketIO
- **Frontend**: Bootstrap 5.3, Socket.IO Client
- **Python**: 3.x

### v2 (In Development - React)
- **Frontend**: React 18 + TypeScript + TailwindCSS
- **Build**: Vite
- **UI Components**: shadcn/ui

## Getting Started

### Prerequisites

```bash
# Install Python dependencies
pip install -r requirements.txt
```

### Running the Application

```bash
# Start the Flask server (port 8080 for kiosk mode)
python src/app.py

# Access via browser
# Local kiosk: http://pihostname:8080
```

### Development Mode

```bash
# Run with debug mode
FLASK_DEBUG=1 python src/app.py
```

## UI Design

### Touch Optimization
- Minimum touch target: 48px
- Primary buttons: 64px height
- Designed for 7" 1024x600 display

### Color Scheme
- Primary: Bootstrap defaults (blue accent)
- Status indicators:
  - HIGH: Green
  - NORMAL: Blue/Yellow  
  - LOW: Red

### Layout
- Fixed 1024x600 resolution for kiosk
- Responsive for remote HD access (Phase 4)

## API Endpoints

| Endpoint | Method | Description |
|----------|--------|-------------|
| `/api/status` | GET | Station status (ID, time, version) |
| `/api/sensors` | GET | Sensor readings (rainfall, voltage) |
| `/api/settings` | GET/POST | Configuration settings |
| `/api/calibration` | GET | Live ADC readings |
| `/api/calibration/reset_rainfall` | POST | Reset rainfall counters |
| `/api/files` | GET | List CSV files |
| `/api/files/<filename>` | GET | View file contents |
| `/api/files/<filename>` | DELETE | Delete file |
| `/api/files/export` | POST | Generate tidEDA format |

## Version History

| Version | Description | Date | Location |
|---------|-------------|------|----------|
| v1 | Flask + Bootstrap interface (archived) | Pre-2026 | `src_v1/` |
| v1 | Flask + Bootstrap interface (active) | 2026-03 | `src/` |
| v2 | React/Next.js interface (in development) | 2026-03 | `v2/` |

## Project Structure

```
.
├── src/                     # Currently active Flask v1 application
├── src_v1/                  # Archived Flask v1 application (backup)
│   ├── app.py               # Flask application
│   ├── templates/          # HTML templates
│   │   ├── dashboard.html  # Main kiosk dashboard
│   │   ├── settings.html   # Configuration UI
│   │   ├── calibration.html # Sensor calibration
│   │   └── files.html      # File management
│   ├── static/             # CSS, JS, images
│   ├── data/               # CSV storage
│   ├── routes/             # Route handlers
│   ├── services/           # Business logic
│   └── requirements.txt    # Python dependencies
├── v2/                     # NEW: React v2 interface (development)
│   ├── src/app/            # React application
│   ├── guidelines/         # Design system
│   ├── package.json        # Node dependencies
│   └── vite.config.ts      # Vite config
├── sample_interface/       # Reference implementation template
├── requirements.txt        # Current Python dependencies
├── README.md               # This file
└── .planning/              # GSD planning artifacts
```

## Kiosk Mode Setup

To run in full-screen kiosk mode on Raspberry Pi:

```bash
# Add to ~/.config/lxsession/LXDE-pi/autostart
@ chromium-browser --kiosk --incognito http://localhost:8080
```

## Roadmap

- [x] Phase 1: Foundation & Kiosk UI
- [x] Phase 2: Data Persistence & File Management
- [ ] Phase 3: Network Transmission
- [ ] Phase 4: Remote Access

## License

This project is for the TCKRTUIYO rainfall monitoring system.