Create an interactive travel project
From SpinetiX Support Wiki
This tutorial explains how to create a simple interactive project for travel agencies in Elementi. The project has a main content area and two buttons on the side that allow changing the default content when clicking on them. For this project, we are going to use the "Click to Switch" interactive widget and two images which are displayed when clicking on the buttons.
Step-by-step instructions about how to create the interactive project are provided below, as well as a video tutorial. Otherwise, a sample project can be downloaded from the link below.
- Difficulty: Easy.
- Total duration: 5-10 minutes.
The first step is to create a new project and set its name, model, format and duration.
- If you need more details about this step, check out My first Elementi project tutorial as well.
- For this tutorial, "HMP300" was selected as model, but make sure to select the project model according to your HMP device model. The format was set to 16:9 and the duration to automatic.
Once the project has been created, double-click on its icon to open it.
- Inside the project there is a single file called "index.svg", which doesn't contain any layers for now (we'll take care of that later). This is the master layout.
- The rightmost tab in the Browse panel takes the name of the project and the index file is automatically opened in the Preview panel.
Import the interactive widget
Next, let's import the "Click to Switch" widget into the current project. For that, follow these steps:
- Click on the "Library" tab and browse to "Interactivity" folder.
- Drag & drop the "Click to Switch" widget from the Browse panel into Preview panel (or Edit panel) to import the widget into the project.
- Right-click on the widget layer within the Preview panel and select "Fit Screen" option.
- Click on the project tab (the rightmost one) in the Browse panel to get back to the project view. Notice that the widget file was automatically copied within.
Import media content
The next step is to import some media content into the project. To do so, follow these steps:
- Right-click within the Browse panel and select "New Collection..." option. Give it a name, like "media".
- Double-click on its icon to open it.
- Drag and drop the files from Windows Explorer into the Browse panel to import the files.
- For more details about this step, see this video tutorial about importing media into the project.
- For this tutorial, we'll use two images - you can also use videos, layouts or plain text.
Set up the interactive widget
Next, let's set up the "Click to Switch" widget to use the media imported before. For that, follow these steps:
- Double-click on the "Click to Switch" layer within the Edit panel.
- You can add a transition or modify the properties of the layer displaying the content if needed.
- Click on the "Mappings" tab.
- Click on (the "Layer Properties" button) for the first layer ("Default Page)". This opens the Layer Properties dialog.
- Click on the "Edit Text" tab and change the text to something like: "Check out our top destinations for this month!".
- Click on the "OK" button.
- Drag & drop the first image on top of the default "Page 1" layer.
- Click on (the "Layer Properties" button) of this layer.
- Set the "Media fit" to "Slice" by clicking on the third button. This is to ensure that the image fills up the entire layer, while keeping the image aspect.
- Click on the "OK" button.
- Drag & drop the second image on top of the default "Page 2" layer, and do the same adjustment (steps 7 to 9).
Note: If you specify a fixed duration for the image layers (e.g., under "Layer Properties", set Duration to "10s"), then the image is displayed for that amount of time and afterwards the widget switches back to the default text content.
Now, let's change the text on the buttons next.
- Click on (the "Layer Properties" button) for the first button layer ("Button 1)".
- Click on the "Edit Text" tab and change the text to "Bali".
- Click on (the "Layer Properties" button) for the second button layer ("Button 2)".
- Click on the "Edit Text" tab and change the text to "Maldives".
Since we don't need the exit button, because we are not using the widget inside a playlist, we can delete it - for that right-click on the button row and select "Delete".
Finally, click on the "Save" button on the toolbar to save all the changes.
Test the interactive project
To test this project in Elementi, follow these steps:
- Enable the interactive mode, by clicking on the "hand" button within the Preview panel.
- Click on the two buttons, "Bali" and "Maldives" and watch the text content being replaced by images.
- Publish the interactive project to an HMP device (see "Publishing from Elementi" tutorial).
- Configure the HMP for interactivity