Story
🌦️ ESP32 × Nextion Display — Live Weather & Clock Dashboard
This project turns your Nextion HMI display into a real-time weather and clock dashboard, powered by an ESP32 connected to WiFi and WeatherAPI.com.
🧠 Overview
The ESP32 connects to the internet, fetches live weather data (temperature, humidity, visibility, and condition), synchronizes time from NTP servers, and updates the Nextion display every second for time and every 15 minutes for weather.
⚙️ Features
✅ Live weather data (via WeatherAPI) ✅ Auto time sync using NTP ✅ Smart weather icons based on condition codes ✅ Real-time clock & weekday display ✅ Efficient, non-blocking updates
🧩 Hardware Setup
| Component | Description |
|---|---|
| ESP32 | Main controller |
| Nextion Display (Discovery) | UI for weather and clock |
| WiFi Network | For API and NTP access |
Connections:
| ESP32 Pin | Nextion Pin | Description |
|---|---|---|
| 16 | TX | Nextion → ESP32 |
| 17 | RX | ESP32 → Nextion |
| 5V | 5V | Power |
| GND | GND | Common ground |
🌐 API & Services
- Weather Data: WeatherAPI.com
- Time Sync: pool.ntp.org
🧾 Display Elements
| Nextion Component | Purpose |
|---|---|
tTemp |
Temperature (°C) |
tHum |
Humidity (%) |
tVis |
Visibility (m) |
tDate |
Date (DD-MM) |
tTime |
Time (HH:MM) |
tDay |
Weekday |
p1 |
Weather icon |
📊 Logic Flow
- ESP32 connects to WiFi
- Syncs system time using NTP
- Fetches live weather JSON from WeatherAPI
- Parses data using ArduinoJson
- Updates display text and weather icon
- Repeats every 15 minutes for weather, 1 second for time
🌈 Weather Icon Mapping
| Condition | Icon | Description |
|---|---|---|
| Default | 2 |
Clouds with wind |
| Light Rain | 3 |
Cloud + rain |
| Thunderstorm | 4 |
Cloud + thunder |
| Loading / Idle | 5 |
Loading screen |
🛠️ Libraries Used
WiFi.hHTTPClient.hArduinoJson.htime.hHardwareSerial.h
🚀 Demo Output
- Time, date, and weekday auto-refresh every second
- Weather auto-updates every 15 minutes
- Dynamic icons represent real conditions in your area
🧩 Possible Extensions
- Add forecast page (next 3 days)
- Include weather alerts
- Add temperature graph or animation
- Control brightness or theme based on time
