Elementi layers

From SpinetiX Support Wiki

Jump to: navigation, search

This page is about content created within Elementi. For developers, there is an advanced page regarding jSignage layers.


A layer can be broadly defined as a rectangular region on the screen where something is shown for a certain amount of time - such as text, image, video, layout, playlist etc. A layer can be opaque, like a video layer, but most layers, such as text areas, are at least partially transparent, letting the background or other layers below it to be showed through.

Elementi layouts and widgets are made of one or multiple layers, stacked on top of each other. The order of the layers determine their appearance within the final scene - the one at the bottom of the pile is placed first, then the next one on top of it, and so on. To change the order of the layers, simply drag and drop the layer within the Edit panel.

Some graphical aspects of the layer can be changed from the Preview panel, like: position on the screen, size, alignment etc. For fine-tuning, click on the Elementi Icons Layer Properties.png button (it opens the "Layer Properties" dialog) within the Edit panel and edit that layer properties, like begin time, duration, opacity, alignment, position, box format, effects etc.


There are four types of layers: text, media, streaming and web page; depending on the project target model, the streaming and web page layers might not be available.

Text layer

This layer allows displaying formatted text; to add a text layer, click the "Add Text Layer" button on the toolbar (or right-click within the Edit panel).

The content of the layer can be edited both from the Preview panel or the Layer Properties dialog. The following styling properties can be changed by the user at the character level: font type and size, text style (boldface, italic), text color - using the Preview panel buttons or the Layer Properties dialog. Additionally, the entire text can get a border, a gradient fill and / or a shadow effect - this is done from the Layer Properties dialog.

Media layer

This layer allows displaying a multimedia resource, which could be a common media file (image, video, audio) or an Elementi media (layout, playlist, schedule, widget).

To add a media layer, click the "Add Media Layer" button on the toolbar (or right-click within the Edit panel), and specify its URI address - it can be a local file (e.g., "media/img.png") or a resource located on the remote server (e.g., "http://server_name/resource_path"). For more details, see how to display media content tutorial.

The way the media is fitted (fill, meet, or slice) and aligned within the layer area can be changed from the Preview panel or the Layer Properties dialog.

Streaming layer

Add a streaming layer
This layer type is not available for HMP300 projects.

This type of layer is useful for displaying real-time streaming media.

To add a streaming layer, click the "Add Streaming Layer" button on the toolbar and enter the stream URI (as RTSP, RTP, or UDP address) within the pop-up dialog.

Note Note:
For more details, see the tutorial about how to display streaming media content.

Web page layer

This layer type is only available for HMP350 and HMP300, starting with Elementi 2015.

This layer allows displaying a static or semi-static web page - for that, follow these steps:

  1. Click the "Add Web Page Layer" button on the toolbar.
    • Alternatively, right-click within the Edit panel and select "Insert Web Page Layer".
  2. Enter the web page URI within the pop-up dialog and then click the "OK" button.
  3. Position the new layer within the Preview panel
  4. Web pages are generally not designed to be displayed on digital signage screens, so it may be necessary to fine-tune the Web Page Layer properties:
    • "Enable Web Security" check-box might need to be disabled for to correctly display a web page having external AJAX requests or requiring redirecting to another page.
    • "frameWidth" attribute might need to be set for a correct display of responsive web sites.
    • "scrollY" attribute might need to be adjusted in case the size of the web page does not fit in the layer area.
  5. Save the changes to your project.

Note Notes:
  • The rendering of the web page uses Phantom.js both in Elementi and on the HMP. Most of the common HTML5 features are supported by the player, however the rendering speed of the web page is approximately the same as for an iPhone 4.
    • Phantom.js 2.1.1 is used within firmware 4.1.x and Elementi 2016.
    • Phantom.js 1.9.8 is used within firmware 4.0.x and Elementi 2015.
  • Extensive list of supported HTML5 features when rendering a web page can be found in this screenshot. Be aware that this is only the result of the web page rendering test, the HMP350 / HMP300 fully support natively all SVG rendering features, including video and audio using media layers.
This page was last modified on 30 March 2017, at 14:10.