Flightradar24 Card

Share your Projects! Dashboards & Frontend
1

I’ve created a customizable card to view flight data from the Flightradar24 Integration.

image
image1306×578 197 KB

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.

6 Likes
2

Installed it via HACS. Reload. Clear cache. no card to use…
The resource line is added in dashboard. Did restart HA… no result

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?

4

Very nice, thanks for the share :slight_smile: do you plan to add an option to be able to add in background a map like OSM ?

5

v0.0.8 Released

  • Custom sorting
  • Filter radar view
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?

7

Try this beta release and see if it has what you need.

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:

image
image914×292 51.5 KB

1 Like
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.

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
11

Added in v0.0.9 - thanks, @Springvar :+1:

12

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

13

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.

14

Yes! …to the hiding part anyway

I asked the same question a while back and someone was very helpful.
This is what I ended up with.

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