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.
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.
-
Open HACS and navigate to Custom Repositories.
-
Select
Dashboard
as the Type and enterhttps://github.com/ChevronTango/tfl-status-card
as the repository. Save and refresh. -
Find
TFL Status Card
in the HACS store and select install.
-
Download and copy
tfl-status-card.js
from the latest release into yourconfig/www
directory. -
Add the resource reference as decribed below.
-
Move into your
config/www
directory. -
Grab
tfl-status-card.js
:
$ wget https://github.com/ChevronTango/ha-tfl-status-card/releases/download/v0.0.1/tfl-status-card.js
- Add the resource reference as decribed below.
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:
- Make sure, advanced mode is enabled in your user profile (click on your user name to get there)
- Navigate to Configuration -> Lovelace Dashboards -> Resources Tab. Hit orange (+) icon
- 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) - Restart Home Assistant.
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.
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 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
- Clone this repository into your
config/www
folder using git:
$ git clone https://github.com/ChevronTango/ha-tfl-status-card.git
- Add a reference to the card in your
ui-lovelace.yaml
:
resources:
- url: /local/tfl-status-card/dist/tfl-status-card.js
type: module
Requires nodejs
& npm
.
- Move into the
tfl-status-card
repo, checkout the dev branch & install dependencies:
$ cd tfl-status-card && git checkout dev && npm install
-
Make changes to the source code.
-
Build the source by running:
$ npm run build
-
Refresh the browser to see changes.
Make sure cache is cleared or disabled.
-
(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!)
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
.
This project is under the MIT license.