Introduction:
In this project, we will use unity along with Vuforia to Make an AR-based IoT Switch which can control any device connected to a NodeMCU through an HTTP request.
NOTE:This project will make use of the Arduino Webserver project which I build in one of my earlier posts.(Refer here)
Demo of the project:
The buttons On and OFF are being added to the bulb image in the android app.
Structure/Work Flow:
- STEP1: Setup Your NodeMCU along with a LED indicating any device.
- STEP2: Download and install Unity Hub from Here. Also, install unity latest version from unity hub.
- STEP3: Download Vuforia Engine for unity from Here.
- STEP4: Setup Target Image which will be used to Augment buttons.
- STEP5: Add buttons over the target image in unity.
- STEP6: Write a script for the buttons to create an HTTP request.
- STEP7: Add script to Autofocus AR Camera.
- STEP8: Build a .apk file and test it on any Android Device.
Hardware and Software Requirement:
- Nodemcu
- LED with Resistor
- Unity
- Vuforia
STEP1: Setup Your NodeMCU along with a LED indicating any device.
First we need to setup our target device to which we will connect our devices. Follow this post to make your system using a NodeMCU.
In this post we define HTTP request Urls to turn the LED ON and OFF. We will use the same urls in this project with Our Buttons. to turn Device ON and OFF.
AT the end of this step we have Two URLS to turn on and Off Our device. 1.To Turn Device ON: http://192.168.31.88/led1on 2.To Turn Device OFF: http://192.168.31.88/led1off
STEP2: Download and install Unity Hub.Also, install unity latest version from unity hub.
- First goTo this link to download Unity Hub.
- Once Unity Hub is installed open it and install unity latest version with android build support to build apk files.
- Create a new project :
- Give a project name ,select 3D template option and Click on CREATE
- You will Get a screen like this.
- Goto file and save scene with desired name (say “IoT Switch”).
STEP3: Download Vuforia Engine for unity from Here.
- First Visit this link https://developer.vuforia.com/downloads/sdk and download.
- Login and agree the terms.
- Double click the downloaded file to open in unity
- Click on Import .
Now your unity Software is ready along with Vuforia Engine .
STEP4: Setup Target Image
Next, we will need a target image . Whenever camera will detect this image it will Augment our ON/OFF buton over this image to control any Device.
We Will use the following image as our target image. You can use any image of your choice.(make sure to fill the entire image area)
- Now Goto https://developer.vuforia.com/vui/develop/databases and click on Add Database under Target Manager tab.
- Give a name .Select Type: Device and click on Create:
- Click on Add target and Browse Your target image as shown.
- Give a Width of your choice (say 4) and a name (say bulb).Finally Click on Add.
- The Better the Star Rating You get the better will be the results.(In my case i got 4 stars for the above image).
- Click on download Database(All). Select Unity Editor and Download.
- Double click the Package Downloaded and import in unity Just like we did Previously.
STEP5: Add buttons over the target image in unity.
- First Open the scene and Delete the main camera.(simply select it and press delete key.)
- Add AR Camera from Vuforia Engine .
- Next we will add licence key. Goto Licence Manager Tab and click on Get Development Key.
- Give a name ,Tick the checkbox and Confirm
- Next click on the New Licence.
- Copy the licence
- open unity ,select AR camera and in the inspector panel click on Open Vuforia Engine Config.
- Paste the licence key you copied in earlier step.
- Next add image target from Vuforia Engine.
- Next , Select Image target and in the inspector panel on the right side of the screen load the image from database.
- once this is done Our screen will look Something like this
- Next Add a button from UI . Right click on ImageTarget and select button from UI.
- Next click on canvas and Change Render Mode to World Space.
- Also set Event Camera as AR camera.(Simply drag and drop)
- Also Reset the canvas position to (0,0,0). so that the buttons will be at same position as the target image.
- Next Adjust the button on top of the Target image. (Rotate and resize to fit like this)
- Right click and duplicate the button
- Rename the Buttons and Also its text as shown to ON and OFF.
- Now if you run and bring the target image in front of the Computer camera You will see the buttons on top of it.
STEP6: Write a script for the buttons to create an HTTP request.
So Now finally we need some code which will create a http request to our Webserver whenever we press the On /OFF buttons.
- First inside assets Folder we create a new folder “Scripts” and inside this folder we create a new C# file by name “ClickUrl”.
Add the following code to the C# file.
- First add following namespaces
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Networking;
- Next inside the ClickUrl class, we create a public string URL to hold the URL for each button.
- Also, create a Function named Open () to Create the HTTP Get Request. We will Call this open() function on click action of the button.
- We create a Coroutine and create Get Request and wait until it returns.
public class ClickUrl : MonoBehaviour
{
public string url;
public void open()
{
StartCoroutine(GetRequest(url));
}
IEnumerator GetRequest(string uri)
{
using (UnityWebRequest webRequest = UnityWebRequest.Get(uri))
{
// Request and wait for the desired page.
yield return webRequest.SendWebRequest();
}
}
}
- Save the code and Come back to unity screen.
- Now attach this script to both the buttons(On,Off).(Simply drag and drop.)
Inside the Inspector Panel you can see that the Script component is added to each button element. .
- Also a URL field is present(which we made public in our script). Type in the Required URL in here.
1.To Turn Device ON: http://192.168.31.88/led1on
2.To Turn Device OFF: http://192.168.31.88/led1off
- Next we need to define the click action.
- Select any button and click on the + button under On Click():
- Next drag and drop the Button_off Game Object from Hierarchy to the On Click ().
- Finally Select the Open() function we defined in our ClickUrl script as shown
Note:Repeat the above steps for the other button (Button_ON) as well to call Open() function.
With this our Buttons are ready and functional to trigger the HTTP request.
STEP7: Add script to Autofocus AR Camera.
The progress up to STEP 6 works properly with the computer camera inside the Unity environment. But when we build apk file and run on android the camera is unable to focus and therefore fails to recognize the features on our target image.
To solve this problem we add a new script to the AR camera element so that it is able to autofocus.
Create a new script inside Assets>Scripts named “FocusCamera”.
Add the following code to the above script.
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using Vuforia;
public class FocusCamera : MonoBehaviour
{
// Start is called before the first frame update
void Start()
{
bool focusModeSet = CameraDevice.Instance.SetFocusMode(CameraDevice.FocusMode.FOCUS_MODE_CONTINUOUSAUTO);
if (!focusModeSet)
{
Debug.Log("Failed to set the focus mode to continusauto (unsupported mode).");
}
}
}
- Attach this FocusCamera Script to the AR Camera Element (Simply Drag and drop)
STEP8: Build a .apk file and test it on any Android Device.
Finally It is time to build our android app
- Goto File > Build Settings
- Switch to Android. [ Click on Switch Platform]
- Click on Player settings and add the details you want. App icon can also be changed from here.
- Finally click on build.
- Give a name to your Apk and save.
- It will start compiling and finish after some time.
- After some time you will have your apk file.
