Present the data of Formula One in a pretty way
Watch a demo of the card by BeardedTinker!
Make sure 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.
Just click here to directly go to the repository in HACS and click "Download":
Or:
- Open HACS
- Go to "Frontend" section
- Click button with "+" icon
- Search for "formulaone-card"
- Click "Download" button and install repository in HACS
In both situations:
- 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.
Tip
If you don't want to use the data from the Jolpi API directy but want to use a Home Assistant integration instead. Use F1 sensor
| Name | Type | Default | Description |
|---|---|---|---|
| type | string | Required | custom:formulaonecard |
| source | string | 'jolpi' | The source you want to use for the card (jolpi/f1sensor). You will have to set the entity |
| entity | string | Only required when using source: f1sensor. Set it to the entity that contains the data needed for the card. So for example when using driver_standings use entity: sensor.f1_driver_standings | |
| 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 and next_race 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 or array | 'race' | Set the event to countdown to (race,qualifying,practice1,practice2,practice3,sprint,sprint_qualifying) |
| show_weather | boolean | false |
Show the weather forecast of the upcoming race |
| next_race_delay | number | Delay (in hours) before the card switches to the next race | |
| show_lastyears_result | boolean | false |
Show the winner of last year (next_race, countdown) |
| only_show_date | boolean | false |
Show the date of the next race (next_race) |
| tabs_order | array | 'results', 'qualifying', 'sprint' | Determine the order of the tabs (result) |
| show_refresh | boolean | false |
Show the refresh button (top right) |
| next_race_display | enum | date |
Show the date, time or both for the next race (date,time,datetime) |
| show_event_details | boolean | false |
Show the date of the next event (countdown) |
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
show_raceinfo: true
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
type: custom:formulaone-card
card_type: countdown
f1_font: true
show_raceinfo: false
countdown_type:
- practice1
- practice2
- practice3
- qualifying
- sprint
- race
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 | race | 'Race' |
| schedule | round | '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 | sprint | 'Sprint' |
| next_race, countdown | qualifying | 'Qualifying' |
| next_race, countdown | sprint_qualifying : 'Sprint 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' |
| countdown | days | 'd' |
| countdown | hours | 'h' |
| countdown | minutes | 'm' |
| countdown | seconds | 's' |
| countdown | until | 'Until' |
| constructor_standings, driver_standings | no_standings | 'No standings available yet' |
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!!'
You can translate the status of the result and last_result card. But only the status column. It works the same way as the other translations.
The possible values for the status column are:
Here are all possible values for the status property with their default translation:
'Finished' : 'Finished',
'+1 Lap' : '+1 Lap',
'Engine' : 'Engine',
'+2 Laps' : '+2 Laps',
'Accident' : 'Accident',
'Collision' : 'Collision',
'Gearbox' : 'Gearbox',
'Spun off' : 'Spun off',
'+3 Laps' : '+3 Laps',
'Suspension' : 'Suspension',
'+4 Laps' : '+4 Laps',
'Transmission' : 'Transmission',
'Electrical' : 'Electrical',
'Brakes' : 'Brakes',
'Withdrew' : 'Withdrew',
'+5 Laps' : '+5 Laps',
'Clutch' : 'Clutch',
'Lapped' : 'Lapped',
'Retired' : 'Retired',
'Not classified' : 'Not classified',
'Fuel system' : 'Fuel system',
'+6 Laps' : '+6 Laps',
'Disqualified' : 'Disqualified',
'Turbo' : 'Turbo',
'Hydraulics' : 'Hydraulics',
'Overheating' : 'Overheating',
'Ignition' : 'Ignition',
'Oil leak' : 'Oil leak',
'Throttle' : 'Throttle',
'Out of fuel' : 'Out of fuel'For this feature to work you have to get an API key here or use F1 sensor
show_weather: true
weather_options:
source: visualcrossing or f1sensor
unit: metric
api_key: [YOUR API KEY HERE]