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:

  • rotate (Boolean, Default: true): Will enable the vertical and horizontal rotation of a group.
  • rotateVertical (Boolean, Default: true). Will enable the vertical rotation of a group.
  • rotateHorizontal (Boolean, Default: true). Will enable the horizontal rotation of the group. Default is true.
  • scale (Boolean, Default: true).Will enable the scaling of the group.
  • move (Boolean, Default: true). Will enable the moving of the group. Default is true.

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:

  • fontSize ((Float, Default is 0.03 meters): Size of the text (text height).
  • color (Color, Default is set to 0x101010): The text color.
  • width (Float, Default is set to 0.08): The label width.
  • height (Float, Default is set to 0). The label height (or depth - suggested values between 0.001 - 0.005). padding (Float, Default is set to 0.04). The text padding to its background.
  • bgColor (Color, Default is transparent): The text background color.
  • rounded (Boolean, Default set to false) If true, the HoloLabel will be rounded.

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.

  • bgColor (String Hex Color, Default is 0x3c3c3c): Background button color.
  • borderColor (String Hex Color): Border color that will be shown when the button is clicked.
  • borderThickness (Float, Default is 3 pixles): Border thickness in pixels that will be shown when the button is clicked.
  • hoverState (Boolean, Default is true): Whether a hover effect is available or not.
  • hoverBorderColor (String Hex Color): Hover border color that will be shown when the button is hovered.
  • hoverBorderThickness (Float, Default is 3 pixles): Hover border thickness in pixels that will be shown when the button is hovered.
  • clickState (Boolean, Default is true): Whether a click effect is available or not.
  • clickBorderColor (String Hex Color): Click border color that will be shown when the button is clicked.
  • clickBorderThickness (Float, Default is 4 pixles): Click border thickness in pixels that will be shown when the button is clicked.
  • Image (String, Default is null): Image filename that will show as the button background.
  • text The button text
  • fontSize (Default is 40): The button text font size.
  • fontColor (Default is 0xFFFFFF): The button text font color.
  • fontWeight (Default is 'normal'): The button text font weight.
  • textAnchor (Default is .CENTER): The button text position: .CENTER, .TOPLEFT, .TOPCENTER, .TOPRIGHT, .BOTTOMLEFT, .BOTTOMCENTER, .BOTTOMRIGHT .
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:

  • dialogMode.DEFAULT: a notification like dialog with a close button
  • dialogMode.CONFIRM: a confirmation like dialog with a YES and NO buttons
  • dialogMode.INFO): an information only dialog without any buttons.
  • dialogMode.DEFAULT for dialogMode.CONFIRM for;

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.