Educational Resource Editor for Tangible Tabletop

Version 1.3 – October, 2020

©2020 – Universidade Federal do Rio Grande do Sul – UFRGS
Centro Interdisciplinar de Novas Tecnologias na Educação – CINTED
Programa de Pós-Graduação em Informática na Educação – PPGIE

Developed by:Evandro Preuss
Supervision: Liliana Passerino (In Memoriam)
Dr. Renato Ventura Bayan Henriques
Dra. Sandra Baldassarri

Software Usage Manual


1 Introduction
2 Editor interface
2.1   Scene editing area
2.2   Application file buttons
2.2.1   Application Name
2.3   Scene control buttons
2.4   Screen aspect ratio buttons
2.5   Element buttons
2.5.1    Scene Configuration
2.5.2    Add Text
2.5.3    Add Image
2.5.4    Add Video
2.5.5    Add Interaction Area
2.5.6    Configure Feedback
2.5.7    List of Fiducials
2.5.8    Configure Requirements
3 Emulator
4 Guide for creating applications
5 Image Animation

1 Introduction

Eduba is an Editor of Tangible and Electronic Educational Resources that allows the creation of activities for a tangible tabletop. The editor is part of Nidaba Project, developed on the Post-Graduation Program “Computing for Educational Purposes” (PPGIE), in the Federal University of Rio Grande do Sul (UFRGS). The project was given its name in reference to the schools dedicated to Nidaba, the Sumerian goddess of writing, learning and astrology, acting as instructor and guardian of knowledge for both men and gods. The Sumerians invented writing between 3500-3000 BC as a way of communicating for trading. The cuneiform writing used clay impressions and its oldest known form were pictographs – symbols that represented objects and concepts. The schools dedicated to Nidaba were called E-DUB-A, and this way, Nidaba became the deity of literacy and patron of the art of writing. Our Nidaba system intends to, by assuming this name, recover the pictographic power in the representation of knowledge and of tangible objects, the same way clay tablets acted as support in the past. All these elements will be presented in this tabletop, now renewed and diversified with pictograms, sounds, animations and tangible objects.

The Editor is based in a web interface and the activities are formed by a set of scenes. In each scene, a series of elements is selected: a background image, a narration audio or explanation and all the other images that compose the scenario, these having the possibility of either being animated or not. When there’s interaction with tangible objects, its areas are delimited and the configuration of the correct and incorrect fiducial markers (img. 1) are displayed, thus, there’s a respective auditive or visual feedback for each answer. These fiducial markers are fixated in the base of real objects that interact with the tangible tabletop.

Image 1 – Fiducial Markers fixated n the base of real objects

On Eduba Editor’s starting screen (img. 2) it is possible to choose its language (Portuguese, English or Spanish), Create New Application or Load Existing Application.

Image 2 – Eduba’s starting screen

2 Editor interface

By creating a new application, it is requested that you inform its name and we recommend that you don’t use special characters such as blank spaces, cedilla, or punctuation marks, because otherwise the file could present problems if starting in another computer. In case these characters are used, the system will automatically replace them for hyphens.

After creating or loading an application, the editor interface (img. 3) presents to the center, the scene being edited.
On the top bar of the interface, the buttons are related to the application file, to the scene control and to the screen proportion.
On the left bar, you can find the tools used to compose a scene.
On the right bar, you can find the properties of the element that is selected.

Image 3 – Eduba’s editor interface

2.1 Scene editing area

Scene elements must be inserted in the central area of the editor. They can be selected in the element button bar, which is to the left of the editor. When selecting an element in the bar, you must click on the scene's editing area and define its position. You can do so by dragging it, defining its size, resizing it with the mouse, either from its edges or by defining its properties on the right part of the interface.

Clicking on the Eduba Editor icon , in the upper left corner, the system help will be displayed, with the software usage manual.

2.2 Application file buttons

On the left part of the top bar, there are the buttons related to the application file:

2.2.1 Application Name

The application name appears next to the application file buttons.
By clicking on the application name, a link for viewing it in the emulator appears. This link can be sent to people who do not have access to Eduba Editor.
This link only allows people to view the application, it does not grant editor permissions.

2.3 Scene control buttons

In the center top bar are the scene control buttons. An application is a set of scenes, which are displayed according to the desired order:

2.4 Screen aspect ratio buttons

In the upper right part of the screen are the screen proportion buttons, so that it is in accordance with both the tangible tabletop and projector proportions. The first application detail that should be edited is the resolution, in case the proportion is important and you wish to avoid distortions. This is important especially if you intend to insert circles or images of people:

2.5 Element buttons

In each scene, the elements that make up the scenes can be defined and inserted from the element bar, on the left of the screen. When selecting an element, its properties are displayed in the area to the right of the screen.

2.5.1 Scene Configuration

The Configure Scene button allows you to define the scene properties:

2.5.2 Add Text

The Add Text button allows you to add text to the scene and define X, Y position, color, size, text and font. It allows you to change the order of placement in the scene: bring it forward, send it back, copy and delete the object.

2.5.3 Add Image

The Add Image button (Element Buttons) allows you to add an image to the scene. It is recommended to use images in .PNG or .GIF format (it accepts animated GIFs) with a transparent background, if the background of the scene is not entirely white.

You can drag and resize the image or manually enter the values of the X and Y coordinates and the Width and Height in the image properties. If you manually change the width, the height will be automatically adjusted to maintain the aspect ratio. If you change the height, the aspect ratio will not be maintained.

The image can be changed by clicking on the (Image: ) Change Image button in the Image Properties.

There are buttons that allow you to delete the image element from the scene, change the placement order in the scene: bring it forward and send it back, horizontally or vertically mirror, rotate 45º and copy the element to be pasted in the same scene or in another scene. If it is in the same scene, it will be pasted in the position where you clicked. If it is in another scene, it will be pasted in exactly the same original position, regardless of where it was clicked.

2.5.4 Add Video

The Add Video button allows you to add a video to the scene, defining its start time, play speed, volume (0 to 100) and whether it will run once or if it will be repeated indefinitely. Allows you to change the placement order in the scene: bring it forward or send it back, copy or delete the object.

2.5.5 Add Interaction Area

The Add Interaction Area button adds an interaction area through the fiducial markers in the application.
The principle of interaction on a tangible tabletop is based on placing real objects with fiducial markers (identified with numbers from 1 to 40) on specific areas of interaction on the surface of the tangible tabletop.
This interaction defines the positions and coordinates of these areas, which are the correct and incorrect fiducial marking elements and the respective sounds that will be played and the respective images that will be displayed.

Background image of the area: allows you to choose (optionally) a background image for the area. This image will always be displayed in the interaction zone, but can be changed after fiducials are placed.

After adding and positioning the interaction area in the appropriate place, it is necessary to define::

For the interaction to occur, it is necessary to define one or more correct or incorrect fiducial markers for the area:

You can add multiple fiducial lists. Usually, an area has at least one correct trust and an asterisk (* - all others that are not correct) for incorrect fiducials, but several lists can be defined with correct and incorrect trust.
The execution of the application executes and gives feedback to the first list that satisfies the correct condition.
If two or more incorrect lists have the same parameters, the first time executes the first list, the second time the second list, the third time the third list, and so on until the number of lists is completely executed, always repeating the latter, when it exceeds the number of lists. This is useful to allow different error feedbacks, such as changing the explanation as the errors are repeated, and even being able to skip to a scene (by defining the "Next scene") with more detailed explanation, tips and lessons

2.5.6 Configure Feedback

The Configure Feedback button allows you to configure (optionally) a generic feedback audio and image for all successes and errors in the interaction areas of the scene, according to the fiducial placed in the area.
If the audio is the same for all fiducials, instead of configuring it in each area of interaction and each list of fiducials, it allows defining the following topics in the feedback:

2.5.7 List of Fiducials

The Fiducial List button   allows you to register meaningful names for trustees to facilitate filling in fiducial lists. All fiducials that are used in the application will be automatically included in this list. The trustee's identification number is in the text box on the left and the name of the trustee is in the right text box. Optionally, the name of the fiducial marker can be changed to make it more meaningful.

2.5.8 Configure Requirements

The requirements are to create activities respecting the sequence of scenes, such as, for example, a cake recipe where flour, milk, eggs and finally yeast must go respectively.
To do this, requirements must be created in the Requirements List by clicking on Add Requirement and changing the names to meaningful names.

When requirements are needed, the list of fiducials in the fiducial area presents new fields related to it:

For example, in the case of a cake recipe with flour, milk, eggs and yeast, a Fiducial Area with 4 Fiducial lists with their respective error sounds should be added:

3 Emulator

Eduba Editor has an emulator that allows you to run and test applications without needing a tangible tabletop, on a computer or tablet.

By clicking on the Show ccene button you can test the applications running by the Emulator. To maintain the aspect ratio of the screen and have a better view, it’s recommended to use full screen view in your browser (press F11 to display the full screen).
Figure 4 shows the emulator screen, with the application's fiducials at the bottom. .

Figure 4 - Emulator

At the bottom, you will find squares that represent the fiducials. Drag the one that represents a certain fiducial to its respective application area for the interaction to occur. You have to position it over the interaction areas.
You can either drag a fiducial square or simply click on it and then on the desired area. You can change the orientation of a fiducial square by rotating it with a click on the upper right corner.

During execution, the following functionalities can be used according to the pressed key:

4 Guide for creating applications

To create an application for a tangible tabletop, you must:

5 Image Animation

It is possible to animate images in Eduba Editor.

Appearing Animation - Zoom In

The most basic animation is the one in which an image simply appears on the screen.
To do it, just Add Animation Type: Disappear, so that the image does not appear when the scene is displayed. Add Animation Type: Zoom In - Time: 2 seconds.
With that, the image will pop up on the scene with a 2 seconds duration zoom in.

Motion Animation

Another basic animation can be achieved by moving the image from the current position to a new one. To do this, simply Add Animation Type: Movement - Time: 1 second (or the desired time - the longer the time, the slower the animation will be) and drag the image to the desired position. If you need to, you can resize the image.

Animation of entering the scene

An animation in which the image enters the scene from the left to the center of the screen.
To do this, just add an image and add an animation Type: Motion
- Time: 3 seconds and change the starting position of the image X: -210. Note that the example image is 207 pixels wide, so the starting position X must be either 207 pixels or any other amount to the left of the screen border, so we use the (negative) value of 210. That is, the image will be -210 pixels from the left edge of the screen when the scene is displayed, therefore being outside the visible area of the scene. With the animation, it moves to the final position set in the animation, appearing on the scene.

Animation of appearing on the scene

One interesting animation is the one in which the image appears on the screen by gradually increasing its size, giving the impression that it is coming from far away. To animate an image this way, you will choose, for example, an image of a forest to be the background image and an image of a monkey that will appear on the screen.

In Eduba Editor, choose the background image (1), click on the Add Image button (2) and then click on the position where the image should be inserted (3).

With the monkey image selected, the Image Properties will appear in the right panel.

Click Add Animation (1) and choose Disappear (2), so that the image is not displayed with the scene.

Click again on Add Animation (3) and choose Zoom In, with Time of 2 seconds (4).

We can also add a motion animation.

Click on Add Animation (1) and choose the Type: Movement (2). Drag the image to the desired position (3) and change its size (4). Choose how long this animation should last: 3 seconds (5).

Done! We have a basic animation.

Just test it by clicking on the Show scene button ( 4 ).

If you wanted to, you could have added an audio for each animation, which would be played during the animation. To include an audio, you must click on the audio choice icon for each animation.

We can continue the animation in the same scene or in a new one. An easy way to make animations by changing images is in a new scene.

Instead of creating it from the start, we are going to duplicate the current scene to take advantage of the background image and image positioning. To duplicate the scene, just click on the Duplicate Scene button.

Be sure you are in scene_2 before proceeding (1), since we are going to continue the animation, the initial image position must be the same as its final position in the previous scene.
Copy the values of Final X, Final Y, Final Width, Final Height, typing in the fields X (2), Y (3), Width (4), Height (5).
Delete all previous animations (6, 7 and 8).

Change the image of the monkey to an image of his back, for example.

Click on Add Animation (1), choose the Type: Movement (2), drag the image to the final position (3) and change its size (4), so that it is very small, giving the impression of it being far away. Change the Animation Duration Time to 2 seconds (5).
Add one more animation (6) and choose Type: Zoom out (7), so that the image is reduced until it disappears. Set the animation time to last 2 seconds (8). .

Now, all you need to do is just define the transition from scene_1 to scene_2.
Go back to scene_1 and in the Scene Properties menu, choose the Next scene: cena_2, Go after: 6 seconds .

Techniques with image editing

For the animation, some image editing techniques can be useful.
We used the image of the monkey, with a transparent background saved in a PNG format.
To make the monkey look like it’s turned on its back, we painted its face and belly in brown and painted its ears in pink, along with some details of its tail being over its hands .


Creating Animated GIFs

Another technique that can be used is to create an animated GIF from the image. To do this, simply mirror the image horizontally and save it under another name.


On the website, it is possible to create an animated GIF by uploading 2 or more images.

AThus, the monkey will look like it’s moving all the time. In Eduba Editor, an animated GIF can be used instead a PNG static image.