#Hololens – Tutorial to use Buttons, Dialogs and more with #MRDesignLab (#HoloToolkit ++)

Hi!

Last week I wrote a post about Lunar Module. This is a sample App for Hololens, released by the Mixed Reality Design Labs team. Besides the sample App, tehre are couple of interesting Assets / Prefabs which are very useful if you are creating Hololens Apps.

So, after a question about this, I’ll write a couple of posts on how to use this assets. The first one is a very common scenario

Create and display a Button and OnClick display a Dialog with a message text and action button, ie: OK and Cancel.

This is a very usual scenario in any app. The output result will be something similar to the following image

20170801 Holo MRDesignLab Buttons 01

We start by clone the Mixed Reality Design Labs repository from GitHub (check references). There are a couple of submodules here for external tools, so it’s time to use your Git skills to get everything up and running.

Important: this package already have a HoloToolkit version which is compatible with Unity3D 2017.1 So we can use the latest and official Unity3D version for this sample.

I’ve created a unity3D package which includes HoloToolkit, MRDesignLab and HUX named “MRDesignLabs_Unity-0.1.3-Unity-2017.unitypackage”, you can download the package from here (link).

Let’s create an empty Unity project, clean the scene and import this package.

Important: At this point we usually add some elements from HoloToolkit to use the Hololens Camera, InputManager and more. This new package already have a Prefab which include all this elements. It’s named Hololens location [Assets / HUX / Prefabs / Interface].

I2

Inside this Prefab we find a CameraRig, InputMapping and more.

I’ll add a 3D Text element to display the output of the selected dialog message button.

And a few tutorial steps:

  • Add an empty elements to host and control out buttons. Name: DialogMenus,
  • Add 2 buttons in DialogMenus. From the prefab located at [Assets / HUX / Prefabs / Buttons / SquareButton.prefab].
  • Names SquareButtonDiag1 and SquareButtonDiag2

I03

  • In each new button the script [Compound Button Text] will allow us to define the text to be displayed in the button.

I04

  • Now it’s time to put this buttons in the Hololens interaction environment. I mean, in from of the Hololens user. We usually perform this with specific positions for each element. Now, thanks to MRDesignLans we have a new Prefabs which will arrange this elements in a more developer friendly way.
  • In [DialogMenus] let’s add a new component [Object Collection]. This new script will help us to arrange elements in a 3D environment

I05

  • Work on some script properties
    • Node List / Size = 2, we will use 2 elements, out 2 buttons
  • I’ve rename this elements to Dialog1 and Dialog2.
    • Inside [Dialog1 / Transform], let’s drag our [SquareButtonDiag1]
    • Inside [Dialog2 / Trasform], let’s drag our [SquareButtonDiag2]
  • I only want a single file of elements [Rows = 1]
  • The final property definition is similar to the following image

I06

Now it’s time to add some code to display the Dialogs in each button Click action. In [DialogMenus] let’s add a new script based on [Dialog and Menu Example]. This is a sample script which can help us to have this interaction.

  • We need to define on 2 the size on interactible elements, [Interactibles / Size = 2]
  • In [Interactibles / Element 0], drag [SquareButtonDiag1]
  • In [Interactibles / Element 1], drag [SquareButtonDiag2]
  • Our output will be a simple dialog element [Targets / Dialog Prefab = SimpleDialogShell]
  • Fill some other properties, like the output text

I07

The complete code can be downloaded from GitHub, however there are some interesting code parts to remark

  • On the OnTapped event we validate the clicked element
  • Based on this name we define if how many buttons the dialog will have
  • On the OnClosed event, we refresh the 3D text with the selected option

Full Source Code (link)
Happy Coding!

Greetings @ Mississauga

El Bruno

References

El Bruno, my posts

Advertisements

6 thoughts on “#Hololens – Tutorial to use Buttons, Dialogs and more with #MRDesignLab (#HoloToolkit ++)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s