This tutorial is thought to be part of a bigger project where I aim to build an Augmented Reality & IoT program.
At this stage I'll take data from the MQTT broker (Adafruit IO io.adafruit.com) to display it in Unity.
You can check my previous project to learn how to send data to a MQTT broker here.
I'm taking as reference the following instructive that I find very helpful (https://workshops.cetools.org/codelabs/CASA0019-unity-mqtt/index.html?index=..%2F..index#2)
I've chosen Unity because it is one of the most used Augmented Reality softwares and because it already has mqtt libraries developed.
What You'll NeedYou'll need the following:
- An account at Adafruit IO (io.adafruit.com)
- Unity software (https://unity.com/download) I'm using 2021.2.16f1 version
- M2Mqtt libraries for Unity (https://github.com/CE-SDV-Unity/M2MqttUnity)
Once that you have downloaded and installed Unity you'll need to run UnityHub. In its main page select New Project, then 3D Core option and assign it a name.
Drag and drop M2Mqtt and M2MqttUnity folders downloaded from Github (https://github.com/CE-SDV-Unity/M2MqttUnity) to Assets folder as shown in the image below.
Click on M2MqttUnity, Examples, Scenes and double click on M2MqttUnity_Test.
After double clicking on M2MqttUnity_Test you should see a new icon in the left side of the screen called M2MQTT. Double click on it and complete the following fields of right side of the screen with your MQTT data:
- Broker Address (in this case is io.adafruit.com)
- Broker Port: 1883
- Check on Auto Connect
- Mqtt User Name (your MQTT broker user name)
- Mqtt Password (your MQTT broker user password, in my case its Adafruit IO Key)
Once that you have completed the fields you'll need to edit M2MQTT Unity Test script:
There you need to replace the source of the information in order to see it into Unity.
In my case I have a Feed into Adafruit IO named text and I'll be taking the data from there. Thus, I need to edit the M2Mqtt Unity Test script for that purpose.
Replace the lines marked in green with your MQTT feed path.
To be clear, in Adafruit IO your MQTT feed follows this pattern:
your-username/feeds/your-feed in my case is lesurfe/feeds/text
Save the changes made in the script and close it.
Back into Unity, we will run a test to check if we can establish a connection to Adafruit IO. To do so, click on M2MQTT, then click on PLAY and wait for a confirmation of the connection. If it has been successful it should show Connected to broker as seen in the image below.
If you are already sending data to the MQTT broker you should also start seeing it in the box.
If you are not sending data to the MQTT broker at that moment, you can click on Test Publish to send a message to Adafruit IO and you should see Test message published and Received Test message. You should also see the same Test message in the MQTT broker (once again, in my case is Adafruit IO).
Now that we have tested the connection between Adafruit IO and Unity we will make a new program that will show the data published into Adafruit IO in Unity .
Create a new Unity project and repeat the step of dragging and dropping M2MQTT and M2MQTTUnity folders to Assets. Then, create two new folders inside the Assets folder where you will store the main scripts that will run your program. In my case, I named those folders CE and Scripts respectively.
Inside of Scripts drag and drop mqttReceiver.cs and mqttController.cs files. You can find both scripts attached with this project.
In the left side of the screen, click the right button and create an empty Game Object, name it MQTT_Receiver and attach the script mqttReceiver.cs dragging the script into it.
Then, complete the fields on the right side of the screen.
- Broker Address (in this case is io.adafruit.com)
- Check on Auto Connect
- Mqtt User Name (your MQTT broker user name)
- Mqtt Password (your MQTT broker user password, in my case its Adafruit IO Key)
- Topic suscribe (its the route to the feed which was added to M2MQTTUnityTest in the previous stage, in my case was lesurfe/feeds/text)
Create a new GameObject, name it ControlledObject and drag and drop mqttController.cs into it. Then click on Event Sender tab and Select MQTT_Receiver.
Lastly, create a 3D Object - Text Mesh Pro and drag and drop mqttController.cs into it.
In this case you'll need to edit the script by clicking in the three vertical dots at the right of Mqtt Controller as we did in the previous stage. Erase the whole content of the scrip and paste the following:
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using TMPro;
public class mqttController : MonoBehaviour
{
public string nameController = "Controller 1";
public mqttReceiver _eventSender;
void Start()
{
_eventSender.OnMessageArrived += OnMessageArrivedHandler;
}
private void OnMessageArrivedHandler(string newMsg)
{
this.GetComponent<TextMeshPro>().text=newMsg;
Debug.Log("Event Fired. The message, from Object " +nameController+" is = " + newMsg);
}
}
We are now ready to run the code by pressing the PLAY button.
Every time that data has been published to Adafruit IO you should be able to see it through Adafruit IO dashboard and through Unity.
In the next tutorial I'll show how to design and Augmented Reality program using Unity and Vuforia.
Comments