admin
9e3cc99bed
- Core infrastructure: Zustand store, API client with mock fallback - Mode detection: Port 8080 (kiosk) / 9090 (remote) - Dashboard components: RainfallCard, ClockDisplay, CommStatus - Header components: VoltageDisplay, BatteryStatus, LoginIndicator - Data polling with visibility awareness - Bundle size: ~100KB gzipped Also adds README.md and WIKI.md documentation
112 lines
2.6 KiB
Markdown
112 lines
2.6 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
|
|
|
|
## 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
|