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

# Install Python dependencies
pip install -r requirements.txt

Running the Application

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

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

Development Mode

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

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

Roadmap

• Phase 1: Foundation & Kiosk UI
• Phase 2: Data Persistence & File Management
• Phase 3: Network Transmission
• Phase 4: Remote Access

License

This project is for the TCKRTUIYO rainfall monitoring system.