HTML5 WebSocket

HTML5 example

The HTML5 example is given in form of the gesture preview that is used in the AirPointr web interface. You can get the source code of a simplified example here. Download all containing files into a local folder. Befor opening the index.htm in your web browser, you will first have to specify the hostname of your Raspberry Pi in line 13:

<ws_host> = hostname or IP of your Raspberry Pi running the AirPointr service

The index.htm contains a canvas that is used for the gesture preview. The preview functions are implemented in javascript in the file preview.js. This file contains two major functions that show how to:

Establish a websocket connection

How to open a websocket connecection is implemented in the function initSocket(ws_host, ws_port, ws_path). To open the connection you first have to specify the URI (Uniform Resource Identifier), which in the end looks like something like this:

ws://myraspi:8081/airpointr

With this URI the websocket connection can be established by creating a new socket instance:

mySocket = new WebSocket(URI);

For this socket a few event hanndler functions can be specified, as you can see in the code. For the reception of the AirPointr messages the event handler "mySocket.onmessage" is linked with our function for the extraction of the pointer information onPointer(msg).

Extract and use the pointer input information

The function onPointer(msg) parses the datafield of the received AirPointr message. The command

var pointrData = JSON.parse(msg.data);

gives back the struct that the message contains. The exact structure of this struct is shown here. Feel free to examine the example code to find out how you can use the pointer data and to obtain some possible use cases for your projects.