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.

Description

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.

Types

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 - each character can have its own font (type and size), style (boldface, italic) or color. See more about working with text layers.

Add a text layer

To add a text layer, follow these steps:

  1. Click the "Add Text Layer" button on the toolbar.
    • Alternatively, right-click within the Edit panel and select "Insert Text Layer".
  2. Click the layer within the Preview panel, select the default "New text layer" content and type your text.
  3. Position the layer as necessary - for that move the mouse cursor close to the layer edges - you'll see it changing into a two-arrow cursor (allows resizing the layer) or four-arrow cursor (allows moving the layer).
  4. You can use the toolbar buttons to change the font type and size, text style (boldface, italic), color, or alignment.
  5. To fine-tune any of the layer options, click the Layer Properties button to open the Layer Properties dialog. For instance, from the the Text Format tab, you can set a border, a gradient fill and / or a shadow effect over the entire text.

Media layer

Add a media layer manually

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:

  1. Simply drag & drop the file from the Browse panel into the Preview panel or the Edit panel - that will automatically create a media layer.
    • You can also click the "Add Media Layer" button on the toolbar (or right-click within the Edit panel and select "Insert Media Layer"), and specify its URI, which can point to a file included into the project (e.g., "media/img.png") or to a resource located on the remote server (e.g., "http://server_name/resource_path").
  2. Use the toolbar buttons to change how the media is fitted (fill, meet, or slice) and aligned within the layer zone.
  3. To fine-tune any of the layer options, click the Layer Properties button to open the Layer Properties dialog.


Note Note:
For more details, see these tutorials: Display media content and My first Elementi project.

Streaming layer

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


This type of layer is an extension of the media layer for displaying real-time streaming media.

To add a streaming layer:

  1. Click the "Add Streaming Layer" button on the toolbar
    • Alternatively, right-click within the Edit panel and select "Insert Streaming Layer".
  2. Enter the stream URI within the pop-up dialog - it can be an RTSP, RTP, or UDP address.
    • For external RTSP sources that are not displayed, enable the "Use TCP transport (...)" option.
  3. Click "OK" button.
  4. Use the toolbar buttons to change how the streaming media is fitted (fill, meet, or slice) and aligned within the layer zone.
  5. To fine-tune any of the layer options, click the Layer Properties button to open the Layer Properties dialog.


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

Web page layer

Note  
This layer type is only available for HMP350 and HMP300, starting with Elementi 2015.
Add a Web Page layer


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 click the Layer Properties button and fine-tune the Web Page Layer properties, such as:
    • "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.


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 5 July 2018, at 11:43.