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