Skip to content

marcokreeft87/formulaone-card

Repository files navigation

FormulaOne Card

GH-release GH-last-commit GH-code-size hacs_badge Codecov Coverage CodeFactor

Present the data of Formula One in a pretty way

Watch a demo of the card by BeardedTinker!

Demo of 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": Open your Home Assistant instance and open a repository inside the Home Assistant Community Store.

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

image

Constructor standings

type: custom:formulaone-card
card_type: constructor_standings
title: Constructor Standings

image

type: custom:formulaone-card
card_type: constructor_standings
title: Constructor Standings
standings:
  show_teamlogo: true

image

Driver standings

type: custom:formulaone-card
card_type: driver_standings
title: Driver Standings

image

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

image

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

image

Results

type: custom:formulaone-card
card_type: results
title: Results

image

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

image

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

image

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