Project Description
I have an ESP32-based UI controller installed on agricultural equipment. The ESP32 serves a small offline web UI (HTML/CSS/JS) from LittleFS and operators open it from a mobile phone browser while working in the field.
I already have a working UI (see attachments), but I need a more professional, cleaner, and more usable UI/UX while keeping it extremely lightweight and fast.
Project goal
Redesign the existing UI into a modern, high-contrast, mobile-first control panel.
The UI is operational (not a marketing page), so it must be simple, robust, and quick to use.
Core requirements
Offline-first: no CDN links, no external resources. Everything must be local files (served from ESP32).
Lightweight: vanilla HTML/CSS/JS only (no React/Vue/Angular, no large bundles).
Fast rendering: should load within ~2 seconds over 2.4 GHz Wi-Fi.
Mobile-first responsive layout: usable on a phone in direct sunlight; also works on a laptop.
Clear labels & uncluttered design: strong readability, large touch targets, minimal decoration.
Modular structure: split into small files (recommended):
/index.html
/hydraulics.html
/css/app.css
/js/main.js, /js/hydraulics.js (or similar)
Integration hooks:
v1 should use REST-style endpoints with fetch() + optional polling (e.g., /api/status).
Please keep frontend code modular so we can optionally add WebSocket/SSE later, but not required for v1.
UI scope (v1)
Pages
Main Control Panel (index.html)
Primary actions: START / STOP / KOMPLE CONTROL / VALVE CHECK
Manual override: “ALL VALVES OPEN” with selector (SPRAYEX vs FERTIX)
Settings (basic): Crop selector (loaded from backend), Confidence, Density, Speed, AI Type
Developer Options (collapsed by default): Pressure, Cam Type, Cam Num, Boom Size
Status indicators:
LED indicators for system connectivity (Jetson, MCU, Relays, Cameras)
Progress bar (used by valve check / sequenced operations)
A simple “Height” readout (from MCU telemetry)
Hydraulics Control (hydraulics.html)
Directional / action buttons (Up/Down/Left/Right/Open/Close etc.)
A height target control (dial/slider)
Same design system as main page
Must reflect current state consistently (no confusing toggles)
Deliverables
Frontend files ready to flash to ESP32 LittleFS:
HTML + CSS + JS (no external dependencies)
A short README.md describing:
File list + approximate sizes
Hook/endpoints list used by the UI (fetch calls)
How the UI state is updated (polling intervals, etc.)
The UI must have no console errors and be usable on mobile.
Notes / Constraints
The ESP32 storage and memory are limited, so keep assets small.
High-contrast theme is preferred (night/day field usage).
Use large touch targets (gloves-friendly) and avoid tiny controls.
If you have experience designing embedded/offline web UIs (ESP32, IoT panels, industrial control dashboards), mention it and share relevant examples.