A clean, compact clock and sensor dashboard for the ESP32-2432S028 (the "Cheap Yellow Display" or CYD), built with ESPHome and LVGL. Try out the new YAML generator - please note: it's not perfect and is a work in progress!
Monitor 6 Home Assistant entities at a glance — binary sensors (doors, motion) and numeric sensors (energy, temperature) — with dynamic colour-coded status indicators.
 |
 |
 |
| Front view | Rear view | Close-up |
- Clock & Date Header: Large time display with day and date, synced from Home Assistant.
- 6 Customisable Sensor Slots: 2 numeric sensors + 4 binary sensors in a compact 3×2 grid layout.
- Dynamic Colours: Icons and values change colour based on state or configurable thresholds.
- Easy Configuration: All entities, icons, labels, colours, and state messages are defined in the
substitutions:block — no need to touch any code. - Instant State: Binary sensors display their current state immediately on boot using
publish_initial_state. - Google Fonts: Uses Roboto and Material Icons, downloaded automatically.
The board, display and touch are all one item - the CYD! This is listed out below for your benefit to identify the model numbers of these components.
| Component | Details |
|---|---|
| Board | ESP32-2432S028 (CYD) |
| Display | 2.8" ILI9341 CYD Board (USB-C) |
| Touch | XPT2046 (resistive, onboard) |
| Case | Aura Smart Display Case (USB-C variant) |
| Adapter | USB-C 90° Right Angle Adapter |
Note: Make sure you get the USB-C version of the CYD board. The 3D printed case linked above is specifically designed for the USB-C port variant. The 90° USB-C adapter allows a clean cable run out of the case. External links are affiliate links which help me keep projects like this going!
- Home Assistant installed and running.
- The ESPHome Add-on installed in Home Assistant.
- Your CYD board connected to your computer via USB-C.
- In Home Assistant, go to Settings → Add-ons → Add-on Store.
- Search for ESPHome.
- Click Install, then Start.
- Enable Show in sidebar for easy access.
- Open ESPHome from the Home Assistant sidebar.
- Click + New Device (bottom right).
- Click Continue, then give your device a name (e.g.,
hamon). - Select ESP32 as the device type.
- Click Next — ESPHome will generate a basic configuration with an API key and OTA password.
- Click Skip (we'll install manually).
Before flashing, make sure your secrets.yaml file (in the ESPHome config directory) contains:
wifi_ssid: "your-wifi-network-name"
wifi_password: "your-wifi-password"
api_key: "the-api-key-generated-by-esphome"
ota_password: "the-ota-password-generated-by-esphome"
ap_password: "any-fallback-hotspot-password"Tip: The
api_keyandota_passwordare shown when you first create the device. Copy them intosecrets.yamlbefore proceeding.
- In ESPHome, click Edit on your new device.
- Replace the entire contents with the
ha-monitor.yamlfile from this repository. - Update the
substitutions:section with your own Home Assistant entity IDs (see Configuration below). - Click Save.
- Click Install → Plug into this computer (for first-time USB flash).
- Select the correct USB/serial port and wait for the flash to complete.
Important: you must add the device to Home Assistant otherwise your HAMon device will not receive any state updates!
- After flashing, the device will connect to your Wi-Fi and appear in Home Assistant.
- Go to Settings → Devices & Services.
- You should see a notification: "New device discovered: HAMon" — click Configure.
- Enter the API encryption key (the same one from your
secrets.yaml). - Click Submit — your sensors will now stream data to the display.
Future updates can be done wirelessly (OTA) — just click Install → Wirelessly in ESPHome.
A web-based configuration generator is available in the config-generator/ directory. This tool provides an interactive interface to customize your HAMon dashboard without manually editing YAML files.
- Visual sensor configuration
- Icon selection from Material Icons
- Color customization
- Real-time YAML generation
- One-click copy to clipboard
- Navigate to the config-generator directory:
cd config-generator- Install dependencies:
npm install- Run the development server:
npm run dev-
Open your browser to
http://localhost:3000 -
Configure your sensors and copy the generated YAML into your ESPHome device configuration.
All customisation is done in the substitutions: block at the top of the YAML file. No need to edit any code below it.
The dashboard has a 3×2 grid:
| Column 1 | Column 2 | |
|---|---|---|
| Row 1 | r1c1 — Numeric Sensor |
r1c2 — Binary Sensor |
| Row 2 | r2c1 — Numeric Sensor |
r2c2 — Binary Sensor |
| Row 3 | r3c1 — Binary Sensor |
r3c2 — Binary Sensor |
substitutions:
r1c2_entity: "binary_sensor.front_door_sensor_contact" # HA entity ID
r1c2_type: "binary" # Entity type
r1c2_label: "Front Door" # Display label
r1c2_icon: "\ueffc" # Material Icon code
r1c2_icon_color: "0x888888" # Default icon colour
r1c2_state_on: "Open" # Text when ON
r1c2_state_off: "Closed" # Text when OFF
r1c2_color_on: "0xFF5252" # Colour when ON (red)
r1c2_color_off: "0x32CD32" # Colour when OFF (green)substitutions:
r1c1_entity: "sensor.whole_home_energy_usage" # HA entity ID
r1c1_type: "sensor" # Entity type
r1c1_label: "Energy" # Display label
r1c1_icon: "\uea0b" # Material Icon code
r1c1_icon_color: "0xFFA500" # Default icon colour
r1c1_format: "%.0fW" # Printf format string
r1c1_color_thresh_high: "5000" # Red threshold
r1c1_color_thresh_mid: "3000" # Orange threshold
r1c1_color_thresh_low: "1000" # Amber thresholdThis project uses Google Material Icons.
- Go to Google Material Symbols.
- Find an icon you like.
- Click on it and look for the Codepoint (e.g.,
EA0B). - Convert to lowercase and prefix with
\uin your YAML config (e.g.,\uea0b). - Important: Add each unique icon to the
icon_glyphssubstitution. If you use the same icon for multiple sensors (e.g., same door icon for front door and back door), only include it once inicon_glyphsto avoid "duplicate glyph" errors.
Example:
substitutions:
# List each unique icon once (no duplicates!)
icon_glyphs: "\ueffc\ue88a\ue1ff" # door, home, thermometer
r1c1_icon: "\ueffc" # front door
r1c2_icon: "\ueffc" # back door (same icon - OK!)
r2c1_icon: "\ue88a" # garage
r2c2_icon: "\ue1ff" # temperature| Icon | Code | Description |
|---|---|---|
| ⚡ | \uea0b |
Bolt (energy/power) |
| 🚪 | \ueffc |
Door front |
| 🌡️ | \ue1ff |
Thermostat |
| 🏠 | \ue88a |
Home |
| 👤 | \ue7fd |
Person |
| 🔒 | \ue897 |
Lock open |
| 🚧 | \ue559 |
Fence/gate |
Colours are specified as hex values without the #:
| Colour | Code | Usage |
|---|---|---|
| 🔴 Red | 0xFF5252 |
Alert / open / hot |
| 🟢 Green | 0x32CD32 |
OK / closed / normal |
| 🟠 Orange | 0xFFA500 |
Warning / medium |
| 🔵 Blue | 0x00BFFF |
Cold / info |
| ⚪ Grey | 0x888888 |
Inactive / default |
The dashboard uses Google's Roboto font for text and Material Icons for icons. If you need additional characters (e.g., €, £) or the state text uses characters not in the default set, add them to the glyphs: string under state_font in the YAML file.
Planned features for future releases:
- Choose Orientation: Switch between landscape and portrait modes via a substitution toggle.
- Tap to Open Page: Tap any sensor icon to open a detailed LVGL page with history, graphs, or controls.
- Swipe & Gestures: Swipe between multiple dashboard pages with gesture navigation.
- External LED Control: Drive addressable LEDs (e.g., WS2812B) to reflect sensor states — flash red on door open, glow green when all clear, etc.
Feel free to fork this project and submit pull requests! See the Roadmap above for planned features.
This project is licensed under the MIT License. See the header of hamon.yaml for the full license text.
Inspired by drrcastro's CYD Smart Dashboard for Home Assistant
