#Hololens – How to select an hologram, change size or position and more using #MRDesignLab

Hi!

Another cool feature we can add to our Mixed Reality Apps using the assets shared by the Mixed Reality Design Labs is

Add the feature to select an hologram, change size, change position (in 3D mode) or even remove the hologram in a scene.

This is very similar of what we do with the sample App included in the Hololens with the Hologram Gallery. The next image shows a sample of this scenario.

2017 08 07 Holo MRDesignLab Move Resize Holograms 02

As you can see we have the select action, the action menu and more.

So, once we have added the MRDesign Labs assets to our project, and we added the Hololens prefab to have the main features available for us, we will add a Capsule element to our scene. In order to do this, we need to add a Collection to “host” this elements, let’s go the menu [HUX / Create Collection]

I2

Inside the collection let’s add a Capsule 3D element. And change some properties of the collection hosting the Capsule.

  • Node List / Size = 1
  • Drag and drop the Capsule to the property Capsule 1 / Transform
  • Rows = 1

I3

Now it’s time to add some scripts and assets to the Capsule so we can have the features we promise some lines above.

Let’s add the following components into the Capsule element:

  • Sphere Collider, So we can have a “physical context” for this element in the virtual world
  • Compound Button (Script), this script will be the one who handles the interaction of the elements. Important, take a look at the Button State property
  • Bounding Box Target (Script), this script defines which actions are going to be attached the the context elements

I4

And after this, we can have a very functional App with a Sphere and associated actions to drag, Scale and Rotate. In next posts I will describe on how to customize the menu.

Source code sample (link).

Happy Coding!

Saludos @ Burlington

El Bruno

References

El Bruno, my posts

Advertisements

#Hololens – Tutorial para seleccionar un holograma, cambiar su tamaño o modificar su posición utilizando #MRDesignLab

Hola!

Otro de las funcionalidades que podemos implementar utilizando el Mixed Reality Design Labs kit para Microsoft Hololens, es

Agregar la capacidad de seleccionar un holograma, cambiar el tamaño del mismo, modificar su posición o eliminarlo de una escena.

Muy similar a lo que podemos hacer con la app de con la galería de Hologramas que viene por defecto en el device. La siguiente imagen muestra un ejemplo de este escenario

2017 08 07 Holo MRDesignLab Move Resize Holograms 02

Una vez que hemos importado los assets del MRDesign Labs, y agregado el prefab de Hololens, agregaremos una Capsule sobre la que trabajaremos. En primer lugar, agregaremos una colección para almacenar la Capsule. Esto lo podemos hacer desde el menú [HUX / Create Collection]

I2

Dentro de la colección agregamos un elemento 3D del tipo Capsule. Y luego editamos las propiedades de la Colección para que trabaje sobre esta Capsule.

  • Node List / Size = 1
  • Arrastramos la Capsule a la propiedad Capsule 1 / Transform
  • Rows = 1

I3

Ahora es momento de agregar un par de assets a la Capsule para poder tener las capacidades de funcionalidades de seleccionar el holograma, cambiar el tamaño del mismo, modificar su posición o eliminarlo de una escena.

En la Capsula agregamos los siguientes componentes:

  • Sphere Collider, para que el elemento sea “tangible” en el mundo virtual
  • Compound Button (Script), este script es el que se encarga de manejar las interacciones con el elemento asociado. En este elemento definimos el tipo de interacción con la propiedad Button State.
  • Bounding Box Target (Script), este script define en que acciones mostrar y ocultar el menú de acciones. Podemos definir las acciones que se habilitan y si la misma se muestra en modo Toolbar.

I4

Y con esto ya podemos tener una App completamente funcional con estos elementos en la misma. En próximos posts comentare los cambios que tenemos que realizar para personalizar el menú de interacción.

El código fuente del ejemplo se puede descargar desde aquí (link).

Happy Coding!

Saludos @ Burlington

El Bruno

References

El Bruno, my posts

#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

#Hololens – Tutorial para mostrar botones e interacciones con lo nuevo de #MRDesignLab

Hola!

Hace un par de días comente en un post que el equipo de Mixed Reality Design Labs de Microsoft Hololens, había liberado una serie de Assets / Prefabs que podían ayudarnos en la creación de aplicaciones para Microsoft Hololens. El escenario completo de ejemplo que publicaron fue el del juego Lunar Module.

Pues bien, alguien me pregunto si podía explicar cómo usar alguno de estos assets, así que hoy comenzare con un escenario de lo más útil cuando creas una aplicación

Crear un botón y mostrar un cuadro de dialogo con un mensaje de texto y botones OK y Cancel.

Vamos que es el modelo tradicional de una notificación de toda la vida. Algo similar a esto

20170801 Holo MRDesignLab Buttons 01

Pues bien, lo 1ro que tenemos que hacer es clonar el repositorio de Mixed Reality Design Labs (ver referencias). El mismo usa además un par de submódulos con otras herramientas, así que toca pegarse un rato con Git para poder tener todo en forma en local.

Un detalle importante es que este paquete ya posee una version de HoloToolkit que es compatible con Unity 2017.1.0f3, así que podremos utilizar la version oficial de Unity 2017 para este ejemplo.

Yo he creado un unity3D package con HoloToolkit, MRDesignLab y HUX llamado “MRDesignLabs_Unity-0.1.3-Unity-2017.unitypackage”, que se puede descargar desde aquí (link).

En un nuevo proyecto de Unity, importamos este paquete y eliminamos todos los elementos de la jerarquía en la escena.

Importante: En este punto usualmente comenzamos a agregar los assets de HoloToolkit para interactuar con los gestos o la Cámara. Este nuevo paquete posee un elemento llamado Hololens en la ruta [Assets / HUX / Prefabs / Interface] que ya posee todo lo necesario para una aplicación para Hololens.

I2

Podemos ver que dentro del mismo hay CameraRig, InputMapping y mucho mas. El siguiente paso es agregar un elemento 3D Text que será en el que mostremos el resultado de las acciones seleccionados en el cuadro de dialogo.

A continuación:

  • Agregamos un elemento vacío para contener nuestros botones. Yo lo he llamado DialogMenus, es importante el nombre ya que volveremos al mismo en pasos posteriores
  • Dentro del mismo agregamos 2 botones del tipo [Assets / HUX / Prefabs / Buttons / SquareButton.prefab]. Los he llamado SquareButtonDiag1 y SquareButtonDiag2

I03

  • En cada botón el script [Compound Button Text] nos permite definir el texto del botón.

I04

  • Y a continuación debemos posicionar los botones en el espacio frente al usuario de las Hololens. Esto usualmente lo hacemos posicionando los elementos de forma individual, sin embargo, el MRDesignLans posee un par de Prefabs que nos ayudan a hacer esto de forma más simple.
  • En el elemento [DialogMenus] agregamos un nuevo componente de tipo [Object Collection]. Este script nos permite acomodar de forma simple elementos en un espacio 3D

I05

  • Definimos las siguientes propiedades del script
    • Node List / Size = 2, trabajaremos con 2 elementos para acomodar. En este caso son nuestros 2 botones
  • Renombramos los elementos a Dialog1 y a Dialog2.
    • En la propiedad [Dialog1 / Transform], arrastramos el elemento [SquareButtonDiag1] desde la jerarquía de elementos.
    • Hacemos lo mismo con [Dialog2 / Trasform], arrastrando el elemento [SquareButtonDiag2]
  • Definimos que solo tendremos una fila de elementos, [Rows = 1]
  • La definición final queda de la siguiente forma

I06

Ahora solo queda agregar un poco de lógica para controlar la interacción con los botones y presentar los cuadros de dialogo. En el elemento [DialogMenus] agregamos un nuevo script [Dialog and Menu Example]. Este script posee el código mínimo necesario para realizar esta interacción.

  • Definimos el tamaño de elementos interactivos en 2, [Interactibles / Size = 2]
  • Arrastramos a [Interactibles / Element 0], el elemento [SquareButtonDiag1]
  • Arrastramos a [Interactibles / Element 1], el elemento [SquareButtonDiag2]
  • Definimos que el foco de output será un elemento de tipo [Targets / Dialog Prefab = SimpleDialogShell]
  • Completamos el texto a mostrar en cada interacción, como muestra la siguiente imagen

I07

El código de la solución completo se puede descargar desde GitHub, sin embargo, lo interesante se puede ver en esta porción de código

  • En el evento OnTapped se valida el tipo de elemento que el usuario ha seleccionado.
  • De acuerdo al nombre del elemento se muestra un cuadro de dialogo con uno o 2 botones
  • La función OnClosed se encarga de mostrar en el Texto 3D el elemento seleccionado.

El codigo se puede descargar desde aqui (link)
Y eso es todo como explicación, espero que sea de utilidad.

Happy Coding!

Saludos @ Mississauga

El Bruno

References

El Bruno, my posts