Interactive widgets

This page is related to Elementi Widgets and interactivity.

Introduction

Empower your visitors on site with the right tools. The interactive widgets have been designed to facilitate creating interactive digital signage projects. For example, they help you get feedback from your audience or provide useful information like way-finding with an interactive twist.

Most of these widgets display a default content "page" (can be a media file, a Playlist, a Layout etc.) which gets replaced by a different one whenever a button is clicked, a key is pressed, or an action trigger is activated.

Elementi software comes with a several interactive widgets, found under the "Interactivity" folder, accessible from "Widgets" / "Library" tab within the Browse panel.

Built-in widgets

Interactive widgets

• Feedback (New in Elementi 2018)

  Displays three smileys to get the visitor feedback; when clicking a smiley, a vote is added to the database and optionally the feedback results are displayed.

• Menu Horizontal (New in Elementi 2018)

  Displays a horizontal toolbar at the top or bottom of a default content; when clicking a menu item, the mapped content page is shown instead of the default content.

• Menu Vertical (New in Elementi 2018)

  Displays a vertical toolbar on the left or right side of a default content; when clicking a menu item, the mapped content page is shown instead of the default content.

• Click to Switch

  Displays buttons and a default content; when clicking a button, the mapped content page is shown instead of the default content.

• Click Through

  Displays only buttons as default content; when clicking a button, the mapped content page is shown instead.

• Click to Action

  Displays only buttons as default content; when clicking a button, the associated action trigger is set to the mapped value. It works best with "Action to Switch" widget and can be used to create interactive content across multiple devices.

• Virtual Keyboard

  Displays an interactive virtual keyboard that generates key press events; works best with "Key to Switch" widget on touchscreens where there is no keyboard connected to the player.

• Key to Switch

  Displays a default content and listens to key press events; when a predefined key is pressed, the mapped content page is shown instead of the default content.

• Key to Action

  Listens to key press events; when a predefined key is pressed, the associated action trigger is set to the mapped value. It works best with "Action to Switch" widget and can be used to create interactive content across multiple devices.

• Action to Switch

  Displays a default content and interactively loads predefined content "pages" whenever the associated action trigger is updated.

• Media Playback

  Displays a media (image or video) which can be paused or played by setting the associated action trigger to "PAUSE" or "PLAY".

The following widgets are only included in Elementi X:

• Click to Script

  Displays buttons as default content; when clicking a button, the associated JavaScript code is executed.

• Key to Script

  Listens to key press events; when a predefined key is pressed the associated JavaScript code is executed.

Feedback

Added in Elementi 2018.

Feedback widget

Feedback widget results

This interactive widget displays three smileys to get the visitor feedback; when clicking a smiley, a vote is added to the database and optionally the feedback results are displayed.

Configuration

• Locale

  Select the locale used for displaying the voting percentages.

• Header

  Enter the text displayed while waiting for a vote.

• Feedback
  • Text

    Enter the text displayed after a vote.

  • Duration

    Enter the display duration of the feedback text and results (if enabled).

  • Show results

    Enable / disable showing the feedback results.

  • Filter

    Select the filter applied on the vote set between: "None", "Current month", "Today" (default), and "Last hour".

• Storage
  • Key

    Enter a key name ("demo" by default) under which the feedback votes are stored. Use different key names to separate the results of different polls.

  • Limit

    Enter the maximum number of votes to be taken into consideration. Tip: Set this to 1 to remove the existing votes.

The feedback data is stored under a Shared Variable named jSignage:UI:feedbackResults:, followed by the name entered in the widget (by default "demo") as an array of objects, each containing a timestamp and a numeric value (where 0 = sad, 1=normal, 2=happy). The raw data can be retrieved through the Web Storage REST API for further processing.

Menu Horizontal

Added in Elementi 2018.

Menu Horizontal widget

This interactive widget displays a horizontal toolbar at the top or bottom of a default content; when clicking a menu item, the mapped content page is shown instead of the default content.

Configuration

• Transition

  Click on the button (it opens the "Transition Properties" dialog) and select a transition effect and its properties.

• Menu
  • Position

    Select the menu position between "Top" and "Bottom" (default).

  • Size

    Select the menu size between "Large" (default) and "Small".

  • Number of columns

    Enter the number of columns to display on the screen. If the number of predefined pages is larger, then the menu becomes scrollable.

  • Spacing

    Enter the percentage of the menu height to be added as empty space margin around the menu items. Default: '0%'. Tip: enter a positive value to create tabs!

• Finger touch
  • Show

    Enable / disable showing a moving finger touch icon.

  • Delay

    Enter the delay after which to show the finger touch icon. The counter is reset after each mouse down event.

  • Animate

    Enable / disable the finger touch icon animation.

Menu Vertical

Added in Elementi 2018.

Menu Vertical widget

This interactive widget displays a vertical toolbar on the left or right side of a default content; when clicking a menu item, the mapped content page is shown instead of the default content.

Configuration

• Locale

  Select the locale used for displaying the page numbers.

• Transition

  Click on the button (it opens the "Transition Properties" dialog) and select a transition effect and its properties.

• Menu
  • Position

    Select the menu position between "Left Top", "Left Center" (default), "Left Bottom", "Right Top", "Right Center", and "Right Bottom".

  • Size

    Select the menu size between "Large" (default) and "Small".

  • Number of rows

    Enter the number of rows to display on the screen. If the number of predefined pages is larger, then the menu becomes scrollable.

  • Spacing

    Enter the percentage of the menu height to be added as empty space margin around the menu items. Default: '8%'.

  • Show page number

    Enable / disable showing the page number next to the menu label.

  • Auto-hide labels

    Enable / disable whether the menu labels are automatically hidden.

  • Delay

    Enter the delay after which to hide the menu labels.

• Finger touch
  • Show

    Enable / disable showing a moving finger touch icon.

  • Delay

    Enter the delay after which to show the finger touch icon. The counter is reset after each mouse down event.

  • Animate

    Enable / disable the finger touch icon animation.

Click to Switch

This widget shows a default content and some navigation buttons - whenever a button is clicked, the content assigned to it will be displayed instead of the default one. To get back to the default content, each inner page must end after a certain period of time - a fixed duration might need to be set for that. The "Exit" button, ends the widget itself. This widget works best with a touchscreen.

Note:

See how to create an interactive travel project using "Click to Switch" widget.

Configuration

Properties:

• Transition

  Set the transition used when switching to another content "page".

• Switched layer

  This is a layer placeholder, useful for positioning the content area on the screen.

  In older versions of Elementi, this was also used to set the default content.

Mappings:

• Button

  Insert the button layers used to switch the content.

• Page

  Insert content layers to be displayed when clicking the associated button.

Notes:

• The first row is used to define the default content that should be played when the widget is opened. For simplicity, this is by default a text layer, nevertheless, it can be changed to any other type of layer (could be a text, an image, a video, a layout, a playlist, etc.). For instance, to have an image as default content, simply drag that image from Browse panel and drop it over the "Default Page" cell.
• The following rows are used to associate the buttons with the specific content to be displayed when clicking them. Both the button and the associated "page" can be changed as mentioned above. Note that if a fixed duration is set for the page, at the end of that period, the widget will switch back to the default content.
• More buttons can be added by adding more layers using the toolbar icons or drag & drop.
• An exit button, having "[CLOSE]" set as URI, is also included. Clicking the associated button ends the widget - this works best when the widget is included in other documents.

Click Through

This interactive widget can be used to display some navigation buttons as default content and interactively load other content "pages" whenever a button is clicked. To get back to the default content, each inner page must end after a certain period of time - a fixed duration might need to be set for that. This widget works best with a touchscreen.

Note:

This widget can only be used to create a one-level deep "menu" - for more levels, you can use the "Click to Switch" or "Action to Switch" widgets.

Configuration

This widget is a simplified version of the "Click to Switch" widget, detailed above.

Click to Action

This widget controls the modification of a Shared Variable using buttons clicked by the user. Each time a button is clicked the Shared Variable is set to the desired value. This widget can be used together with the Action to Switch to create interactive content across multiple devices for instance.

Configuration

• Shared Variable

  Enter the name of the Shared Variable to update.

Virtual Keyboard

This widget displays an interactive virtual keyboard that generates key press events, thus it can be used with a touch screen when there is no keyboard connected to the player. A simple way to use this widget, is to combine it with the "Key to Switch" widget.

Multiple keyboard layouts can be defined (switching between them is done by pressing the specially designated virtual keys) and the size of keys can be different.

Configuration

• Number of rows

  Enter the number of rows of keys to be displayed.

• Mappings

  Configure the different keyboard layouts (the first one is used as default). Each entry from the table corresponds to a keyboard layout.

  Each keyboard layout is composed of one or multiple lines of keys (usually the same number as specified on the Properties tab). Use one space character to separate keys and "//" to separate the lines of keys. For instance entering "7 8 9 // 4 5 6 // 1 2 3 // 0 [2]Enter" will display a typical numeric key pad.

  Use "Space", "Enter", "Shift" or a Unicode (e.g., U+0008 for backspace) to specify special keys.

  The look and / or the behavior of each key can be modified using [size] or [size->index] before the key. For instance, [5]Space displays a very large space button, and [2.5->1].?123 displays a larger "jump" key that switches to the second keyboard layout (the first row has index 0).

Key to Switch

This widget shows a default content and listens for keypress events - when a key is pressed, it checks whether that key is in the list of predefined key identifiers and if so, it displays the corresponding content. The widget reverts to the default content when the switched-to layer ends - a fixed duration might need to be set for that. This widget works best with an HID keyboard.

This widget is similar to the "Click Through" widget, except that key events are used instead of buttons.

Configuration

From the "Properties" tab, you can set the transition used when switching to another content "page".

From the "Mappings" tab, you can define which content to display depending on the pressed key.

• Key identifier

  Enter the key or key combination to react to. Examples of valid identifiers: A, Ctrl+A, Ctrl+Shift+S, 0, 1, 9, F5, U+000B (Backspace), U+0020 (Space), Enter, PageUp, PageDown etc. Note that lower-case letters are not valid identifiers.

• Page

  Define the content layer to be displayed when pressing the respective key identifier.

Key to Action

This widget controls the modification of a Shared Variable using a keyboard. Each time a key is pressed the Shared Variable is set to the desired value. This widget can be used together with the Action to Switch to create interactive content across multiple devices for instance.

Configuration

• Variable name

  Enter the name of the Shared Variable to update. When empty, the value from the previous row is used.

• Key identifier

  Enter the key or key combination to react to. Examples of valid identifiers: A, Ctrl+A, Ctrl+Shift+S, 0, 1, 9, F5, U+000B (Backspace), U+0020 (Space), Enter, PageUp, PageDown etc. Note that lower-case letters are not valid identifiers.

• Value

  Enter the value to which the shared variable is updated to.

Action to Switch

This widget shows a default content and listens for updates of the controlling Shared Variable - when an update is received, it checks whether that value is in the list of predefined "actions" and if so, it displays the corresponding content. The widget reverts to the default content when the switched-to layer ends (a fixed duration might need to be set for that) or when the value received is not part of the list of predefined "actions".

Note:

The Shared Variable can be updated from Click to Action or Key to Action widgets (they must configured to use the same Shared Variable name!) or from an external device through network interactivity.

Configuration

From the "Properties" tab, you can customize the widget options:

• Transition

  Set the transition used when switching to another content "page".

• Shared Variable

  Enter the name of the Shared Variable that controls the widget.

• Close action

  Enter the value for which the widget is forced to end.

• Multiscreen synchronization

  Set this on "true" in case of synchronized content.

• Start with default page

  When selected, the widget disregards previous updates and loads the default content page when opened.

From the "Mappings" tab, you can define which content to display depending on the Shared Variable value.

• Action

  Enter the string to compare the Shared Variable update value to.

• Page

  Define the content layer to be displayed when the Shared Variable value matches the value from the "Action" column.

Media Playback

This widget is used to interactively play, pause and resume a video or an animation, by setting the control Shared Variable to "PLAY", "PAUSE" or "TOGGLE". These commands can be followed by a number (of seconds) or a percentage in order to specify the position, relative to the beginning of the media, where the command should be applied. For instance, use:

• "PLAY 8.5" to start playing at second 8.5;
• "PLAY 50%" / "PAUSE 50%" to play / pause at the middle;
• "PAUSE 0" to pause on the first frame.

Configuration

• Shared Variable

  Enter the name of the Shared Variable used to control the media playback. This is called "playback" by default.

• Media

  Drag & drop the media that should be played.

• Multiscreen synchronization

  Select whether the Shared Variable updates should be time-synchronized. This should be set to "No", except for the case of multiscreen content.

• Optional playback reports

  The widget can also send playback reports (progress, status, current time position, and media duration) at regular intervals through another four Shared Variables.

Click to Script

Available only in Elementi X.

This widget controls the execution of a script using buttons clicked by the user. Each time a button is clicked a script is executed. The script can execute any jSignage action (for instance create or remove layers).

Configuration

• Include file

  Enter the path to a JavaScript file that implements the functions called when pressing any of the defined buttons.

Key to Script

Available only in Elementi X.

This widget controls the execution of a script using a keyboard. Each time a key is pressed a script is executed. The script can execute any jSignage action (for instance create or remove layers).

Configuration

• Include file

  Enter the path to a JavaScript file that implements the functions called when pressing any of the defined keys.

Mappings:

• Key identifier

  Enter the key or key combination to react to. Examples of valid identifiers: A, Ctrl+A, Ctrl+Shift+S, 0, 1, 9, F5, U+000B (Backspace), U+0020 (Space), Enter, PageUp, PageDown etc. Note that lower-case letters are not valid identifiers.

• JavaScript code

  Insert the JavaScript code to be executed when pressing the respective key identifier.

Tutorials

Travel agency

Here is how to create an interactive travel project using the "Click to Switch" widget and two images. A video and a sample project are included.

Motion detection

Here is how to create an interactive project for motion detection using the "Action to Switch" widget. A sample project is included.

Navigation menu

Let's say we want to have multiple pages of content, like on a website, that the user in front of the screen can navigate from a menu that changes depending on the selected page - for instance, the first page would have menu of main categories and when selecting one category, the menu would display subcategories or products. The basic steps to do this are the following:

1. Include one "Action to Switch" widget in your main index file. Open it.
2. Configure the name of the Shared Variable that controls it, for instance "menu".
3. Under the "Mappings" tab, define all the possible pages ("P1", "P2", ...) within this widget.
   • By default, the first page doesn't have an action associated - if you want to have buttons to navigate back to the main page from any other page, enter an action name for it (e.g., "home" or "P0"); you'll use that name later for the back buttons.
4. Create a home page layout to be shown as default content.
   • Import within a "Click to Action" widget and configure the buttons to show the categories names and the actions to be "P1", "P2" etc. Make sure to use the same Shared Variable name (e.g., "menu") within this widget.
5. Create a separate layout for each category using each time a new "Click to Action" widget to show a menu of products / subcategories for that category page. Make sure to use the same Shared Variable name (e.g., "menu") within.
6. Drag & drop all these layouts within the "Action to Switch" widget under the "Mappings" tab.
7. Test your interactive project by enabling the "touch screen mode" using the hand-like icon within the Preview panel.

See also

• How to configure the HMP for interactivity.
• Interactive playlist widgets for additional interactive widgets.
• JSignage:Interactivity and JSignage UI plugin for more advanced details about how these widgets were built.