Support

Touch

Touch makes it is possible to create touch-enabled multi-level menus without doing any programming at all. In this tutorial, we will create a simple quiz to serve as an example for creating touch digital signage that responds to users touching or clicking.

Before we get started, check out the quiz yourself! (you can use the mouse to click on the buttons).

Touch Activity diagram

We’ve made a workflow diagram of the quiz to give you a better understanding of the possible paths users can take. The rectangles represent slides, the circles represent buttons, and the arrows point where clicking or touching the button will take the user.

Digital Signage Touch Workflow diagram

Slides

As seen in the diagram above, the quiz contains 6 different slides:

  1. Landing/start page
  2. First question
  3. The correct answer of the first question
  4. Second question
  5. The correct answer of the second question
  6. Incorrect answer

Creating the slides

When creating touch interfaces, you often don’t have the final picture in your head. I’d recommend creating all the slides before linking them together with click actions because adding click actions require you to select a specific slide. If you don’t have the full picture yet, then the order of your slides might change, therefore it is easier to create all slides first and then wire the click actions.

Adding click actions

You can add click actions to individual elements (such as image, text, rectangle, etc…) or you can use a ‘button’ element. The button element is actually a transparent element that you can position above other elements to react to touch events. In this quiz, our buttons are made up of rectangles and text positioned on top of it. Rather than assigning a click action to both the rectangle and text element, we add a button element on top of them and assign a click action to the button element instead.

We position the button element above the button and assign an action to jump to slide 2 when clicked.

Assigning click actions to your touch digital signage

Now that all slides are created, we go through all buttons and point them to the appropriate slide as shown in the workflow diagram. Buttons with incorrect answers point to a slide where “Wrong answer” is shown to the user and they can re-take the quiz. Buttons with correct answers point to a slide where “Correct answer” is shown and they can proceed to the next question.

Reset to a landing page

Sometimes users start the quiz but leave halfway through. We want the quiz to reset to the beginning after some time of inactivity. To do this, we’re going to use the slide duration and functionality to override which slide is played after.

We’re going to assume that if the user has not clicked on a button for 1 minute, then they have left the stand. So, we’re going to set the duration of the slides to 1 minute. Since we want the playlist to reset to the first slide, we also set the option “After this slide play slide” to value “Slide 1”, otherwise by default it would play the next slide (you can find this option also in the slide settings dialog under “Advanced” section).

Setting which slide to play

Once you have changed default behavior (by default it always plays next slide), a small arrow appears in the slide thumbnail. When you mouse over it, it indicates which slide is played after that slide:

Which slide is played next

If you don’t need to reset the playlist back to the initial state, you can simply set all slides to “play forever”.

Get this playlist

You can clone this quiz example to your account to see and change it yourself. To do that, navigate to the “Playlists” page on our web portal, click on the “From template” button and find the “Touch” tab. Click on the “Touch Quiz” playlist to clone it to your account.

FAQ

How do I prevent resetting the initial slide while the user is interacting with it? Link

As in this example, we want the playlist to reset back to the landing slide after some time of inactivity. A common use-case is to include a web form for users to fill out, but if the user is slow filling out the form, how do we prevent the playlist from resetting back to the initial state while the user is halfway through filling the form (or interacting with a website)?

There is a setting called “interaction delay” for playlists, you can find it in the playlist settings dialog (where you’d rename the playlist) under the “advanced” section. Interaction delay effectively delays the next slide from being played each time the user touches/clicks on the screen.

NB! This feature is NOT supported on web preview and Android (including FireTV) players.

Suppose you had a slide with 60 seconds duration – after 60 seconds of inactivity, it would reset back to the first slide. Suppose we set the interaction delay of the slide to 20 seconds. Now if the user touches/types/clicks on the screen while the slide has less than 20 seconds of playtime left, the playtime would be set back to 20 seconds on every interaction (and it would start ticking down from 20 seconds again). If the user interacts with the slide while it has more than 20 seconds of playtime left, the setting has no effect. A good value for interaction delay really depends on how frequently you expect the users to touch the screen.