Dynamic Layout Editor In Myriad Playout 6

Prerequisite: Myriad Playout v6.1.1 or higher.

In this article, we will explore how to use the Dynamic Layout Editor in Myriad Playout 6, to design a new Dynamic Layout.

There are dozens of tiles with potentially hundreds of options, so this article is intended as a more general overview of how to use the feature, rather than a comprehensive guide to every options available.

Dynamic Layouts

Dynamic Layout allow you to determine what Myriad Playout 6 features and tools are visible and how these features are displayed.

Dynamic Layouts consist of the following:

• Screens - You can define a dynamic Layout per Screen.
• Grids - Divides a Screen into Rows and Columns to allow Container positioning and size.
• Containers - Containers are positioned on the Grid and assigned a height and width (in Rows and columns).
• Tabs & Frames - Containers can be defined as Tabs or Frames. When set as Tabs, you can add multiple Tiles to the Container with each Tile on it's own Tab. If set as a Frame, only one Tile can used in the Container.
• Tiles - Tiles reside within Containers. Each Tile contains a feature or element of Myriad Playout. Examples include Media Wall Tile, Log Tile, Dashboard Tile etc.
• Tile Settings - Most Tiles have additional settings you can use to customise the Tile. The settings vary Tile to Tile.

The diagram below shows the hierarchy of Dynamic Layouts.

Prior to Myriad Playout v6.6.1, all Dynamic Layouts were created as raw XML files which whilst simple, did require some knowledge of XML structure, and the ability to visualise how it will look in your head, which can be a challenge at times.

Dynamic Layout Editor

Myriad Playout 6.6.1 introduces a Dynamic Layout Editor tool which removes the requirement to code the XML by hand, instead you can use the interface to define the all the elements you want to include with your layout, and the realtime preview makes it much easier to visualise and test your layouts.

The Dynamic Layout editor consists of two parts. The Layout Editor Window is used to define the Screens, Containers and Tiles used as well as Tile specific and more general settings.

The Preview displays the Grid and any Containers / Tiles defined.

You can use the Dynamic Layout Editor to modify existing layouts or design new layouts from scratch.

Creating A Layout

The best way to explain how to use the Dynamic Layout Editor is to walk through the process of creating a layout from scratch.

In this example, we will start with an empty Layout and recreate the classic 'Default' layout which is included with all installations. We will also add a Clock to the layout just to show how easy it is to modify.

Caution - We would not recommended doing this on a Myriad workstation that is currently broadcasting live On Air!

1. Click on the Layout Menu > Edit the Layout option.
   
   
   
   
2. Click on the New button to create a new empty Layout.
   
   
   
   
3. Give the Dynamic Layout a suitable Filename.
   
   

4. 
   

5. Give the Dynamic Layout a suitable Header.
   
   
   
   
6. A new blank Layout will be created as a 12 x 12 grid. If you have multiple screens attached to your PC, it will create a Grid for each screen. You will also see the preview behind the Layout Editor. You can move the Layout Editor to another screen if you have one.
   
   
   
   
7. You can adjust basic settings such as Background Colour, Header and Margin by selecting the top node in the left hand panel and adjusting the settings to the right.
   
    
8. You can change the number of Rows or Columns for any screens by selecting the Screen in the left hand side and adjusting the settings on the right hand side.
   
   
9. To recreate the Default Layout, we need to start by adding a Tab Container for the Media Wall, Favourite and Library Tiles.
   
   
   
10. Click on the Add Tab button.
    
    
11. This will open a list of all available Tiles. Select Media Grid from the list to at the Media Grid (or Media Wall) Tile.
    
    
    
    
12. To set the Size & Positioning of the Tab Container, select the Tab Node on the left hand side and adjust the settings on the right. In this example, we can see the Tile is in the right position but the height is not correct.
    
    
    
    
13. Increase the Row Span value to 10 (and press enter) to make the Tile span ten Rows.
    
    
    
    
14. If you click on the Media Grid node, you can view and edit the properties for the Media Grid Tile. In the case of the Media Grid, there are not many options!
    
    
    
    
15. Next let's add the Favourites & Library Tiles. Make sure the Tab Container is selected in the left hand panel and click on the Add Tile button to add an additional Tile to the select Tab Container.
    
    
    
    
16. Select Favourite Set from the list.
    
    
    The Favourite Tile will be added as a new Tab on the Tab Container.
    
    
    
    
17. Repeat the last step but select Media Library from the list. The Tab Contain now includes the three Tiles we needed to replicate the original Default Layout.
    
    
    You can change the order of the Tiles by selecting the Tile Node in the left panel and using the Up/Down buttons next to the Add Tile button.
    
    
18. Next we need to add the Dashboard to the top right of the Layout. Click on the Add Tab button to add a new Tab Container. Select the Dashboard from the list when prompted.
    
    
    As you can see, the Dashboard is in the right starting position but the width is not correct. To make it full width, click on the Tab Container Node which the Dashboard resides in, and adjust the Column Span to 6 (and press enter).
    
    
19. Next we will add in another Tab Container which will house the Log Tile. Click on the Add Tab button and select Log from the list.
    
    

20. 
    

21. We also need to increase the height of the Tab Container with the Log, by one Row. Select the Tab Container Node that houses the Log, and increase the Row Span to 7 (and press enter).
    
    
22. The final Tile we need to add to duplicate the Default Layout, is the Media Players which run along the full width of the bottom of the screen.
    
    Click on the Add Tab button and select the Media Players option from the list of available Tiles.
    
    
    
    
23. Select the Tab Container Node for the Media Players, and adjust the Column to 0 (the first column and row are column zero and row zero) and the Column Span to 12 (full width).
    
    
    We have now fully recreated the Default Layout. The proportions can be adjusted but increasing the Row / Column count for the Screen and adjusting the Tab Containers accordingly.
    
    
24. When you are done, click on the Save button to save your Layout.
    
    

Modifying The Layout To Include A Clock

We wanted to enhance the Default Layout by adding a Clock Tile to the right of the Dashboard. To add the Clock, follow these steps:

1. Select the Tab Contain Node that contains the Dashboard and adjust the Column Span to 4. This will make a space for our clock.
   
   
   
2. Click on the Add Frame button and select the Clock option from the list of available Tiles.
   
   
   
3. Select the Frame Container Node that contains the Clock, and adjust the size and positioning accordingly.
   
   
   
4. In this example, we want to change the Column to 10 and the Column Span to 2 which will move the Clock Tile into the gap in the Layout.
   
   
   
   
5. You can click on the Clock Node to adjust settings such as colours, information displayed and clock mode. In this example, we have turned off the Date display and enabled the 60 second 'pips' around the clock.
   
   
   
6. When you are done, click on the Save button to save your layout.
   
   

When testing this Layout, the Dashboard looked too cramped with the Clock. 

This can be rectified by editing the Layout, selecting the Dashboard Node and turning off the Show Images option.



For a full list of available Tiles and options, take a look at the Dynamic Layout Guide.