admin
50daf52de6
- Change menu name from SETTING to SETTINGS - Add themeStore with light/dark mode persistence - Add Light/Dark toggle in Display Settings - Apply theme to app root
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
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 |
|---|---|---|
| 8080 | Kiosk | 1024x600 (fixed) |
| 9090 | Remote | Full HD (responsive) |
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