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.
5 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
do you plan to add an option to be able to add in background a map like OSM ?
