Ubox Studio Docs

The very first step to create an UBOX application is clicking on NEW APPLICATION and providing it with a name, then after clicking on CREATE APPLICATION you will be taken to the main edit window.

You can change the name of the application and make it Public checking the box underneath which allows you to share the application preview link with anyone, even with those who don’t have an Ubox account. Keep in mind that this is only for previewing purposes due to the fact that body gestures and other sensors inputs can not be mimicked with the mouse or keyboard at present. 


On this window you can preview your saved app by clicking Test Application. Notice that the url says application/test/

On the left side of this window you will find three main tabs: Source, Resources and Parameters.

Next to the name on the right hand side, above Application Code there is a link where you can change Change application version. Here you can create different versions of the code to make sure the changes you made do not affect a working version. To do so, under Create New Version, introduce a name an click on the Create green button. Then, this will become the current active version and as seen under Application Code. To change back to the other version, you have to enter the menu again and select the version you are interested and set it to default.

Note that this cannot be done if the default version is being edited (it will prompt you with a red warning at the top). Also note that if you want to remove one of the versions, it can not be the one which is active.


The source window will let you edit the application code by clicking on the button “Edit Source”.

Once the application is in the Edit Mode, any other Ubox developer will NOT be able to do modifications unless you save the app permanently by clicking “Save and back to app”.

  • Test Application button will open your temporary saved app in a new window to visualize the changes you have made. Notice that the url says application/testtemp/
  • Temp Save button will save your document but you will be able to remove the changes by clicking Remove changes.
  • Save and Back to App saves the code changes made permanently and you will not be able to revert back.
  • Back to App takes you to the main window where you can choose other tabs like Resources or Parameters.

1.1.1 HTML

Here the HTML code is introduced for the app.You will not need to link the main CSS stylesheet or the main JS script, the platform already does this for you.

1.1.2 CSS

On the CSS section you can edit the style of your elements as you regularly do.

1.1.3 JavaScript

There are 4 tabs which are used for better code organization:

– Ubox Events
Built-in Ubox functions to use with Kinect and serial messages (eg.arduino) using Javascript.
Note that by the default the canvas is set up on this tab.

– Workflow
In this tab is where the logic of the experience is introduced using Javascript.

– Business Logic
In this tab is where the calculus logic goes in using Javascript.

– Data source
Here is the tab for sourcing the data.

The jQuery JavaScript library is already included so you can use it without calling it from the HTML. Also, all the script is read after the window loads the elements.

Any JavaScript library can be included from the HTML, either using an external online source or by uploading the js file as a UBOX resource.

Within the JavaScript code you will find some native UBOX gesture functions like grip, changeHandRight, noUser, newUser, etc., that you can use pretty easy.


If you need to host some files for your project, you can do it by uploading them one by one to this window. To replace a file simply delete the current one and re-upload it with the same name.

Regarding the naming convention please avoid using spaces and also avoid having two files with the same name.

1.2.1 Images.

JPEG, PNG or GIF images are accepted.

1.2.2 Fonts

Only web fonts can be uploaded to the this section.

1.2.3 Files

Any other type of files like videos, libraries, mp3, svg images, etc. can be uploaded to this section.


On this section you will be able to add some editable parameters that can be edited on the client’s side.

1.3.1 Key

Here you can set a unique name for each parameter.

1.3.2 Value

On this field you will write the value of the parameter, this could be a number or a string.

1.3.3 Default Value

When the client hasn’t apply any value to the parameters, the application will use the default values.

1.3.4 Description

On this field you can write down a description to help others understand how the values should be implemented or any desired guidance.