This content originally appeared on DEV Community and was authored by alan
This guide explains how to set up an ESP32 microcontroller with an LM35 temperature sensor to send real-time data via MQTT to a Raspberry Pi running a Mosquitto broker. The data is then visualized using a sensor dashboard with an interactive UI.
We'll walk through:
- Setting up Mosquitto on a Raspberry Pi
- Configuring the ESP32 to send sensor data via MQTT
- Deploying a real-time web-based dashboard for visualization
1️⃣ Install Mosquitto on Raspberry Pi (Raspbian)
Run the following commands to install Mosquitto:
sudo apt update -y
sudo apt install mosquitto
2️⃣ Configure Mosquitto Broker
Edit the Mosquitto configuration file:
sudo vi /etc/mosquitto/mosquitto.conf
Copy and paste the following configuration:
pid_file /run/mosquitto/mosquitto.pid
persistence true
persistence_location /var/lib/mosquitto/
log_dest file /var/log/mosquitto/mosquitto.log
include_dir /etc/mosquitto/conf.d
allow_anonymous false # Change to 'true' for public connections
password_file /etc/mosquitto/passwd
listener 1883 0.0.0.0 # Allow binding to the network
Save and exit, then restart Mosquitto:
sudo systemctl restart mosquitto
3️⃣ Enable and Start Mosquitto
sudo systemctl enable mosquitto
sudo systemctl start mosquitto
4️⃣ (Optional) Set a Username and Password
If allow_anonymous false is set, create a username and password:
sudo mosquitto_passwd -c /etc/mosquitto/passwd myUsername
Restart Mosquitto:
sudo systemctl restart mosquitto
5️⃣ Test the MQTT Server
Install Mosquitto Clients
sudo apt install mosquitto-clients
Publish a Message
Without authentication:
mosquitto_pub -h localhost -t "test/topic" -m "Hello, Raspberry Pi!"
With authentication:
mosquitto_pub -h localhost -u "myUser" -P "myPassword" -t "test/topic" -m "Hello, Raspberry Pi!"
Subscribe to a Topic
Without authentication:
mosquitto_sub -h localhost -t "test/topic"
With authentication:
mosquitto_sub -h localhost -u "myUser" -P "myPassword" -t "test/topic"
Tip: For better performance, set a static IP on your Raspberry Pi:
🔗 Guide: Set a Static IP on Raspberry Pi
6️⃣ ESP32 Circuit Setup
We'll use an ESP32 with an LM35 temperature sensor.
🔗 Code Repository: ESP32 MQTT Code
Set WiFi Credentials
Modify boot.py:
SSID = "Your_SSID" # WiFi network name
PASSWORD = "Your_PASSWORD" # WiFi password
Set MQTT Credentials
Modify main.py:
mqtt_server = "YOUR_RASPBERRY_IP"
mqtt_user = "myUser" # Optional
mqtt_pass = "myPassword" # Optional
Upload the Code to ESP32
ampy --port /dev/ttyUSB0 put boot.py
ampy --port /dev/ttyUSB0 put main.py
ampy --port /dev/ttyUSB0 put mqtt.py
Note:
ttyUSB0is the ESP32's serial port.
Circuit Diagram
Build the circuit as shown in the image:
D34 is used as the analog-to-digital converter (ADC).
7️⃣ Receiving Data from ESP32
Once everything is set up, the ESP32 will send data to the MQTT topic sensors in this format:
[{"name": "temperature", "value": 29.9}]
This happens inside main.py:
while True:
try:
client.check_msg()
if (time.time() - last_message) > message_interval:
sensors = [{"name": "temperature", "value": read_temp()}] # Sensor data sent to MQTT
client.publish(topic_pub, json.dumps(sensors))
last_message = time.time()
time.sleep(1)
except OSError as e:
print("Failed to connect to MQTT broker. Restarting...", e)
restart_and_reconnect()
8️⃣ Sensor Dashboard Integration
Once the ESP32 sends data via MQTT, you can visualize it in real time using a web-based sensor dashboard with FastHTML
🔗 Dashboard Code Repository: Sensor Dashboard
Run the Sensor Dashboard
Clone the repository and install dependencies:
git clone https://github.com/BloodBoy21/sensorsDashboard.git
cd sensorsDashboard
pip install -r requirements.txt
Set MQTT Credentials in .env
MQTT_BROKER="MY_RASPBERRY_IP"
MQTT_USER=""
MQTT_PASSWORD=""
Run the Dashboard
python main.py
Access it in your browser:
http://localhost:5001
Alternatively, run using Docker:
docker compose up
9️⃣ Adding More Sensors
Modify main.py to add new sensors:
list_of_sensors = [
Sensor(
"temperature", # Name from MQTT payload
"Living Room",
layout=Layout(
title="Temperature Sensor",
width=400,
height=400,
),
view_data=[
View(
title="Temperature",
type="indicator",
mode="number+gauge", # Type of chart
domain={"x": [0, 1], "y": [0, 1]},
)
],
),
Sensor(
"humidity",
"Living Room",
layout=Layout(
title="Humidity Sensor",
width=400,
height=400,
),
view_data=[
View(
title="Humidity",
type="indicator",
mode="number+gauge",
domain={"x": [0, 1], "y": [0, 1]},
)
],
),
# Add more sensors here
]
my_dashboard.add_sensors(list_of_sensors)
🎉 Final Result: Live Sensor Dashboard!
Now, you can visualize real-time sensor data with interactive charts.
🔗 References
🚀 Now you have a complete IoT system with ESP32, MQTT, and a live sensor dashboard! 🚀
This content originally appeared on DEV Community and was authored by alan
alan | Sciencx (2025-02-07T07:07:17+00:00) Sensors Dashboard (MQTT Raspberry PI+ESP32+FastHTML). Retrieved from https://www.scien.cx/2025/02/07/sensors-dashboard-mqtt-raspberry-piesp32fasthtml/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.