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 some content is shown for a certain amount of time.

Different layer types are available, such as:

• Text layer for displaying formatted text
• Media layer for displaying a multimedia resource, which could be a common media file (image, video, audio) or an Elementi media (layout, playlist, schedule, widget)
• Streaming layer (extension of the media layer) for displaying network stream input
• Video input layer (extension of the media layer), for the playback of content generated by audio/video capture devices connected via USB to the player
• Web Page layer for displaying the content of a web page

A layer can be opaque or partially transparent, letting the background or other layers below it to be showed through. Some graphical aspects of the layer can be changed from the Preview panel, such as 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.

Multiple layers can be grouped together to create new elements. For instance, layouts and widgets are made of multiple layers stacked on top of each other – the order of the layers determine their appearance within the final scene, as 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 – while playlists are made of multiple layers displayed one after the other.

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.

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

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

Add a media layer manually

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 all DSOS players, except HMP300 and DiVA. It requires SYSTEMS Feature Set.

This type of layer is an extension of the media layer for displaying network stream input.

Add a streaming layer

To add a streaming media layer, follow these steps:

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. For web radios, make sure to enable the "This is an audio only stream" option.
5. Click the "OK" button.
6. Use the toolbar buttons to change how the streaming media is fitted (fill, meet, or slice) and aligned within the layer zone.
7. To fine-tune any of the layer options, click the button to open the Layer Properties dialog.

Note:

See also the tutorial about how to display streaming media content and what shall be done in the case of multiscreen streaming.

Video input layer

 

Applies to HMP400/W and iBX players (WIDGETS Feature Set 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.

Web page layer

 

Applies to all DSOS players, except DiVA. It requires KIOSK Feature Set or higher.

This layer type allows displaying the content of a web page. It is available since Elementi 2015. 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.

Add a Web Page layer

To add a web page layer into your Elementi project, 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 click the 🆗 button.
3. Position the new layer within the Preview panel or click the “Fit Screen” button on the toolbar to make it full-screen.
4. Click the button to fine-tune the layer properties, if needed.
   • To hide the page scroll bar, go to Advanced tab, add the spx:scrollbar attribute, and set it to hidden or disabled.
   • The frameWidth attribute might need to be set for a correct display of responsive websites.
   • The scrollX or scrollY attributes might need to be adjusted in case the size of the web page does not fit in the layer area.

Notes:

• 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. Furthermore, 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. Fore more details, see the SpinetiX-SA-21:01 security advisory and the "Web content" pages.
• The "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.

Troubleshooting

Disable HTML hardware acceleration

In case of Elementi crashing when displaying a web page – message: “This application is going to terminate because of an unexpected error” – you should:

1. Click the Menu icon on the toolbar, then Settings.
2. Uncheck the “Enable hardware HTML acceleration” option.
3. Open again your project and see if the problem has disappeared.

See also

• Elementi
• Elementi layout, Elementi playlist, Elementi schedule, Widgets
• Preview panel, Edit panel, Layer Properties
• jSignage layers