Awesome Open Source
Awesome Open Source

mqtt-panel

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.

screenshot

screenshot

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

The web page is using bootstrap with jQuery.

Prerequisites/Installation

Get the files

Clone the mqtt-panel repository

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

Dependencies

mqtt-panel is using the listed projects to provide its functionality:

If you are using Fedora and want to generate MQTT messages, install the paho-mqtt Python bindings for test-messages.py.

$ sudo dnf -y install python-paho-mqtt

MQTT broker/server

A MQTT broker/server with Websocket support is needed.

  • mosquitto - An Open Source MQTT v3.1/3.11 broker
  • mosca - A multi-transport MQTT broker for node.js (Project seems abandoned)

Running mqtt-panel

  1. Make sure that your MQTT broker/server is running and listening.
  2. Adjust var host = '127.0.0.1'; and var port = 3000; in the file js/index.js to match your setup. Also, var topic = '#';.
  3. Open index.html in a modern web browser.

Generate MQTT messages

Start the ./test-messages.py script to publish test messages if you have no other source for messages. Depending on your broker you may need to set the supported version, on line 33: protocol=mqtt.MQTTv311 and adjust the broker and its port.

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

$ mosquitto_pub -V mqttv311 -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 -V mqttv311 -h localhost -d -t home/#

Credits

mqtt-panel was inspired by the ideas of:

License

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



Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,058,025
Web (37,383
Websocket (13,847
Iot (11,908
Panel (8,979
Mqtt (7,886
Webinterface (2,666
Mqtt Broker (624
Mqtt Client (597
Mqtt Panel (3