fabaff / mqtt-panel Goto Github PK

View Code? Open in Web Editor NEW

416.0 36.0 115.0 920 KB

A web interface for MQTT

License: MIT License

Python 9.62% HTML 39.72% JavaScript 50.67%

mqtt mqtt-client mqtt-broker websockets mqtt-panel iot panel

mqtt-panel's Introduction

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.

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

Make sure that your MQTT broker/server is running and listening.
Adjust var host = '127.0.0.1'; and var port = 3000; in the file js/index.js to match your setup. Also, var topic = '#';.
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.

mqtt-panel's People

Contributors

Stargazers

Watchers

Forkers

imclab ismagom paullabat nicko466 josschne josx utkarshx ragnar123 fbeneventi gi0rkyr thomas955 jaambee jmhdz rtsys2020 sureddy borgso lbthomsen jforge xianminx saiyamd yomigits 0502lian tharukaboss schollz tamagoz the0system hongbinz seco rickyvaughn2 wanderernk bg6aer thehoff hoannc54 taoqf wotek appidom itsjustvenky gordonhuangyong sidisgood z80x1 ejngnng jungervin placot2am true-dev frimes landrash realalien jpaulynice theringer georgeredinger iomts tvikneshwar dennitizer mithunkamat riskydigital kuanyuchen jpedrobiosystems iago-lima github-lab cuomoeugenio happytm geloi poutsbf williammolina aryajimbaran profissionalsid linqiu12600 hissokas 30-z tisoldi jfdzar olymk2 xkid zakesb pablogmarrero bradprit09 bibarrav alibio2050 robotiko pablop94 ambulancexm tank0226 hewerthomn brantleygusler willsvc ciges twinscodeinc scholj05 ekapujiw2002 pengli2208 hawkn simonliu009 moayyaed sramos30 fachinformatiker thaotran27 gclntm dettmering hpssjellis ousssamakachroudi

mqtt-panel's Issues

Cannot find module 'socket.io'

Hello,

I'm receiving the error Cannot find module socket.io when I try to start the mqtt panel even I installed socket.io via npm -g install socket.io

Any idea how to get rid of this error? Here you are the full error message:

module.js:472
    throw err;
    ^

Error: Cannot find module 'socket.io'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/etc/mqtt-panel/server.js:8:14)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)

Thanks in Advance, Thomas

'Connection reset by peer' when sending a message

Hello, I am getting ConnectionResetError every time the test-messages.py script sends a message.

[2018-11-19 17:37:51,746] :: INFO :: transitions.core :: Exited state connected
[2018-11-19 17:37:51,746] :: INFO :: transitions.core :: Entered state disconnected
[2018-11-19 17:37:51,747] :: INFO :: hbmqtt.broker :: Listener 'default': 0 connections acquired
[2018-11-19 17:37:51,747] :: INFO :: hbmqtt.broker :: Listener 'default': 1 connections acquired
[2018-11-19 17:37:51,748] :: INFO :: hbmqtt.broker :: Connection from 127.0.0.1:34671 on listener 'default'
[2018-11-19 17:37:51,752] :: INFO :: transitions.core :: Exited state new
[2018-11-19 17:37:51,752] :: INFO :: transitions.core :: Entered state connected
[2018-11-19 17:37:53,749] :: WARNING :: hbmqtt.mqtt.protocol.handler :: BrokerProtocolHandler Unhandled exception in reader coro: ConnectionResetError(104, 'Connection reset by peer')

Firefox prints in console:

Firefox can’t establish a connection to the server at ws://127.0.0.1:3000/mqtt. mqttws31.js:977:17
Host: 127.0.0.1, Port: 3000, Path: /mqtt TLS: false index.html:53:13

Any help appreciated. I use mqtt-server.py as a broker.

Replace the jqplot with Chart.js.

Hi, I found that the performance of jqplot is really bad. Browser will become very laggy after a few minutes (even though I constrain the number of value on the plot).

So I wondering if I can pull a request that replace the jqplot with Chart.js:blush:

No colors on the page

I have clone your git and launched the test, but I don't see the nice colors as on your demo screenshot.

Is there anything missing?

Thanks

Migrate LGTM.com installation from OAuth to GitHub App

Hi There,

This project is still using an old implementation of LGTM's automated code review, which has now been disabled. To continue using automated code review, and receive checks on your Pull Requests, please install the GitHub App on this repository.

Thanks,
The LGTM Team

MQTT Websockets

Fabian, I've taken the liberty of using your example and adding MQTT over Websockets as a proof of concept for an upcoming demo. In case you're interested, it is here.

Thanks for a great-looking design! :-)

I get an error when I start the server.js

Option log level is not valid. Please refer to the README.
Where should I look for it?