Elementi layers

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

Introduction

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. 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.

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 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.

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 button to open the Layer Properties dialog. For instance, from 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 button to open the Layer Properties dialog.

Note:

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

Streaming layer

 

Applies to HMP400/W and iBX players (DSOS SYSTEMS) and HMP350.

Add a streaming layer

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.
3. For external RTSP sources, make sure to enable the "Use TCP transport (...)" option.
4. Click the "OK" button.
5. Use the toolbar buttons to change how the streaming media is fitted (fill, meet, or slice) and aligned within the layer zone.
6. To fine-tune any of the layer options, click the button to open the Layer Properties dialog.

Notes:

• This layer type is not available for HMP300 projects.
• See also the tutorial about how to display streaming media content and what shall be done in the case of multiscreen streaming.

Web page layer

 

Applies to HMP400/W and iBX players (DSOS KIOSK or higher), HMP350, and HMP300.

Add a Web Page layer

This layer allows displaying a 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 button and fine-tune the Web Page Layer properties, such as:
   • "frameWidth" attribute might need to be set for a correct display of responsive websites.
   • "scrollY" attributes might need to be adjusted in case the size of the web page does not fit in the layer area.
   • "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. This option and "zoom" attribute were removed starting with Elementi 2020.

Notes:

• For HMP400/W and iBX players, the Elementi project must be of type DSOS Kiosk or DSOS Systems for the layer button to be enabled.
• This layer type was first added in Elementi 2015 for HMP350 and HMP300 projects.
• Displaying highly dynamic websites, like those where all the content is generated through JavaScript, including the animations, through the Web Page layer might not work on the HMP300 and HMP350, because of the limited support and resources required in the process. See "Web content" page for more details.
• The pseudo-HTML engine on HMP350 and HMP300 players is based on PhantomJS, which is deprecated as of firmware 4.7.1 and may be removed in a future firmware version for these devices. See SpinetiX-SA-21:01 security advisory for more details.

Video input layer

 

Applies to HMP400/W and iBX players (DSOS WIDGETS or higher). The video input is a Technology Preview Feature.

Added in Elementi 2021 Update 7, this type of layer is an extension of the media layer for the playback of content generated by audio/video capture devices connected via USB to the player.

Add a Video Input layer

To add a video-input layer, follow these steps:

1. Click the "Add Video Input Layer" button on the toolbar.
   • You can also right-click within the Edit panel and select "Insert Video Input Layer..." option.
2. In the popup dialog, configure the video-input options, as follows:
   • Source → select "Default" (stands for the first USB capturing device discovered by the player) or a numeric index from 1 to 16 (when multiple USB audio/video capture devices are connected).
   • Input → select "Default" (stands for port 0) or a numeric value from 1 to 3 in case a different port must be enforced.
   • Video Width → enter the video width resolution of the input source.
   • Video Height → enter the video height resolution of the input source.
   • Frame rate → select from the standard FPS values (60, 50, 30, 25, 24) or enter a different frame rate, if needed.
   • Format → select the format of the video-input source from "Auto", "MJPEG", "NV12", "UYVY", "YUYV".
3. Click the "OK" button to add the layer.
4. Position the layer within the Preview panel.
5. Use the toolbar buttons to change how the media is fitted (fill, meet, or slice) and aligned within the layer zone.
6. To fine-tune any of the layer options, click the button to open the Layer Properties dialog.

Notes:

• The new video-in layer has its URI set to something like this videoin://sourceIndex/inputPort?parameters. If the source is actually an audio capturing device, change the URI to audioin://sourceIndex/inputPort.
• Multiple USB audio/video capture devices can be plugged, for instance by using a USB hub - in this case, each source device can be referenced through identifiable indexes, assigned to them from Control Center ⇾ Peripherals ⇾ Capture or by using a configuration backup file. The number of videos that can be decoded and displayed at the same time is however limited on the player side.