Introduction
The ESP32 is a powerful and versatile microcontroller with built-in WiFi and Bluetooth, making it ideal for IoT applications. In this project, we build a stylish and functional web-based automation dashboard using ESP32, HTML, CSS, and WebSocket communication. This dashboard allows real-time monitoring and control of sensors and devices such as lights, temperature, humidity, and ambient light levels.
Applications of the ESP32 Automation Dashboard
This type of automation system has many potential uses:
- - Smart home lighting control
- - Office or industrial environment monitoring
- - School lab sensor dashboards
- - Remote agricultural monitoring
- - Energy-efficient lighting automation
The dashboard includes:
The interface is built with responsive HTML and CSS for use on both desktops and mobile devices. The communication between the ESP32 and the web page is handled via WebSocket for fast, bidirectional, real-time updates.
What You Need:
- - ESP32 Dev Module
- - 10K to 50K Potentiometer
- - 68ohm Resistor
- - LEDs
- -Breadboard and Jumper Wires
- - DHT11 Sensor module
Circuit Diagram
To build this project, we use an ESP32 Dev Module as the core microcontroller. A 10K to 50K potentiometer is connected to one of the ESP32's analog input pins (GPIO34) to simulate analog sensor values. The middle pin (wiper) of the potentiometer goes to GPIO34, while the other two pins connect to 3.3V and GND.
An LED is connected to GPIO22 through a 680-ohm resistor, which limits the current and protects the LED and ESP32. The cathode of the LED is connected to ground. A DHT11 sensor module is used for reading temperature and humidity.
It is connected to 3.3V and GND, and its data pin is connected to GPIO19. If you're using the raw DHT11 sensor (not the module), ensure that a 10K pull-up resistor is added between the data and VCC pins.
CLICK IMAGE TO VIEW
.png)
All components are assembled on a breadboard using jumper wires for easy prototyping. The ESP32 is powered through USB, and the onboard 3.3V pin supplies power to the potentiometer and sensor. This simple setup allows real-time data reading from the potentiometer and DHT11 sensor, while controlling the LED using a web interface.
Arduino code
This code is a simple WebSocket demo. It creates a basic web page that:
- Shows a checkbox (button) to control an LED connected to ESP32
- Displays the current potentiometer (LDR) value in real-time
💡 It uses minimal HTML + JavaScript with no CSS, perfect for beginners learning how WebSocket communication works between the ESP32 and a browser.
This is the main project code with a beautiful responsive HTML dashboard. It includes:
- Real-time display of temperature and humidity from the DHT11 sensor
- Potentiometer (LDR) value shown as a live line chart
- Two toggle switches to control two LEDs (ON/OFF)
- A brightness slider to control PWM output for dimming an LED
- Connection status (Connected/Disconnected) using a glowing dot
- Fully mobile responsive with sidebar, header, and smooth animations
Learn More About WebSocket & JSON in Arduino
If you're new to WebSockets or want to understand how data is sent and received between the ESP32 and your web browser, I highly recommend learning the basics of WebSocket communication. WebSockets allow real-time two-way communication between the ESP32 and the web page without needing to refresh the browser. You can also explore how to use ArduinoJson to format and parse data efficiently when sending sensor values and control commands over the network. These two topics are essential for any modern IoT project.
👉
Introduction to WebSockets with ESP32
👉
Getting Started with ArduinoJson Library
Once you understand these concepts, you'll be able to build your own live dashboards, real-time controls, and cloud-connected devices with confidence.
Simulation Video
Conclusion
This project showcases the capabilities of the ESP32 when combined with modern HTML and CSS dashboards. With real-time WebSocket communication, this setup is ideal for smart home control, remote monitoring, and other IoT applications.