Interface Designer

What it is

An in-browser world editor that allows users to easily create, remove, and manipulate scene objects through variety of tools. This editor in particular utilizes Scene and EC model, in other words, manipulates entities, components and attributes. Manipulations can be done through GUI that consist of three parts: scene tree, EC editor, and additional toolbar, or directly into the scene via 3D manipulation helper objects such as transform gizmo / axis tripods, and grids. The GUI provides extensive editing of entities that cannot be otherwise done via a 3D manipulation helper, and also in most of the cases serves for fine-tuning of values.

Why get it

Designing non-trivial UIs in HTML directly is difficult. Do support developers and make the approach easier to use and increase uptake in the community an interface design tools is needed. It should allow for visually creating 3D UI components and objects, define their behavior, arrange them in 3D, and allow them to be connected to an application. In this epic a basic tool that simplifies user interface design should be provided, but due to resource limitations no complete, commercial grade implementation can be expected as part of this call.

Avaliable for:



This application-oriented GE is implemented in several modules, split into javascript libraries:


The interface designer is implemented so that there is a main implementation (Scene Tree and EC Editor) that provides a graphical user interface and the toolbar, while 3D-UI specific implementations (f.ex. XML3D or WebTundra 3D-UI GEs) provide the internal communication between the editor and the GE. The user can interact with the scene tree via GUI; Transform gizmo serves only for modifying 3D world coordinates. Main implementation has own "wrapper" objects that wrap around the 3D-UI-specific implementation, so that different 3D-UI GEs can use the same code. The 3D-UI specific implementation also listens to all the changes that may come up in the 3D-UI by external means (for example, a scene that is hosted on a server and has two connected clients that try to manipulate objects in the scene). This is made for consistence of the current state of the scene and what the GUI shows.

Transform gizmo is independent from the main editor. The editor only holds an instance of the so-called "TransformEditor", since Transform gizmo is, in a way, an editor only for a transform attribute (position / rotation / scale) and takes care of attaching the transform gizmo to objects of interest.


The picture above shows an example of what happens internally when an attribute has been changed via the GUI. When the user changes the value of the input box that has an attribute assigned to, it will first fire up the "change" event coming from Javascript / jQuery. The event listener within the 3D-UI specific implementation will receive the request for adding an "AttributeChange" command into the undo / redo stack, and it will push a new instance of ChangeAttributeCommand, with passing attribute information as arguments. Once the command is pushed into the stack, it will call its exec() method that will actually set the new value for the observed attribute via the 3D-UI GE API. The 3D-UI GE will then fire up a signal called "onAttributeChange", and the event listener in the main implementation will then update the GUI to the current state. Also, if an external actor causes an attribute change, the main implementation will once again update the GUI. It is important to note that when an attribute is modified by external means, its change is not pushed into the undo / redo stack, as it might create unwanted results, such as the current user undoing a change that the external actor made. This will cause some undefined behavior, but it is out of the editor's scope to handle concurrent situations.

Interface Designer Example

FIWARE Webpage

Interface Designer


Interface Designer Documentation


Interface Designer Download

Fiware Academy

Interface Designer Courses