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
My pleasure! Always happy to help.
Hi Again!
I tried the PHP in wordpress (I am using the elementor editor) and it basically crashed my website editor so I can’t use it, sorry. As I can use HTML, would it be possible to use the html above on wordpress, and if so, could you please show me how. Thank you very much and sorry for being such a noob at this! 
P.S. My site editor will only accept html
Hi,
It turns out that you can no longer use client-based interfaces with Apple Safari or Google Chrome because they now block the use of “AJAX” to another website.
You should be able to switch the editor to raw mode and insert the shortcode that way. Have you tried typing ctrl+shift+alt+M to switch to the basic editor?
I’m pleased to say that TfL have sorted the problem and the code - Full Screen Tube Status 404 - #15 by briantist - works again!