Create an interactive travel project

From SpinetiX Support Wiki

Jump to: navigation, search


Interactive project final result

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.

This interactive project is intended to be used on a touchscreen connected to the HMP.

Note Note:
For this tutorial, the project model was set to "HMP300", yet any other HMP device model (HMP350, HMP200, HMP130, HMP100) can be used as well.



  • Difficulty: Easy.
  • Total duration: 5-10 minutes.
  • Requirements:
    • Elementi 2015 or later (the latest version is recommended).
    • One or more HMP devices using firmware 3.2.0 or later (the latest version is recommended) for testing the project.

Getting started

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

Import the "Click to Switch" widget

Next, let's import the "Click to Switch" widget into the current project. For that, follow these steps:

  1. Click on the "Library" tab and browse to "Interactivity" folder.
  2. Drag & drop the "Click to Switch" widget from the Browse panel into Preview panel (or Edit panel) to import the widget into the project.
  3. Right-click on the widget layer within the Preview panel and select "Fit Screen" option.
  4. 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:

  1. Right-click within the Browse panel and select "New Collection..." option. Give it a name, like "media".
  2. Double-click on its icon to open it.
  3. Drag and drop the files from Windows Explorer into the Browse panel to import the files.

Set up the interactive widget

Set up the interactive widget - part 1
Set up the interactive widget - part 2
Interactive project final result

Next, let's set up the "Click to Switch" widget to use the media imported before. For that, follow these steps:

  1. 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.
  2. Click on the "Mappings" tab.
  3. Click on Elementi Icons Layer Properties.png (the "Layer Properties" button) for the first layer ("Default Page)". This opens the Layer Properties dialog.
  4. Click on the "Edit Text" tab and change the text to something like: "Check out our top destinations for this month!".
  5. Click on the "OK" button.
  6. Drag & drop the first image on top of the default "Page 1" layer.
  7. Click on Elementi Icons Layer Properties.png (the "Layer Properties" button) of this layer.
  8. 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.
  9. Click on the "OK" button.
  10. Drag & drop the second image on top of the default "Page 2" layer, and do the same adjustment (steps 7 to 9).

Note 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.

  1. Click on Elementi Icons Layer Properties.png (the "Layer Properties" button) for the first button layer ("Button 1)".
  2. Click on the "Edit Text" tab and change the text to "Bali".
  3. Click on Elementi Icons Layer Properties.png (the "Layer Properties" button) for the second button layer ("Button 2)".
  4. 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:

  1. Enable the interactive mode, by clicking on the "hand" button within the Preview panel.
  2. Click on the two buttons, "Bali" and "Maldives" and watch the text content being replaced by images.

To test this project on a touchscreen, follow these steps:

  1. Publish the interactive project to an HMP device (see "Publishing from Elementi" tutorial).
  2. Configure the HMP for interactivity

Note Note:
This interactive project can also be tested on a regular screen, but for that you need to use a USB mouse connected to the HMP and to add a mouse cursor to the interactive project.

See also

This page was last modified on 4 April 2017, at 17:41.