Creating a Raspberry Pi-based Web Dashboard for Real-Time Temperature and Humidity Data Visualization Using Flask and MQTT

This tutorial will guide you through the process of setting up a web dashboard on a Raspberry Pi to visualize real-time temperature and humidity data using Flask as the web framework and MQTT as the messaging protocol. We will cover the prerequisites, the necessary parts and tools, and detailed steps to get everything running smoothly.

Prerequisites

• Basic knowledge of Python programming
• Raspberry Pi set up with Raspbian OS
• Wi-Fi or Ethernet connection for the Raspberry Pi
• Access to the command line interface
• MQTT broker (e.g., Mosquitto) installed on the Raspberry Pi or accessible via network

Parts/Tools

• Raspberry Pi (any model with Wi-Fi capability)
• DHT11 or DHT22 Temperature and Humidity Sensor
• Breadboard and jumper wires
• Python 3 installed on Raspberry Pi
• Flask library for Python
• Paho-MQTT library for Python

Steps

1. Set up the hardware
   • Connect the DHT sensor to the Raspberry Pi using jumper wires.
   • Wiring configuration:

     
                     DHT Sensor       Raspberry Pi
                     VCC  ------------  3.3V
                     GND  ------------  GND
                     DATA ------------  GPIO4 (Pin 7)
                     

2. Install necessary libraries
   • Update the package list and install pip if not installed:

     
                     sudo apt-get update
                     sudo apt-get install python3-pip
                     

   • Install Flask and Paho-MQTT:

     
                     pip3 install Flask paho-mqtt
                     

3. Set up the MQTT broker
   • If using Mosquitto, install it with:

     
                     sudo apt-get install mosquitto mosquitto-clients
                     

   • Start the Mosquitto service:

     
                     sudo systemctl start mosquitto
                     sudo systemctl enable mosquitto
                     

4. Create the data publisher script
   • Create a new Python file named publisher.py:

     
                     import paho.mqtt.client as mqtt
                     import Adafruit_DHT
                     import time
     
                     # Define sensor type and GPIO pin
                     sensor = Adafruit_DHT.DHT22
                     pin = 4
     
                     client = mqtt.Client()
                     client.connect("localhost", 1883, 60)
     
                     while True:
                         humidity, temperature = Adafruit_DHT.read_retry(sensor, pin)
                         if humidity is not None and temperature is not None:
                             client.publish("home/temperature", temperature)
                             client.publish("home/humidity", humidity)
                         time.sleep(10)
                     

   • Run the publisher:

     
                     python3 publisher.py
                     

5. Create the Flask web application
   • Create a new folder and a new Python file named app.py:

     
                     from flask import Flask, render_template
                     import paho.mqtt.client as mqtt
     
                     app = Flask(__name__)
                     temperature = None
                     humidity = None
     
                     def on_message(client, userdata, message):
                         global temperature, humidity
                         if message.topic == "home/temperature":
                             temperature = str(message.payload.decode("utf-8"))
                         elif message.topic == "home/humidity":
                             humidity = str(message.payload.decode("utf-8"))
     
                     client = mqtt.Client()
                     client.on_message = on_message
                     client.connect("localhost", 1883, 60)
                     client.subscribe("home/temperature")
                     client.subscribe("home/humidity")
                     client.loop_start()
     
                     @app.route('/')
                     def index():
                         return render_template('index.html', temperature=temperature, humidity=humidity)
     
                     if __name__ == '__main__':
                         app.run(host='0.0.0.0', port=5000)
                     

   • Create a folder named templates and inside it, create index.html:

     
                     
                     
                     
                         
                         
                         
                     
                     
                         
     Real-Time Temperature and Humidity
                         
     Temperature: {{ temperature }} °C
                         
     Humidity: {{ humidity }} %
                     
                     
                     

   • Run the Flask application:

     
                     python3 app.py
                     

Troubleshooting

• If the MQTT messages are not showing:
  • Ensure the MQTT broker is running.
  • Check the network connection and ensure the Raspberry Pi can reach the broker.
• If the Flask app does not display data:
  • Verify the publisher script is running and sending data.
  • Check the console for any error messages.

Conclusion

You have successfully created a Raspberry Pi-based web dashboard that visualizes real-time temperature and humidity data using Flask and MQTT. This setup can be expanded for more sensors and functionalities, making it a great foundation for IoT projects.