138 lines
4.5 KiB
Markdown
138 lines
4.5 KiB
Markdown
# 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 Zero 2 W/3B, running via Chromium Kiosk Mode.
|
||
|
||
## 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 8080): 1024x600 for local 7" touchscreen
|
||
- **Remote mode** (port 9090): Full HD responsive for PC 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.
|
||
|
||
|
||
## Getting Started
|
||
---
|
||
### Prerequisites
|
||
|
||
- Node.js 18+
|
||
- npm or pnpm
|
||
|
||
### Installation
|
||
|
||
```bash
|
||
cd sample_interface
|
||
npm install
|
||
```
|
||
|
||
### Development
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
### Build
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
### Preview Production Build
|
||
|
||
```bash
|
||
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 |
|
||
|------|------|------------|
|
||
| 8080 | Kiosk | 1024x600 (fixed) |
|
||
| 9090 | Remote | Full HD (responsive) |
|
||
|
||
## Bundle Size
|
||
|
||
- **Target**: < 170KB gzipped
|
||
- **Limit**: < 200KB gzipped
|
||
- **Current**: ~100KB gzipped
|
||
|
||
## Testing
|
||
|
||
```bash
|
||
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
|