Google Maps – TUIO.Js – Europeana Linked Data

Query and Display on Timeline Google Maps

The previous versions of the prototype managed to get the data into the query form so it could be retrieved from the Europeana database.

With the help of William Fyson the data is now displayed using the latitude and longitude (edmPlaceLatitude) metadata. By using the Timeline produced by SIMILE, those geolocations can be related to specific date  also provided in the metadata.

Using TUIO and Google Maps Api V3

Once the data is displayed, TUIO can be used not only to query but to manipulate the map. In this example, one of the fiducials is used to control the zoom of the map.


March 24 – TUIO Js // Fill and put form data

TUIO//Js Put and send data in a form

Playing a little bit more with TUIO.Js I have now started to place some information in a input text form on HTML. The information is sent with all the marker number values and indicates if its higher than 10 or lower than 11. That information is placed on the input field which then can be used to populate the final form. There are two options: Add to existing text and Replace existing text. This method can be used to assist users with the creation of statements and queries.

Moreover, I have also used the values to place either a vase or the painting accordingly. Using the image placement on a canvas can help visualising the query results on the whole table-top system.

March 23 – TUIO Js Canvas Paint


After identifying the fiducial properties, I have decided to output the visual content onto the browser. I have also arranged the data to make more clear the information about the current fiducial being used.

I added an HTML canvas where the user can draw by moving either marker 11 (green) or marker 0 (blue). This has been added directly related to the number of the fiducial being moved. It can also be changed through an array and produce in this way a wide variety of colours.

20 March – Tracking Fiducials into HTML Canvas

TUIO – JS | HTML Canvas

I managed to put text in an HTML Canvas based on the functions loaded from the JavaScript code. One group of  JS files run the TUIO library, socket and fiducial management and another group of JS files create and place the text into the HTML document. This way I can start placing HTML elements into the document based on particular properties provided by the fiducials once they interact with the table.

9 – March – Dropped AS3. Hello .JS-TUIO

I started exploring more with the libraries to work with TUIO and even though I felt more comfortable working with AS3 (ActionScript), I found out that eventually I was going to find myself isolated from Web technologies. Even though Flash (AS3) is still way more powerful than any technology to visualise and develop interactivity on the Web, when it comes to future Web technology, the communities that support it will eventually die. On the other hand, working with technologies such as JavaScript (JS) which is well received among Web communities, presents a more sustainable panorama.

I had a very long discussion with my friend Paul Booth who works with data visualisation on the Web, primarily with JS and we came to the conclusion that perhaps working with JS might show a more clear panorama especially when working with RDF and Json documents.

For this reason I decided to drop AS3 and start working with JS for the tangible interface. I managed to connect TUIO through JS and present it through a web browser.