We use proprietary and third party's cookies to improve your experience and our services, identifying your Internet Browsing preferences on our website; develop analytic activities and display advertising based on your preferences. If you keep browsing, you accept its use. You can get more information on our Cookie Policy
Cookies Policy
FIWARE.OpenSpecification.WebUI.InterfaceDesigner - FIWARE Forge Wiki

FIWARE.OpenSpecification.WebUI.InterfaceDesigner

From FIWARE Forge Wiki

Jump to: navigation, search
Name FIWARE.OpenSpecification.WebUI.InterfaceDesigner
Chapter Advanced Web-based User InterfacesOpenSpec,
Catalogue-Link to Implementation Interface Designer
Owner Adminotech, Cvetan Stefanovski

Contents

Preface

Within this document you find a self-contained open specification of a FIWARE generic enabler, please consult as well the FIWARE Product Vision, the website on http://www.fiware.org and similar pages in order to understand the complete context of the FIWARE platform.


Copyright

Legal Notice

Please check the following Legal Notice to understand the rights to use these specifications.

Overview

The Scene / Entity Component (abbreviated as EC) editor is an in-browser world editor that allows users to easily create, remove, and manipulate scene objects (further in the text "entities") through variety of tools. This editor in particular utilizes 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, grids etc. 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.

Basic Concepts

3D vs. 2D

The editor will focus on providing capabilities for 3D scene and object manipulations. There will however be efforts made with the 2D-UI to integrate editing capabilities for WebComponent based 2D components.

Local Scene vs. Replicated Scene

The editor does not make any assumptions if the scene its manipulating is locally declared or it came from a server. It simply manipulates the current scene state, the changes will replicated back to the server if there is and active server connection, and the manipulated objects are replicated.

Moreover multi-user editing does not need any special logic from the editor. You will simply see other peoples changes if they do any on a replicated server. The editor does not implement any logic for "reserving" objects for editing, so that one user could edit an object at a time. If multiple users edit the same object the server will take care of applying the latest sent changes, this may result in weird situations but is out of the scope of the editor GE to take care of multi-user simultaneous edits on a particular object.

Scene tree

The scene tree shows all available entities on a scene that can be manipulated, along with the most basic info about their components, such as component name and component type.

EC editor

EC editor expands the content of an entity that is of interest so that attributes of components and the components themselves can be added/removed/edited.

Toolbar

A toolbar that consist of actions that are most used, repetitive, or just considered to be needed for scene manipulating. For example: undoing / redoing actions, creating primitive shapes (box, sphere, cone, torus), options such as "Snap to grid", creating movable entity, drawable entity, script entity etc.

3D manipulation helpers

Consist of transform gizmo and grids for a direct in-world manipulation of entities.

XML3D support

This GE also provides support for XML3D scenes. The key and only difference is that XML3D elements have the properties of both entities (they can have children elements) and components (they have their own attributes).

Generic Architecture

This application-oriented GE will be implemented into several modules, split into javascript libraries:

  • Scene editor
  • EC editor
  • Toolbar manager
  • direct 3D manipulator (transform gizmo)

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.

Example workflow when an attribute has been changed

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.

Main Interactions

  • Apart from having a view of all available entities and its components, the scene tree is used to:
    • create / remove entities by hand, i.e. creating an empty entity and adding components to it;
    • double-clicking existing entity or component will expand to the EC editor, which components and attributes can be further manipulated there, and also that will trigger a transform gizmo and the entity's bounding box to appear in the origin point of the entity of interest;
    • grouping multiple entities to a single group, for a cleaner view, and manipulating a group's transform (which is merely a manipulation of a central pivot point of the grouped entities).
  • EC editor shows an expanded view of the components and its attributes of an entity (See Scene and EC model), which allows
    • Creating / removing components and properties of components (name, replication flag, temporary flag);
    • Editing a component's attributes via input boxes (string, number, array, transform attributes) or checkboxes (boolean attributes);
    • Creating or removing attributes in case of editing a DynamicComponent (a user-defined component that has custom user-definable attributes for application-specific purposes).
  • Toolbar that consists of actions such as:
    • Primitive entities to be created
    • Quickly create "most used" entities, such as drawable (entity with EC_Mesh), movable (entity with EC_Placeable), script (entity with EC_Script), skybox, waterplane...
    • Creating helper grids;
    • Selection tool (select single or multiple entities with a rectangle, similar to selecting multiple files on the desktop with the mouse);
    • Camera helper actions
  • 3D manipulation helpers include:
    • Transform gizmo axis tripod that locks translating / rotating / scaling an entity on a single axis;
    • Small planes in the zero point of the axis tripod that locks moving an entity on a single x0y, x0z, y0z plane;

Basic Design Principles

  • Apart from the direct 3D manipulator (transform gizmo), all modules serve as an application to the main scene.
  • The editor UI is built dynamically, and its code do not have to be modified if new components are added to the target GE core implementation.
  • The editor UI always listens to all scene changes and it is updated appropriately, whenever an entity is edited from the editor or another third-party.
  • The transform gizmo is an EC component that can be added from any other application GEs that may need the use of 3D manipulating, and works independently of the editors.


Re-utilised Technologies/Specifications

Terms and definitions

This section comprises a summary of terms and definitions introduced during the previous sections. It intends to establish a vocabulary that will be help to carry out discussions internally and with third parties (e.g., Use Case projects in the EU FP7 Future Internet PPP). For a summary of terms and definitions managed at overall FI-WARE level, please refer to FIWARE Global Terms and Definitions

Annotations
Annotations refer to non-functional descriptions that are added to declaration of native types, to IDL interface definition, or through global annotations at deployment time. The can be used to express security requirements (e.g. "this string is a password and should be handled according the security policy defined for password"), QoS parameters (e.g. max. latency), or others.
AR
AR → Augmented Reality
Augmented Reality (AR)
Augmented Reality (AR) refers to the real-time enhancement of images of the real world with additional information. This can reach from the rough placement of 2D labels in the image to the perfectly registered display of virtual objects in a scene that are photo-realistically rendered in the context of the real scene (e.g. with respect to lighting and camera noise).
IDL
IDL → Interface Definition Language
Interface Definition Language
Interface Definition Language refers to the specification of interfaces or services. They contain the description of types and function interfaces that use these types for input and output parameters as well as return types. Different types of IDL are being used including CORBA IDL, Thrift IDL, Web Service Description Language (WSDL, for Web Services using SOAP), Web Application Description Language (WADL, for RESTful services), and others.
Middleware
Middleware is a software library that (ideally) handles all network related functionality for an application. This includes the setup of connection between peers, transformation of user data into a common network format and back, handling of security and QoS requirements.
PoI
PoI → Point of Interest
Point of Interest (PoI)
Point of Interest refers to the description of a certain point or 2D/3D region in space. It defines its location, attaches meta data to it, and defines a coordinate system relative to which additional coordinate systems, AR marker, or 3D objects can be placed.
Quality of Service (QoS)
Quality of Service refers to property of a communication channel that are non-functional, such a robustness, guaranteed bandwidth, maximum latency, jitter, and many more.
Real-Virtual Interaction
Real-Virtual Interaction refers to Augmented Reality setup that additionally allow users to interact with real-world objects through virtual proxies in the scene that monitor and visualize the state in the real-world and that can use services to change the state of the real world (e.g. switch lights on an off via a virtual button the the 3D scene).
Scene
A Scene refers to a collection of objects, which are be identified by type (e.g. a 3D mesh object, a physics simulation rigid body, or a script object.) These objects contain typed and named data values (composed of basic types such as integers, floating point numbers and strings) which are referred to as attributes. Scene objects can form a hierarchic (parent-child) structure. A HTML DOM document is one way to represent and store a scene.
Security
Security is a property of an IT system that ensures confidentiality, integrity, and availability of data within the system or during communication over networks. In the context of middleware, it refers to the ability of the middleware to guarantee such properties for the communication channel according to suitably expressed requirements needed and guarantees offer by an application.
Security Policy
Security Policy refers to rules that need to be fulfilled before a network connection is established or for data to be transferred. It can for example express statements about the identity of communication partners, properties assigned to them, the confidentiality measures to be applied to data elements of a communication channel, and others.
Synchronization
Synchronization is the act of transmitting over a network protocol the changes in a scene to participants so that they share a common, real-time perception of the scene. This is crucial to implementing multi-user virtual worlds.
Type Description
Type Description in the context of the AMi middleware refers to the internal description of native data types or the interfaces described by an IDL. It contains data such as the name of a variable, its data type, the hierarchical relations between types (e.g. structs and arrays), its memory offset and alignment within another data type, and others. Type Description are used to generate the mapping of native data types to the data that needs to be transmitted by the middleware.
Virtual Character
Virtual Character is a 3D object, typically composed of triangle mesh geometry, that can be moved and animated and can represent a user's presence (avatar) in a virtual world. Typically supported forms of animation include skeletal animation (where a hierarchy of "bones" or "joints" controls the deformation of the triangle mesh object) and vertex morph animation, where the vertices of the triangle mesh are directly manipulated. Virtual character systems may support composing the character from several mesh parts, for example separate upper body, lower body and head parts, to allow better customization possibilities.
WebGL
WebGL → (Web Graphics Library) is a JavaScript API for rendering 3D and 2D computer graphics in web browser.
Personal tools
Create a book