A simple web interface which is able to subscribe to a MQTT topic and display the information.

The screenshot shows an example how to keep track on what's going in your apartment or your house. It's not about controlling, this setup is about observing various states.

What to see mqtt-panel in action -> http://youtu.be/Qb0UJa9kf2g

The web page is using bootstrap with jQuery.

Clone the mqtt-panel repository

git clone [email protected]:fabaff/mqtt-panel.git

###Dependencies mqtt-panel depends on a couple of additional pieces:

• paho-mqtt
• node.js
• mqtt
• socket.io
• firmata if using with an Arduino

If you are using Fedora, just use dnf to install node.

$ sudo dnf -y install node npm python-paho-mqtt

then

$ npm install mqtt socket.io

A MQTT broker/server is needed to run on localhost on port 1883.

• hbmqtt - MQTT broker with build-in websockets capabilities
• mosca - A multi-transport MQTT broker for node.js
• mosquitto - An Open Source MQTT v3.1 broker

1. Make sure that your MQTT broker/server is running and listening. Use ./server-mqtt.py for the websockets example or setup your MQTT broker for websockets support.
2. Launch ./runner.sh which will start the node server incl. the web socket on port 3000.
3. Start the ./test-messages.py script to publish test messages if you have no other source for messages.
4. Open index.html for the node version or index-ws.html for the websockets with your browser.

For manually sending messages to your MQTT broker/server you can use mosquitto_pub from mosquitto.

$ mosquitto_pub -h localhost -d -t home/front/door -m "false"

To check if the messages are are ok, subscribe to the topic home/# with mosquitto_sub.

$ mosquitto_sub -h localhost -d -t home/#

mqtt-panel was inspired by the ideas of:

• mqtt-svg-dash by Jan-Piet Mens
• Robert Hekkers

mqtt-panel licensed under MIT, for more details check LICENSE.