Last time, we looked at creating a simple HUD for the HoloLens, and displayed text with different colours in each of the corners of the viewable screen.

Obviously you won’t always want to just have text on your HUD – so this time we’re going to look at a very simple extension of this – adding an image to the HUD.

Let’s pick this up from where we left the last post. We’ve already created a HUD with text in the four corners, as shown in the emulator below.

screenshot.1472339560

Say we want to add some kind of visual cue – for example, a status icon to show if there’s a WiFi connection.

Note that I’m not going to write code here to test if there actually is a WiFi connection for the HoloLens – I’m just looking at visual cues, with this as a possible application.

I’m going to delete the red Text UI element from the bottom right of the application, as this is where I’ve decided I want my image to appear.

screenshot.1473006215.png

Now I want to add a new UI element to the canvas – specifically a RawImage element. You can select this from the context menu, as shown below.

screenshot.1473006281.png

This will just add a new blank white image to your canvas, as shown in the scene below.

screenshot.1473006376

 

We obviously need to adjust this raw image to be the correct position, size, and to have the correct source. We can do all of this in the Inspector panel. The panel below shows the defaults that my version of Unity gives.

screenshot.1473006620

First, I’d like to change the position of the image to be in the bottom right of the canvas. I can do this by clicking on the position icon (the part that looks like a crosshairs in the top left of the image above). Once I’ve clicked on it, I hit “Alt” on the keyboard to get an alternative menu, shown below.

screenshot.1473006537

Using the mouse, I select the icon – highlighted with a red box above – which positions the image in the bottom right of the canvas.

Now, I need to select an image to add – I’ve an image of a cloud which I’ll use to signify a connection to the cloud. This image is 100px by 100px, it’s a PNG, and it has a transparent background.

First I create a new folder called “Resources” under Assets in the Unity Project view. Then I right-click, select “Import New Asset…” and browse to where I have the cloud image saved.

screenshot.1473007623

Now I select the RawImage object which is stored under the Main Canvas object so I can see the RawImage Inspector panel. Right now, the Texture property of the RawImage is empty, but next I’ll drag the image from the Resources folder onto the Texture property.

The image below shows the cloud image rendered on our HUD canvas.

screenshot.1473007987

Now if we build this and deploy to the emulator, you’ll see the cloud image in your HUD.

screenshot.1473008573

Changing the image in code

Sometimes we’ll want to change our image in code, as dragging the image from the Resources folder to the Inspector panel at design time is not flexible enough.

Fortunately, doing this in code is pretty straightforward – we just have to define what image (or in Unity’s terms, what “Texture”) that we want to display and set the RawImage’s texture to be this.

First, I add a new GameObject to the scene called “ScriptManagerCollection”.

Then I add another image to my Resources folder, called “NotConnected.png” – this image is what I’ll use when the WiFi is not connected.

Next, I add a new C# script to the Assets called “ImageManager”. I opened ImageManager in Visual Studio, and added the code below.

using UnityEngine.VR.WSA.Input;
using UnityEngine.UI;
 
public class ImageManager : MonoBehaviour {

    GestureRecognizer recognizer;
 
    public RawImage wifiConnection;
 
    // Use this for initialization
    void Start () {
        recognizer = new GestureRecognizer();
 
        recognizer.TappedEvent += Recognizer_TappedEvent;
 
        recognizer.StartCapturingGestures();
    }

    private void Recognizer_TappedEvent(InteractionSourceKind source, int tapCount, Ray headRay)
    {
        var myGUITexture = (Texture2D)Resources.Load("NotConnected");
 
        wifiConnection.texture = myGUITexture;
    }
}

You can see that I’ve written some simple code which recognises a tap gesture, and changes the source of the wifiConnection image to be “NotConnected.png”.

Note how I’ve not had to add the “.png” extension to the name of the image.

I dragged this script to the ScriptManagerCollection GameObject in Unity, and selected this GameObject. The Inspector updates, and shows a public RawImage property called “Wifi Connection”. Drag the RawImage object from the canvas in the Hierarchy window to this property.

screenshot.1473010066

Now I can build this project, and run it in the HoloLens emulator.

So when the application runs first, it shows the cloud icon in the lower right of the screen:

screenshot.1473008573

And if I emulate a click gesture, the image changes to the “Not Connected” cloud icon.

screenshot.1473010576

Conclusion

So we can now integrate images – and changing images – into our HUD for the HoloLens. Next time I’m going to look at creating a complete application for the HoloLens using some of the tutorials I’ve created over the last few weeks.