Springvar
June 13, 2024, 9:45am
1
I’ve created a customizable card to view flight data from the Flightradar24 Integration.
Features:
Filter list based on complex custom criteria
Calculates distances and directions to observer based on tracker or fixed location
Calculates closest passing point and eta for approaching flights
Customizable units
Configurable toggles to dynamically control filter
Optional radar view to visualize flights in relation to observer
Zoomable radar view
Select flights in radar view (if excluded by filter)
Add local features (cities, runways, geographic outlines) to radar view
Require sensor data from Flightradar24 Integration (or compatible) to work.
10 Likes
poudenes
June 13, 2024, 10:59am
2
Installed it via HACS. Reload. Clear cache. no card to use…
Springvar
June 13, 2024, 11:10am
3
It will not show up as a selectable card, so you must add is as a manual card with
type: custom:flightradar24-card
If it still doesn’t show anything, do you have access to the console log in your browser? Do you see any logged errors?
vincen
June 13, 2024, 4:35pm
4
Very nice, thanks for the share
somansch
July 18, 2024, 2:56pm
6
Great and powerful card!
Thanks for adding the template documentation and samples. I was able to customize a bit and found a restriction.
I want to translate/change “Alt:”, “Spd:”, “Hdg:” and “Dist:”, but this content is part of your fields “alt_info”, “spd_info”, “hdg_info” and “dist_info”.
Is it possible to exclude it from there?
Springvar
July 21, 2024, 8:48am
7
Try this beta release and see if it has what you need.
somansch
July 24, 2024, 4:56pm
8
I did some tests, but could not get it to work. I want to replace “Dist:” with “Distanz:”. I reloaded 0.0.8 Beta in first test and then downloaded the latest flightradar24-card.js manually.
This is my config:
templates:
aircraft_info: >-
${[flight.aircraft_model, flight.aircraft_registration].filter((el) =>
el).join(" ---- ")}
origin_info: >-
${[flight.airport_origin_city, tpl.departure_info,
flight.origin_flag].filter((el) => el).join("")}
destination_info: >-
${[flight.airport_destination_city, tpl.arrival_info,
flight.destination_flag].filter((el) => el).join(" ")}
flight_status: >-
<div>${[flight.alt_info, flight.spd_info, flight.hdg_info].filter((el) =>
el).join(" - ")}</div>
dist_info: >-
${flight.dist_in_unit ? "Distanz: " + flight.dist_in_unit +
flight.approach_indicator : undefined}
position_status: >-
<div>${[tpl.dist_info, flight.direction_info].filter((el) => el).join(" -
")}</div>
proximity_info: >-
<div style="font-weight: bold; font-style: italic;">${flight.is_approaching
&& flight.ground_speed > 70 && flight.closest_passing_distance < 15 ?
`Ankunft in ${Math.round(flight.eta_to_closest_distance)} Minute(n)` :
""}</div>
…and the result:
1 Like
jchh
September 8, 2024, 11:16am
9
This is awesome!
Is there any way to adjust the radii of the rings? I am quite interested in a 10km view, so would love to have the rings at 2km intervals.
Springvar
September 18, 2024, 4:03pm
10
Sorry, I’ve been a bit busy lately, and are currently in the process of selling my house. Will get back to this as soon as I can.
2 Likes
jchh
October 26, 2024, 6:44am
11
Added in v0.0.9 - thanks, @Springvar
Thanks for the great card, @Springvar
Is there a way to show only the first flight in the list from the Flightradar24 sensor so that only one flight at a time is ever showing?
Thanks
Is there a way to adjust the size of the radar and hide the info? I’d like to split it into two side-by-side cards to make better use of screen space.
jchh
December 17, 2024, 6:28pm
14
Yes! …to the hiding part anyway
I asked the same question a while back and someone was very helpful.
radar without the flights:
- type: custom:flightradar24-card
no_flights_message: ""
filter: # filters flight list (not the radar)
- field: altitude
comparator: gte
value: 999999
radar:
range: 5.1
ring_distance: 1
flights without the radar:
- type: custom:flightradar24-card
no_flights_message: Nothing in range.
sort:
- field: distance
order: desc
templates:
tail_image: >-
<img style="float: left; margin-right: 5px;"
src="https://content.airhex.com/content/logos/airlines_${flight.airline_icao}_90_90_f.png?proportions=keep"
/>
header: ${tpl.tail_image}${tpl.flight_info_element}
radar:
hide: true
1 Like
Fumble
March 18, 2025, 3:03pm
15
It doesn’t work for me:
Not dealt with custom cards before, so could be user error…
jchh
March 18, 2025, 4:31pm
16
Have you added the card via HACS?
This card is awesome! I’m trying to figure out if there’s a way to filter and sort the list of aircraft in the area into two groups. I would love to take this style of card
and then split the aircraft into arrivals and departures. I live near an airport and it would be cool to quickly look and see what flight is about to land/take off. This fucntionality might already be in card, I have read over the documentation, but I think I’m missing something.
Thanks!
jchh
May 9, 2025, 11:30am
18
I think you can filter by direction (coming, going) but only from your location.
1 Like
I (ChatGPT) ended up getting it working more or less the way I want it using filters as @jchh mentioned. Thank you!
Here is the yaml I’m using if anyone else wants to leverage this:
type: custom:vertical-stack-in-card
cards:
- type: iframe
url: >-
https://www.flightradar24.com/simple?lat=32.73&lon=-117.18&z=13&labe11=reg&size=small
aspect_ratio: 100%
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: markdown
content: "### 🛬 Arrivals"
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
padding: 4px 16px;
}
- type: custom:flightradar24-card
title: ""
entity: sensor.flightradar24_current_in_area
filter:
- type: AND
conditions:
- field: airport_destination_code_iata
comparator: eq
value: SAN
- field: altitude
comparator: gte
value: 0
templates:
tail_image: >-
<img style="float: left; margin-right: 6px; height: 40px;"
src="https://content.airhex.com/content/logos/airlines_${flight.airline_icao}_90_90_f.png?proportions=keep"/>
header: >-
${tpl.tail_image}<b>${flight.airline_short}
${flight.flight_number}</b> from ${flight.airport_origin_city}
radar:
hide: true
- type: vertical-stack
cards:
- type: markdown
content: "### 🛫 Departures"
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
padding: 4px 16px;
}
- type: custom:flightradar24-card
title: ""
entity: sensor.flightradar24_current_in_area
filter:
- type: AND
conditions:
- field: airport_origin_code_iata
comparator: eq
value: SAN
- field: altitude
comparator: gte
value: 0
templates:
tail_image: >-
<img style="float: left; margin-right: 6px; height: 40px;"
src="https://content.airhex.com/content/logos/airlines_${flight.airline_icao}_90_90_f.png?proportions=keep"/>
header: >-
${tpl.tail_image}<b>${flight.airline_short}
${flight.flight_number}</b> to
${flight.airport_destination_city}
radar:
hide: true
2 Likes
Just wondering with this card is it possible to have a version that can show much larger text and image of the plane and the tail icon so that its visible from the distance on a HA Kiosk screen.
Currently I use browsermod to popup the flight info overhead with this card and the radar, but very difficult to see the details from a distance.
Great card!
do you plan to add an option to be able to add in background a map like OSM ?
