Introduction
In this tutorial, we will create a web dashboard using Flask to visualize real-time data from an ESP32 sensor network via MQTT (Message Queuing Telemetry Transport). This project will help you learn how to set up a basic Flask application, connect to an MQTT broker, and display sensor data in a web interface.
Prerequisites
- Basic knowledge of Python programming.
- Understanding of Flask framework.
- MQTT broker (e.g., Mosquitto) installed and running.
- ESP32 development board set up for sending sensor data.
- Python environment with libraries: Flask, Paho-MQTT, and Flask-SocketIO.
Parts/Tools
- ESP32 Development Board
- MQTT Broker (e.g., Mosquitto)
- Python 3.x installed on your system
- Text Editor or IDE (e.g., VSCode, PyCharm)
Steps
-
Set Up Your ESP32 for MQTT
First, ensure your ESP32 is programmed to publish sensor data to the MQTT broker. Here’s a simple example code:
import network import time from umqtt.simple import MQTTClient from machine import Pin, ADC # Connect to WiFi wlan = network.WLAN(network.STA_IF) wlan.active(True) wlan.connect("YOUR_SSID", "YOUR_PASSWORD") # Wait for connection while not wlan.isconnected(): time.sleep(1) # MQTT setup mqtt_client = MQTTClient("esp32_client", "MQTT_BROKER_IP") mqtt_client.connect() # Sensor setup sensor = ADC(Pin(34)) # Example analog sensor on GPIO 34 while True: reading = sensor.read() mqtt_client.publish("sensor/data", str(reading)) time.sleep(5) -
Install Required Python Packages
Open your terminal and install the necessary Python packages:
pip install Flask paho-mqtt Flask-SocketIO -
Create a Flask Application
Create a new directory for your project and add a file named app.py. The following is a basic structure:
from flask import Flask, render_template from flask_socketio import SocketIO import paho.mqtt.client as mqtt app = Flask(__name__) socketio = SocketIO(app) # MQTT setup def on_message(client, userdata, message): socketio.emit('sensor_data', {'data': message.payload.decode()}) mqtt_client = mqtt.Client() mqtt_client.on_message = on_message mqtt_client.connect("MQTT_BROKER_IP") mqtt_client.loop_start() mqtt_client.subscribe("sensor/data") @app.route('/') def index(): return render_template('index.html') if __name__ == '__main__': socketio.run(app, host='0.0.0.0', port=5000) -
Create the HTML Template
Create a folder named templates in your project directory and add a file named index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MQTT Data Dashboard</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.0/socket.io.js"></script> </head> <body> <h1>Real-Time Sensor Data</h1> <div id="data"></div> <script> var socket = io.connect('http://localhost:5000'); socket.on('sensor_data', function(msg) { document.getElementById('data').innerHTML = 'Sensor Reading: ' + msg.data; }); </script> </body> </html> -
Run the Flask Application
In your terminal, run the Flask application:
python app.pyVisit http://localhost:5000 in your web browser to see the dashboard.
Troubleshooting
- ESP32 Not Connecting to WiFi: Double-check your SSID and password. Ensure the board is within range.
- MQTT Connection Issues: Verify that the MQTT broker is running and accessible. Check the broker’s IP address.
- Data Not Updating on Dashboard: Ensure your ESP32 is correctly publishing data and that Flask is receiving messages. Check the console for any errors.
- Socket.IO Not Connecting: Ensure you are using the correct URL and port in your JavaScript code.
Conclusion
Congratulations! You have successfully built a real-time MQTT data visualization dashboard using Flask. You can now expand this project by adding more sensors, improving the UI, or integrating additional features like data logging or analytics. Happy coding!
