Full Screen Tube Status 404

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

@andyj300

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.

@SriSwe2108

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?

This widget is suddenly today working again? Can we assume its back?

it seems to be back now.