Tiles Editor

Table of Contents

Overview

In the Layout Templates section, we learned how to use the default Tile Types.

The Tiles Editor is a versatile feature for creating your own tiles or editing existing ones with the MSC GUI. The same functionality is also available with the Tile Editor APIs.

What is a tile?

A tile serves as a layout component designed to showcase a single monitored source.

Each tile consists of smaller units known as objects. These objects come in various types, each displaying different kinds of information. The most fundamental types are the video object and the audio object. Additionally, most objects offer several variants, which differ in aesthetics and the type of information they present.

Consequently, the customization options and the variety of tiles that can be created are virtually limitless.

Creating tiles with the tiles editor is a straightforward process. Begin by dragging and dropping various objects onto the main workspace. Next, fine-tune the position, size, and variant of each object until you reach your desired outcome.

Navigating to the Tiles Editor

1. Log in to the MCS.

2. Click on the menu icon.
   
   

   Open

   

   1. A display of all available options will open.

3. Click on Outputs → Tiles

   Open

   

4. The Tiles Editor will open.

Tiles editor window breakdown

The Tiles editor window is made up of several sections, as marked in this image.

Tiles list pane

This pane lists all the existing tiles in the system. To view or edit any tile, simply click on its name and it will be highlighted blue on the list.

• To find a specific tile, click on the filter button on the upper right corner.

• To hide the Tiles List pane click on the arrow in the upper left corner .

main workspace

Drag and drop objects from the Types pane on the left to the canvas on the lower section to create your desired tile. Once there, objects can be resized by clicking and dragging the blue squares surrounding the object.

The upper section includes the following metadata fields:

Label

• The tile’s name. Use at least 3 characters.

Content Type

• Choose between four types of tiles - channel, graphics, text box, and clock. Each tile type serves a specific function and has different objects available for its assembly.

For more information on tile and object types see How to configure the Tiles Editor.

Description

• Allows users to provide additional information in a free text format.

Ratio - from MCS version 1.3.0

• Adjusts the aspect ratio of the workspace in order to preview the tile in different dimentions.

Preview Resolution - from MCS version 1.3.0

• Adjust the resolution slider in order to preview the tile in different sizes.

• Use the blue button on the upper right corner to automatically fit the workspace’s size to your window.

(Objects) Types pane

Lists the objects available to drag and drop on the tile.

The available objects list changes for each tile type.

For more information on tile and object types see How to configure the Tiles Editor.

Properties/Objects Pane

The upper section of this pane displays the objects that make up the currently selected tile.

When you click on an object - whether from the list or directly in the workspace - it will be highlighted blue, and its properties will be shown in the lower section.

You can also discard objects from the tile by clicking the Trash icon .

The lower section displays the information and configuration for the currently selected object, starting with the object’s type and size limitation:

Object Configuration

To achieve better accuracy, size and position can also be configured using the following properties:

• Margins - These are determined based on the tile's Preview Resolution. Each value indicates the distance from the tile's edges (or the margin), measured in pixels and/or percentages. This space defines how much area the object can occupy. If the object is smaller than this available space, the remaining area is utilized as a margin for the alignment property discussed below.

• Restrict to - Determine the actual size of the object with The Width X Height values below. Cannot exceed the maximum values proffessed above.

Content and display Properties:

• Index - When a stream has multiple components of the same type, the tile must also include the same number of objects for each type. The index number points to the corresponding component in the stream.

• Alignment - Snaps the object to the margins configured above. There are several alignments to choose from. For this to work, the object has to be smaller than the margined area.

• Variant - Most objects have several variants, changing the object’s appearance or functionality.

For more information on object variants see How to configure the Tiles Editor.

Top ruler buttons

Manage tiles and the editor sections.

Refresh

• Refreshes the Tiles Editor window.

Copy

• Duplicates the currently selected tile. Duplicated tiles are automatically named “[Tile_Name]_1” when first created.

Delete

• Deletes the currently selected tile.

Add

• Creates a new blank tile.

Save

• Saves all changes to currectly selected tile. If you wish to undo changes instead of saving, simply click on a different tile.

Retract Tiles List pane

• Click to show / hide the Tiles List pane.

Retract Properties pane

• Click to show / hide the Properties/Objects pane.

Related articles

• Layout Templates

• Default Tile Types

• How to configure the Tiles Editor

• Tile Editor APIs