Create a master playlist

This is related to Elementi playlist. It is recommended to follow the "My first Elementi project" tutorial before this tutorial, even if they are independent from each other.

Introduction

Master playlist - final result

This tutorial explains how to create a master playlist in Elementi to display multiple layouts in the same project. In this tutorial we will create only two layouts (more can be created in the same manner) and then a master playlist to display the two, one after the other.

One of the key feature of the Elementi is that projects can have a modular structure - a project may contain only a single layout (as explained in "My first Elementi project" tutorial), but also playlists and schedules. Moreover, the master layout file let you display other elements on top of all layouts if desired.

You can download the project resulted after following this tutorial from the link below.

Tutorial

Master playlist project

Version 1.0 (2015-12-02)

• Difficulty: Easy.
• Total duration: 5-10 minutes.
• Requirements:
  • Elementi 2015 or later. The latest version is recommended.
  • (Optional) One or more HMP devices using firmware 3.2.0 or later for the publishing part of the tutorial. The latest version is recommended.

Create a project

The first step is to create a new project and set its name, model, format and duration.

• For more details about this step, see this tutorial about creating a new project.
• We will call the project "Master playlist", select an HMP300 model, a 16:9 format, and left the duration to Automatic.

Once the project has been created, double-click on its icon to open it.

• Inside the project there is a single file called "index.svg", which doesn't contain any layers for now (we'll take care of that later). This is the master layout.
• The last tab in the browse panel takes the name of the project and the index file is automatically opened in the preview panel.

Create the first layout

Layout welcome

The next step is to create a new Layout for a welcome screen.

• For more details about this step see this documentation about creating a new layout.
• We will call the layout "Welcome", select a 16:9 format, a black background and make sure the last check-box is not checked.

Once the layout has been created, it is ready to be edited.

1. Double-click on the layout icon to open it.
   • Inside the layout there is a file called "index.svg": the layout master file.
2. Double click on the file to open it in the Preview panel.

We can now import all the media needed by this layout. In this example we will import a background image and the logo of our company.

• For more details about this step, see this video tutorial about importing media.
• When importing video files, make sure that they are compliant with the HMP specification. See Video decoding page for more details.

Next step is to use the background and the logo in our layout.

1. Simply drag & drop the image from the browse panel into the preview panel (or into the edit panel) to create a media layer.
   • For more details about this, see layout editing and editing layers within the edit panel.
2. Click on the "Fit Screen" button on the toolbar to make sure the background layer occupies the entire screen. You may also use the "Media Fit" button on the toolbar and select "Slice" to make sure the background use all the 16:9 area.
3. Use the "Align" button on the toolbar to center the logo of the company.
4. Finally, to ensure that the background layer is not moved by mistake within the preview panel, lock the layer by clicking on the "Lock" icon within the edit panel.

Finally, we can add our welcome text at the bottom of the layout.

1. Click on the "Add Text Layer" button on the toolbar.
2. Once the text layer appears within the preview panel, click inside it.
   • Note that some buttons become active on the toolbar and these can be used to edit the text.
3. Select the existing text and start typing or paste your text.
   • The text can also be entered / edited from Layer Properties > Edit text tab.
4. To add a transparent background to the text, go to the edit panel and click on (the "Layer Properties" button) next to the text layer. This opens the Layer Properties dialog.
5. Click on the "Box Format" tab.
6. Select the Mat option and set its opacity to 0.3.

Save your work, we are over with the first layout.

To go back to the root of the project click on the "Master playlist" name in the breadcrumb.

Create the second layout

Layout Equipments

The next step is to create a new Layout to display some specific news for the company.

1. Create a new layout and call it "Equipments", select a 16:9 format, a white background and make sure the last check-box is not checked.
2. Double-click on the layout icon to open it. Double click on the "index.svg" file to open it in the Preview panel.
3. Import the image of the new equipment.
4. Drag & drop the image from the browse panel into the preview panel (or into the edit panel) to create a media layer.
5. Use the mouse to resize the layer and the "Align" button on the toolbar to center it vertically.
6. Add a text layer using the "Add Text Layer" button on the toolbar. Click inside it to edit it.

Highlight text

To highlight the description of the new equipment, we are going to add an effect to the last test layer.

1. Go to the edit panel and click on (the "Layer Properties" button) next to the text layer. This opens the Layer Properties dialog.
2. Click on the "Highlight" tab and configure the effect.

Save your work, we are over with the second layout.

To go back to the root of the project click on the "Master playlist" name in the breadcrumb.

Master playlist

New master playlist

Master playlist

We are now ready to create the master playlist to display the two layouts one after the other.

1. Double click on the project master file "index.svg" to open it in the Preview panel.
2. Create a new playlist.
   • Make sure the last check-box is checked.
   • For more details about this step, see this documentation about creating a new playlist or this video tutorial.
   • In this tutorial, we select a "Fade to white" transition between the layouts.
3. Drag and drop the playlist file ("master.svg") either into the Edit panel or the Preview panel.
   • Use the "Fit Screen" button on the toolbar to make sure the playlist occupy all the screen.
4. Double-click on the playlist layer inside the preview panel (or edit panel) to open the playlist within the main layout context (i.e. without closing index.svg document). See more details about editing within layout.
   • You can also double-click on the playlist icon inside the browse panel, but this will close index.svg and open master.svg instead.
5. Select the two previously created Layouts in the browse panel.
6. Drag & drop them from the browse panel into the edit panel. The Layout are ordered alphabetically.
   • You can change the order in which the layers are played using drag & drop (or the right-click menu). See more details about editing playlist items.
7. Click on the "Leave" button from the toolbar to go back to the main layout (index.svg).

Save your work.

You can now publish the project to one or more HMP devices as described on "Publishing from Elementi" documentation.

See also

• How to create a project
• My first Elementi project
• Video tutorials about how to create a master playlist.
• Display the content of a spreadsheet file tutorial.