We have been building the web application through a wide range of services and libraries. We used JQuery and JQuery UI to change the way the different HTML objects react and look on the interface. We used the TUIO protocol to translate the data sent from the sensor (in this case is a webcam), into a JavaScript usable protocol. To make the library of actions, we used nptTuioClient and its plugin and attached several functions to decide what is the interface meant to do whenever a fiducial enter, moves or leaves the active area.
The current object used to search, attaches the query syntax to the API call to Europeana, and by rotating it, we can change the term of the particular dataField that we want to reference.
The list of fiducials being used are:
Using the printed fiducials.
Since we have been using the emulator, we haven’t had the chance to see how the interface reacts when we use the printed markers. Once we try it, we will finalise the fiducial or pyfos and make finalised isometric shapes as volumes to build with paper and make them graspable and manipulable.
To do this, we need to use the reacTIVision toolkit and use the fiducial tracker instead of the emulator. The link can be found here:
http://reactivision.sourceforge.net/#files
Depending on your operating system, you will have to download and use the reactivision application inside.
In addition, reacTIVision has a large number of fiducials and each one has their own id. Here is the link to the PDF file.
http://reactivision.sourceforge.net/data/fiducials.pdf
Running reacTIVision
When you open reacTIVison, the software should just recognise the video device that you have currently available in your computer. Nevertheless, you might have more than one device plugged and you might want to trigger it to that specific device.
1. Open reacTIVIsion
If your camera is detected and you can see the display. Then skip to the next section.
If your camera was not detected, reacTIVision will give you a notification and close
To fix this, follow these steps:
1.a. Open the reacTIVision folder and then the calibration folder. Inside it run the list_devices application. Once opened, it will give you a list of the different devices and the number to identify it. REMEMBER THIS NUMBER!
In this example, the camera to be used is number 2 (USB Camera).
1.b. Close the list_devices app by clicking in the ok button.
1.c. Go back to the reacTIVision folder and right-click the reacTIVision app and select Show Package Contents
This is going to open a new browser window.
1.d. Open the folder Resources, and then the file camera.xml
1.e. In camera.xml, change <camera id=”Number”> for whatever number your camera was listed with. In this example it is 2.
1.f. Save the file, close the file explorer and open the reacTIVIsion application once again.
Viewing the final result
You should see the objects on the interface reacting in the same way as they did when we used the emulator.
If you move the pyfo and the #mySearch box moves to the opposite side, we can press i to flip the x or y axis of reacTIVision so it fits to our browser position.
2. Press h to see the different options
If the camera is having trouble with the light or detecting the markers we can open the camera options to fix it.
3. Press o to open the camera options and change the calibration.
![and]](https://javierpereda.files.wordpress.com/2016/09/and.jpg?w=620)
Congratulations!
Here is the the final prototype working! Don’t forget to share and promote Tangible User Interfaces! 🙂
