Digital Signage Gets Physical - Part 3: The Button

The button, arguably the most basic of computer human interfaces. The button is a powerhouse in the kiosk industry with screens everywhere urging viewers to 'touch here to learn more'. While it's true the button is intrinsically boring, it's also an essential element to a kiosk design. This blog series has been focusing on how users interact with digital signage. In this post we will explore the utility of the button and how to turn your digital sign into an interactive kiosk.

When I think of a button I envision something like this red 'push me' button which hearkens back to my days in the arcade. In the modern era, however, the button has been assimilated right into the display itself. With touch screens there is no longer the requirement for a physical button, but rather an image resembling a button, somewhere on the screen which reacts to touch.

Enough button prologue, let's create a simple kiosk.

Demonstration

For the button demo we will create a simple template consisting of a slideshow zone along with two gadget zones for the buttons. The buttons will determine which image in the gallery is currently visible. Instead of an image, this could just as easily be a video or even an entirely different template triggered by the button press.

Step 1: Create a playlist

Log in to your Revel Digital account and create a new Slideshow playlist. The playlist will contain the images to display when a button is pressed.

Step 2: Add images to the playlist

Next, we need to add two images to the playlist, one for each button. Any image will do. Set the Display Duration to 1 second since we want the image to transition immediately when a button is pressed.

Each image will need to have a condition for When to play. To do this, select the Schedule tab when adding the playlist item. Then select Command as the condition type.

For the first image use 'button' as the command name, and '1' as the command argument as shown in the screenshot below.

Conditions determine when the item will play. In this case we want the image to play when a specific command is sent.

Do the same for the second image in the playlist, except this time use '2' as the command argument.

Step 3: Create a template

We need a template for the kiosk. The template will consist of a slideshow zone along with two gadget zones for the buttons.

Add a Slideshow zone to the template and make it the full size of the template. Assign the playlist we created in Step 2 to the zone.

Add a slideshow zone and two gadgets for the buttons

Next add two Gadgets to the template anywhere you like. The gadgets will need to have their source set to:

https://reveldigital.github.io/reveldigital-gadgets/button.xml

The button gadget has properties for command name and argument

Once the gadget source is set, the gadget properties will fill in. For the first gadget we will need to assign the Command to 'button', and the Argument as '1', as shown in the image. The second gadget will have the same properties with the exception of Argument which will be set to '2'.

Step 4: Schedule and enjoy

Now just schedule your template to any touch enabled player. Pressing a button will trigger the corresponding content to play.

Voilà, a basic kiosk with no programming required!