HoloLens Development Tutorial

User Interface Components

User Interface Components

---

In mixed reality, users will see the actual space, mixed with 3D content, also mixed with 2D content (like settings and menus) to support navigate and interact with the 3D holographics. It is recommended to keep the navigation content (like start menu) in the view through “tag-along”.

The following section goes over the Holobuild library User Interface components. These include components like Show, Adjust, HoloLabel, HoloButton, HoloToolbar, and HoloDialogue. After covering these components you will find it easy to discover many other components included in the Holobuild library.

Show Adjust

Once the “showAjdust” method is called, a helper box will be drawn on top of the HoloMesh to allow the user to manipulate it. Manipulation includes moving, rotating, and scaling the HoloMesh. You set which manipulation capabilities you want the user to be allowed to do by setting the parameters as follows:

The code will look as such:

			
cylindermesh.onTap = function (){
	cylindermesh.showAdjust({rotate:true}, {scale:true}, {move:true});    
}
		   
		 

HoloLabel

The HoloLabel represents a label component used to display text in a HoloSpace. Since the HoloLabel extends the HoloGroup class, it inherits all the HoloGroup's properties and methods.
The text to be displayed is a String, one line text, or an array of strings (multi-line text).
The code will look like that:

			
var labelTest = new HoloBuild.HoloLabel('lblName', 'How are you today?', {}}); 
		   
		 

This label will read:
'How are you today?'

For a full list of the HoloLabel parameters check HoloLabel . Some of the main parameters are explained below:

To change the text of the label above:

			
labelTest.setText('world'); 
		   
		 

To change the text to multiple lines of text:

			
labelTest.setText(['Hello', 'World']); 
		   
		 

'Hello' will be on one line, and 'World' will be on the next line.
After we add the below code to our project, we will get the image that follows.

			
var labelTest = new HoloBuild.HoloLabel('lblname', ['How are you today?', 'We are glad to see you'], {fontSize: 0.02, color: 0x101010, 
bgColor: 0xFFFF00, padding: 0.03}); 
holoscene.add(labelTest);
		   
		 

HoloButton

The HoloButton represents an image based button component in a HoloSpace. Since the HoloButton extends the HoloMesh class, it inherits all the HoloMesh's properties and methods.

			
var btnPrevMesh = new HoloBuild.HoloButton("CtrlPrev", 0.1, 0.1, 0,{ image:'prev.png'});
btnPrevMesh.onTap = function () {
	cylindermesh.position.set =(0.5,0,0);
}	
		   
		 

The above code corresponds to a HoloButton with the text “CtrlPrev”, a height of 0.1, a width of 0.1, and a depth of 0. ‘prev.png’ is the image of the button displayed.
The ‘btnPrevMesh’ as tapped upon will move the cylinder mesh from its position (0,-0.19,0) to the new position identified in the function (0.5,0,0).
It is important to ensure that the curser is above the button in order for the function to take place.
The demonstration is here.

The HoloButton parameters are stated below, feel free to experiment with the values accordingly. The HoloButton depth for a plane geometry is 0, and for a box geometry is > 0. The HoloButton parameters are stated below, feel free to experiment with the values accordingly. The HoloButton depth for a plane geometry is 0, and for a box geometry is > 0.

For a full list of the HoloButton parameters check HoloButton .

HoloToolbar

A HoloToolbar is a component that holds buttons and that is usually used as an application menu.
Let’s examine the code below, which helps us construct a Toolbar

			
var menuCtrl = new HoloBuild.HoloToolbar(0.105, 0.105);
menuCtrl.addButton("CtrlAdjust", {image:'images/adjust.png'});
menuCtrl.addButton("CtrlMove", {image:'images/move.png'});
menuCtrl.position.set(0,0,0);

menuCtrl.getObjectByName('CtrlMove').onTap = function () {
	menuCtrl.position.x +=0.1;
	menuCtrl.getObjectByName('CtrlAdjust').onTap = function () {
	menuCtrl.position.set(0,0,0);
}

holoscene.add(menuCtrl);
		   
		 

So what is happening in the code above, is creating a new variable ‘menuCtrl’ and assigning it the value of a toolbar of height and width equal to 0.105. We then added two buttons: “CtrlAdjust” and “CtrlMove”. and assigned them different images.
We set the original position of the ‘menuCtrl” toolbar at (0,0,0)

What we did next is defined the function each of the buttons contained in the toolbar.
“CntrlMove” button will move the Tool bar on the x-axis every time the button is clicked.
“CntrlAdjust” will return the object to its original position(0,0,0).
Below is the demonstration.

You can get valuable information about the HoloToolbar from the HoloLibrary to play around with the various Toolbar parameters and eve build sub-toolbars under objects belonging to a parent toolbar.

HoloDialog

A HoloDialog is a dialog component that can be used as either message notification to the user or when needing a confirmation from the user. Since the HoloDialog extends the HoloGroup class, it inherits all the HoloGroup's properties and methods.
Let’s look at the code and try to explain it.

		
var dialogAlert = new HoloBuild.HoloDialog('dialog1', 'Alert', 'this is an alert message!', {mode: HoloBuild.dialogMode.DEFAULT },
function (action) {
    if (action) {
		holoscene.remove(cylindermesh);
	}
}
);

menuCtrl.getObjectByName('CtrlAdjust').onTap = function () {
     holoscene.add(dialogAlert);
}
		
		

What you see in the code ‘dialog1’ is the name of the dialog, ‘Alert’ is the title, and the actual message is 'this is an alert message!'.
The HoloDialog can take other parameters as an object and can contain the following: mode — enumerator. The modes of the dialog can be:

In the code above we used the dialogMode CONFIRM ; if true, the cylindermesh will be removed from scene. The dialogAlert variable was then linked to a tap function of the adjust object.
You can see the demonstration below .

Feel free to explore other parameters of the For a full HoloDialog at the Holobuild library; ths includes: canvas, bgColor, titleColor, titleBgColor, bodycolor, HoloDialog body color, bodyBgColor, HoloDialog body backgrounf color, titleAlig, HoloDialog title alignment, bodyAlign, HoloDialog.