Present the data of Formula One in a pretty way
Make shure you have HACS (Home Assistant Community Store) installed.
HACS is a third party community store and is not included in Home Assistant out of the box.
- Open HACS
- Go to "Frontend" section
- Click button with "+" icon
- Search for "formulaone-card"
- OR u can click here
and it will take u directly to HACS (if it's installed)
- Install repository in HACS
- If u are using YAML mode then add this to your Lovelace resources
url: /hacsfiles/formulaone-card/formulaone-card.js type: module
- Refresh your browser
Manually download formulaone-card.js and add it
to your <config>/www/ folder and add the following to the configuration.yaml file:
lovelace:
resources:
- url: /local/formulaone-card.js
type: moduleThe above configuration can be managed directly in the Configuration -> Lovelace Dashboards -> Resources panel when not using YAML mode, or added by clicking the "Add to lovelace" button on the HACS dashboard after installing the plugin.
| Name | Type | Default | Description |
|---|---|---|---|
| type | string | Required | custom:formulaonecard |
| card_type | string | Required | The type of card you want to display (driver_standings,constructor_standings,next_race,schedule,last_result,results,countdown) |
| title | string | The header of the card ( hidden when null or empty) | |
| date_locale | string | Override the locale used for the date and time formatting. Available options listed here | |
| image_clickable | boolean | false |
Click on image leads to wikipedia, or not |
| show_carnumber | boolean | false |
Show the number of the car |
| show_raceinfo | boolean | false |
Show the info of the race in the countdown card |
| hide_tracklayout | boolean | false |
Hide the track layout image in the card |
| hide_racedatetimes | boolean | false |
Hide the race information (dates and times of the qualifications/race/sprint) in the card |
| f1_font | boolean | false |
Use the official F1 font for headers |
| location_clickable | boolean | false |
Click on the location leads to wikipedia |
| previous_race | enum | Hide/strikethrough or make the past races italic options are (hide, strikethrough or italic) | |
| standings | object | Configuration for the driver standings card | |
| translations | dictionary | translations | Dictionary to override the default translation |
| actions | object | Actions | The tap, double tap or hold actions set on the image of the countdown, last_result, results, qualifying_results and next-race cards |
| row_limit | number | Limit the schedule, results, last_result, driver_standings and constructor_standings to this amount of row | |
| countdown_type | string | 'race' | Set the event to countdown to (race,qualifying,practice1,practice2,practice3,sprint) |
| show_weather | boolean | false |
Show the weather forecast of the upcoming race |
This card supports all the default HA actions, except from more-info and toggle. See Lovelace Actions for more detailed descriptions and examples.
| Name | Type | Default | Description |
|---|---|---|---|
| action | string | Required | call-service, url, navigate, fire-dom-event, none |
| service | string | Service to call when action is call-service |
|
| service_data | object | Optional data to include when action is call-service |
|
| url_path | string | URL to open when action is url |
|
| navigation_path | string | Path to navigate to when action is navigate |
|
| confirmation | bool/object | false |
Enable confirmation dialog |
| haptic | string | none |
Haptic feedback (success, warning, failure, light, medium, heavy, selection) |
Actions example:
type: custom:formulaone-card
card_type: next_race
actions:
tap_action:
action: navigate
navigation_path: /lovelace/overview
type: custom:formulaone-card
card_type: next_race
title: Next Race
date_locale: nl
image_clickable: false
type: custom:formulaone-card
card_type: constructor_standings
title: Constructor Standings
type: custom:formulaone-card
card_type: constructor_standings
title: Constructor Standings
standings:
show_teamlogo: true
type: custom:formulaone-card
card_type: driver_standings
title: Driver Standings
This card can also show the flags and team names of the driver:
type: custom:formulaone-card
card_type: driver_standings
title: Driver Standings
standings:
show_flag: true
show_team: true
show_teamlogo: true
type: custom:formulaone-card
card_type: schedule
title: Schedule
date_locale: nl
This card can also show the flags of the countries of the tracks:
type: custom:formulaone-card
card_type: schedule
standings:
show_flag: true
type: custom:formulaone-card
card_type: last_result
title: Last Result
type: custom:formulaone-card
card_type: results
title: Results
This card can also show the flags and team names of the driver, alongside the logo of the teams:
type: custom:formulaone-card
card_type: results
title: Results
standings:
show_flag: true
show_team: true
show_teamlogo: true
type: custom:formulaone-card
card_type: countdown
type: custom:formulaone-card
card_type: countdown
f1_font: true
The following icons can be altered.
| Card type(s) | Key | Default value |
|---|---|---|
| results | results | mdi:trophy |
| results | qualifying | mdi:timer-outline |
| results | sprint | mdi:flag-checkered |
The following texts can be translated or altered.
| Card type(s) | Key | Default value |
|---|---|---|
| next_race, schedule | date | 'Date' |
| next_race, countdown | practice1 | 'Practice 1' |
| next_race, countdown | practice2 | 'Practice 2' |
| next_race, countdown | practice3 | 'Practice 3' |
| next_race, countdown, schedule | race' | 'Race' |
| next_race, countdown | racename | 'Race name' |
| next_race, countdown | circuitname | 'Circuit name' |
| next_race, countdown, schedule | location' | 'Location' |
| next_race, countdown | city | 'City' |
| next_race, countdown | racetime | 'Race' |
| next_race, countdown | sprint | 'Sprint' |
| next_race, countdown | qualifying | 'Qualifying' |
| next_race, countdown, schedule | endofseason | 'Season is over. See you next year!' |
| constructor_standings | constructor | 'Constructor' |
| constructor_standings, driver_standings, last_result | points | 'Pts' |
| constructor_standings, driver_standings | wins | 'Wins' |
| driver_standings, results | team | 'Team' |
| driver_standings, last_result, results | driver | 'Driver' |
| last_result | grid | 'Grid' |
| last_result | status | 'Status' |
| schedule | time | 'Time' |
| results | raceheader | 'Race' |
| results | seasonheader | 'Season' |
| results | selectseason | 'Select season' |
| results | selectrace | 'Select race' |
| results | noresults | 'Please select a race thats already been run' |
| results | nosprint | 'No sprint race results available.' |
| countdown | days | 'd' |
| countdown | hours' : 'h' | |
| countdown | minutes' : 'm' | |
| countdown | seconds' : 's' |
Example:
type: custom:formulaone-card
card_type: next_race
title: Next Race
date_locale: nl
image_clickable: true
translations:
'date' : 'Date'
'practice1' : 'Practice 1'
'practice2' : 'Practice 2'
'practice3' : 'Practice 3'
'race' : 'Race'
'racename' : 'Race name'
'circuitname' : 'Circuit name'
'location' : 'Location'
'racetime' : 'Race'
'sprint' : 'Sprint'
'qualifying' : 'Qualifying'
'endofseason' : 'Season is over. See you next year!!'
For this feature to work you have to get an API key here
show_weather: true
weather_options:
unit: metric
api_key: [YOUR API KEY HERE]
- Editor
- Live timing poc (https://livetiming.formula1.com/static/2022/2022-11-20_Abu_Dhabi_Grand_Prix/2022-11-20_Race/RaceControlMessages.json)
- Use mwc for dropdowns
- Better way for unit testing
- Weather forecast next race (marcokreeft87#145)
- Convert jest tests to fetchMock