FormulaOne Card

Present the data of Formula One in a pretty way

Watch a demo of the card by BeardedTinker!

Installation

HACS (recommended)

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

Manual install

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: module

The 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.

Configuration

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 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,sprintqualifying)
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)

Actions

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

Example configurations

Next race

type: custom:formulaone-card
card_type: next_race
title: Next Race
date_locale: nl
image_clickable: false

Constructor standings

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

Driver standings

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

Schedule

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

Last results

type: custom:formulaone-card
card_type: last_result
title: Last Result

Results

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

Countdown

type: custom:formulaone-card
card_type: countdown

type: custom:formulaone-card
card_type: countdown
f1_font: true

Icons

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

Translations

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	sprint	'Sprint'
next_race, countdown	qualifying	'Qualifying'
next_race, countdown	sprintqualifying : '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'

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!!'

Weather forecast

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]

TODO

Editor
Use mwc for dropdowns
Better way for unit testing
Use hass-tast-test for testing

marcokreeft87/formulaone-card