TCK RTU - Rainfall Monitoring Web Interface
A modern, web-based interface for Base Station/Real-Time Unit (RTU) monitoring rainfall and related sensors. Designed for 7" capacitive touchscreen display (1024x600) on Raspberry Pi CM5, Zero 2 W/3B, running via Chromium Kiosk Mode.
QUICKSTART
# ONE LINE INSTALL & RUN
curl -sL http://gitck:3000/admin/sp80/install_everything.sh | bash
Essential files to run
# Start both servers (kiosk 8888 + remote HD 9999) - DEFAULT BEHAVIOR
./start.sh
# Or start just kiosk mode on port 8888
./start.sh dev:8888
# Or start just remote HD mode on port 9999
./start.sh dev:9999
# Flip the display, a bug in Waveshare 1024x600 7" Touchscreen HDMI (c) LCD
# Prerequisite: apt install -y xrandr xinput
./flip_display.sh
# Run during (after) boot as systemd service
cp rtu-dev.service /etc/systemd/system/
systemctl daemon-reload
systemctl enable rtu-dev.service
systemctl start rtu-dev.service
# Check status of rtu-dev
journalctl -u rtu-dev.service -f
View Full Wiki | Integration with C++ | Example Code
Features
- Real-time rainfall monitoring (Today, Hourly, MAR Accumulation, Yearly Accumulation)
- Solar and battery voltage monitoring with status indicators
- Station information display (ID, version, communication status)
- Dual-mode display:
- Kiosk mode (port 8888): 1024x600 for local 7" touchscreen
- Remote HD mode (port 9999): Full HD responsive for PC access
- Remote mode (port 9090): Standard remote access
- Touch-friendly UI with 44px+ touch targets
- Modern React/TypeScript architecture with Zustand state management
Tech Stack
- Frontend: React 18, TypeScript
- Build Tool: Vite 6
- Styling: Tailwind CSS 4
- State Management: Zustand
- Routing: React Router 7
- UI Components: Radix UI (shadcn/ui pattern)
- Icons: Lucide React
Backend Roadmap: Use Rust for memory-safe app, critically important for
From a non‑developer perspective:
🖥️ Frontend: React 18, TypeScript
- React 18: A popular library for building interactive user interfaces. Think of it as the “engine” that makes buttons, forms, and dynamic content work smoothly.
- TypeScript: A programming language that adds safety checks. It’s like spell‑check for code, helping developers avoid mistakes before they happen.
⚡ Build Tool: Vite 6
- Vite is the tool that assembles everything together quickly. Imagine a super‑fast kitchen prep station that gets all ingredients ready so the chef (developer) can cook without delays.
🎨 Styling: Tailwind CSS 4
- Tailwind is a design system. Instead of manually writing styles, developers use pre‑made building blocks to make apps look polished. It’s like having a catalog of furniture pieces you can mix and match to decorate a room.
🔄 State Management: Zustand
- Zustand keeps track of the app’s “memory” — what the user is doing, what data is loaded, etc. Think of it as the notebook where the app writes down what’s happening so it doesn’t forget.
🛤️ Routing: React Router 7
- Routing decides what page you see when you click a link. It’s the GPS of the app, guiding you from one screen to another.
🧩 UI Components: Radix UI (shadcn/ui pattern)
- Radix UI provides ready‑made interface pieces (like menus, dialogs, sliders). The “shadcn/ui pattern” is a way of organizing them so they’re easy to reuse. It’s like IKEA furniture kits — standardized, reliable, and customizable.
🔍 Icons: Lucide React
- Lucide is a library of clean, modern icons (like arrows, hearts, or search magnifying glasses). It’s the visual garnish that makes apps feel intuitive.
Quick Start (One-Line Install)
From Web (on Raspberry Pi with network access)
# Option 1: Direct clone and run
git clone https://github.com/your-repo/tck_rtu.git /opt/tck_rtu
cd /opt/tck_rtu
./install_everything.sh
# Option 2: From custom web server
# Place install_everything.sh on your web server at:
# http://tckrtuiyo:3000/tck/tck_rtu/install_everything.sh
# Then run:
curl -sL http://tckrtuiyo:3000/tck/tck_rtu/install_everything.sh | bash
# Option 3: From GitHub raw (replace with actual repo URL)
curl -sL https://raw.githubusercontent.com/your-repo/main/install_everything.sh | bash
Manual Install
# 1. Clone repository
git clone https://github.com/your-repo/tck_rtu.git /opt/tck_rtu
cd /opt/tck_rtu
# 2. Install Node.js (if not installed)
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo bash -
sudo apt-get install -y nodejs
# 3. Install dependencies
cd sample_interface
npm install
# 4. Run
cd ..
./start.sh
Web Server Setup (for Option 2)
If you want to serve the install script from a local web server:
# Place the script in your web root
sudo cp install_everything.sh /var/www/html/tck/tck_rtu/
# Start nginx
sudo systemctl start nginx
# Or use Python
cd /var/www/html/tck/tck_rtu
python3 -m http.server 3000
Then access via: http://<your-server>:3000/tck/tck_rtu/install_everything.sh
Getting Started
Prerequisites
- Node.js 18+
- npm or pnpm
Installation
cd sample_interface
npm install
Development
npm run dev
Build
npm run build
Preview Production Build
npm run preview
Project Structure
sample_interface/
├── src/
│ ├── app/
│ │ ├── api/ # API client with mock fallback
│ │ ├── components/ # React components
│ │ │ ├── ui/ # shadcn/ui components
│ │ │ └── views/ # Page views
│ │ ├── hooks/ # Custom React hooks
│ │ ├── stores/ # Zustand stores
│ │ ├── routes.ts # Route definitions
│ │ └── App.tsx # App root
│ ├── styles/ # CSS files
│ └── test/ # Test setup
├── index.html # Entry HTML
├── vite.config.ts # Vite configuration
└── package.json
Display Modes
The app detects display mode by port:
| Port | Mode | Resolution |
|---|---|---|
| 8888 | Kiosk | 1024x600 (fixed, for 7" touchscreen) |
| 9090 | Remote | Standard remote access |
| 9999 | Remote HD | Full HD (responsive, for PC access) |
| 5173 | Dev | Development server |
Note: Running ./start.sh without arguments starts both kiosk (8888) and remote HD (9999) servers.
Bundle Size
- Target: < 170KB gzipped
- Limit: < 200KB gzipped
- Current: ~100KB gzipped
Testing
npm run test # Run tests once
npm run test:watch # Run tests in watch mode
Phase Status
| Phase | Status | Description |
|---|---|---|
| 1 | ✅ Complete | Foundation & Dashboard |
| 2 | 🔜 Pending | Settings Framework |
| 3 | 🔜 Pending | Data Management & Network Stack |
License
Private - TCK Project