USB push buttons

This page is related to Interactivity via USB.

Introduction

A USB push-button is a small device that is designed to be connected to a computer or other electronic device via a USB port. It typically consists of a plastic casing that encloses a small circuit board, a push-button switch, and a USB connector. When the button is pressed, the switch completes an electrical circuit and sends a signal to the computer or device that is connected to the USB port. Some USB push buttons may also feature additional functions, such as built-in LEDs or programmable buttons that can be customized to perform specific tasks or functions.

USB push buttons are commonly used as input devices in a variety of applications, such as:

Alarm triggering
Control the media playback
Launch a specific content (e.g., video, playlist, corporate website, etc.)
and many more...

A USB pushbutton that can be used with the HMP as an input device, giving a touch of interactivity to your display, where a push of a button would send a user-configured command to the player, which would then switch from the displaying the regular content to displaying a particular content.

Compatible devices

The HMP is compatible with any USB push-button that offers standard HID keyboard emulation.

USB devices requiring custom drivers are not supported, for security reasons.

USB Button

We have successfully tested this USB Button from Ultimarc (see its dedicated website here) and made the tutorial below. It offers the possibility to program two keys sequences to be sent over USB, either on every press, on alternative presses, or on short/long presses. It also features a built-in LED, which color could be different when the button is released or pressed.

This product, or similar ones, can be found on other websites as well.

Tutorial

This tutorial explains how to program the USB Button device, create an interactive project in Elementi, and test everything with a player.

Difficulty: Medium.
Total duration: 10–15 minutes.
Requirements:
- USB Button device (Configuration utility installer, User Manual)
- Elementi software
- HMP400/W (with DSOS KIOSK or SYSTEMS license), HMP350, or HMP300
- Displaying device

Getting started

Connect the USB Button device to the USB port of your PC.
Download the USB Button Configuration Utility installer and run it.
Once the installation is completed, open the "USB_Button" application.
- The status message at the bottom of the window should say "USBButton attached" or "Device attached" - if not, reconnect the USB Button or try another USB port.
Open the File menu and check whether "Upgrade Firmware" option is active - if so, upgrade the device firmware.

Program the button

Configure the key sequences to be sent by the USB Button.
1. Select "Set Primary" radio button.
2. Click on a cell in the table below the radio buttons and pick an option from the drop-down menu. All keyboard keys are offered, including some multimedia control keys.
  For this tutorial, we selected the F5 key.
3. If you want more keys to be sent, repeat the above step as needed. The keys are sent from left to right, row by row.
4. Select "Set Secondary" radio button and do the same steps as above.
  For this tutorial, we selected the F6 key.
Configure the operation mode of the button from the following 3 modes:
- Extended: sends both sequences on every press
- Alternate: sends primary then secondary on alternate presses
- Both: Send primary on short press, secondary on long press
For this tutorial, we selected "Both".
Configure the color of the button's LED while released or pressed.
1. Select "Set Released Color" radio button and move the three RGB sliders to obtain the desired color.
2. Select "Set Pressed Color" radio button and move the three RGB sliders to obtain the desired color.
Click on the Program Button to save the configuration on the device.
- The status message at the bottom of the window changes to "Programming", then to "Device Programmed", indicating that the USB Button device is properly set and ready to use.

Elementi project

Hospitality Screen Interactive EN

Version: 1.0 (revision history)

Release date: 2023-05-04

The next step is to create an Elementi project that reacts to a press of the USB Button by changing a part of the content, for instance an image, to another image, some text, a video, a layout, a playlist, etc. We'll be using the Key to Switch widget to accomplish this. A sample project can be downloaded from the right. Of course, other input devices generating key-press events, like keyboards, could also be used with this project.

Here are the steps to follow:

Create a new project.
For more details on this subject, check out "My first Elementi project" tutorial as well.

The interactive project must have an indefinite duration for the interactive events to be correctly processed.
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 is automatically opened in the Preview panel. The rightmost tab in the Browse panel takes the name of the project.
Import media content
1. Right-click within the Browse panel, select the "New Collection..." option, and give it a name, like "Images".
2. Double-click on its icon to open it.
3. Drag and drop three images from Windows Explorer into the Browse panel.
  For more details about this step, see this video tutorial about importing media into the project.
Import the interactive widget
1. Click on the "Widgets" tab in the Browse panel and open the "Interactivity" folder.
2. Drag & drop the "Key to Switch" widget from the Browse panel into the Preview panel (or Edit panel) to import it into the project.
3. Adjust the size and position of the widget layer within the Preview panel, if needed.
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.
Set up the interactive widget.
1. Double-click on the "Key to Switch" layer within the Edit panel to open the widget.
2. If needed, select a transition effect to be applied when switching the content.
3. Click on the "Mappings" tab.
4. Remove all the existing text layers.
5. Double-click on the "Images" collection in the Browse panel.
6. Select all three images, then drag and drop them within the Edit panel.
7. Reorder them if necessary - the first image is the content shown by default.
8. Next to the image to be shown when the button is short-pressed, set the key identifier to F5 (as set within the USB Button configuration utility application).
9. Click the wheel button to open the Layer Properties dialog for this media layer, and specify a duration, like 10s.
  This way, the image is shown for 10 seconds, after which the widget will switch back to the default content.
10. Next to the image to be shown when the button is long-pressed, set the key identifier to F6.
11. Click the wheel button to open the Layer Properties dialog for this media layer, and specify a duration, like 10s.
12. Select all three media layers, click the "Media Fit" button on the toolbar, and select "Slice".
  This ensures that these images fill up the entire widget area, regardless of their aspect ratio.
Test the interactive project in Elementi.
1. Enable the interactive mode by pressing the F12 key (full-screen preview) or by clicking on the "hand" button within the Preview panel.
2. Press the F5 & F6 keys, and check that a different image is shown instead of the default one.
You could further improve the content, for instance, by adding a layout in the background, containing a logo, some text (like opening hours), a weather widget, a Date Time widget, custom fonts, etc., as we did in the sample project above.
Click the "Save" button.

Test on the player

The final step is to test the project and the USB push button with a player.

Connect the USB Button to your HMP player's USB port.
Configure the player for interactivity.
Publish the project on your HMP player.
Press briefly the button and check that the image displayed on the screen changes.
Press and hold the button for around 3 seconds and check that the other image is displayed.