Transport For London Next-train Display

Made by joshua burns

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:

Platforms:

Estimated time:

1 hour

Published:

21st February 2018

Items used in this project


Hardware components

Raspberry pi 3 Model B 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

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...