Guides

Train Arrivals

Suggest Edits

Here's a very simple digital signage app that shows Washington Metro train arrivals. It loads data from from the WMATA API.

Screens

The home page shows a list of lines. Use the arrow keys to select a line, and hit OK to continue.

The next page shows a list of stations on the selected line. Use the arrows to select a station, and OK to continue.

The last page shows realtime train arrivals for the selected station. It is updated every 15 seconds.

Hit the back button to go back to previous screens.

Typeahead

We'll use the typeahead.js script to handle all the remote control navigation. It works by scanning a web page for links, letting you select them using the arrow keys, follow them with the Enter key, and go back using the Escape key.

You can get all these benefits in your own app just by importing the script. Because we're changing the user interface paradigm so links have to be selected before you follow them, you'll need to define a selected CSS class so that your page knows how to display them:

a.selected {
  color: yellow;
}

As an added bonus, if you're running the app on a computer, you can start typing the name of any link to select it! It's super handy for updating simple websites so you can use them on Senza.

Home page

The home page is completely static, since Metro doesn't open new lines very often.

<!DOCTYPE html>
<html>
<head>
 	<title>Metro</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="styles.css">
</head>
<body>
  <img class="background" src="images/background.jpg">
	<div class="items">
    <img src="images/RD.png" class="dot"><a href="line.html?line=RD">Red Line</a><br>
    <img src="images/OR.png" class="dot"><a href="line.html?line=OR">Orange Line</a><br>
    <img src="images/YL.png" class="dot"><a href="line.html?line=YL">Yellow Line</a><br>
    <img src="images/GR.png" class="dot"><a href="line.html?line=GR">Green Line</a><br>
    <img src="images/BL.png" class="dot"><a href="line.html?line=BL">Blue Line</a><br>
    <img src="images/SV.png" class="dot"><a href="line.html?line=SV">Silver Line</a><br>
	</div>
</body>
<script src="typeahead.js"></script>
</html>

Stations

Because the list of stations on each line doesn't change very often either, we'll use cached responses from the line list API and load them from the data folder.

When the page loads, we'll get the selected line code from the query parameters and then use the fetch() function to load a data file and add a link for each station to the page.

To make navigation easier, we'll pre-select a major station towards the middle of the line, typically Metro Center or Gallery Place. That way the user can on average use fewer button presses to find the station they're looking for. We find the station in the list that has the Selected property set to true, and the call the selectLinkByName() function from the typeahead.js script.

<!DOCTYPE html>
<html>
<head>
 	<title>Metro</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="styles.css">
</head>
<body>
  <img class="background" src="images/background.jpg">
	<div class="items" id="list"></div>
</body>
<script src="typeahead.js"></script>
<script>
  let line = getParam("line", "RD");

  update();

  async function update() {
    let response = await fetch(`data/${line}.json`);
    let data = await response.json();
    let stations = data["Stations"];
    list.innerHTML = stations.map(station => `<img src="images/${line}.png" class="dot">` + 
      `<a href="station.html?line=${line}&station=${station.Code}">${station.Name}</a>`).join('<br>');
    let selected = stations.find(station => station.Selected);
    if (selected) selectLinkByName(selected.Name);
  }
  
  function getParam(name, defaultValue = null) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.has(name) ? urlParams.get(name) : defaultValue;
  }
</script>
</html>

Trains

We'll call a live endpoint from the WMATA API to get realtime train arrivals.

To run the program yourself, you can get an API key from website and enter it in the config.js file.

When the page loads and then again every fifteen seconds, we'll fetch the latest info for the current station, parse the results and then display them on the page.

Some of the station names in the API response are abbreviated, so we'll look them up in the names object to expand them if needed, e.g. Shady Grv → Shady Grove.

<!DOCTYPE html>
<html>
<head>
 	<title>Metro</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="styles.css">
</head>
<body>
  <img class="background" src="images/background.jpg">
	<div class="items" id="list">
    
	</div>
</body>
<script src="config.js"></script>
<script>
  const line = getParam("line", "RD");
  const stationCode = getParam("station", "A09");
  const names = {"Shady Grv": "Shady Grove", "N Carrollton": "New Carrollton", "NewCrlton": "New Carrollton", "Vienna/Fairfax-GMU": "Vienna/Fairfax", "Branch Av": "Branch Ave", "MtVern Sq": "Mt Vernon Sq", "Mt Vern Sq": "Mt Vernon Sq"};

  update();
  setInterval(update, 15000);
  
  async function update() {
    let url = 'https://api.wmata.com/StationPrediction.svc/json/GetPrediction/' + stationCode;
    let response = await fetch(url, {headers});
    let data = await response.json();
    let trains = data["Trains"];
    list.innerHTML = trains.map(train => {
      let name = names[train.DestinationName] || train.DestinationName;
      if (name == "No Passenger") return;
      let code = train.DestinationCode;
      return `<span style="float: right">${train.Min}</span>` +
        `<img src="images/${train.Line}.png" class="dot">` +
        `<a href="${code ? `station.html?line=${train.Line}&station=${code}` : ""}">${name}</a><br>`;
    }).join("");
  }
  
  function getParam(name, defaultValue = null) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.has(name) ? urlParams.get(name) : defaultValue;
  }
</script>
<script src="typeahead.js"></script>
</html>

Conclusion

You can test the app at https://senzadev.net/metro/. It works equally well on Senza with the remote control, or in a regular browser with the mouse.

It's a good example of how you can build an elegantly simple digital signage app with just a few lines of code that can be deployed on Senza.

Go ahead and grab the typeahead.js script if you'd like to quickly add the same kind of user interaction pattern to any web app that uses links!

Updated 24 days ago