Visit Latest WAT API Documentation for the most up-to-date documentation, which may include corrections and other updates.

WAT

WAT is framework of objects that are made available to JavaScript that provide an interface to hardware and lower-level software features. Common functionality is grouped together into a module, which must be loaded by JavaScript to begin using it. Some modules are implemented as 'plug-ins', in that they may or may not be present on a specific device depending on whether the hardware it uses is available and/or it has been licensed. Plug-ins can be updated or installed on a device independent of the main firmware, although there may be version dependencies and/or licenses that need to be satisfied before it can be successfully loaded. See Plugins for more detail and examples.

Modules

Modules are loaded using wat.WAT#load. If a module successfully loads and it has objects available for JavaScript, these objects will be returned in an array. The number and order of objects returned are defined by the module. If a module fails to load (or has no objects that can be directly used by JavaScript), then an empty array will be returned. A common cause of this is that an attempt was made to load a plug-in that is not installed on the device. In order to confirm this from JavaScript, wat.WAT#plugins can be used. It allows JavaScript to get a list of the installed plug-ins, and further meta-data about a plugin. See the side bar for a list of available modules and the classes they provide.

Signals and Slots

Many modules make extensive use of an eventing mechanism referred to as Signals and Slots. When an event happens, a signal is generated. The signal then fowards the event data to any Slots connected to it, one by one. A slot is either a JavaScript function (method), or a method defined on another plugin object, if it is capable of being a slot. For more information on how to use signals and slots, see Signals.

Code Completion

Some IDEs/Editor support code completion of JavaScript objects. Read Code Completion To see how to use this feature with WAT.

Debug Console

WAT devices support a debug console that displays trace messages from JavaScript. The console also allows JavaScript to be typed into it and executed real-time. This is very useful for querying application state, or just testing out what WAT methods and properties do without having to put it in a file and load it in a device. For example, '$wat.plugins.pluginList();' can be typed directly into the console which shows the list of installed plug-ins. WAT objects can also be inspected this way to view what properties and methods they contain, e.g. $wat.load('ui')[0]; to see what properties and methods ui.UI supports. See Console for more information.

Getting Started

A very basic HTML tutorial is available at 1 - Hello World. It shows how to set up a web page that can be viewed by a WAT device (or any browser). More advanced tutorials dealing with WAT specifics can be found under the Tutorials section of the menu.

Tips and Hints

WAT uses HTML and JavaScript like a web browser to render content and execute logic. Because these are such common languages, many resources from help pages and forums to full libraries can be found on the internet to assist with development. When using a WAT device with a touch screen, it is often helpful to search for mobile compatible solutions, since they also primarily use touch screens. WAT also implements many HTML5 and CSS3 features, many of which make development easier, especially for touch devices. For example, here are a few CSS3 styles that may help on touch devices:

/* prevent selection boxes from appearing around focused elements */
* {
   outline:none;
}

/* 
 * Prevent items from being selected or dragged, which can happen accidentally
 * on touch screens and is typically not useful on dedicated purpose devices.
 *
 * However, this may prevent some input elements from functioning properly, so
 * it shouldn't be used on forms that require text to be entered.
 */
* {
   -webkit-user-select: none;
   -webkit-user-drag: none;
}

Note that the WAT rendering engine is webkit, so some non-standard features may require the '-webkit-' version to be used.