Layer Properties

This page is related to Elementi layers.

Introduction

The "Layer Properties" dialog allows changing various settings related to layers and is composed of the following tabs (6 tabs for media layers and 8 tabs for text layers):

• Essentials - for the main media / text properties.
• Edit Text - for editing the text content of a text layer.
• Text Format - for additional text formatting options (border, gradient fill, shadow effect).
• Box Format - for additional formatting options (background color, framing etc.).
• In Effect, Highlight and Out Effect - for animated effects that can be applied to a layer (entry effect, highlight effect and exit effect).
• Advanced - for controlling advanced parameters, such as SVG attributes, streaming options, real duration of the video files etc.

To open this dialog, use one of the following methods:

• Right-click on the layer and select "Layer Properties..." option.
• Select the layer and press the "Enter" key.
• Click on the "Layer Properties" button.

Essentials

"Essentials" tab contains different properties depending on the type of the layer: media / streaming layer or text layer.

Media Properties

Essentials tab for media layers

For media and streaming layers, the "Essentials" tab contains the following properties:

• URI

  Address of the media to be displayed. This can be a local file (e.g., "media/img.png") or resource located on the remote server (e.g., http://server_name/resource_path).

• Proof of play

  When enabled, each time the media is played, a log line will be added to the accounting log of the player.

• Begin time

  Specify when the media should start to be displayed related to the document starting time. The time can be entered using either the HH:MM:SS format or as a number or seconds. This entry will be automatically set / updated when using the Timeline.

• Duration

  Specify for how long the media should be displayed. Available options:

  • Play once - play for the original media duration. This is not available for images.
  • Indefinite - play for an indefinite time.
  • Specify - play for a fixed duration entered into the adjacent field; the media will be repeated and / or truncated if needed. The time can be entered using either the HH:MM:SS format or as a number or seconds.

• Opacity

  Specify the layer opacity level (including the formatting options) between 0 and 1 (i.e. 100% opacity).

• Media fit

  Specify how the media is fitted within the layer dimensions. Available options:

  • Fill: The media fills up the entire layer without keeping its aspect ratio (the media might be distorted).
  • Meet: The media fills up the layer partially while keeping its aspect ratio (the media is zoomed until one of the dimensions touches the border of the layer).
  • Slice: The media fills up the entire layer while keeping its aspect ratio (the media is zoomed until it fills up the entire layer, but some parts of it might be cut).

• Media align

  Specify how the media is aligned inside the layer dimensions. Available options: Center, Left, Right, Top, Bottom. This has no effect if "Media fit" is set to "Fill".

• Position

  Specify the top-left corner position of the layer and its dimensions (width & height).

Text Properties

Essentials tab for text layers

For text layers, the "Essentials" tab contains the following properties:

• Begin time

  Specify when the media should start to be displayed related to the document starting time. The time can be entered using either the HH:MM:SS format or as a number or seconds. This entry will be automatically set / updated when using the Timeline.

• Duration

  Specify for how long the media should be displayed. Available options: Indefinite, Specify.

  • Indefinite - the text is always visible and that out effects wont be applied.
  • Specify - play for a fixed duration entered into the adjacent field. The time can be entered using either the HH:MM:SS format or as a number or seconds.

• Opacity

  Specify the layer opacity level (including the formatting options) between 0 and 1 (i.e. 100% opacity).

• Horizontal align

  Specify the horizontal alignment of the text layer. Available options: Left, Center, Right, Justify.

• Vertical align

  Specify the vertical alignment of the text layer. Available options: Top, Middle, Bottom.

• Position

  Specify the top-left corner position of the layer and its dimensions (width & height).

• Smart text

  Specify special properties of text to improve readability. Available options:

  • Headline: Fit the text on a single line with maximum font size (as a header).
  • Automatic fit: Fit a large text within the layer dimensions by adapting the font size.
  • Automatic scroll: Scroll a multi-line text from bottom to top. The number of lines to display, the time each line is shown and the scroll duration can be configured.
  • Ping pong: Scroll a long text in the selected direction using a continuous motion (like a ticker).

Web Page Properties

This feature is available since Elementi 2015 and only for HMP300 and HMP350 devices.

Essentials tab for web page layers

For web page layers, the "Essentials" tab contains the following properties:

• URI

  Address of the web page to be displayed. This can be a local file (e.g., "web/index.html") or resource located on the remote server (e.g., http://www.spinetix.com).

• Proof of play

  When enabled, each time the web page is open, a log line will be added to the accounting log of the player.

• Begin time

  Specify when the web page should start to be displayed related to the document starting time. The time can be entered using either the HH:MM:SS format or as a number or seconds. This entry will be automatically set / updated when using the Timeline.

• Duration

  Specify for how long the web page should be displayed. Available options:

  • Indefinite - play for an indefinite time.
  • Specify - play for a fixed duration entered into the adjacent field. The time can be entered using either the HH:MM:SS format or as a number or seconds.

• Opacity

  Specify the layer opacity level (including the formatting options) between 0 and 1 (i.e. 100% opacity).

• Position

  Specify the top-left corner position of the layer and its dimensions (width & height).

• Enable Javascript

  Specify whether JavaScript code on the web page can be executed.

• Enable Web Security

  Specify whether web security is enforced. This is enabled by default and has the following effects:

  • Cross-origin resource sharing (CORS) is enabled - this means that AJAX requests or remote fonts are forbidden.
  • Local resource (local file) cannot access remote URLs.
  • Navigation away from the page is not permitted

Note:

If the web page doesn't display properly, you can try disabling the "Enable Web Security" option. Also, you might need to play with the frameWidth, scrollY, or zoom parameters (under the Advanced tab) to get a nicer rendering of the web page.

Edit Text

Edit Text tab

The "Edit Text" tab allows editing the content of the text layer, directly from the "Layer Properties" dialog. The editing options are the same as the ones present within the Preview panel:

• Font Type

  Specify the font of the selected text. If Custom fonts have been added to the project, they will automatically appear in this list.

• Font Size

  Specify the font size in pixels. Either select a value from the drop-down list or enter it manually (press the Enter key to validate the size entered).

• Bold

  Toggle bold formatting on the selected text.

• Italic

  Toggle italic formatting on the selected text.

• Text color

  Specify the color of the selected text using the "Color Picker" dialog.

Text Format

Text Format tab

Available since 3.1.0

The "Text Format" tab allows setting additional text formatting options:

• Border

  Specify the width and color of the text border.

• Gradient Fill

  Specify the angle and the two colors to be used for drawing a gradient over the text.

• Shadow Effect

  Select the type of shadow for the text between: "Hard Shadow", "Drop Shadow", "Inset Shadow" and "Glow", and specify different properties for each shadow type (e.g., opacity, angle, distance, blur radius etc.).

Box Format

Box Format tab

The "Box Format" tab allows adding special formatting to text and media layers.

• Mat

  Specify the color and the opacity of the background of the layer.

  For media layers, the mat color will only be visible when "Media fit" is set to "Meet".

• Border

  Specify the width and color of the box border.

• Padding

  Specify the padding between the layer borders and the area used by the media / text. The same padding is used for all four borders.

• Cut corners / Mask corners

  Cut (for text) or mask (for media) the selected corners of that layer, using either the round or snip method.

• Shadow

  Select the type of shadow for the layer between "Shadow in", "Shadow out", "Reflection" and "Soft edge" (adds a gradient on top of the border of the layer), and specify different properties for each shadow type (e.g., opacity, angle, distance, blur radius etc.).

Effects

In Effect

The animated effects that can be applied to a layer are grouped under three tabs (according to the timing when the effect is applied):

• In Effect - applied at the beginning time of the layer.
• Highlight - applied while the layer is being displayed.
• Out Effect - applied at the ending time of the layer. Note that layers with indefinite duration will not show any out effects.

Each effect can be previewed directly within the "Layer Properties" tab - a generic animated image is used for this.

In / Out Effect

Out Effect

The following in / out effects are available: Fade, Slide, Fly, Wipe bar, Wipe box and Zoom.

To configure In / Out effects:

1. Select the Effect.
2. Select the Direction or the Type of the effect (when available). The dice icon represents a random selection.
3. Set the Duration of the effect.

For video it is also possible to enable an audio fade and its duration.

Highlight

Highlight

The following highlight effects are available: Blink, Nudge, Nudge diagonal and Nudge zoom.

To configure Highlight effects:

1. Select the Highlight.
2. Select the Direction.
3. Set the Duration of the highlight.
4. Set the Amplitude of the highlight.

   For the zoom highlight the amplitude is expressed in percentage of the layer dimensions.

5. Set the Offset between the beginning of the playing time of the layer and the fist highlight.
6. Set the Occurrence (i.e. the number of highlights).
7. Set the Interval between highlights (if more than 1 is set above).

Advanced

Advanced Properties

The "Advanced" tab allows setting the following layer attributes:

Elementi version	Attributes added
Elementi 3.0.0	audio-level, audio-pan, dur, fill, id, initialVisibility, type, transformBehavior, pointer-events, focusable, nav-next, nav-prev, focusHighlight, editable, spx:accounting-tag, spx:audioDelay, spx:buffering, spx:cacheMaxAge, spx:maxDemuxingBufferSize, spx:multiScreenId, spx:transport
Elementi 3.0.3	spx:silent
Elementi 3.1.0	lineIncrement, sxp:overrideFPS
Elementi 2015	frameWidth, zoom, scrollX, scrollY, spx:customHeaders, spx:userAgent
Elementi 2015 Update 1	spx:program, spx:audio, spx:audioPID, spx:videoPID
Elementi 2016	spx:mask-href, spx:packetization, spx:syncVar
Elementi 2018	spx:customHeaders
Elementi 2020	spx:scrollbar, spx:recipes-href
Elementi 2021 Update 5	allow
Elementi 2023	spx:subtitles, spx:subtitlesFormat, spx:subtitlesPID
Elementi 2023 Update 3	spx:secureContext
Elementi 2023 Update 4	spx:rangeRequests

To set one of these attributes, follow these steps:

1. Click on the "Click to add..." field under the "Name" column until the selection box is expanded.
2. Select an attribute from the list.
3. Click on the right column next to it (under the "Value" column).
4. Select from the list of available values (if applies) or enter its value manually.
5. Press the "Enter" key to validate the chosen value.

Backward compatibility with HMD

Documents created with Hyper Media Director can be opened and edited within Elementi, nevertheless, the "Layer Properties" dialog does not contain all the tabs / properties available for those created with Elementi.

• Essentials - the "Media align" and "Smart text" properties are not available.
• Format - only available for text layers and has only two properties: "Mat" and "Border".
• The tabs related to effects are not available.