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.ArchitectureDescription.MiWi.2D-UI - FIWARE Forge Wiki


From FIWARE Forge Wiki

Jump to: navigation, search



Legal Notice

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


We will be researching the current state of possible input devices in a modern web browser environment. These input devices range from traditional keyboard and mouse to touch, gamepads and sensors. One of the key parts in this GE is to implement a Input API for the 3D client and scripts utilizing it, to register events and get notified when user interaction happens on the 3D scene and its objects. The research will include APIs that may not be included in browser standards yet but can be found in nightly builds or such beta releases.

The second part of this GE, the UI, we apply the same research for modern technologies and example implementation that will make creating and managing common widgets easier for your 3D application. The research will heavily include the use of new/upcoming web standard Web Components.

Basic Concepts

Input API

Enables registering/unregistering to receive input events fired by e.g. touch pad, gamepad, keyboard and mouse. It also enables registering new input events runtime to extend the functionality. These events must be possible to send to used event system so applications/scripts using the event system can listen the events.

Input Abstraction

Enables registering/unregistering or updating existing input context/state which defines keyboard and mouse conditions that fire an event. E.g. pressing 'w' is forward or pressing 'w' and 'mouse left' is jump. End user is free to decide and name own input states. Within the input state end user can define following bindings or conditions:

  • Name
  • 0-n - keyboard bindings
  • Mouse - left down, middle down, right down
  • Time slot - within all conditions must be true
  • Priority - in which order the registered input states are handled
  • Multiplier - how many times either keyboard or mouse conditions must be repeated within the given time slot.

Web component

Web Components bring a new way to encapsulate your UI, look and feel and your JavaScript functionality into a single component. These components are easy to include and add to any web page without including scripts and dealing with the usual initialization steps for different libraries. Additionally you are interacting with a DOM element that the Web Component defines, not a JavaScript library directly, the Web Component defined its DOM interface and implements the needed JavaScript behind it.

The component model for the Web aka Web component can be understood as a reusable widget/HTML module on screen.

It consists of 5 pieces:

  • Templates - which define chunks of markup that are inert but can be activated for use later.
  • Decorators - which apply templates based on CSS selectors to affect rich visual and behavioral changes to documents.
  • Custom Elements - which let authors define their own elements, with new tag names and new script interfaces.
  • Shadow DOM - which encapsulates a DOM subtree for more reliable composition of user interface elements.
  • Imports - which defines how templates, decorators and custom elements are packaged and loaded as a resource.

Each of these pieces is useful individually. When used in combination, Web Components enable Web application authors to define widgets with a level of visual richness and interactivity not possible with CSS alone, and ease of composition and reuse not possible with script libraries today.


Shadow DOM

Shadow DOM encapsulates DOM tree from the main document DOM tree. In other words a widget or web component can be encapsulated from the rest of the page and all e.g. javascript library updates or style changes won´t affect the Shadow DOM tree.



Polymer implements the concept of the Web Components standard. It is built for modern browsers that support web platform APIs. Support for old browsers is done by polyfills which is a Javascript library that enables the use of the new web platform APIs if they are not yet present in the browser itself. Polymer leverages Web Components, a new set of standards designed to provide reusable components for the web. With Polymer users can create own custom elements and reduces writing the boilerplate markup or code all over again.


Gamepad API

Gamepad API enables using JavaScript to read the state of any gamepad controller attached to your computer. Please refer to the W3C page for a full description of the Gamepad API specification

Generic Architecture

The 2D-UI Generic Enabler consists of two main building blocks: The Input API on one hand, which will provide an interface to abstract from different input devices, and the Web Component interface on the other, which simplifies the integration of graphic 2D user interfaces into the Web application. While both, input and graphic user interface, are part of this GE, it is explicitly desired that input is also compatible with other GE of the chapter, as for example 3D-UI.

The 2D-UI is implemented as web page in a browser. The web page provides graphical interface for the user and provides support for input devices and input abstraction via Javascript libraries. Polymer is implemented by using Javascript libraries and Polymer components which are either placed on a different html -file and imported on the web page, dynamically loaded or vulcanized as one file where all components, html and javascript are combined in one html -file.


Provides methods to create and compose input events of different devices to create more complex input patterns. Supported devices are:

  • Keyboard
  • Mouse
  • Touch
  • Gamepad (XBOX, Playstation etc.)

Web Components

Web Components, implemented and provided by the Polymer library, are used to predefine templates of 2D Graphic User Interface patterns that can be used to assemble the Web page. The resulting application will provide the Graphic User interface, with which the user interacts in terms of abstract input events, which are realized by the Input API.

Main Interactions

Research and implement simple and easy way to use Input API and Web Components in browser environment. InputAPI should be extendable by 3rd party developers. Once new input devices or UI libraries are exposed to the browser environment we should provide a clear way of extending the InputAPI. To start with the InputAPI we will provide modules/components described in Generic Architecture chapter. To start with Web components we will provide example implementation of a web component.

  • As a test case for InputAPI there will be a simple html page that includes these libraries and print the user input on the screen.
  • As a test case for Input Abstraction there will be a simple html page where user can create own input state/context and see how InputAPI reacts to the created state/context printing the user input on the screen.
  • As a test case for Web Component there will be html pages with different implementation to place web component on the screen.

Basic Design Principles

  • Clear Javascript libraries with samples and documentation
  • Clear html and Javascript files with documentation


Personal tools
Create a book