Transport For London Next-train Display

About the project

A handy R-Pi based mini-monitor, displaying the next train on my nearest train station! (Customisable too for any TFL station)

Project info

Difficulty: Moderate

Platforms: Raspberry Pi

Estimated time: 1 hour

License: MIT license (MIT)

Items used in this project

Hardware components

Raspberry Pi 1 Model B+ Starter Pack - Includes a Raspberry Pi 1 Raspberry Pi 1 Model B+ Starter Pack - Includes a Raspberry Pi 1 x 1
Kuman 3.5 Inch Touch Screen 320*480 TFT LCD Display for Raspberry Pi 3 Model B 2 B B 1 Model A A+ with Protective Case + 3 x Heat sinks+ Touch Pen + SC11 Kuman 3.5 Inch Touch Screen 320*480 TFT LCD Display for Raspberry Pi 3 Model B 2 B B 1 Model A A+ with Protective Case + 3 x Heat sinks+ Touch Pen + SC11 https://www.amazon.co.uk/Kuman-Screen-Display-Raspberry-Protective/dp/B01FX7909Q x 1

Story

Mainly for my partner, but we live roughly a 4 minute walk from the station, our train into the city (And thus to work) leaves every 15 minutes.

TFL has an abundance of data about their services, and I wanted to practice my Javascript too, so worked out pretty well. The app refreshes every 15 seconds, the API refreshes roughly every ~40 seconds, so remains accurate.

  1. window.onload = function what() {
  2. $.getJSON("https://api.tfl.gov.uk/StopPoint/910GPCKHMQD/arrivals", function(data) {
  3. console.log(data);
  4.  
  5. var expectedTrains = [];
  6. for (var i = 0; i < 9; i++) {
  7. // figuring out timestamp, time expected of train, and then difference, then converting to rounded minutes
  8. var nextTrain = data[i].destinationName;
  9. var platform = data[i].platformName;
  10. var timeStamp = new Date(data[i].timestamp);
  11. var expected = new Date(data[i].expectedArrival);
  12. var diff = Math.abs(expected - timeStamp);
  13. var minDiff = (diff / 60 / 1000).toFixed(0);
  14.  
  15. expectedTrains.push({nextTrain, platform, expected, minDiff});
  16. }
  17. console.log(expectedTrains);
  18.  
  19. // sort in assending order by expected time
  20. expectedTrains.sort(function(a, b){return a.expected-b.expected});
  21. console.log(expectedTrains);
  22.  
  23. // Platform 1 - Northbound
  24. var firstOnPlatform1 = expectedTrains.find(function(element) {
  25. return element.platform == "Platform 1";
  26. });
  27. document.getElementById("number1").innerHTML = (firstOnPlatform1.nextTrain) + " in " + (firstOnPlatform1.minDiff) + " minutes " + "on " + (firstOnPlatform1.platform);
  28.  
  29. // Platform 2 - Southbound
  30. var firstOnPlatform2 = expectedTrains.find(function(element) {
  31. return element.platform == "Platform 2";
  32. });
  33. document.getElementById("number2").innerHTML = (firstOnPlatform2.nextTrain) + " in " + (firstOnPlatform2.minDiff) + " minutes " + "on " + (firstOnPlatform2.platform);
  34. });
  35. };
  36.  
  37. // Method to look at next time for date formats.
  38. // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString

Full Source Code

Customisation

Next steps would be to integrate a dropdown box to choose which station to monitor... one day!

The following .getJSON:

  1. $.getJSON("https://api.tfl.gov.uk/StopPoint/910GPCKHMQD/arrivals")
  2.  

Can be customised to any TFL station, by changing the `910GPCKHMQD, the code can be found by searching this link

https://tfl.gov.uk/travel-information/stations-stops-and-piers

and snipping the link of the result. For example, Caledonian Road's URL is

https://tfl.gov.uk/overground/stop/910GCLDNNRB/caledonian-road-barnsbury-rail-station/?Input=Caledonian+Road+%26+Barnsbury+Rail+Station

Thus it's unique identifier is 910GCLDNNRB.

Code

Javascript

Credits

Leave your feedback...