Layouts

Video layout in Smelter is defined using components. We can divide them into 2 groups, layout and non-layout component.

• Layout components, like View, Tiles, or Rescaler are responsible for positioning its children.
• Non-layout components usually render something specific like Image, Text or InputStream. Usually they don’t take any children components, however, Shader and WebView are an exception from that.

Layout components define the size, position, and simple styling of its children. For example, View component positions all its children in a row or in the column.

Currently, we support the following layout components:

• View
• Tiles
• Rescaler

Common properties

Most layout components share some of the properties related to its position and size in relation to their parent.

Note

There are components that do not support some of those options (for example Tiles), but if they are supported you can relay on consistent behavior across different components.

Sizing

• width - Width of a component in pixels.
• height - Height of a component in pixels.

If width and height are defined explicitly they take priority. However, if not, then the size of the layout components varies depending on their parent and position in the component tree, as detailed in the table below:

Layout component placement	Layout component size
Root in a component tree	Size is based on the declared resolution of an output stream.
Child of a non-layout component	Defining size is required, usually via the width/height fields.
Statically positioned child of another layout component	Size will be based on the area defined by its parent unless explicitly defined.
Absolutely positioned child of another layout component	The same size as parent.

Where does it matter in practice?

• In most cases View will be a top level component in your layout. It is best to not provide size information in that case, because your output size already defines it.
• If you are passing a child to Shader or a WebView, its size must be explicitly defined.
• When nesting layouts inside each other, often you don’t have to provide size information. When you do, it is usually either width or height.

Absolute positioning

• top - Distance in pixels from the top edge of a component to the top edge of its parent component.
• bottom - Distance in pixels from the bottom edge of a component to the bottom edge of its parent component.
• left - Distance in pixels from the left edge of a component to the left edge of its parent component.
• right - Distance in pixels from the right edge of a component to the right edge of its parent component.
• rotation - Rotation in degrees. (Caution: rotation of complex elements is not fully supported yet)

All the properties above imply the absolute positioning of a component. When a component is positioned absolutely, it will ignore the normal layout of its parent.

Note

If component has those properties it does not imply that it is a layout. Only layout components respect those values on their children, but non-layout component can also have them.