Display media content

Introduction

This tutorial explains how to include common media content (like image, video, audio) within your Elementi project and display the result on the screen.

A media resource can be a local file, previously imported inside the project, or a remote file, retrieved from a web server via HTTP protocol.

For the special case of streaming media, check out the dedicated tutorial: Display streaming media content.

Tutorial

• Difficulty: Easy.
• Total duration: < 5 minutes.
• Requirements:
  • Elementi, version 3.x or later. (The latest version is recommended.)
  • One or more HMP devices using firmware 3.x or later. (The latest version is recommended.)
  • One or more media files compliant with the HMP specification. See Video decoding page for more details.

Steps

1. Open Elementi and create a new project. (For further information, check out "My first Elementi project" tutorial as well.)
2. The index.svg should be automatically opened, otherwise, double-click on the project icon in Browse panel.
3. To include local media files inside the project:
   1. Import the media files into your project using drag & drop. If you have troubles with this step, check out this video tutorial.
   2. Once the media files are imported, simply drag & drop them into the Preview panel or the Edit panel.
4. To include remote media files inside the project:
   1. Make sure that the remote media file is accessible via HTTP protocol, for instance by opening it in a browser.
   2. Add a new media layer using the "Add Media Layer" button on the toolbar.
      • Alternatively, right-click within the Edit panel and select "Insert Media Layer" (Ctrl+Insert key).
   3. Enter the URI of the remote media resource - for instance http://MyServer/MyImage.png.
   4. Click the "OK" button.
5. Position the new layer within the Preview panel and / or fine tune its properties using the Layer Properties dialog.
6. Click the "Save" button to save the changes in your project.
7. Publish the project on the HMP device(s).

Note: For local media files, the URI property of the media layer is set to a relative address, like MyVideo.avi or media/MyVideo.avi.