Sensors Dashboard (MQTT Raspberry PI+ESP32+FastHTML)

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: ttyUSB0 is 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

• Mosquitto Documentation
• Plotly Chart Types
• FastHTML

🚀 Now you have a complete IoT system with ESP32, MQTT, and a live sensor dashboard! 🚀