Rendering a local CSV file data using a Feed

This application note shows how you can use a table loaded from a CSV file as a dynamic data source rendered by Blocks. Such a CSV (comma separated values) file can be exported from an Excel or most other spreadsheet applications. The data in this example lists a number of visitors during the day, with name, company and city. Each visitor also have an expected arrival and departure time.

Installation and Usage

You need a computer with a running blocks server and a web browser to run this application note. Here's the Blocks root for this application note. See the the general setup section for details on downloading and installation. Once that general setup is done, follow these steps to run the application note:

  1. Start Blocks.
  2. Open the Blocks editor using the Admin button.
  3. Log in using the proper credentials (default user name is admin and the password is pixi).
  4. Open a second browser window to the same address as the editor window, but replace /edit/xxx with /spot to act as a simulated Display Spot.
  5. Back in the Blocks editor, double-click the display spot named Lobby.
  6. Assign this display spot to the ID shown in the second browser window and click OK.
  7. The list of visitors should appear in the simulated Display Spot browser window.

There are two blocks in this application note. The "Visitor1" block just renders all the visitors specified in the CSV file (see above). The one named "Visitor2" also shows the visitors' scheduled arrival time, and exclude visitors that have already left. Drag the "Visitor2" block to the "Lobby" spot to see how it works. Depending on the time of day, you may see more or fewer visitors. A blue dot marks all current visitors.

Behind the Scenes

The source data is found in the file script/files/CSVList.csv. This file is loaded by the feed scripts located in script/feed. There are two feed scripts, named after the blocks that use them. They both read the same source data from the CSV file. The Visitor1 script provides the bare minimum in terms of what's needed to read and provide the data to Blocks. The Visitor2 script does the same, plus filter out all visitors where the endTime is in the past, and marks those where the current time is between startTime and endTime.

The Visitor1 block just renders all the entries provided by the feed script as a list using a Scroller. The Scroller is placed in a Slideshow, alternating between the visitor list and a logotype. This causes the list to be reloaded once every cycle.

The Visitor2 block is similar, but also renders a blue dot based on additional data provided by its corresponding feed script, and shows a "No visits scheduled" text in place of the visitor list if there are no more visitors.

The feed scripts manage the connection from Blocks to any data source (here the local CSV file). This application note talks more about feed scripts and how to use external data sources.