IoT Prototyping Mobile App - MQTT Viewer w/ CloudMQTT
MQTT Viewer is a simple, configurable & ready to use internet of things (IoT) client. This app has been designed to help you get started with your IoT journey. Simply configure your MQTT server details, and start receiving events in the app immediately. Great for prototyping!
Learning Objectives
At the end of this post you will be able to:
- Configure MQTT Viewer with cloudmqtt.com
CloudMQTT Setup
Step 1: Register with CloudMQTT and login (they offer a Free plan as well).
Step 2: Click on Control Panel, this will take you to the dashboard.
Step 3: Create on + Create to create a new instance.
Step 4: On the instance setup screen, enter Name, select a Plan (free plan is available as well) and click on Create button.
Step 5: From Control Panel, click on Details button to open instance console.
Step 6: Instance console screen provides quite a few options to manage and view statistics of the MQTT instance.
Step 7: CloudMQTT requires clients to authenticate, so next you need to create a new user. Under Manage Users, enter username and password and click on Save to create a new user.
Step 7: Finally you need to provide required permissions to your newly created user. Under ACLs, select newly created user, enter the topic which this user can read/write and then check the Read Access? and Write Access? checkboxes.
Your CloudMQTT setup is complete and is ready to receive messages. You can test your instance by using Websocket UI provided in the console.
App Configurations
Step 1: Download MQTT Viewer from Play Store.
Step 2: Open MQTT Viewer and select Settings from the toolbar.
Step 3: In order to configure a new MQTT server, click on Server.
Step 4: Tap on the Host setting to edit. Enter m12.cloudmqtt.com and click Ok (make sure to copy this information from your CloudMQTT instance console).
Step 5: Tap on the Port setting to edit. Enter 14614 and click Ok (make sure to copy this information from your CloudMQTT instance console).
Step 6: Tap on the Topic setting to edit. Enter your topic name here, for this post we are using codifythings/mqtt and click Ok.
Step 7: Tap on the Device setting to edit. Enter your device name, for this post we are using androidClient and click Ok.
Step 8: CloudMQTT requires clients to authenticate, so tap on Enable Authentication.
Step 9: Tap on the Username setting to edit. Enter the username for the user that your created in the previous step and click Ok.
Step 10: CloudMQTT requires clients to authenticate. So tap on the Password setting to edit. Enter the password for the user that you created in the previous step and click Ok.
Leave QoS fields as-is. Your Server settings should look similar to the screenshot below.
Step 11: Click on the back button, and go to Message setting.
Step 12: If you are sending plain data, then leave the setting as-is i.e. do not enable JSON format and skip step 10. If you are publishing data to MQTT server in JSON format, then enable this setting and follow step 13.
Step 13: Tap on the Data Key setting to edit. You need to specify which field in the JSON message contains your data. For this tutorial, we are using moisture and click Ok. For example, if the message being published to MQTT server was {temperature: 45, moisture: 35}, then by specifying moisture in Data Key we are asking the app to use its value which in this case will be 35.
Your Message settings should look similar to the screenshot below.
Step 14: (Optional) Click on the back button and go to Notifications setting.
Step 15: (Optional) If you want the app to create a notification, then enable this setting.
As soon as you go back to the main screen, the app will connect to the new MQTT server settings (in the case of an error, a snack bar will be displayed with the error message). For this tutorial, we also configured the title, color theme, icon and data visualization, screenshot below shows the final product. If you want to change the color theme, icon or data visualization look at rest of the settings here.
Download
Disclaimer: This mobile app has only been designed for prototyping purposes, and is not production ready.
IoT Prototyping Mobile App - MQTT Viewer w/ DIoTY
MQTT Viewer is a simple, configurable & ready to use internet of things (IoT) client. This app has been designed to help you get started with your IoT journey. Simply configure your MQTT server details, and start receiving events in the app immediately. Great for prototyping!
Learning Objectives
At the end of this post you will be able to:
- Configure MQTT Viewer with dioty.co
DIoTY Setup
Step 1: Register with DIoTY and login (they offer a Free plan as well).
Step 2: Click on Get Started, this will take you to the dashboard with connection details.
Note: When you register, an email will be sent to you containing the password.
App Configurations
Step 1: Download MQTT Viewer from Play Store.
Step 2: Open MQTT Viewer and select Settings from the toolbar.
Step 3: In order to configure a new MQTT server, click on Server.
Step 4: Tap on the Host setting to edit. Enter mqtt.dioty.co and click Ok (make sure to copy this information from your DIoTY dashboard).
Step 5: Tap on the Port setting to edit. Enter 1883 and click Ok (make sure to copy this information from your DIoTY dashboard).
Step 6: Tap on the Topic setting to edit. Enter your topic name here, for this post we are using /codifythings@gmail.com/mqtt and click Ok.
Note: DIoTY requires that all your topic names start with /you-username/, for us, it was /codifythings@gmail.com/. This information is provided as part of connection details.
Step 7: Tap on the Device setting to edit. Enter your device name, for this post we are using androidClient and click Ok.
Step 8: DIoTY requires clients to authenticate. So tap on Enable Authentication.
Step 9: Tap on the Username setting to edit. Enter the username for the user that you created in the previous step and click Ok.
Step 10: Tap on the Password setting to edit. Enter the password for the user that you received in the email and click Ok.
Leave QoS fields as-is. Your Server settings should look similar to the screenshot below.
Step 11: Click on the back button, and go to Message setting.
Step 12: If you are sending plain data, then leave the setting as-is i.e. do not enable JSON format and skip step 10. If you are publishing data to MQTT server in JSON format, then enable this setting and follow step 13.
Step 13: Tap on the Data Key setting to edit. You need to specify which field in the JSON message contains your data. For this tutorial, we are using temperature and click Ok. For example, if the message being published to MQTT server was {temperature: 45, moisture: 35}, then by specifying temperature in Data Key we are asking the app to use its value which in this case will be 45.
Your Message settings should look similar to the screenshot below.
Step 13: (Optional) Click on the back button and go to Notifications setting.
Step 14: (Optional) If you want the app to create a notification, then enable this setting.
As soon as you go back to the main screen, the app will connect to the new MQTT server settings (in the case of an error, a snack bar will be displayed with the error message). For this tutorial, we also configured the title, color theme, icon and data visualization, screenshot below shows the final product. If you want to change the color theme, icon or data visualization look at rest of the settings here.
Download
Disclaimer: This mobile app has only been designed for prototyping purposes, and is not production ready.
IoT Prototyping Mobile App - MQTT Viewer w/ Mosquitto Server
MQTT Viewer is a simple, configurable & ready to use internet of things (IoT) client. This app has been designed to help you get started with your IoT journey. Simply configure your MQTT server details, and start receiving events in the app immediately. Great for prototyping!
Learning Objectives
At the end of this post you will be able to:
- Configure MQTT Viewer with test.mosquitto.org
Disclaimer: test.mosquitto.org is a publicly available instance of MQTT, so the data you publish might be available to others.
App Configurations
Step 1: Download MQTT Viewer from Play Store.
Step 2: Open MQTT Viewer and select Settings from the toolbar.
Step 3: In order to configure a new MQTT server, click on Server.
Step 4: Tap on the Host setting to edit. Enter test.mosquitto.org and click Ok.
Step 5: Tap on the Port setting to edit. Enter 1883 and click Ok.
Step 6: Tap on the Topic setting to edit. Enter your topic name here, for this post we are using codifythings/mqtt and click Ok.
Step 7: Tap on the Device setting to edit. Enter your device name, for this post we are using androidClient and click Ok.
Since this is a publicly available instance of MQTT so it does not require authentication. Leave Username, Password and QoS fields as-is. Your Server settings should look similar to the screenshot below.
Step 8: Click on the back button, and go to Message setting.
Step 9: If you are sending plain data, then leave the setting as-is i.e. do not enable JSON format and skip step 10. If you are publishing data to MQTT server in JSON format, then enable this setting and follow step 10.
Step 10: Tap on the Data Key setting to edit. You need to specify which field in the JSON message contains your data. For this tutorial, we are using light and click Ok. For example, if the message being published to MQTT server was {light: 25, temperature: 45}, then by specifying light in Data Key we are asking the app to use its value which in this case will be 25.
Your Message settings should look similar to the screenshot below.
Step 11: (Optional) Click on the back button and go to Notifications setting.
Step 12: (Optional) If you want the app to create a notification, then enable this setting.
As soon as you go back to the main screen, the app will connect to the new MQTT server settings (in the case of an error, a snack bar will be displayed with the error message). For this tutorial, we also configured the title, color theme, icon and data visualization, screenshot below shows the final product. If you want to change the color theme, icon or data visualization look at rest of the settings here.
Download
Disclaimer: This mobile app has only been designed for prototyping purposes, and is not production ready.
IoT Prototyping Mobile App - MQTT Viewer w/ HiveMQ
MQTT Viewer is a simple, configurable & ready to use internet of things (IoT) client. This app has been designed to help you get started with your IoT journey. Simply configure your MQTT server details, and start receiving events in the app immediately. Great for prototyping!
Learning Objectives
At the end of this post you will be able to:
- Configure MQTT Viewer with broker.hivemq.com
Disclaimer: broker.hivemq.com is a publicly available instance of MQTT, so the data you publish might be available to others.
App Configurations
Step 1: Download MQTT Viewer from Play Store.
Step 2: Open MQTT Viewer and select Settings from the toolbar.
Step 3: In order to configure a new MQTT server, click on Server.
Step 4: Tap on the Host setting to edit. Enter broker.hivemq.com and click Ok.
Step 5: Tap on the Port setting to edit. Enter 1883 and click Ok.
Step 6: Tap on the Topic setting to edit. Enter your topic name here, for this post we are using codifythings/mqtt and click Ok.
Step 7: Tap on the Device setting to edit. Enter your device name, for this post we are using androidClient and click Ok.
Since this is a publicly available instance of MQTT so it does not require authentication. Leave Username, Password and QoS fields as-is. Your Server settings should look similar to the screenshot below.
Step 8: Click on the back button, and go to Message setting.
Step 9: If you are sending plain data, then leave the setting as-is i.e. do not enable JSON format and skip step 10. If you are publishing data to MQTT server in JSON format, then enable this setting and follow step 10.
Step 10: Tap on the Data Key setting to edit. You need to specify which field in the JSON message contains your data. For this tutorial, we are using humidity and click Ok. For example, if the message being published to MQTT server was {temperature: 45, humidity: 35}, then by specifying humidity in Data Key we are asking the app to use its value which in this case will be 35.
Your Message settings should look similar to the screenshot below.
Step 11: (Optional) Click on the back button and go to Notifications setting.
Step 12: (Optional) If you want the app to create a notification, then enable this setting.
As soon as you go back to the main screen, the app will connect to the new MQTT server settings (in the case of an error, a snack bar will be displayed with the error message). For this tutorial, we also configured the title, color theme, icon and data visualization, screenshot below shows the final product. If you want to change the color theme, icon or data visualization look at rest of the settings here.
Download
Disclaimer: This mobile app has only been designed for prototyping purposes, and is not production ready.
IoT Prototyping Mobile App - MQTT Viewer w/ Eclipse IoT
MQTT Viewer is a simple, configurable & ready to use internet of things (IoT) client. This app has been designed to help you get started with your IoT journey. Simply configure your MQTT server details, and start receiving events in the app immediately. Great for prototyping!
Learning Objectives
At the end of this post you will be able to:
- Configure MQTT Viewer with iot.eclipse.org
Disclaimer: iot.eclipse.org is a publicly available instance of MQTT, so the data you publish might be available to others.
App Configurations
Step 1: Download MQTT Viewer from Play Store.
Step 2: Open MQTT Viewer and select Settings from the toolbar.
Step 3: In order to configure a new MQTT server, click on Server.
Step 4: Tap on the Host setting to edit. Enter iot.eclipse.org and click Ok.
Step 5: Tap on the Port setting to edit. Enter 1883 and click Ok.
Step 6: Tap on the Topic setting to edit. Enter your topic name here, for this post we are using codifythings/mqtt and click Ok.
Step 7: Tap on the Device setting to edit. Enter your device name, for this post we are using androidClient and click Ok.
Since this is a publicly available instance of MQTT so it does not require authentication. Leave Username, Password and QoS fields as-is. Your Server settings should look similar to the screenshot below.
Step 8: Click on the back button, and go to Message setting.
Step 9: If you are sending plain data, then leave the setting as-is i.e. do not enable JSON format and skip step 10. If you are publishing data to MQTT server in JSON format, then enable this setting and follow step 10.
Step 10: Tap on the Data Key setting to edit. You need to specify which field in the JSON message contains your data. For this tutorial, we are using temperature and click Ok. For example, if the message being published to MQTT server was {light: 25, temperature: 45}, then by specifying temperature in Data Key we are asking the app to use it's value which in this case will be 45.
Your Message settings should look similar to the screenshot below.
Step 11: (Optional) Click on the back button and go to Notifications setting.
Step 12: (Optional) If you want the app to create a notification, then enable this setting.
As soon as you go back to the main screen, the app will connect to the new MQTT server settings (in the case of an error, a snack bar will be displayed with the error message). For this tutorial, we also configured the title, color theme, icon and data visualization, screenshot below shows the final product. If you want to change the color theme, icon or data visualization look at rest of the settings here.
Download
Disclaimer: This mobile app has only been designed for prototyping purposes, and is not production ready.
IoT Prototyping Mobile App - MQTT Viewer
MQTT Viewer is a simple, configurable & ready to use internet of things (IoT) client. This app has been designed to help you get started with your IoT journey. Simply configure your MQTT server details, and start receiving events in the app immediately. Great for prototyping!
Features
- Simple & clean user interface
- Connects to different MQTT servers
- Supports username and password authentication
- Accepts both plain and JSON format messages
- Creates notifications when new messages arrive
- Allows to customize color theme
- Allows to choose any icon from Font Awesome and Weather Icons libraries
- Provides line chart and bar chart for data visualization
Settings
From the toolbar on the top right, select Settings.
General
This section contains following settings.
- App Name: Tap on the setting to edit. Enter app name that will be shown on top of the main screen and as the title for any notifications.
- Background Color: Tap on the setting to edit. Enter a color in hex format i.e. #FFFFFF. This setting will change the background color of the main screen.
- Foreground Color: Tap on the setting to edit. Enter a color in hex format i.e. #FFFFFF. This setting will change text color on the main screen.
- Highlighter Color: Tap on the setting to edit. Enter a color in hex format i.e. #FFFFFF. This setting will change the color for charts displayed on the main screen.
Server
This section contains following settings.
- Host: Tap on the setting to edit. Enter the hostname of MQTT server that you are connecting e.g. iot.eclipse.org.
- Port: Tap on the setting to edit. Enter the port number of MQTT server that you are connecting e.g. 1883.
- Username: Tap on the setting to edit. If MQTT server requires authentication, then enter provided username.
- Password: Tap on the setting to edit. If MQTT server requires authentication, then enter provided password.
- Topic: Tap on the setting to edit. Enter the topic name that the app will subscribe.
- Device: Tap on the setting to edit. Enter a device name, in some cases, MQTT servers require device name to be in a specific format, otherwise, this information shows up in MQTT logs when a client connects.
- QoS: Tap on the setting to edit. Select 0 or 1 for the quality of service.
Message
This section contains following settings.
- Enable JSON Format: App supports both plain and JSON formats. Tap on the setting to enable/disable.
- Data Key: Tap on the setting to edit. If JSON Format is enabled, then enter key of the field in JSON that contains sensor data e.g. {key: temperature value: 25}, enter the value in this field, and the app will automatically extract that information.
Notifications
This section contains following settings.
- Enable: App generates notifications when a new message arrives from MQTT server both plain and JSON formats. Tap on the setting to enable/disable.
Widgets
This section contains following settings.
- Show Icon: Tap on the setting to enable/disable if an icon should be shown on the main screen.
- Icon Library: If enabled, tap on the setting to edit. App currently supports Font Awesome and Weather Icons libraries. Select an icon library.
- Icon Type: If enabled, tap on the setting to edit. Enter font code available from respective library site (links provided below). Only enter the 4 digit code e.g. f00d, do not enter &#x before and ; after the code.
- Show Chart: Tap on the setting to enable/disable if a chart should be shown o the main screen.
- Chart Type: If enabled, tap on the setting to edit. Select chart type, currently only Line chart and Bar chart available. Only numeric messages are displayed on the chart, non-numeric messages are skipped from historical chart.
Disclaimer: This mobile app has only been designed for prototyping purposes, and is not production ready.