Fork this with Git

MQTT Webinterface

Using Bootstrap and JavaScript for universal controls
Project started on August 14, 2022.

...back to Smart Home overview

Both my ESP-Env sensors and actors as well as the Node-RED automation are interfacing to the network using MQTT.

This allows easy control using for example the mosquitto_pub MQTT command line client. With these four commands I'm overriding my Node-RED controlled bathroom light automation.

mosquitto_pub -h $HOSTNAME -u $USERNAME -P $PASSWORD -t bathroom/force_light -r -m none
mosquitto_pub -h $HOSTNAME -u $USERNAME -P $PASSWORD -t bathroom/force_light -r -m big
mosquitto_pub -h $HOSTNAME -u $USERNAME -P $PASSWORD -t bathroom/force_light -r -m small
mosquitto_pub -h $HOSTNAME -u $USERNAME -P $PASSWORD -t bathroom/force_light -r -m off

At the same time the environment sensors also publish their measurements to the corresponding MQTT topics.

To have a central place where these settings can be viewed and changed, not only for me but also for guests, I decided to write a small interactive web interface. It interfaces to the MQTT broker using WebSockets. Unfortunately this only seems to work with Chromium, not Firefox.

Screenshot of Livingroom controls
Screenshot of Bathroom controls

You can find the source code on my Gitea. I also added the installation and setup instructions to my ansible scripts.