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