From SpinetiX Support Wiki
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 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.
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.
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.
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.
Web page layer
This layer allows displaying a static or semi-static web page - for that, follow these steps:
- Click the "Add Web Page Layer" button on the toolbar.
- Alternatively, right-click within the Edit panel and select "Insert Web Page Layer".
- Enter the web page URI within the pop-up dialog and then click the "OK" button.
- Position the new layer within the Preview panel
- 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.
- Save the changes to your project.
- 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.
- 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.