Introduction
This document describes using the Input API and Web Component features of the 2D-UI GE.
System Requirements
The 2D-UI components run in common web browsers and are independent of hardware and operating system.
A list of detailed browser compatibility for the Polymer Web Components can be found here http://www.polymer-project.org/resources/compatibility.html.
The Input API requires the JQuery core library Version 1.9 or higher. All other 3rd-party libraries are delivered with the GEi.
Software Requirements
Common web browser.
Software Installation and Configuration
All 2D-UI components are collections of JavaScript libraries which have to be included in your web-project. Most of the components and example run locally in the web browser. Some components have to be installed and delivered from a web-server.
Input API
To install the Input API you can clone the current version from the Git repository on https://github.com/Adminotech/fi-ware-2D-UI or download release from catalogue page.
The lib
directory contains the 3rd-party JavaScript libraries which are required for the InputAPI (jQuery plugins, Signals and Classy). The InputAPI JavaScript source files can be found in the src
directory. The test
folder finally contains an example implementation input.html
which shows how the InputAPI has to be initialized and used. If you use the structure of the cloned git repository keep the file in the test
folder and leave script paths as they are. If you use a different structure in your web project or create your own programs you have to change the references accordingly. Remember that all plugin file references must be after the main InputAPI.js reference which contains the definition of InputPlugin.
Details how to use the InputAPI can be found in the user guide.
Input Abstraction
Input Abstraction is part of the Input API implementation. To install follow the installation guide of InputAPI. The test
folder contains an example implementation inputState.html
of Input Abstraction which shows how the abstraction is initialized and used. Details how to use the Input Abstraction can be found in the [[2D-UI - User and Programmers Guide]].
Polymer Web Component
To install the Polymer Web Component you can download ZIP archive from the Forge, extract the downloaded archive and add the files to your web project on your local file system or on a web server.
The polymer browser components are packaged in the browser_component
directory. The chat
directory contains components to implement an example chat client implemented using the Polymer library version 0.1.1.
In the root directory of the ZIP archive you'll also find three examples how to implement a chat web application.
- index.html:
Shows how to use the standard way how to instantiate the chat-client referencing the library in the browser_components
folder and the chat-components in the chat
directory. In case of cross origin error from the browser when running from file system install and run the file on a web server.
- vulcanized.html:
The vulcanized version works similar to the standard version, but instead of referencing individual libraries and components int includes a vulcanized import file, which concatenates a set of Polymer components in a single file. In case of cross origin error from the browser when running from file system install and run the file on a web server.
- dynamic.html:
One of the biggest issues with Polymer is the lack of ability to load web components dynamically. However all needed functions are already there but the Polymer Project itself has not yet created a convinient way of using them. This is discussed topic inside the project and will be part of the project in the future. In this example we show a way to do it currently.
:The difference to the above examples is that this has to be installed on a web server. The example sets default paths to http://localhost. If you install it on your web server you have to remember to set the path's in dynamic.html
and chat/polymer-chat.html
accordingly.
Sanity check procedures
End to End testing
InputAPI
- Open the Input.html file from the cloned repository
test
folder with your desired web browser. If InputAPI is working correctly you will see a log on the web page which shows every key press/release and all mouse events. Key events in the displayed log start withKey
and mouse events start withMouse
. - To test touch events place the file on a web server and use your mobile device web browser to open the file and test touch events. All touch event logs start with
Touch
. - To test gamepad, connect your XBox or Playstation USB controller to your computer. NOTE: At this stage only the latest Chrome browser is supported. If gamepad is supported by your browser it is told in the display log. Once the gamepad is connected and the browser supports it, the display log will start to show gamepad button and axis states on every browser animation frame.
InputAbstraction
- Open the InputState.html file from the cloned repository
test
folder with your desired web browser. - If InputState is working correctly you will see a web page where you can create and update an InputState.
- The page is divided to 2 sections with a grey line. On the left is the InputState creation and on the right is the log display.
- Once the InputState is saved and its conditions are true the log display shows that the InputState with your given name is fired.
Polymer Web Component
To test the example polymer-chat web component open one or all of these included example files in the root of the ZIP archive. The files must be run from a web server:
- index.html
- vulcanized.html
- dynamic.html
Once the file is open in the browser and the web component is displayed correctly, the user will see a chat widget on the bottom left corner of the opened page.