Display a JSON data feed

Introduction

JSON data feed - final result

This tutorial explains how to display a JSON data feed from Internet in 3 steps:

Get the feed: Access and retrieve a web feed from one of the many web services available.
Parse the feed: Extract from the JSON feed just the information we are interested to display.
Rendering the feed: Compose in real time the final Layout by rendering the JSON feed content on top of other multimedia layers.

SpinetiX products come with all the necessary tools to complete the above 3 steps, without dedicated servers or specific programming skills. For this, we are going to use and modify the Table widget from the Elementi X widget library.

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

Video

Tutorial

JSON data feed project

Version 1.0 (2015-04-09)

Difficulty: Medium.
Total duration: 15-30 minutes.
Requirements:
- Elementi X, version 3.1.0 or later. (The latest version is recommended.)
- (Optional) One or more HMP devices using firmware 3.1.0 or later for the publishing part of the tutorial. (The latest version is recommended.)
- User should be familiar with the creation of Project (see "My first Elementi project" tutorial) and use of feeds widgets ( see "RSS ticket" tutorial).

Getting started

In this tutorial we discuss how easy can be to display on your digital signage screen, a timetable showing real-time departures of the next buses from a certain bus stop in Lausanne city.

The source of content is publicly available thanks to the “Swiss public transport API” documented and presented here: http://transport.opendata.ch. You are invited to open and read this link before continuing with the tutorial.

The “Swiss public transport API”, as many other web services, has chosen to build their API on the REST architectural style. The REST architectural style comes with some terminology and has been adopted widely because its flexibility and simplicity. Without being an expert, it is important to know that in a REST API, a “Resource” is a URI that returns specific data simply by typing it in a web browser.

The following "resources" are offered today by the “Swiss public transport API”:

/locations ( http://transport.opendata.ch/v1/locations )
Returns the matching locations for the given parameters
/connections ( http://transport.opendata.ch/v1/connections )
Returns the next connections from a location to another.
/stationboard ( http://transport.opendata.ch/v1/stationboard )
Returns the next connections leaving from a specific location.

In our scenario the URI to call is: http://transport.opendata.ch/v1/stationboard?station=Lausanne-flon

The request parameter “station” allows to set the station of departure (in our case "Lausanne-flon", but it could be any other station in Switzerland, France, Germany, or Italy). The returned data is described using JSON open standard format.

The string carries all sort of information on the station Lausanne, in our scenario we are interested only on few of them: the destination, the type of connection (Bus, train…) the number of the connection (Bus 1, 2…) and the estimated departure time. We need to read the documentation or use JSON parsing tools to identify where the above data is described in the JSON string.

{
  "station": { ... },
  "stationboard": [
    {
      "stop": {
        "station": { ... },
        "departure": "2015-04-09T14:57:00+0200",
        "departureTimestamp": 1428584220,
        "delay": null,
        "platform": "",
        "prognosis": { ... },
        "location": {...}
      },
      "name": "BUS 7",
      "category": "BUS",
      "number": "7",
      "to": "Pully, Val-Vert",
      "passList": [... ]
    },
    { ... },
    { ... }
  ]
}

We can identify the following:

All the data we are interested in is located in an array under the variable 'stationboard'.
The 4 variable we are interested in are the following (using JavaScript oject notation)
- 'to' : The destination
- 'category': The type of connection
- 'number' : The number of the connection
- 'stop.departure' : The departure time prognosis to the checkpoint. Date format: ISO 8601
  Note that this later information 'departure' is located inside the 'stop' object, thus the notation 'stop.departure'.

Creating the project

Import the Table widget

To get started, create a new Project called 'JSON data feed'. See "My first Elementi project" tutorial if you are unsure on how to do this.

Once you create it, make sure to have a light colored background for the project.(for this project we use white as background color)

Next, let's import the feed widget we need for the current project. As we are going to display data in a table we will base our work on the Table widget. For that, follow these steps:

Click on the "Widgets" tab within the browse panel. This opens the Elementi Library.
Open the "Data Feeds" folder and find the "Table.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. Note that the widget file was automatically copied into the current project upon import.
Right-click on the widget that is on the preview screen and select "Fit Screen".

Customize the widget

Edit the data feed properties

To customize the widget, we need to change the "Data source" properties:

Double-click on the Table.svg layer to start editing the widget.
Click on the blue icon next to the "Data source" to open the Data feed properties dialog.
Type in the following URL: http://transport.opendata.ch/v1/stationboard?station=Lausanne&limit=20
This will get the transportation string from the "Swiss Public transport API"
Set the Refresh period to 1 minute (1m)

Configuring JSON parser

The Feed test dialog that appears informs you that the JSON string has 2 Paths: station and stationboard. From the API documentation, we know that we are interested in 'stationboard' path that includes all connections. We have already identified which variables we need to extract, we can now use Elementi X to extract these variables automatically from the JSON string. This is done in the dialog Data Feed Parser by selecting the JSON Parser TAB.

Specify the 'stationboard' as Path
Check "Specify output"
Specify the subpaths (object.variable) by indicating a Variable name (you are free to choose the best name here), and the JSON Path.
For the special case of the 'departure', we need to change the path to"stop.departure".

Test feed parsing

The test button now shows the information to display, but still hasn't format the "departure" in a "Date/Time " type.

Get back to the "Source " tab

Select "departure" in the "Format" section and change the type from "Script" to "Date/Time", to finally click the "add" button
Find & select "ISO-8601,..."
By making it, we manually told Elementi to consider " departure " as "Date/Time" rather than a "String"

The test button now shows the information we want to display.

We have extracted 4 variables name: category, departure, to and number. The widget will automatically query the web service to fill these variables with up-to-date values.

Layout

Add number text layer

The layout used to display the data feed is highly dependent on your application. This section explains one possible layout setup using the Elementi layering tools.

We now need to display the values in the widget.

Go to the Properties tab of the widget.
Change the number of rows from 2 to 5.
decrease the number of columns from 2 to 1
Go to the Layers tab of the widget.
There are 2 layers already present: one is a text layer that displays the variable “title”, one is a media layer that displays the variable “link”. These two variables do not exist anymore in the JSON string.
Delete all the layers.

Edit number properties

Let's add the bus number at the beginning of each line.

Add a new text layer. (see the add text section of "My first Elementi project" tutorial if you need more information on this step)
Click on the Preview panel to switch Elementi the 'Edit Mode'. This will put the playback in pause mode, and show the |placeholder for editing. To go back to the normal mode, press the play button.
Click on (the "Layer Properties" button). This opens the Layer Properties dialog.
Position the layer either using the editing mode on the preview or by directly editing the position of the layer in the layer properties. In this example we have used the following: Horizontal align: center and vertical align: middle; then we set the position to the following: Left=0, Top=0, Width=256,Height=144
In the essential change the 'Smart Text' to 'Headline' and set the scaling to 'Uniform'.
This will ensure that the bus number is displayed as big as possible.
Change the text content to [[number]]in the edit text tab to display the variable extracted by the feed parser.
Set the opacity to 0.6 int the "Box Format" tab and a color that please you. (we choose #00417F)

Edit destination properties

Let's add the destination of the bus.

Add a new text layer.
Click on (the "Layer Properties" button). This opens the Layer Properties dialog.
Position the layer either using the editing mode on the preview or by directly editing the position of the layer in the layer properties. In this example we have used the following: Horizontal align: center and vertical align: middle; then we set the position to the following: Left=256, Top=0, Width=592,Height=144
In the essential change the 'Smart Text' to 'Automatic Scroll' and set the number of lines to 2.
This will ensure that the destination is always displayed on two lines, and if the text is too long to fix, an animation will be used to scroll the text.
Change the text content to [[to]] in the edit text tab
Set the opacity to 0.6 int the "Box Format" tab and a color that please you. (we choose #00417F)

Edit departure properties

Let's add the departure time of the bus.

Add a new text layer.
Click on (the "Layer Properties" button). This opens the Layer Properties dialog.
Position the layer either using the editing mode on the preview or by directly editing the position of the layer in the layer properties. In this example we have used the following: Horizontal align: center and vertical align: middle; then we set the position to the following: Left=848, Top=0, Width=432,Height=144
Go to the 'Edit text'
1. Change the size and the color of the text
2. Change the text to [[departure>SHORT_TIME]]
  For the departure time, we use a compact time format (SHORT_TIME) instead of the complete date.
Set the opacity to 0.6 int the "Box Format" tab and a color that please you. (we choose #00417F)

Configuring the Locale

By default, Elementi will use English-US formatting style for the time. Let's change it to 24h format using the locale.

In the Properties tab, find the "Locale" property.
Use the drop-down to select the locale of your country.
If your language is not listed you can select the 'More...' option to get access to the full list of locales.

Final steps

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

Improvements

Various additional improvements can be done to the result of the tutorial.

Filtering

Add String filter

Configure String filter

Testing filters

Elementi X offers to the user additional features to customize what data to display. In particular for each of the variables extracted from JSON, it is possible to apply powerful filtering actions.

As an example, imagine you are interested only on the Buses that leave Lausanne railway station. In this case you need to filter out all transport categories different from “BUS”. This can be done directly from Elementi X by using the Format line of the Data feed Properties dialog.

Open the Data feed properties dialog.
In the 'Format' line select the variable to be filtered: 'category' in our case
Select the type of filter to be used: 'String Filter' in our case
Click on the 'Add' button.
A new tab will be added to the menu.
Select the "String Filter on category' tab.
Select the 'Equal' filter and enter 'BUS" as the target string.
If you want to filter on multiple keywords, you must use the 'Match' filter and use a regular expression such as (BUS|TRAIN) to keep only the buses and the trains.

The test button now shows the result of the filtering.