Realtime Chart (MQTTwrapper Class Demo)

(No library is wrapped...)

Go back to example list / Go to the repository of this example on GitHub

HOST (Where is the broker):

SEND (Behave as a publisher):

RECV (Behave as a subscriber):

Chart (Pick up from the subscriber):

Data will be plotted on the chart when the above subscriber receives it if the data is formatted like the following.

plot n1 n2

n1

for Dataset A (real-number, -10<n1<10)

n2

for Dataset B (real-number, -10<n2<10)

README (What is this?):

This is a control panel to try to use the MQTTwrapper class. This library makes your web browser an MQTT-over-WebSocket speaker. And then the protocol is very helpful to send/receive text data (also byte stream) from/to the UNIX stdin/stdout.

Only one simple application is required to connect to the stdin/stdout. That is "Mosquitto."

Try to use me by the following steps.

How to Use Me:

0-1) [PREP.] Install Mosquitto

The installation instructions are on this page.

0-2) [PREP.] Write the configuration for Mosquitto

Copy and save the following text as the file "mosquitto.local.conf" in your favor directory.
allow_anonymous true #=== Plain MQTT listener 1883 protocol mqtt #=== Plain MQTT over WebSocket listener 8000 protocol websockets #=== Secure MQTT over WebSocket (TLS) listener 8884 protocol websockets certfile /PATH/TO/YOUR/certfile.pem keyfile /PATH/TO/YOUR/keyfile.pem cafile /PATH/TO/YOUR/cafile.pem

1) Start an MQTT broker

Type the following command on your UNIX terminal.
$ mosquitto -c mosquitto.local.conf

2) Connect me to the MQTT broker

In the "HOST" section, fill in the URL form (Specify "ws://localhost:8000/" to use the above MQTT broker, of course, it's OK to use another broker.) and push the "Connect" button. Then, wait for the button name to be "CONNECTED."

3) Start subscribing

Decide on the topic name in the "RECV" secion and type it into the "topicname" field. Then, push the "Start" button in the same section.

4) Publish a data plotting command

Publish a data plotting command on your UNIX terminal like this:
$ echo "plot 3.14 -2.718" | mosquitto_pub -l -h HOSTNAME -t "TOPICNAME"
("TOPIC" is the topic name you already decided on. And you have to specify the same MQTT broker instead of "localhost" if you are connecting to a different broker from what you specified on this HTML control panel.) Then you can see new blue and pink plots on the chart, which are drawn by the command you published.

Or you can also publish the same plotting command from the publisher in the "SEND" section on this HTML.