Anyone know what’s happened to the TFL Tube Status full screen display?
https://tfl.gov.uk/tfl/syndication/feeds/serviceboard-fullscreen.htm
It’s been dead for a few days now.
Thanks
Andy
This has been depreciated. You are expected to make your own board up from a call to https://api.tfl.gov.uk/line/mode/tube/status
Well that would sure explain it!
Are there any alternatives (full screen simple tube status)? Or am I going to have learn how to code!? I was using it as part of a digital sign.
Here’s a basic routine in PHP that generates a serviceboard… The CSS might need fixing to get a full-screen display.
<?php
echo "<style>.rainbowBoard{border:1px solid #ccc;margin-top:10px}.rainbowBoard td{padding:8px 15px 8px 15px}.rainbowBoard tr>td:nth-child(1){color:#fff;width:50%}.rainbowBoard tr>td:nth-child(2){color:#fff}.
black{color:#000!important}.partClosure,.severeDelays{background:#faf5e1}.
.londonoverground{background:#e86a10}.london-overground{background:#e86a10}.piccadillyline{background:#0019a8}.bakerlooline{background:#894e24}.centralline{background:#dc241f}.circleline{background:#ffce00}
.districtline{background:#007229}.hammersmithcityline{background:#d799af}.hammersmith-city{background:#d799af}.jubileeline{background:#6a7278}.metropolitanline{background:#751056}.northernline{background:#000}
.victorialine{background:#00a0e2}.waterloocityline{background:#76d0bd}.tfLRail{background:#0019a8}.docklandslightrailway{background:#00afad}.londontrams{background:#6c0}</style>";
$tflData = json_decode(file_get_contents("https://api.tfl.gov.uk/line/mode/tube,overground,dlr,tflrail,tram/status?"));
$arrSavedNames = [];
$arrResult = [];
foreach ($tflData as $tflDatum) {
$strLineID = strtr($tflDatum->id, ["-" => ""]);
$strMode = $tflDatum->modeName;
if ($strMode == "tube") {
$strMode = "line";
} else if ($strMode == "overground") {
$strMode = "";
} else if ($strMode == "dlr") {
$strMode = "";
$strLineID = "docklandslightrailway";
} else if ($strMode == "tflrail") {
$strMode = "";
$strLineID = "tflrail";
} else if ($strMode == "tram") {
$strLineID = "londontrams";
$strMode = "";
}
$strLineID = $strLineID;
if (isset($tflDatum->name)) {
$arrSavedNames[$strLineID . $strMode] = $tflDatum->name;
}
foreach ($tflDatum->lineStatuses as $lineStatus) {
if (!isset($arrResult[$strLineID . $strMode])) {
$arrResult[$strLineID . $strMode] = $lineStatus->statusSeverityDescription;
} else {
{
$arrResult[$strLineID . $strMode] .= ", " . $lineStatus->statusSeverityDescription;
}
}
}
}
$strStandardRainbowBoard = "";
foreach ($arrResult as $strID => $strStatus) {
$strStandardRainbowBoard .= PHP_EOL . "<tr><td class='$strID'>" . $arrSavedNames[$strID] . "</td><td class='$strID'>$strStatus</td></tr>";
}
echo "<table class='rainbowBoard'>" . $strStandardRainbowBoard . "</table>";That is awesome, thank you!
I have made some tweaks and added a ‘Last updated’ row and it is perfect.
Not really sure why the TFL one had to be scrapped, but this is working well.
My pleasure.
I think that the TfL one was removed for a good reason, probably something to do with https and iFrames.
2 Likes
We are using tube serviceboard status on our website.
Any alternative? other than PHP code.
Welcome. I guess you could do the same sort of this in Javascript, it’s just I had the code from the MTR Crossrail system’s backend that I could cut and paste.
Here’s a quick knock-together code for Javascript…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>.rainbowBoard{border:1px solid #ccc;margin-top:10px;color:#fff}.rainbowBoard td{padding:8px 15px 8px 15px}.rainbowBoard tr>td:nth-child(1){width:50%}.rainbowBoard tr>td:nth-child(2){}
.black{color:#000!important}.partClosure,.severeDelays{background:#faf5e1}
.londonoverground{background:#e86a10}.london-overground{background:#e86a10}.piccadilly{background:#0019a8;color:white}.bakerloo{background:#894e24; color:#fff}.central{background:#dc241f}.circle{background:#ffce00;color:#0019a8}
.district{background:#007229}.hammersmithcity{background:#d799af}.hammersmith-city{background:#d799af}.jubilee{background:#6a7278}.metropolitan{background:#751056}.northern{background:#000;color:#fff}
.victoria{background:#00a0e2}.waterloo-city{background:#76d0bd;color:#0019a8}.tfl-rail{background:#0019a8;color:white}.dlr{background:#00afad}.tram{background:#6c0}</style>
<script>
// Store XMLHttpRequest and the JSON file location in variables
var xhr = new XMLHttpRequest();
var url = "https://api.tfl.gov.uk/line/mode/tube,overground,dlr,tflrail,tram/status";
// Called whenever the readyState attribute changes
xhr.onreadystatechange = function () {
// Check if fetch request is done
if (xhr.readyState == 4 && xhr.status == 200) {
// Parse the JSON string
var jsonData = JSON.parse(xhr.responseText);
// Call the showTfL(), passing in the parsed JSON string
showTfL(jsonData);
}
};
// Do the HTTP call using the url variable we specified above
xhr.open("GET", url, true);
xhr.send();
// Function that formats the string with HTML tags, then outputs the result
function showTfL(data) {
var output = ""; // Open list
// Loop through the artists, and add them as list items
for (var i in data) {
output += "<tr><td class='" + data[i].id + "'>" + data[i].name + "</td>";
var str = "";
for (var j in data[i].lineStatuses)
{
str = str + data[i].lineStatuses[j].statusSeverityDescription
}
output += "<td class='" + data[i].id + "'>" + str + "</td></tr>";
}
// Output the data to the "artistlist" element
document.getElementById("divOut").innerHTML = "<table class='rainbowBoard'>" + output + "</>";
}
</script>
[
<div id="divOut"></div>
]
</body>
</html>
1 Like
Awesome ! this is working perfectly.
Thank you.
1 Like
@andyj300 @briantist is correct. I posted on here a while ago about the deprecation of the widgets - https://techforum.tfl.gov.uk/t/tfl-widgets-to-be-decommissioned-on-31-july-2019/1030/3 Unfortunately, we don’t have a database of people who are using them so couldn’t contact you direct. Glad @briantist has been able to help you out!
No problem! I didn’t know this forum existed until I was searching to find out why it had stopped working. We are all good now though.
I did find some other web facing status screens, but have since lost them. Don’t suppose you have some links?
it seems to be back now.
Hi everyone. I know that this is quite an old chat but I am setting up a website and I need a Tube status widget on it. Problem is, I am not that good with coding and I haven’t got a clue what to do with the new API thing. Can someone please create some code (like the ones above) for the widget in html or something like that so I can use it. If so, can they also provide instructions and whether I need to do anything before I put it on my website? Thanks a lot!
Welcome. I wrote this before, I think it still works… It has to be “hosted” to not come up with a cross-site error.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>.rainbowBoard{border:1px solid #ccc;margin-top:10px;color:#fff}.rainbowBoard td{padding:8px 15px 8px 15px}.rainbowBoard tr>td:nth-child(1){width:50%}.rainbowBoard tr>td:nth-child(2){}
.black{color:#000!important}.partClosure,.severeDelays{background:#faf5e1}
.londonoverground{background:#e86a10}.london-overground{background:#e86a10}.piccadilly{background:#0019a8;color:white}.bakerloo{background:#894e24; color:#fff}.central{background:#dc241f}.circle{background:#ffce00;color:#0019a8}
.district{background:#007229}.hammersmithcity{background:#d799af}.hammersmith-city{background:#d799af}.jubilee{background:#6a7278}.metropolitan{background:#751056}.northern{background:#000;color:#fff}
.victoria{background:#00a0e2}.waterloo-city{background:#76d0bd;color:#0019a8}.tfl-rail{background:#0019a8;color:white}.dlr{background:#00afad}.tram{background:#6c0}</style>
<script>
// Store XMLHttpRequest and the JSON file location in variables
var xhr = new XMLHttpRequest();
var url = "https://api.tfl.gov.uk/line/mode/tube,overground,dlr,tflrail,tram/status";
// Called whenever the readyState attribute changes
xhr.onreadystatechange = function () {
// Check if fetch request is done
if (xhr.readyState == 4 && xhr.status == 200) {
// Parse the JSON string
var jsonData = JSON.parse(xhr.responseText);
// Call the showTfL(), passing in the parsed JSON string
showTfL(jsonData);
}
};
// Do the HTTP call using the url variable we specified above
xhr.open("GET", url, true);
xhr.send();
// Function that formats the string with HTML tags, then outputs the result
function showTfL(data) {
var output = ""; // Open list
// Loop through the artists, and add them as list items
for (var i in data) {
output += "<tr><td class='" + data[i].id + "'>" + data[i].name + "</td>";
var str = "";
for (var j in data[i].lineStatuses)
{
str = str + data[i].lineStatuses[j].statusSeverityDescription +" "
}
output += "<td class='" + data[i].id + "'>" + str + "</td></tr>";
}
// Output the data to the "artistlist" element
document.getElementById("divOut").innerHTML = "<table class='rainbowBoard'>" + output + "</>";
}
</script>
[
<div id="divOut"></div>
]
</body>
</html>Hiya, thanks! What does ‘hosted’ mean, sorry for being such a noob! And are the messages in double-dashes part of the code or just instructions that need to be removed?
Many thanks
No problem.
By “hosted” I mean it needs to be on a website (via http or https), it won’t work from a local file system.
Ahh ok. I tried it out on wordpress but it came up wit h two of these [ ]Do I need to do anything else to the code. Really sorry about this
Ah, if it WordPress you can use the PHP version!
I’ve tested this! Use this plugin to add code snippets to your wordpres site
https://xyzscripts.com/wordpress-plugins/insert-php-code-snippet/details
Once you’ve done that, create a new one called tubestatus with this code
echo "<style>.rainbowBoard{border:1px solid #ccc;margin-top:10px;color:#fff}.rainbowBoard td{padding:8px 15px 8px 15px}.rainbowBoard tr>td:nth-child(1){width:50%}.rainbowBoard tr>td:nth-child(2){}
.black{color:#000!important}.partClosure,.severeDelays{background:#faf5e1}
.londonoverground{background:#e86a10;color:white}.london-overground{background:#e86a10;color:white}.piccadilly{background:#0019a8;color:white}.bakerloo{background:#894e24; color:#fff}.central{background:#dc241f;color:white}.circle{background:#ffce00;color:#0019a8}
.district{background:#007229;color:white}.hammersmithcity{background:#d799af;color:white}.hammersmith-city{background:#d799af;color:white}.jubilee{background:#6a7278;color:white}.metropolitan{background:#751056;color:white}.northern{background:#000;color:#fff}
.victoria{background:#00a0e2;color:white}.waterloo-city{background:#76d0bd;color:#0019a8}.tfl-rail{background:#0019a8;color:white}.dlr{background:#00afad;color:white}.tram{background:#6c0;color:white}</style>";
$url = "https://api.tfl.gov.uk/line/mode/tube,overground,dlr,tflrail,tram/status";
$responseText = file_get_contents($url);
$jsonData = json_decode($responseText);
showTfL($jsonData);
// Function that formats the string with HTML tags, then outputs the result
function showTfL($data)
{
$output = ""; // Open list
// Loop through the tubelines, and add them as list items
foreach ($data as $tubeline) {
$output .= "<tr><td class='" . $tubeline->id . "'>" . $tubeline->name . "</td>";
$str = "";
foreach ($tubeline->lineStatuses as $lineStatus) {
$str .= $lineStatus->statusSeverityDescription . " ";
}
$output .= "<td class='" . $tubeline->id . "'>" . $str . "</td></tr>";
}
// Output the data to the "divOut" element
echo " <div id=\"divOut\"><table class='rainbowBoard'>" . $output . "</></div>";
}
Once you’ve done that, insert a code into a page
And it will show this…
2 Likes
Thank you very much, that worked perfectly!!
1 Like