website/input/projects/smarthome/mqtt_web.md

title: MQTT Webinterface description: Using Bootstrap and JavaScript for universal controls parent: smarthome position: 400 git: https://git.xythobuz.de/thomas/lights-web github: https://github.com/xythobuz/mqtt-lights-web date: 2022-08-14

comments: true

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.

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