Display an RSS text ticker

Introduction

RSS ticker - final result

This tutorial explains how to add a text ticker displaying news from the Internet, syndicated via RSS, to an existing project (in this case, the one obtained after following "My first Elementi project" tutorial).

For this, we are going to use the "RSS Text Ticker" widget 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, the Science section of Google News.

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.

Video

For full screen, see this video on Vimeo.

Tutorial

RSS ticker project

Version 1.1 (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.)

Getting started

Import the RSS ticker widget

To get started, follow "My first Elementi project" tutorial. Once done, make a copy of that project, rename the copy to "RSS ticker" and then open it.

1. Open the layout "First Layout" in the Browse panel (double click on the "First Layout" folder)
2. Open the layout master file "index.svg" in the Preview panel (Double-click on the "index.svg" file).

Next, let's import the RSS Text Ticker widget into the current project. For that, follow these steps:

1. Click on the "Library" tab within the browse panel. This opens the Elementi Library.
2. Open the "RSS" folder and find the "Text Ticker.svg" widget.
   • For Elementi 3.X, open the "Feeds" folder and find the "RSS Text Ticker.svg" widget (it should be the last one).
3. Drag & drop the widget from the browse panel onto the Preview panel or Edit panel. A new media layer is added on top of the other layers.
4. Go back to the project.

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

Cosmetic work

Position the RSS ticker layer

Set box format properties

Reposition the clock layer

Next, let's do a little bit of cosmetic work to arrange things nicely within the layout.

1. Position the RSS ticker layer to the bottom of the layout.
   1. Click on the "Align" button on the toolbar and select "Align Left".
   2. Click again on the "Align" button on the toolbar and select "Align Bottom".
   3. Resize the layer into a band on the bottom of the screen (right about the height of the clock).
   4. Lock the layer by clicking on the "Lock" icon within the edit panel. This ensures that the RSS layer is not modified by mistake afterwards within the preview panel.
2. Add a semitransparent background to the layer.
   1. Click on (the "Layer Properties" button). This opens the Layer Properties dialog.
   2. Go to the "Box Format" tab.
   3. Select the Mat option, set its opacity to 0.6 and its color to white.
   4. Click on the OK button to apply the new properties of the layer.
3. Reposition the clock
   1. Within the edit panel, move the clock layer on top of all the other layers using drag & drop (or the right-click menu).
   2. Unlock the clock layer.
   3. Within the preview panel, move the clock a little bit higher so it won't be overlapped by the ticker.
   4. Lock the clock layer again.
      

RSS feed source

Set the RSS data source

Next, let's change the RSS 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, the Science section of Google News. For that, follow these steps:

1. Double-click on the "RSS Text Ticker.svg" layer within the edit panel. This opens the widget within the main layout context (i.e. without closing index.svg document).
2. Click twice on the "Data source" property. This opens the "Data Feed Properties" dialog.
3. Enter the address of the news data - for instance https://news.google.com/news?topic=snc&output=rss
4. Change the refresh period to one hour (1h). This ensures that the RSS data feed is updated from the Google server every hour.
5. Optionally, limit the number of items to display to the first 10 entries.
6. Click on the "Test..." button to verify the results.
7. Click on the "OK" button to save the changes to the data source.

RSS feed layout

Set the text template

Optionally, we could modify the data layout to include some text between each news item to separate them visually.

For that, follow these steps:

1. Click twice on the "Text template" property. This opens the "Edit Text" dialog.
2. After the default "[[title]]" (which is a placeholder for the title of the news), add a separator, something like " ------ provided by Google News ------".
3. Select the separator text and make it italic.
4. Click on the "OK" button to save the changes to the text template.
   

Final steps

RSS ticker - final result

1. Click on the "Leave" button from the toolbar to go back to the layout master file (index.svg).
2. Click on the "Save" button to save the changes.
3. Optionally, publish the project to one or more HMP devices as described on "Publishing from Elementi" tutorial.

See also

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

• Displaying an RSS slideshow
• Displaying a text file
• Display the content of a spreadsheet file
• Displaying calendar events
• Display a JSON data feed (advanced tutorial For Elementi X users)