Powered by Blogger.

Tuesday, June 6, 2017


Lesson 18: MQTT Dash Mobile App with Magicblocks.io

Introduction to MQTT

MQTT stands for MQ Telemetry Transport and was designed and developed by IBM in 1999. The term MQ stands to represent IBM's MQ series message queue product line. It was designed to be a lightweight messaging protocol for the publish subscribe model running on top of TCP/IP. The publish subscribe architecture is a common message oriented communication paradigm where there is a broker in the middle for relaying messages to and from clients.

Important facts to note in the above diagram are that

  • Information streams are known as topics
  • A client can publish data to a topic. There can be more than one publisher per topic
  • Multiple clients can subscribe to a topic
  • A Broker in the middle facilitates the brokering or relaying of the messages.

MQTT defines several methods to indicate desired actions during communication
    Waits for a connection to be established with the server.
    Waits for the MQTT client to finish any work it must do, and for the TCP/IP session to disconnect.
    Waits for completion of the Subscribe or UnSubscribe method.
With these basic facts on MQTT in mind, lets see how the mobile application MQTT Dash can be used with magicblocks.io. Please note that MQTT Dash is not an app by magicblocks.io and we should be grateful to its authors for the free software. The objective of this lesson is to learn how we can integrate MQTT Dash with magicblocks.io to use its powerful and flexible user interface so that you can interact with your playground easily.

Step 1

Open your playground and place the 'mqtt' blocks in the input and output categories. These will be useful for communicating with the mobile app. The input node will be used as a data input source to the playground and the output node will act as a data output channel from the playground. To configure:

  • Double click on the MQTT node from Input category
  • Select 'Add new mqtt-broker' from the 'Broker' drop down menu
  • Click on the edit button on the right
  • In the new window that opens subsequently fill
    • Broker - test.mosquitto.org
    • Port - 1883
    • Leave ClientID, username, password as blank
  • Click Add. This will create a MQTT broker node and close the window.
  • In the MQTT in node configuration set the topic in the format magicblocks/{your username}/{topic name}. The topic name can be anything unique in your playground. eg: light1, temperature1.1
  • Click Done. Now your MQTT in node will be configured. You now have a MQTT node that is subscribed to the MQTT broker at test.mosquitto.org with the topic you selected. It is able to receive any message published on that topic to the broker by any client. Please note that test.mosquitto.org is a free service offered by mosquitto.org which is a very popular open source MQTT broker. This is a public broker and anyone will be able to subscribe to your topic and publish to that topic as well. Therefore this exercise is intended to be only a learning exercise on how MQTT works and how to integrate with MQTT dash. Do not utilize the same approach if you are building a real world application. You can use a paid MQTT broker plan by hivemq.com or other providers such as cloudmqtt.com
  • Connect the MQTT In block to a debug block to view the incoming messages in the debug panel

Step 2

 Now that your MQTT node is connected to the broker and is ready to receive messages you will now have to configure your mobile app to connect to the broker and send messages. MQTT dash is capable of both sending and receiving messages. i.e. it can both publish & subscribe to any topic. In this step we will focus only on publishing to the topic that we subscribed our node to in the previous step.

  • Install MQTT Dash on your Android smart phone from the Android playstore. You can find it here.
  • Open your application and click on the + icon in the top right corner to add a connection to an MQTT broker
  • Fill the following fields
    • Name - Any name to identify your connection. eg: My playground
    • Address: test.mosquitto.org
    • Port: 1883
    • You can leave all other fields blank
  • Click the save icon in the top right corner to save your connection. 
  • Back in the home screen you will see the connection 'My playground'. Click on that to go to your dashboard. Your dashboard is fully configurable which gives a lot of flexibility to your application. You can add widgets to control your devices, view stats etc. In this exercise we will see how to add a simple switch which will publish messages to your playground.
  • Click on the + icon in the top right corner to add a widget.
  • Choose type Switch/button
  • Fill the following fields
    • Name - Name to identify your widget. eg: Light 1
    • Topic - the topic that you configured in your MQTT node in the playground. eg: magicblocks/demo_user/light1
    • You can keep the default values in the other fields.
  • Click on the save icon in the top right corner
You will now have a widget on your dash which can publish messages via MQTT which will be received by your playground.

Toggle switch and you will see 0 and 1 messages appearing on your debug panel in the playground. Pretty neat right?

Step 3

By now you are able to publish from the mobile app and receive that message via the subscribed mqtt node in the playground. You can play around the app to customize the icons, widget and lots of other stuff. In this step learn how to publish from the playground and subscribe from the app.

  • Double click on the MQTT Output node
  • Now that you have already created a MQTT broker in Step 1 you can just select the broker in the dropdown menu.
  • Set the topic. eg: magicblocks/demo_user/temperature1
  • Leave other fields blank and click Done
  • Connect around 3 other inject nodes to send data to the MQTT output node

Now you have a setup to publish to the MQTT broker.

Step 4

In this step we will setup a widget in the MQTT dash to display the simulated temperature values we are sending.
  • Add a new widget of type 'Range/Progress'
  • Fill the following fields
    • Name: Any name you prefer eg: Temperature
    • Topic: the topic you configured in the MQTT Output node
    • Set Min & Max value to 10 & 50 to help see the variation more vividly
    • Leave all other fields in the default value
    • Click on the save icon
  • Now you will see the new widget on your dashboard
  • Click on the inject nodes in the playground and see your gauge getting updated instantly!

There are many many customizations you can do in MQTT dash. Its time to play on your own figure out the capabilities of MQTT dash. Stay in touch for future updates

Download App