Adding tails to the lovelace cards

[motoridersd]

This is more of a documentation suggestion.

The lovelace cards can be configured to include a logo or tail logo of the airline using images from airhex. They have watermarks, but they work well in small configurations. Here is the airhex documentation: https://airhex.com/api/logos/

For larger cards like this:

The following img src code can be used:

<img src="https://content.airhex.com/content/logos/airlines_{{flight.airline_icao}}_90_90_f.png?proportions=keep">

This generates a 90x90 image with strict proportions kept. The letter after the dimensions can be used to pick different logo shapes:

'r' for rectangular logos with 3.5:1 sides ratio; 's' for square logos (1:1 sides); 't' for tail logos (1:1 sides); 'f' for flipped tail logos (1:1 sides)

I'm using the flipped tail logo in my case.

Full card code to show inbound flights to my home airport (SAN). I filter by altitude over 1000 and under 7000 so that I can filter out aircraft flying over or taking off, I change the filters for the Outbound card and the flying over card:

{% set data = state_attr('sensor.flightradar24_current_in_area',
  'flights') %} {% for flight in data | sort (attribute='altitude')%} {% if
  flight.airport_destination_code_iata == 'SAN' and flight.altitude > 1000
  and flight.altitude < 7000 and flight.airline_short %} <table>
 <tr>
  <td><img src="https://content.airhex.com/content/logos/airlines_{{flight.airline_icao}}_90_90_f.png?proportions=keep"></td>
  <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>
  <td>
  {{ flight.flight_number }} {{ flight.aircraft_code }}<br>
  {{ flight.airline_short }}<br>
  {{ flight.airport_origin_code_iata }} <ha-icon icon="mdi:arrow-right"></ha-icon> {{ flight.airport_destination_code_iata }}<br>
  Altitude - {{ flight.altitude }} ft{%if flight.altitude > 0 %} ({{(flight.altitude * 0.3048)| round(0)}} m){% endif%}<br> 
  </td>
 </tr>
 {% endif %}
 </table>
 {% endfor %}

I find that using tables helps keep the card cleaner.

To add small tail logos to the suggested lovelace code provided by the integration, you can replace

<ha-icon icon="mdi:airplane"></ha-icon>

with

<img src="https://content.airhex.com/content/logos/airlines_{{flight.airline_icao}}_20_20_f.png?proportions=keep">

20x20 looks ok to me. If you want to use a square logo instead, use s instead of f like in the guidelines above.

With flipped tails, my card looks like this:

edit: Updated the code to use airline_icao instead of airline_iata because there's a small airline that uses the same JL code as Japan Airlines. Airhex supports ICAO codes so this is more accurate.

[AlexandrErohin]

Thank you for this example!

[nbarrientos]

Thanks for this, it looks cool in "paperwhite" [0] [1] mode too:

[0] https://github.com/sibbl/hass-lovelace-kindle-screensaver [1] https://github.com/lanrat/homeplate/tree/main

[motoridersd]

Thanks for this, it looks cool in "paperwhite" [0] [1] mode too:

[0] https://github.com/sibbl/hass-lovelace-kindle-screensaver [1] https://github.com/lanrat/homeplate/tree/main

Nice! The downside of paperwhite is that you can see the Airhex watermarks in the white space around the tail logo. When in dark mode, it's not visible haha