Displaying an RSS slideshow

Introduction

Final result

This tutorial explains how to display a slideshow of news from the Internet, syndicated via RSS, to an existing project. The tutorial is based on the Create a master playlist tutorial and assume it has already been followed.

For this, we are going to use the Slideshow widgets from the Elementi Library and change its data source from the default one pointing to the SpinetiX server (i.e. displaying the "Lorem ipsum ..." text) to a real RSS feed source from a news provider. In this case, sportsworldnews.com.

One of the key feature of Elementi is to provide a set of Widgets ready to be use in the Library to display data from files or servers.

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

Video

For full screen, see this video on Vimeo.

Tutorial

Displaying RSS News project

Version 1.0 (2015-12-08)

Difficulty: Easy.
Total duration: 10-15 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.)

Getting started

To get started, follow Create a master playlist tutorial. Once done, make a copy of that project, rename the copy to "Datafeed-rss" and then open it.

Create a new layout and call it "News", select a 16:9 format, a white background and make sure the last check-box is not checked.
Double-click on the layout icon to open it. Double click on the "index.svg" file to open it in the Preview panel.
Import the background image.
Drag & drop the image from the browse panel into the preview panel (or into the edit panel) to create a media layer. Click on the "Fit Screen" button on the toolbar to make sure the background layer occupies the entire screen.
Lock the layer by clicking on the "Lock" icon within the edit panel.

Importing Slideshow widget

Slideshow widget

Next, let's import the Slideshow widgets into the current layout.

Click on the "Library" tab within the browse panel. This opens the Elementi Library.
Open the "RSS" folder and find the "Slideshow.svg" widget.
Drag & drop the widget from the browse panel onto the preview panel. A new media layer is added on top of the other layers.
Go back to the project by clicking on the "Datafeed-rss" tab in the browse panel.
Position the widget to occupy all the layout using "Fit Screen".

Note that the widget file was automatically copied into the current project upon import.

Configuring Data source

Data Feed Properties

Testing data feeds

Next, let's change the widget data source from the default one pointing to the SpinetiX server (i.e. displaying the "Lorem ipsum ..." text) to the RSS source.

Double-click on the "Slideshow.svg" layer within the edit panel. This opens the widget within the main layout context (i.e. without closing index.svg document).
Click twice on the "Data source" property. This opens the "Data Feed Properties" dialog.
Enter the address of the news data ("http://www.sportsworldnews.com/rss/sections/olympics.xml")
Set the refresh option to 1h ( 1 hour )
Set the limit to 6 items
Click on the "Test..." button to verify the results.
- All the available data from the RSS source are shown in the test box. The standards ones are "title", "description", "enclosure", "pubDate".
Click on the "OK" button to save the changes to the data source.

Configuring RSS widget

Configuring slideshow widget

Layout of the slideshow widget

Next, let's modify the configuration of the widget.

Change the slide duration to 10s
Set looping to false

The Slideshow widgets and the Table widgets have a more complex structure than the other RSS_widgets because it is possible to configure the layout of the data inside the widget like it is the case for any normal Layout.

Let's setup the layout of the slide.

Click on the "Layer" tab in the Edit panel.
- Four default layers are present on this tab. The first one display the title of the news, the second one the its description, the third one shows the date of the publication, and the last one an image.
- Remove the third layer, as we don not want to display the date in our example.
Click on the Preview panel.
- This will pause the playback of the content and enter into the "Edit mode"
- The content of the preview is replaced by a set of placeholders such as [[title]] that will be replaced by the data of RSS feed, i.e to display the field "description" from the RSS feed, use the syntax "[[description]]". The names are case sensitive.
Select the first layer and open the "Layer Properties" using .
- Go to the Box format and uncheck the Mat and the Padding options.
- Press OK to apply your changes.
Select the second layer
- Resize the layer using the preview panel
- Open the "Layer Properties" using .
- Go to the "Box Format" tab and uncheck the Mat and the Padding options.
- Press OK to apply your changes.
Select the third layer (the media)
- Resize the layer using the preview panel
Press the play button to see your formatting applied to the RSS feed data.

Save your work, the layout is completed.

Master playlist

Add to master playlist

Finally, let's add the new layout to the master playlist and insure that all the advice are displayed.

Go back to the root of the project by clicking on the "Datafeed-rss" name in the breadcrumb.
Double click on the project master file "index.svg" to open it in the Preview panel.
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.
Drag & drop the "News" Layout from the browse panel into the edit panel.
Click on (the "Layer Properties" button) next to the layout in the edit panel.
Change the duration to "Specify" and set the duration to one minute (You can type "60", Elementi will automatically convert it to an h:mm:ss notation: "0:01:00")

Save your work.