My first Elementi project

Introduction

My first Elementi project

This purpose of this tutorial is to help the user to build his first Elementi project (and to get familiarized with the interface in the process). The project is composed of a static image in the background, a video and digital clock.

You can download the project resulted after following this tutorial from the link below, but note that the video file was not included in the 7z archive available for download.

Getting started

In case Elementi is not installed on your PC, download the software and install it on your PC. For more details, see the Elementi page.

• If you don't have a valid license, you can use the free 30-day trial to complete this tutorial.
• Make sure to download the "Elementi Quick Guide" corresponding to your Elementi version.

The Elementi interface is divided into 3 panels:

• Preview panel: to preview the layout to be displayed on the screen.
• Browse panel: to mange the files needed by the content
• Edit panel: to modify various properties of the displayed documents.

Tutorial

My first Elementi project

Version 1.2 (2015-12-02)

• Difficulty: Easy
• Total duration: 10-15 minutes.
• Requirements:
  • Elementi 2015 or later. (The latest version is recommended.)
  • One or more media files compliant with the HMP specification. See Video decoding page for more details.
  • (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

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.
• For this tutorial, "HMP300" was selected as model, but make sure to select the project model according to your HMP device model. If you don't have an HMP device or have any doubts on which device to use you can select "HMP100" for a project that will work on all HMP models (but some media constrains may apply in this case). If you want to use Full HD medias then select "HMP200" (for maximum resolution and performance).

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 a layout

Create a layout

The next step is to create a new Layout to work on the content.

• For more details about this step see this documentation about creating a new layout.

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

• Double-click on the layout icon to open it.
• Inside the layout there is a file called "index.svg", this is the layout master file.
• Double click on the file to open it in the Preview panel. It doesn't contain any layers for now (we'll take care of that later)

Import media content

The next step is to import some media content (images, videos) into the layout. To do so, simply drag and drop the files from Windows Explorer into the browse panel.

• For more details about this step, see this video tutorial about importing media into the project.
• For this tutorial, we need one background image and one video file.
• When importing video files, make sure that they are compliant with the HMP specification. See Video decoding page for more details.

Once the files have been imported, we can start using them into our layout.

Set the background

Set the background

Next, let's set the image as a background layer. For that, 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.

The image appears within the preview, but is not yet covering the entire screen, as you can see by the black & white border around the media layer. You could resize it to cover the entire visible area, but a quicker way to do so is to click on the "Fit Screen" button on the toolbar. After this, the media layer occupies the entire screen.

At this point, another problem might appear - if the image aspect ratio is not the same as the one selected for the project (in our case the image is 4:3 and the project is 16:9), then some black borders are still present around the image.

• To remove the black borders, click on the "Media Fit" button on the toolbar and select "Slice". This will centrally zoom inside the image until the black borders are removed (some parts of the image are removed as well).
• To modify how the zoomed image is aligned within the layer, use the "Media Align" button on the toolbar.
  • In our case, we want to use the top part of the image instead of the central one, so click on the "Media Align" button and select "Top". This effectively aligns the top of the image to the top of the viewing area.

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.

Add a video

Add the video

Next, let's add the video imported before into our layout - for this, drag and drop the video from the browse panel into the preview panel somewhere on top-right area.

• If you drop the video inside the preview panel, it is centered where the mouse cursor is; if you drop it inside the edit panel, then in is centered in the middle of the screen.
• The video is set automatically to repeat indefinitely (note the circular arrow on the video layer within the edit panel).
• To avoid being distracted by the video playing within the preview panel, pause the content playback by clicking on the "Play / Pause" button.

If the video is not at the desired position, go with the mouse over the video (the regular cursor turns into a 4-arrow one), then click and drag it to the desired position. If necessary, resize the video layer by going with the mouse over the bidirectional arrow icons (the cursor turns into a matching 2-arrow cursor as well), then click and drag until you get the right size.

Set the box format properties of the video layer

Optionally, we could add a small rounded border around the video. To do this, follow these steps:

1. Go to the edit panel and click on (the "Layer Properties" button). This opens the Layer Properties dialog.
2. Go to the "Box Format" tab.
3. Set a solid border of 20 pixels.
4. Set rounded corners with a radius of 40 pixels.
5. Click the OK button to apply the new properties of the layer.

Just as before, to ensure that the video layer is not modified by mistake within the preview panel, lock the layer by clicking on the "Lock" icon within the edit panel.

• To understand the effect of this action, click some place else on the preview panel and then click on the video - you'll notice that the black & white border is no longer displayed and the media layer is no longer selected within the edit panel. To see the layer border again, select the video layer within the edit panel or unlock the layer.

Note: Elementi remembers any change you do on your document (as long as it is kept opened and even after saving it), so you can always revert a change using the Undo & Redo buttons from the toolbar.

Add a clock

Add a digital clock

Set clock properties

Next, let's add a clock into our layout. To do this, simply drag and drop one of the clock widgets from Elementi Library into preview panel or edit panel.

• When importing the clock from the Library, the widget is automatically copied into the active project.
• For more details about this step, see Using widgets from Library.

For this tutorial, we are going to import the "7 Segments" digital clock widget. Once the clock layer appears within the preview panel, position it on bottom-right area and resize it accordingly.

To edit the widget properties, double-click on its layer within the edit panel.

• The edit panel is modified and shows a "Properties" tab containing the widget configurable properties.
• The preview panel is also modified and only the widget layer is fully opaque, the rest of the viewing area being covered with a semi-transparent overlay.

Optionally, you could modify the properties available for this clock widget, for instance:

• to change the clock mode from 24h to 12h, click on the radio button next to "24h";
• to change the color used, click on the color bar to open the Color Picker dialog from where you can enter / select another color.

To go back to the index layout, click on the "Back" button from the toolbar (right side).

You could also lock the layer to prevent further changes within the preview panel. And don't forget to save the changes done so far.

Add text

Add text

Next, let's add some text on our 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.
     

Position and align the text layer

Next, move the mouse over the layer border (the cursor changes into a 4-arrow cursor), click and drag to position the text layer on the left side. Resize it if necessary and then top-align it with the video layer.

To be sure that two layers are correctly aligned, do like this:

1. Hold the Ctrl key and click on the two layers within the edit panel.
   • You can now see the borders around the layers and if they are correctly aligned.
2. Click on the "Align" button from the toolbar and select "Align Top".
   

Set the box format properties of the text layer

Some white text over an image doesn't look so nice, therefore the next step is to make the text stand out. For that do the following:

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 "Box Format" tab.
3. Select the Mat option and set its opacity to 0.5.
4. Set rounded corners with a radius of 40 pixels.
5. Click the OK button to apply the new properties of the layer.
   

Edit the text

Optionally, you could select enhance the text by changing the font and the style used:

1. Add an line between the quote and the person name and then select only the quote.
2. Click on the I button on the toolbar to change the text style to italic.
3. Click on the "Font Size" button and select a lower size (e.g., 88).
4. Click on the "Font Type" button.
5. Select a different font family (e.g., "Georgia").

Don't forget to lock the text layer and the save the changes done so far.

Update project master file

Update project master file

Finally, we need to add the layout into the project master file.

1. In the Browse panel Click on the breadcrumb "My first Elementi project". This will go back to the root of the project.
2. Open the project master layout "index.svg" using a double click on the file itself. The master layout doesn't contain any layers for now.
3. Drag and drop the "First Layout" directly into the Edit panel. Elementi automatically detect that this is a layout, and will create a link to the correct file inside the Layout. As both the Project and the Layout have the same size, the layout will fill up all the screen.
4. Save your work. That's it, the first project is over.

Publish the project

This step requires an HMP device.

To display our project on the screen, we need to publish it to one or more HMP devices as described on "Publishing from Elementi" tutorial.

Note:

Once the project has been published to the HMP, you can close Elementi and even shutdown the PC used to create the project, because the HMP is playing the content from its internal storage.

See also

The next tutorials to study after the one presented on this page are:

• "Create your first project" video tutorial.
• "Video playlist" tutorial, which describes how to replace the video layer with a video playlist;
• Create a master playlist
• Display an RSS text ticker, which describes how to add a text ticker displaying RSS news from the Internet to the layout.