HoloLens Development

Getting started with Javascript HoloLens development
using the buildWagon platform.

Core Components

To be able to display anything on a HoloLens we need three things: a HoloCamera, a HoloSpace, and a HoloRenderer.

HoloCamera

A HoloCamera represents the HoloLens and where it is looking at.
To create a new HoloCamera instance you can call: HoloBuild.HoloCamera();

Properties
  • children

    Returns an array of the HoloCamera's children.

  • position

    Represent the HoloCamera's local position.

  • rotation

    Represent the HoloCamera's local rotation (in radians).

  • scale

    Represent the HoloCamera's local scale.

Methods
  • add (object)

    Add a child object to the HoloCamera.

  • getObjectById (id)

    Searches through the HoloCamera's children and returns the object with a matching id.

  • getObjectByName (name)

    Searches through the HoloCamera's children and returns the object with a matching name.

  • getWorldPosition ()

    Returns a vector representing the position of the HoloCamera in the world space.

  • getWorldRotation ()

    Returns a vector representing the rotation of the HoloCamera in the world space.

  • getWorldDirection ()

    Returns a vector representing the direction of where the HoloCamera, i.e.: HoloLens user, is looking in the world space.

  • remove (object)

    Removes a child object from the HoloCamera.

HoloCursor of the HoloCamera
  • HoloCursor


    HoloCursor

    The HoloCursor is the a default HoloCamera child that is added by the system. A HoloCursor is a gaze indicator that provides continuous feedback for the HoloLens user about their intentions. The HoloCursor work by following the hololens's position and rotation in addition to casting a ray from the HoloLens into the HoloSpace object to show the user the center of their gaze and to indicate what hologram will respond to the user's input. The cursor will move with the user's head movement and it will lock in depth to whatever hologram or surface the user can is looking at. The cursor is torus shaped and it will provide a visual feedback per user hand state, for example, the cursor will change its shape base on the HoloLens detected the user's hand in the ready position and return to its normal shape when idle.

HoloCamera
To create a HoloCamera and set it to a variable:
var hololens = new HoloBuild.HoloCamera();
                       
To add a child object to the HoloCamera, in the case you want to follow the user's gaze:
var hololens = new HoloBuild.HoloCamera(); 
hololens.add(object);
                                    
To get a vector representing where the HoloLens user, is looking in the world space, you can use the getWorldDirection as follows:
var hololens = new HoloBuild.HoloCamera();
var vector = hololens.getWorldDirection();
                                    

HoloSpace

A HoloSpace represents a holographic scene, and its main purpose is to act as a container for all the holograms that make up the scene.

Properties
  • children

    Returns an array of the HoloSpace's children.

  • id

    A unique HoloSpace numeric identifier (readonly).

  • name

    Represent the HoloSpace's name.

  • position

    Represent the HoloSpace's local position.

  • rotation

    Represent the HoloSpace's local rotation (in radians).

  • scale

    Represent the HoloSpace's local scale.

  • visible

    if set to false the HoloSpace and all its content would not get rendered.

Methods
  • add (object)

    Add a child object to the HoloSpace.

  • clone ()

    Returns a clone of this HoloSpace.

  • getObjectById (id)

    Searches through the HoloSpace's children and returns the object with a matching id.

  • getObjectByName (name)

    Searches through the HoloSpace's children and returns the object with a matching name.

  • getWorldPosition ()

    Returns a vector representing the position of the HoloSpace in the world space.

  • getWorldRotation ()

    Returns a vector representing the rotation of the HoloSpace in the world space.

  • getWorldScale ()

    Returns a vector representing the scaling factors applied to the HoloSpace in the world space.

  • getWorldDirection ()

    Returns a vector representing the direction of HoloSpace's positive z-axis in the world space.

  • remove (object)

    Removes a child object from this HoloSpace.

  • toJSON ()

    Convert the HoloSpace to JSON format.

HoloSpace
var holoscene = new HoloBuild.HoloSpace();
                       

HoloRenderer

The HoloRenderer's main purpose is to render the content of the holographic scene into the HoloLens using WebGL. To render the holoscene onto the HoloLens, you will need to call the render function of the HoloRenderer and give it the scene and the hololens as inputs.
HoloRenderer
var holorenderer = new HoloBuild.HoloRenderer();
holorenderer.render(holoscene, hololens);
                       
To render a scene into the hololens:
var hololens = new HoloBuild.HoloCamera();
var holoscene = new HoloBuild.HoloSpace();
var holorenderer =  new HoloBuild.HoloRenderer();
holorenderer.render(holoscene, hololens);
                       

Geometries

The geometry is the shape that you want to draw, it contains all the polygons information that make up a hologram. In addition to creating your own geometry, there is a set of prebuilt geometries that you can use. This section will go over the pre-build geometries: such as a Box, or a Sphere.

HoloBoxGeometry

The HoloBoxGeometry is a geometry of a 3 dimensional box or a cube. To construct a HoloBoxGeomtry you need to provided the width, height, and box depth dimensions.

Constructor
  • width

    A number representing the width of the box in meters.

  • height

    A number representing the height of the box in meters.

  • depth

    A number representing the depth of the box in meters.

HoloBoxGeometry
var box = new HoloBuild.HoloBoxGeometry( 0.1, 0.1, 0.1 );
                       

HoloCircleGeometry

The HoloCircleGeometry is a simple circle geometry made of several triangular segments. To construct a HoloCircleGeomtry you need to provided the radius dimension.

Constructor
  • radius

    A number representing the circle radius in meters.

  • segments

    A number representing the number of triangular segments the circle will be made of.

HoloCircleGeometry
var circle = new HoloBuild.HoloCircleGeometry( 0.1, 30 );
                       

HoloConeGeometry

The HoloConeGeometry is a 3D cone geometry made of several triangular segments. To construct a HoloConeGeomtry you need to provided the cone radius and its height dimensions.

Constructor
  • radius

    A number representing the circle radius in meters.

  • radialSegments

    A number representing the number of radial segments the cone will be made of.

  • heightSegments

    A number representing the number of height segments the cone will be made of.

HoloConeGeometry
var cone = new HoloBuild.HoloConeGeometry( 0.1, 30, 30 );
                       

HoloCylinderGeometry

The HoloCylinderGeometry is a 3D cylinder geometry made of several triangular segments. To construct a HoloCylinderGeometry you need to provided the cylinder top radius, bottom radius, and its height dimensions.

Constructor
  • radiusTop

    A number representing the cylinder top radius in meters.

  • radiusBottom

    A number representing the number of bottom radius in meter.

  • height

    A number representing the height of the cylinder.

  • radialSegments

    A number representing the number of radial segments the cylinder will be made of.

  • heightSegments

    A number representing the number of height segments the cylinder will be made of.

HoloCylinderGeometry
var cylinder = new HoloBuild.HoloCylinderGeometry( 0.1, 0.1, 0.1, 30, 30 );
                       

HoloDodecahedronGeometry

The HoloDodecahedronGeometry is a 3D dodecahedron geometry made of several triangular segments. To construct a HoloDodecahedronGeometry you need to provided the dodecahedron radius.

Constructor
  • radius

    A number representing the dodecahedron radius in meters.

HoloDodecahedronGeometry
var Dodecahedron = new HoloBuild.HoloDodecahedronGeometry( 0.1);
                       

HoloIcosahedronGeometry

The HoloIcosahedronGeometry is a 3D Icosahedron geometry made of several triangular segments. To construct a HoloIcosahedronGeometry you need to provided the Icosahedron radius.

Constructor
  • radius

    A number representing the Icosahedron radius in meters.

HoloIcosahedronGeometry
var Icosahedron = new HoloBuild.HoloIcosahedronGeometry(1);
                       

HoloOctahedronGeometry

The HoloOctahedronGeometry is a 3D octahedron geometry made of several triangular segments. To construct a HoloOctahedronGeometry you need to provided the octahedron radius.

Constructor
  • radius

    A number representing the octahedron radius.

HoloOctahedronGeometry
var Octahedron = new HoloBuild.HoloOctahedronGeometry(1);
                       

HoloPlaneGeometry

The HoloPlaneGeometry is a 3D plane geometry made of several triangular segments. To construct a HoloPlaneGeometry you need to provided the plan width and height.

Constructor
  • width

    A number representing the plane width in meters.

  • height

    A number representing the plane height in meters.

  • HSegments

    The number of the plane horizontal segments (optional).

  • VSegments

    The number of the plane vertical segments (optional).

HoloPlaneGeometry
var Plane = new HoloBuild.HoloPlaneGeometry(0.1,0.1);
                       

HoloRingGeometry

The HoloRingGeometry is a 3D ring geometry made of several triangular segments. To construct a HoloRingGeometry you need to provided the ring innerRadius and OuterRadius.

Constructor
  • innerRadius

    A number representing the ring inner radius.

  • outerRadius

    A number representing the ring o uter radius.

  • Round

    The number of the ring outer segments making it more or less round (optional).

  • PSegments

    The number of the ring segments (optional).

HoloRingGeometry
var Plane = new HoloBuild.HoloRingGeometry(0.1, 0.5);
                       

HoloSphereGeometry

The HoloSphereGeometry is a geometry of a sphere . To construct a HoloSphereGeomtry you need to provided the sphere radius.

Constructor
  • radius

    A number representing the sphere radius in meters.

  • HSegments

    The number of the sphere horizontal segments (optional).

  • VSegments

    The number of the sphere vertical segments (optional).

HoloSphereGeometry
var sphere = new HoloBuild.HoloSphereGeometry( 0.1, 30, 30);
                       

HoloTetrahedronGeometry

The HoloTetrahedronGeometry is a 3D tetrahedron geometry made of several triangular segments. To construct a HoloTetrahedronGeometry you need to provided the tetrahedron radius.

Constructor
  • radius

    A number representing the tetrahedron radius.

HoloTetrahedronGeometry
var Tetrahedron = new HoloBuild.HoloTetrahedronGeometry(1);
                       

HoloTorusGeometry

The HoloTorusGeometry is a 3D tetrahedron geometry made of several triangular segments. To construct a HoloTorusGeometry you need to provided the tetrahedron radius, and tube radius.

Constructor
  • radius

    A number representing the torus radius.

  • tube

    A number representing the tube radius.

  • Segments

    The number of the torus segments (optional).

  • TSegments

    The number of the tubular segments (optional).

  • arc

    A radian representing the central arc of the torus (optional).

HoloTorusGeometry
var Torus = new HoloBuild.HoloTorusGeometry(0.1,0.3);
                       

HoloTubeGeometry

Materials

A material defines how the surface of a geometry is. It describes the geometry appearance such as its color or its texture (i.e. skin).
There are several types of material that you can use such as the HoloMeshBasicMaterial, HoloMeshStandardMaterial, or the HoloMeshPhongMaterial. Each with its own properties and is applyies to a specific Hologram object. For example, a HoloMesh object can have a HoloMeshBasicMaterial, whereas a HoloLine object can have a HoloLineDashedMaterial.
Note: the HoloMeshBasicMaterial has the best performing material for a HoloMesh.

HoloMeshBasicMaterial

The HoloLens HoloMeshBasicMaterial defines how the surface of a geometry is. It describes the geometry appearance such as its color or its texture (i.e. skin). By default, the "Color" of the material is set to white, and you can change it to any color you want.

Properties
  • color

    Represents the color of the material.

  • map

    Represents the color map.

  • wireframe

    Render the mesh geometry as wireframe.

HoloMeshBasicMaterial
var material = new HoloBuild.HoloMeshBasicMaterial( { color: "green" } );
                       

HoloMeshStandardMaterial

The HoloLens HoloMeshStandardMaterial, similar to a HoloMeshBasicMaterial defines how the surface of a geometry is. It describes the geometry appearance such as its color or its texture (i.e. skin). By default, the "Color" of the material is set to white, and you can change it to any color you want. HoloMeshStandardMaterial give a more realistic looking material for Holograms than all the other material, but it is more expensive in terms of computaional resources.

Properties
  • color

    Represents the color of the material.

  • map

    Represents the color map.

  • wireframe

    Render the mesh geometry as wireframe.

HoloMeshStandardMaterial
var material = new HoloBuild.HoloMeshStandardMaterial( { color: "green" } );
                       

Holograms

Holograms are 3D digital objects that appear in the world around you as if they are real objects. Holograms respond to your interaction (gaze, gestures...) and to the physical world surfaces around you. For the most part, a HolographicMesh can be used to create different types of Holograms, and to group several Holograms together you use a HoloGroup. For specific types of geometries, such as line or a point, you have to use a different type of a mesh (HoloLineMesh or HoloPointMesh).

HoloMesh

A HolographicMesh is an object that takes a geometry and applies a material to it. So it is the combination of a geometry and material into one 3D object or a hologram that can then be added to a HoloSpace.

Constructor
  • geometry

    The geometry is the structure or the shape of a hologram.

  • material

    A material defines how the appearance of a geometry.

  • hotspot

    A boolean defining whether the HoloMesh is a hotspot or not. A hotspot is a mesh that accepts the user's interactions. Default is set to false. Setting the hotspot property to true has performance consequences, so only set it to true when necessary.

Properties
  • children

    Returns an array of the HoloMesh's children.

  • id

    A unique HoloMesh numeric identifier (readonly).

  • name

    Represent the HoloMesh's name.

  • parent

    Represent the HoloMesh's parent.

  • position

    Represent the HoloMesh's local position.

  • rotation

    Represent the HoloMesh's local rotation (in radians).

  • scale

    Represent the HoloMesh's local scale.

  • holoType

    Returns the type of this object. Example: HoloMesh.

  • userData

    An object that could be used by developers to store their own custom data about the HoloMesh.
    Note:It should not hold references to functions.
    Example: HoloMesh.userData = { propertyname: “property value” };
    And to use the property: HoloMesh.userData.propertyname;

  • visible

    if set to false the HoloMesh would not get rendered.

Methods
  • onTap = callbackfunction

    The callbackfunction that is called on a tap event: a combination of user gaze on the HoloMesh and hand presses and releases gesture. Other ways for the onTap function to be called is by pressing the button on a HoloLens Clicker or by speaking the voice command "Select".

  • onHold = callbackfunction(previousPos, currentPos)

    The callbackfunction that is called on a hold event: a combination of user gaze on the HoloMesh and the user hand press and moving gesture. The callbackfunction will be called with 2 positions vectors, the previous position and the current one.

  • onRelease = callbackfunction

    The callbackfunction that is called on a release event: a combination of user gaze on the HoloMesh and hand releases gesture. Other ways for the onRelease function to be called is if the user gestures get lost from the frame of view.

  • setAnimation(image, {PARAMETERS})

    The setAnimation sets an animated image on the HoloMesh, it takes as input an image file name. The image file contains a set of images (or frames) concatenaded next to each, which will be played in a loop (similar to an animated gif). An example animated gif: animated-block.gif Optionally the set image can take other parameters as an object that can contain the following:
    textureAnimWidth — Float. The frame width, by default the frame width is considered equale to the image height.

  • setImage(image, {PARAMETERS}, callback)

    The setImage sets an image on the HoloMesh, it takes as input an image file name. Optionally the set image can take other parameters as an object that can contain the following:
    repeat — Boolean. If true the image will be repeated across the HoloMesh. Default is false.
    stretch — Boolean. If true the image will be stretched across the HoloMesh. Default is true.
    textureRepeatX — Number. How many times the texture is repeated across the X axis. Default is 1.
    textureRepeatY — Number. How many times the texture is repeated across the Y axis. Default is 1.

  • setTagAlong(boolean, distance)

    if set to true, the HoloMesh will never fully leaves the user's view. it will act as if it is attached to the user's head by rubber bands: When the user moves, the content will stay in his view. The distance paramerts is an optional parameter that specify how far is the HoloMesh from the user.

  • setTooltip(value, {PARAMETERS})

    The setTooltip shows a text on top of the HoloMesh that will be shown if the user hover at the HoloMesh for over a 1 second, it takes as input a text value. Optionally the setTooltip can take other parameters as an object that can contain the following:
    size — number. The tooltip size. Default is 0.015.
    color — color. The tooltip text color. Default is 0xFFFFFF.
    bgColor — color. The tooltip backgrounf color. Default is 0x048ad7.
    showLine — Boolean. If set to true the tooltip will have a dotted line drawn from the ToolTip down to the HoloMesh. Default is false.
    rounded — Boolean. If true, the tooltip will be rounded. Default is set to true.
    gap — number. The gap in meteres between the HoloMesh and the tooltip. Default is 0.035.
    yPos — number. The tooltip size. Default is 0.

  • animateMove(pos, delay, pause, callback)

    animateMove method provides an animated move that interpolate between the current position and the new pos. It takes as input an animation delay, an animation pause before start, and a callback function when the animation is done. Example: holomesh.animateMove({ x: 0, y: 0, z: 0.1 }, 750, 250); In This example the holomesh will move on to Z 0.1, the animation will pause for 250 milliseconds and will last for 750 milliseconds.

  • animateRotate(angles, delay, pause, callback)

    animateRotate is similar to animateMove, and it provides an animated rotation.

  • animateFade(opacity, delay, pause, callback)

    animateFade is similar to animateMove, and it provides an animated opacity change.

  • show

    Calling the Show methods will enable the renderer to render the HoloMesh on its next update.

  • hide

    Calling the hide methods will hide the HoloMesh from the HoloSpace.

  • dispose

    Calling the dispose methods will deallocate the HoloMesh from memory.

  • add (object)

    Add a child object to the HoloMesh.

  • clone ()

    Returns a clone of the HoloMesh.

  • getObjectById (id)

    Searches through the HoloMesh's children and returns the object with a matching id.

  • getObjectByName (name)

    Searches through the HoloMesh's children and returns the first object with a matching name.

  • getObjectByProperty (propertyname)

    Searches through the HoloMesh's children and returns the first object with a matching propertyname.

  • getWorldPosition ()

    Returns a vector representing the position of the HoloMesh in the world space.

  • getWorldRotation ()

    Returns a vector representing the rotation of the HoloMesh in the world space.

  • getWorldScale ()

    Returns a vector representing the scaling factors applied to the HoloMesh in the world space.

  • getWorldDirection ()

    Returns a vector representing the direction of HoloMesh's positive z-axis in the world space.

  • remove (object)

    Removes a child object from the HoloMesh.

  • toJSON ()

    Convert the HoloMesh to JSON format.

  • showAdjust ({PARAMETERS})

    Once the showAjdust method is called, a helper box will be drawn on top of the attached HoloMesh to allow the user to manipulate the object. Manipulation of the mesh includes: moving, rotating, and scaling the mesh. You set which manipulation capabilities you want the user to be allowed to do by setting the parameters as follows:
    rotate — Boolean. True will enable the vertical and horizontal rotation of a mesh. Default is true.
    rotateVertical — Boolean. True will enable the vertical rotation of a mesh. Default is true.
    rotateHorizontal — Boolean. True will enable the horizontal rotation of the mesh. Default is true.
    scale — Boolean. True will enable the scaling of the mesh. Default is true.
    move — Boolean. True will enable the moving of the mesh. Default is true.
    done — Boolean. True will enable a done button to be shown with the adjust controls, false will not show the done button. Default is true.

HoloMesh

var geometry = new HoloBuild.HoloBoxGeometry( 0.1, 0.1, 0.1 );
var material = new HoloBuild.HoloMeshBasicMaterial( { color: 'red' } );
var holomesh= new HoloBuild.HoloMesh( geometry, material );
                       

You can use the onTap property if you want to add a function to when the user tap the holomesh. For example, if we want to rotate the holomesh on the x axis when the user tap on it we can do the following:
var holomesh= new HoloBuild.HoloMesh( geometry, material , true);
holomesh.onTap = function () {
holomesh.rotation.x +=0.1;
}
    
You can use the onHold property if you want to add a function to when the user gaze on the holomesh and moving his hand while holding the press gesture. For example, if we want to change the holomesh position on the x axis according to the users hand, we can do the following:
holomesh.onHold = function (previousPos, CurrentPos) {
holomesh.position.x -= (previousPos.x - CurrentPos.x);
}
    

You can use the setImage method to set an image to the HoloMesh.
holomesh.setImage('imagename.png')
If you want to use the setImage parameters, you do the following:
holomesh.setImage('imagename.png',{repeat:true})

setToolTip example
Let us show a tooltip showing a line on top of a HoloMesh:
HoloMesh ToolTip
A ToolTip saying hello over a yellow box holomesh. Notice the cursor, the tooltip only shows when the user is looking at the holomesh.

var holomesh= new HoloBuild.HoloMesh( geometry, material , true);
holomesh.setTooltip('Hello', {showLine:true});

ShowAdjust example
Let us show a HoloMesh Adjust box when a user tap on a holomesh:
HoloMesh Adjust Box
ShowAdjust Box on a yellow sphere holomesh. Notice the holocursor showing a rotation icon, and the done button to commit the adjustment when the user click on the done button.

var holomesh= new HoloBuild.HoloMesh( geometry, material , true);
holomesh.onTap = function (){
holomesh.showAdjust();    
};

HoloGroup

A HoloGroup is a component that holds a group of HoloMeshes.

Properties
  • children

    Returns an array of the HoloGroup's children.

  • id

    A unique HoloGroup numeric identifier (readonly).

  • name

    Represent the HoloGroup's name.

  • parent

    Represent the HoloGroup's parent.

  • position

    Represent the HoloGroup's local position.

  • rotation

    Represent the HoloGroup's local rotation (in radians).

  • scale

    Represent the HoloGroup's local scale.

  • holoType

    Returns the type of this object. Example: Group.

  • userData

    An object that could be used by developers to store their own custom data about the HoloGroup.
    Note:It should not hold references to functions.
    Example: holoGroup.userData = { propertyname: “property value” };
    And to use the property: holoGroup.userData.propertyname;

  • visible

    if set to false the HoloGroup would not get rendered.

  • onTap = callbackfunction

    The callbackfunction that is called on a tap event: a combination of user gaze on any child mesh of the HoloGroupand hand presses and releases gesture. Other ways for the onTap function to be called is by pressing the button on a HoloLens Clicker or by speaking the voice command "Select". the tap even will be called for the HoloGroup and the HoloMesh that was tapped (only one level up and down).

Methods
  • add (object)

    Add a child object to the HoloGroup.

  • clone ()

    Returns a clone of the HoloGroup.

  • getObjectById (id)

    Searches through the HoloGroup's children and returns the object with a matching id.

  • getObjectByName (name)

    Searches through the HoloGroup's children and returns the first object with a matching name.

  • getObjectByProperty (propertyname)

    Searches through the HoloGroup's children and returns the first object with a matching propertyname.

  • getWorldPosition ()

    Returns a vector representing the position of the HoloGroup in the world space.

  • getWorldRotation ()

    Returns a vector representing the rotation of the HoloGroup in the world space.

  • getWorldScale ()

    Returns a vector representing the scaling factors applied to the HoloGroup in the world space.

  • getWorldDirection ()

    Returns a vector representing the direction of HoloGroup's positive z-axis in the world space.

  • setTagAlong(boolean, distance)

    if set to true, the HoloGroup will never fully leaves the user's view. it will act as if it is attached to the user's head by rubber bands: When the user moves, the content will stay in his view. The distance paramerts is an optional parameter that specify how far the HoloGroup is from the user.

  • remove (object)

    Removes a child object from the HoloGroup.

  • toJSON ()

    Convert the HoloGroup to JSON format.

  • show ()

    Calling the Show methods will enable the renderer to render the HoloGroup on its next update.

  • hide ()

    Calling the hide methods will hide the HoloGroup from the HoloSpace.

  • showAdjust ({PARAMETERS})

    Once the showAjdust method is called, a helper box will be drawn on top of the attached HoloGroup to allow the user to manipulate the group. Manipulation of the group includes moving, rotating, and scaling the group. You set which manipulation capabilities you want the user to be allowed to do by setting the parameters as follows:
    rotate — Boolean. True will enable the vertical and horizontal rotation of a group. Default is true.
    rotateVertical — Boolean. True will enable the vertical rotation of a group. Default is true.
    rotateHorizontal — Boolean. True will enable the horizontal rotation of the group. Default is true.
    scale — Boolean. True will enable the scaling of the group. Default is true.
    move — Boolean. True will enable the moving of the group. Default is true.

  • hideAdjust ()

    Once the hideAjdust method is called, the helper box shown in the showAdjust will be forces to be hidden. The user adjust changes will be commited.

  • dispose ()

    Calling the dispose methods will deallocate the HoloGroup from memory.

HoloGroup
var group = new HoloBuild.HoloGroup();
group.add(holomesh);
                       

Lights

A light provides a digital illumicatio of the Holograms in your HoloSpace. There are several types of lights that you can add to you HoloSpace. The system by default adds an ambient light, otherwise all Holograms will show up as black. An ambinet light will light all the Holograms in your scene equally as it doesn't have a directon. If you want a light that emits in a specific direction, then you need to use a HoloDirectionalLight. For a light that emits from a single point, such as from a light bulb, use a HoloPointLight. The following section will go over the different types of lights available in more details:

HoloDirectionalLight

The HoloDirectionalLight emits light in a specific direction similar to a light from the sun.

Constructor
  • color

    Represents the color of the light, default is 0xffffff or white.

  • intensity

    A numeric value representing the intensity of the light, default is 1.

HoloDirectionallight
var material = new HoloBuild.HoloDirectionalight( 0xf1f1f1, 0.7 );
                       

HoloPointLight

The HoloPointLight emits light from a specific point, similar to a light from a bulb.

Constructor
  • color

    Represents the color of the light, default is 0xffffff or white.

  • intensity

    A numeric value representing the intensity of the light, default is 1.

  • distance

    The distance the light can travel, default is 1.

HoloPointlight
var material = new HoloBuild.HoloPointlight( 0xf1f1f1, 0.7, 0.5 );
                       

UI Components

The following section go over the holobuild library User Interface components. These include components ranging from navigation Holograms, such as a HoloButton or a HoloToolbar, to input controls such as a HoloStepper.

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.

Constructor
  • name


    The label name.

  • text

    The text to be displayed.
    text — String. One line text.
    OR
    text — Array of Strings. Multi-line text.

  • {PARAMETERS} optional

    An object that can contain the following parameters:
    size — Float. Size of the text (text height). Default is 0.03 meters.
    color — Color. The text color. Default is set to 0x101010.
    width — Float. The label width. Default is set to 0.08.
    height — Float. The label height (or depth - suggested values between 0.001 - 0.005). Default is set to 0.
    padding — Float. The text padding to its background. Default is 0.04.
    bgColor — Color. The text background color. Default is transparent.
    hotspot — Boolean. If true, the cursor will intersect with the HoloLabel. Default is set to true.
    rounded — Boolean. If true, the HoloLabel will be rounded. Default is set to false.
    align — String. ('left', 'right', 'center'). the label text will be aligned accordingly. Default is set to center. The width parameter needs to be filled for the left or right alignemnt to work.

Methods
  • setText(text, {PARAMETERS})

    Set or Change the Hololabel text to text
    text — String. One line text.
    OR
    text — Array of Strings. Multi-line text.
    PARAMETERS is an optional object that can contain the following parameters:
    size — Float. Size of the text (text height). Default is 40.
    color — Color. The text color. Default is set to 0x101010.
    align — String. ('left', 'right', 'center'). the label text will be aligned accordingly. Default is set to center. The width parameter needs to be filled for the left or right alignemnt to work.

  • getText()

    Return the Hololabel text.

  • getHeight()

    Return the Hololabel current height.

HoloLabel
var labelTest = new HoloBuild.HoloLabel('lblValue', 'hello', { size: 0.02, color: 0x101010, bgColor: 0xFFFF00, padding: 0.03 } );
                       
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 one line and 'World' will be on the next line.

HoloCanvasLabel

The HoloCanvasLabel, is similar to holoLabel and represents a label component used to display text in a HoloSpace with one difference: the label text is drawn as a canvas instead of being a 3d text. The HoloCanvasLabel is useful if the text depth is not needed for you, as it has a better performance (lower number of draw calls when compared to a HoloLabel). The HoloCanvas is also useful when you want to show a text with a language that is not supported by the HoloLens, such as Chinese, Arabic, or Russian letters. Since the HoloCanvasLabell extends the HoloGroup class, it inherits all the HoloGroup's properties and methods.

Constructor
  • name


    The label name.

  • text

    The text to be displayed.
    text — String. One line text.
    OR
    text — Array of Strings. Multi-line text.

  • {PARAMETERS} optional

    An object that can contain the following parameters:
    size — Float. Size of the text (text height). Default is 40.
    color — Color. The text color. Default is set to 0x101010.
    width — Float. The label width. Default is set to 0.08.
    height — Float. The label height. Default is set to 0.
    padding — Float. The text padding to its background. Default is 0.02.
    bgColor — Color. The text background color. Default is transparent.
    hotspot — Boolean. If true, the cursor will intersect with the HoloLabel. Default is set to true.
    align — String. ('left', 'right', 'center'). the label text will be aligned accordingly. Default is set to center. The width parameter needs to be filled for the left or right alignemnt to work.

Methods
  • setText(text, {PARAMETERS})

    Set or Change the HoloCanvaslabel text to text
    text — String. One line text.
    OR
    text — Array of Strings. Multi-line text.
    PARAMETERS is an optional object that can contain the following parameters:
    size — Float. Size of the text (text height). Default is 40.
    color — Color. The text color. Default is set to 0x101010.
    align — String. ('left', 'right', 'center'). the label text will be aligned accordingly. Default is set to center. The width parameter needs to be filled for the left or right alignemnt to work.

  • getText()

    Return the HoloCanvaslabel text. text — String. One line text.
    OR
    text — Array of Strings. Multi-line text.

  • getHeight()

    Return the HoloCanvaslabel current height.

HoloLabel
var labelTest = new HoloBuild.HoloLabel('lblValue', 'hello', { size: 0.02, color: 0x101010, bgColor: 0xFFFF00, padding: 0.03 } );
                       
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 one line and 'World' will be on the next line.

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.

Constructor
  • name

    The HoloButton Name.

  • width

    The HoloButton width.

  • height

    The HoloButton height.

  • depth

    The HoloButton depth, 0 for a plane geometry and > 0 for a box geometry.

  • {PARAMETERS} optional

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

    To create your button image, use the Selawik Regular font for consistency and the following PSD file for buttons icons icons.psd For the icon set used by the Hololensuse the following fonts: holomdl2.ttf and HoloSymMDL2.ttf

Methods
  • setEnabled();

    This method will either disable the button or enable it.

  • setText(text, {PARAMETERS});

    Set or Change the HoloButton text text value.
    PARAMETERS is an optional object that can contain the following parameters:
    fontSize The button text font size. Default is 40
    fontColor The button text font color. Default is 0xFFFFFF.
    fontWeight The button text font weight. Default is 'normal'.
    textAnchor: The button text position: .CENTER, .TOPLEFT, .TOPCENTER, .TOPRIGHT, .BOTTOMLEFT, .BOTTOMCENTER, .BOTTOMRIGHT . Default is .CENTER.

  • getText()

    Return the HoloButton text. text — String. Button text.

HoloButton
var btnPrevMesh = new HoloBuild.HoloButton("CtrlPrev", 0.1, 0.1, 0,{ image:'prev.png'});
                              

HoloSwitch

HoloSwitch is a switch like component that is very similar to the button but that keeps its on state or image once the user tap on it and returns to its off state once the user tap on it again. Since the HoloSwitch extends the HoloMesh class, it inherits all the HoloMesh's properties and methods.

Constructor
  • name

    The HoloSwitch Name.

  • width

    The HoloSwitch width.

  • height

    The HoloSwitch height.

  • depth

    The HoloSwitch depth, 0 for a plane geometry and > 0 for a box geometry.

  • {PARAMETERS} optional

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

    To create your button image, use the Selawik Regular font for consistency and the following PSD file for buttons icons icons.psd For the icon set used by the Hololensuse the following fonts: holomdl2.ttf and HoloSymMDL2.ttf

Methods
  • toggle();

    This method will toggle the switch status: it will visually turn the switch on if it was off or the other way around.

  • setEnabled();

    This method will either disable the button or enable it.

HoloSwitch
var btnPrevMesh = new HoloBuild.HoloSwitch("CtrlPrev", 0.1, 0.1, 0);
                       
Two switches in one group, one switch can be selected at a time:

var groupMenu = new HoloBuild.HoloGroup();
var btnWidth = 0.105;
var btnHeight = 0.105;
var btnOne = new HoloBuild.HoloSwitch("ControlOne", btnWidth, btnHeight, 0,{ clickBorderColor: 0xFF0000, groupName: "first" });
var btnTwo = new HoloBuild.HoloSwitch("ControlTwo", btnWidth, btnHeight, 0,'icon-Two.png', '', { clickBorderColor: 0x00FF00, groupName: "first" });
groupMenu.add(btnOne);
groupMenu.add(btnTwo);
                                          

HoloStepper

A HoloStepper is a component that holds two buttons ( + and - ) that increment or decrement a numeric label value.

Constructor
  • name

    The stepper component name.

  • value

    The stepper value.

  • width

    The stepper control width.

  • {PARAMETERS} optional

    An object that can contain the following parameters:
    size — Float. Size of the text (text height). Default is 0.02 meters.
    color — The text color. Default is set to 0x101010.
    bgcolor — The text background color. Default is 0xFFFFFF.
    padding — Float. The text padding to its background. Default is 0.02.
    min — Float. The lowest possible numeric value for the HoloStepper. Default is 0.
    max — Float. The highest possible numeric value for the HoloStepper. Default is 100.
    increment — Float. The increment, or step, value for the HoloStepper. Default is 1.

HoloStepper
var stepperTest = new HoloBuild.HoloStepper('stepper1', '0', 0.08, { max: 100, increment: 5 });
                       

HoloToolbar

A HoloToolbar is a component that holds buttons and that is usually used as an application menu.

Constructor
  • btnWidth

    The default button width.

  • btnHeight

    The default button height.

  • {PARAMETERS} optional

    vertical An optional Boolean value that if enabled will draw the HoloToolbar vertically. reverse An optional Boolean value that if enabled will draw the HoloToolbar in the reverse direction (from right to left).

Methods
  • addButton (name, {PARAMETERS})

    addButton will add a button to the toolbar with a specific name and a set of parameters: image — String. This is the image filename that will show on the button.

  • addSwitch (name, {PARAMETERS})

    addSwitch will add a switch to the toolbar with a specific name and a set of parameters: image — String. This is the image filename that will show on the switch.

  • addSubToolbar(toolbarSub, btn, toggleMode);

    Add a child HoloToolBar to the main toolbar an link it to a specfic button or switch. If a use tap on the linked button or switch, the subtoolbar will be automatically toggled. toggleMode is an enumerator that specificy the position of the sub toolbar: toggleMode elements include the following : toggleMode.LEFT, toggleMode.RIGHT, toggleMode.TOP, toggleMode.BOTTOM.

  • reset();

    Resets the toolbar by turning off any switches and closing any subtoolbar.

  • reverseOrder();

    Reverse the direction of the toolbar from LTR to RTL or the otherway around.

HoloToolbar
var menuCtrl = new HoloBuild.HoloToolbar(0.105, 0.105);

menuCtrl.addButton("CtrlAdjust", {image: "adjust.png"});

menuCtrl.addButton("CtrlMove", {image: "move.png"});

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

//Sub toolbar
var toolbarSub = new HoloBuild.HoloToolbar(0.125, 0.125);
toolbarSub.addButton("ControlAbout", {
    image: "about-off.png"
});
var btnAdjust = toolbar.getObjectByName('CtrlAdjust');
menuCtrl.addSubToolbar(toolbarSub, btnAdjust, HoloBuild.toggleMode.RIGHT);

                       

HoloPanel

A HoloPanel is a panel component that can hold other components such as HoloLabel, a HoloButton, or a HoloSwitch. Since the HoloPanel extends the HoloMesh class, it inherits all the HoloMesh's properties and methods.

Constructor
  • name

    The HoloPanel name.

  • width

    The HoloPanel width.

  • height

    The HoloPanel height.

  • {PARAMETERS}

    bgColor The HoloPanel background color. Default is 0x3c3c3c.
    close A Boolean value that if set to true will show an X like button on top of the HoloPanel that will close the panel once the user tap on it.

Methods
  • addChild(object, pos);

    Add a child object to the panel. pos is the position of the child in respect to the panel.

  • onClose = callbackfunction

    The callbackfunction that is called when the panel close button tap event..

  • setHeight(height);

    Set or Change the HoloPanel height to height value.

HoloPanel
var panelTest = new HoloBuild.HoloPanel('panel1', 0.5, 0.3, 0x010123, true);
var labelTest = new HoloBuild.HoloLabel('lblValue', 'hello', { size: 0.02, color: 0x101010, bgColor: 0xFFFF00, padding: 0.03 } );

panelTest.addChild(labelTest, { x: 0.07, y: 0.05 });

var panelImage = new HoloBuild.HoloPanel('panelImage', 0.2, 0.2, 0xFFFFFF);

panelImage.setImage('SampleImage.png');

panelTest.addChild(panelImage, { x: -0.11, y: 0 });
                       
To have a function called when the panel is closed:
panelName.onClose = function () {
// your function logic here
}
                       

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 HoloPanel extends the HoloGroup class, it inherits all the HoloGroup's properties and methods.

Constructor
  • name

    The HoloDialog name.

  • title

    The HoloDialog Title.

  • text

    The HoloDialog text.

  • PARAMETERS

    Optionally the HoloDialog can take other parameters as an object that can contain the following:
    mode — enumerator. The mode of the dialog: (dialogMode.DEFAULT, dialogMode.CONFIRM, or dialogMode.INFO). dialogMode.DEFAULT for a notification like dialog with a close button; dialogMode.CONFIRM for a confirmation like dialog with a YES and NO buttons; HB.Enum.dialogMode.INFO for an information only dialog without any buttons. Default is dialogMode.DEFAULT.
    canvas — boolean. whether the HoloDialog title label is of type canvas or not. Default is false.
    bgColor — color. The HoloDialog background color. Default is 0x070707.
    titleColor — color. The HoloDialog title color. Default is 0xFFFFFF.
    titleBgColor — color. The HoloDialog title background color. Default is 0x1C1C1C.
    bodyColor — color. The HoloDialog body color. Default is 0xFFFFFF.
    bodyBgColor — color. The HoloDialog body backgrounf color. Default is 0x070707.
    titleAlign — String. ('left', 'right', 'center'). the HoloDialog title alignment. Default is left.
    bodyAlign — String. ('left', 'right', 'center'). The HoloDialog body alignment. Default is left.

  • callbackfunction optional

    The callbackfunction is the call back function that will be called when the user perform an action on the HoloDialog. If the dialog mode is dialgMode.CONFIRM, the callback function will be called with one boolean argument. The boolean value will be true if the YES button is tapped, or false otherwsie.

Methods
  • setText(text);

    Set or Change the HoloDialog text text value.

HoloDialog
Message dialog example:

var dialogAlert = new HoloBuild.HoloDialog('dialog1', 'Alert', 'this is an alert message!', {mode: HoloBuild.dialogMode.DEFAULT },
      function (action) {
            console.log('dialog callback');
      }
);
                       
Confirmation dialog example:

var dialogGroup = new HoloBuild.HoloDialog('dialogConfirm', 'Confirm', 'Are you sure you want to do this?', {mode: HoloBuild.dialogMode.CONFIRM });
                       

Settings

The settings section details the various library classes that could be set by the developer.

HoloSettings

HoloSettings contains the default settings and preference of the HoloBuild Library.

Methods
  • setDebug(showDebug);

    This method will either enable or disable showing the console log information on your Hololens. The information will be show next the buildWagon version number. showDebug Boolean- If true the debug information will be displayed. Default is false

HoloSettings
var settings = new HoloBuild.HoloSettings();
                       
To set the debugging method:

var settings = new HoloBuild.HoloSettings();
settings.setDebug(true);