Skip to content

ChevronTango/tfl-status-card

Repository files navigation

Lovelace TFL Status Card

A status card for Home Assistant Lovelace UI for showing the London Underground lines and their current status.

The card works with entities from within the sensor domain and is intended to be used with entities from the London Underground Integration.

Preview

Install

HACS (recommended)

This card is not yet available in HACS (Home Assistant Community Store) directly but can still be added manually. HACS is a third party community store and is not included in Home Assistant out of the box.

  1. Open HACS and navigate to Custom Repositories.

  2. Select Dashboard as the Type and enter https://github.com/ChevronTango/tfl-status-card as the repository. Save and refresh.

  3. Find TFL Status Card in the HACS store and select install.

Manual install

  1. Download and copy tfl-status-card.js from the latest release into your config/www directory.

  2. Add the resource reference as decribed below.

CLI install

  1. Move into your config/www directory.

  2. Grab tfl-status-card.js:

$ wget https://github.com/ChevronTango/ha-tfl-status-card/releases/download/v0.0.1/tfl-status-card.js
  1. Add the resource reference as decribed below.

Add resource reference

If you configure Lovelace via YAML, add a reference to tfl-status-card.js inside your configuration.yaml:

resources:
  - url: /local/tfl-status-card.js?v=0.0.1
    type: module

Else, if you prefer the graphical editor, use the menu to add the resource:

  1. Make sure, advanced mode is enabled in your user profile (click on your user name to get there)
  2. Navigate to Configuration -> Lovelace Dashboards -> Resources Tab. Hit orange (+) icon
  3. Enter URL /local/tfl-status-card.js and select type "JavaScript Module". (Use /hacsfiles/tfl-status-card/tfl-status-card.js and select "JavaScript Module" for HACS install)
  4. Restart Home Assistant.

Using the card

We recommend looking at the Example usage section to understand the basics to configure this card. (also) pay attention to the required options mentioned below.

Options

Card options

Name Type Default Since Description
type (required) string v0.0.1 custom:tfl-status-card.
entities (required) list v0.0.1 One or more sensor entities in a list, see entities object for additional entity options.

Entities object

Entities may be listed directly (as per sensor.temperature in the example below), or defined using properties of the Entity object detailed in the following table (as per sensor.pressure in the example below).

Name Type Default Description
entity (required) string Entity id of the sensor.
name string Set a custom display name, defaults to entity's friendly_name.
entities:
  - sensor.picadilly
  - entity: sensor.central
    name: Central Line
  - sensor.victoria

Development

  1. Clone this repository into your config/www folder using git:
$ git clone https://github.com/ChevronTango/ha-tfl-status-card.git
  1. Add a reference to the card in your ui-lovelace.yaml:
resources:
  - url: /local/tfl-status-card/dist/tfl-status-card.js
    type: module

Instructions

Requires nodejs & npm.

  1. Move into the tfl-status-card repo, checkout the dev branch & install dependencies:
$ cd tfl-status-card && git checkout dev && npm install
  1. Make changes to the source code.

  2. Build the source by running:

$ npm run build
  1. Refresh the browser to see changes.

    Make sure cache is cleared or disabled.

  2. (Optional) Watch the source and automatically rebuild on save:

$ npm run watch

The new tfl-status-card.js will be build and ready inside /dist.

Note that the dev branch is the most up-to-date and matches our beta releases.

Please refer to the Contribution Guidelines if you're interested in contributing to the project. (And thanks for considering!)

Getting errors?

Make sure you have javascript_version: latest in your configuration.yaml under frontend:.

Make sure you have the latest versions of tfl-status-card.js & tfl-status-lib.js.

If you have issues after updating the card, try clearing your browser cache.

If you have issues displaying the card in older browsers, try changing type: module to type: js at the card reference in ui-lovelace.yaml.

License

This project is under the MIT license.

About

A card for displaying the status of London Underground lines in the style of the TFL status screen

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 2

  •  
  •