Custom Component: Flightradar24

Share your Projects! Custom Integrations
203

Has anyone worked out a way to hide the annoying Google Play and Apple Store logos that appear on the live map?

https://www.flightradar24.com/static/images/apps/google_play.svg
https://www.flightradar24.com/static/images/apps/app_store.svg

204

Somebody did but I cannot find the instructions again on how to do so. I know it included creating a new HTML file like below that I named FR-New.html and saved in /homeassistant/www/FR-New.html. Unfortunately, I don’t know where I found the instructions on what to do specifically. I will keep looking.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FlightRadar</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden; /* Prevent scrolling in the body */
        }
        .iframe-container {
            position: relative;
            width: 100%;
            height: 500px; /* Adjust the height as needed */
            overflow: hidden; /* Ensure no scrollbars appear */
        }
        .iframe-container iframe {
            position: absolute;
            top: 0px; /* Adjust the top position to crop the top part */
            left: 0;
            width: 100%;
            height: 700px; /* Adjust this height to ensure the bottom part is also cropped */
            border: none;
        }
    </style>
</head>
<body>
    <div class="iframe-container">
        <iframe src="https://www.flightradar24.com/simple?lat=xx.xxxx&lon=-xx.xx&z=11&label1=reg&size=large"></iframe>
    </div>
</body>
</html>
1 Like
205

Thanks for the tip, I found it by scrolling up! :rofl:

1 Like
206

I was just about to post that I found it at Comment #170. :grin:

208

v1.16.0 Released

Changelog

209

v1.17.0 Released

Changelog

210

v1.18.0 Released

Changelog

211

v1.19.0 Released

Changelog

212

not sure if i am missing something but I am editing the URL for the map and I am getting an error

Configuration error
bad indentation of a mapping entry (2:13)

any ideas?

213

It’s telling you your code structure is wrong for the card (or wherever you have)…specifically at line 2 character 13…
Though really you need to post your code with a query like this (see link) as it’s pretty difficult to help without seeing what you are trying to do…

214

sorry as still new to the HA world… this is what I have been trying to create

- type: entities
    entities:
      - entity: sensor.flightradar24_current_in_area
        name: In area
  - type: conditional
    conditions:
      - condition: numeric_state
        entity: sensor.flightradar24_current_in_area
        above: 0
    card:
      type: markdown
      content: >-
        {% set data = state_attr('sensor.flightradar24_current_in_area',
        'flights') %} {% for flight in data %}
          <ha-icon icon="mdi:airplane"></ha-icon>{{ flight.flight_number }}({{ flight.aircraft_registration }}) - {{ flight.airline_short }} - {{ flight.aircraft_model }}
          {{ flight.airport_origin_city }}{%if flight.airport_origin_city %}<img src="https://flagsapi.com/{{ flight.airport_origin_country_code }}/shiny/16.png" title='{{ flight.airport_origin_country_name }}'/>{% endif %} -> {{ flight.airport_destination_city }}{%
          if flight.airport_destination_country_code %}<img src="https://flagsapi.com/{{ flight.airport_destination_country_code }}/shiny/16.png" title='{{ flight.airport_destination_country_name }}'/>{% endif %}
          {%if flight.time_scheduled_departure %}Departure - {{ flight.time_scheduled_departure | timestamp_custom('%H:%M') }}; {% endif %}{%if flight.time_scheduled_arrival%}Arrival - {{ flight.time_scheduled_arrival | timestamp_custom('%H:%M') }}{% endif %}
          Altitude - {{ flight.altitude }} ft{%if flight.altitude > 0 %} ({{(flight.altitude * 0.3048)| round(0)}} m){% endif%}; Gr. speed - {{ flight.ground_speed }} kts{%if flight.ground_speed > 0 %} ({{(flight.ground_speed * 1.852)| round(0)}} km/h){% endif%}
          {% endfor %}
  - type: iframe
    url: >-
      https://www.flightradar24.com/simple?lat=51.32&lon=-0.56/14&z=ZOOM&label1=reg&size=small
    aspect_ratio: 100%
215

No worries…
YAML is very unforgiving of incorrect spacing/indentation so that’s the error message you are getting

The specific error you are getting here is telling you that the indentation of the entities text you have is off (which is line 2, character 13)…so delete two spaces before entities and you will get past that error anyway.

The Indentation of the second card looks off too so you’ll prob get another error message.
- type: conditional is the start of a new card so should be aligned with - type: entities from the first line…
(there may be more (there definitely are) but work through it and see how you get on)

216

Hi, do you see a possibility for creating a HA ‘device_tracker’ for a specific ‘aircraft_registration’ in the observed range? Thanks :blush:!

217

Im working on it. It would be an option that enable creating device tracking for callsign from additional tracked flights

1 Like
218

Thanks for a great component. Most of it worked perfectly out of the box, but I just can’t seem to get the map to display on the Lovelace card as described. I’m sure I must be doing something stupid, but I just can’t see it…

image
image503×779 38.6 KB

Its like I’m zoomed in on a small section of the Flightradar websites page header - and can’t get to anything else.

The code in the card is…

type: vertical-stack
title: Flightradar24
cards:
  - type: entities
    entities:
      - entity: sensor.flightradar24_current_in_area
        name: In area
  - type: conditional
    conditions:
      - condition: numeric_state
        entity: sensor.flightradar24_current_in_area
        above: 0
    card:
      type: markdown
      content: >-
        {% set data = state_attr('sensor.flightradar24_current_in_area',
        'flights') %} {% for flight in data %}
          <ha-icon icon="mdi:airplane"></ha-icon>{{ flight.flight_number }}({{ flight.aircraft_registration }}) - {{ flight.airline_short }} - {{ flight.aircraft_model }}
          {{ flight.airport_origin_city }}{%if flight.airport_origin_city %}<img src="https://flagsapi.com/{{ flight.airport_origin_country_code }}/shiny/16.png" title='{{ flight.airport_origin_country_name }}'/>{% endif %} -> {{ flight.airport_destination_city }}{%
          if flight.airport_destination_country_code %}<img src="https://flagsapi.com/{{ flight.airport_destination_country_code }}/shiny/16.png" title='{{ flight.airport_destination_country_name }}'/>{% endif %}
          {%if flight.time_scheduled_departure %}Departure - {{ flight.time_scheduled_departure | timestamp_custom('%H:%M') }}; {% endif %}{%if flight.time_scheduled_arrival%}Arrival - {{ flight.time_scheduled_arrival | timestamp_custom('%H:%M') }}{% endif %}
          Altitude - {{ flight.altitude }} ft{%if flight.altitude > 0 %} ({{(flight.altitude * 0.3048)| round(0)}} m){% endif%}; Gr. speed - {{ flight.ground_speed }} kts{%if flight.ground_speed > 0 %} ({{(flight.ground_speed * 1.852)| round(0)}} km/h){% endif%}
          {% endfor %}
  - type: iframe
    url: >-
      https://www.flightradar24.com/simple?lat=-34.99&lon=138.70&z=12&label1=reg&size=small
    aspect_ratio: 100%

What am I doing wrong?

Cheers.

219

Do you get a map view if you copy and paste the url of the iframe in a browser?
If i did that i get a map near Adelaid.
Connection/routing problem from HA device to internet?

220

Thanks Jurgen,

Yes - the map shows perfectly in the browser, and that is where I copied the url from.

My logic tells me that if the HA instance had no internet connectivity - it wouldn’t be displaying the logo from the website. Also, everything else in HA that relies on internet is working fine…

221

Not sure the fix but when I use your url in a browser the image you have posted loads for a split second then refreshes to the correct view for your lat/long…
Have you tried a diff browser, clear cache, etc

222

Hello, How I can find KL123 in my agenda ?

^kl.\d{3,4}.
?
Thanks

223

Hmm. My browser of choice on desktop machines is Firefox - and it is through that I have seen the issue - on two different pc’s (one Windows the other Linux). Just checked through Firefox on my Android - and it worked. Also, just loaded Chrome on the windows machine Chromium on the Linux machine and they both worked as well.

I tried different lon/lat but that made no difference.

Surely I’m not the only person in the world still using Firefox on a desktop machine!!