Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
London Underground Status Widget
class Dashing.TflStatus extends Dashing.Widget
<h1 class="title" data-bind="title"></h1>
<li data-foreach-item="items">
<span class="label" data-bind="item.label"></span>
<span class="value"><div data-bind-class="item.color"><i data-bind-class="item.arrow"></i></div></span>
<p class="more-info" data-bind="moreinfo"></p>
<p class="updated-at" data-bind="updatedAtMessage"></p>

London Underground Realtime Tube Status

This is a simple widget to show the realtime status of the London Underground Tube lines.

You can update the list of the lines you would like to include in the list in the tfl_status.rb.

The widget uses as the API source and you can findout about the tube line names over there.

To install, just to a dashing install 8846431 and all should be good!

You might need to include HTTParty to your Gemfile if you haven't already:

gem 'httparty'


Most of the code is taken from Server Status Widget by willjohnson

require 'httparty'
lines = ['central','circle','hammersmithcity','metropolitan','northern','victoria']
SCHEDULER.every '300s', :first_in => 10 do |job|
statuses =
result = HTTParty.get("{lines.join(',')}&format=json")
raw_stats = JSON.parse(result.parsed_response)['response']['lines'].select { |s| lines.include? s['id']}
# the API can return dups so we need to sort them and pick the top one
stats = []
# group them by line
grouped = raw_stats.group_by { |i| i['id'] }
# sort each group and pick the most recent update
grouped.values.each do |line|
line_updates = []
line_updates = line.sort { |i| DateTime.parse(i['status_starts']) }
stats << line_updates.first unless line_updates.empty?
# nop
stats.each do |line|
if line['status'] == 'good service'
result = 1
elsif line['status'] == 'minor delays'
result = 2
result = 0
if result == 1
arrow = "icon-ok-sign"
color = "green"
elsif result == 2
arrow = "icon-warning-sign"
color = "yellow"
arrow = "icon-warning-sign"
color = "red"
statuses.push({label: line['id'], value: result, arrow: arrow, color: color })
send_event('tfl_status', {items: statuses})
// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color: #12b0c5;
$value-color: #fff;
$title-color: rgba(255, 255, 255, 0.7);
$label-color: rgba(255, 255, 255, 0.7);
$moreinfo-color: rgba(255, 255, 255, 0.7);
// ----------------------------------------------------------------------------
// Widget-list styles
// ----------------------------------------------------------------------------
.widget-tfl-status {
background-color: $background-color;
vertical-align: top;
.title {
color: $title-color;
ol, ul {
margin: 0 15px;
text-align: left;
color: $label-color;
ol {
list-style-position: inside;
li {
margin-bottom: 5px;
.list-nostyle {
list-style: none;
.label {
color: $label-color;
.value {
float: right;
margin-left: 12px;
font-weight: 600;
color: $value-color;
.updated-at {
color: rgba(0, 0, 0, 0.3);
.more-info {
color: $moreinfo-color;
.red {
color: red;
.yellow {
color: yellow;
.green {
color: green;

This comment has been minimized.

Copy link
Owner Author

@khash khash commented Feb 18, 2014

Fixed issues caused by TFL API changes.


This comment has been minimized.

Copy link

@actionjack actionjack commented Mar 12, 2014

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="tfl_status" data-view="TflStatus" data-title="Tube Status"></div>

This comment has been minimized.

Copy link

@davestephens davestephens commented Apr 23, 2014

Whilst the widget itself works fine, the webservice that it's hitting to collect the TFL data is, unfortunately, no good. It doesn't reflect the true state of the tube lines (always reports everything green, even when TFL is falling to its knees), which in turn makes this widget useless :(


This comment has been minimized.

Copy link

@davestephens davestephens commented Jun 19, 2014

The API this widget uses no longer exists, so this widget is now totally useless :(


This comment has been minimized.

Copy link

@djhomeless djhomeless commented Jan 15, 2017

Has anyone had any luck updating this widget to use the API from tfl as opposed to this defunct 3rd party? Not knowing how the old API was structured I'm struggling to figure out what needs to change in tfl_status.rb.

The new API is here:,overground,dlr,tflrail/status

cc: @khash


This comment has been minimized.

Copy link

@Monahister Monahister commented Mar 9, 2017

you can add the widget as it is to dashboard file:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1"> <div style="width:260px"><script language="JavaScript" src=""></script></div> </li>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment