Person Card with Static Map API Background

ElVit · June 6, 2024, 11:50am

Hi community,

I have found somewhere on reddit (can not remember the exact link) a very nice person card.
So its actually not my idea, but I couldn’t find it here in the community forum, so I will show it here.
After some modifications my card looks like this:
grafik

It uses geoapify to get a static backround image of your current device_tracker position.
So you will need an geoapify account.
The free plan allows you 3000 requests per day.
For me its more than enough, but if you need more you have to choose a different plan and pay for it.

Additionally you will need some integrations frome the HACS store:

Here is the Code:

type: custom:stack-in-card
card_mod:
  style: |
    ha-card {
      background: url('https://maps.geoapify.com/v1/staticmap?style=osm-bright&width=600&height=230&center=lonlat:{{ state_attr('device_tracker.MY_IPHONE', 'longitude') }},{{ state_attr('device_tracker.MY_IPHONE', 'latitude') }}&zoom=14.0&marker=lonlat:{{ state_attr('device_tracker.MY_IPHONE', 'longitude') }},{{ state_attr('device_tracker.MY_IPHONE', 'latitude') }};type:material;color:%23ff3421;icontype:awesome&scaleFactor=2&apiKey=YOUR_API_KEY');
      background-size: cover;
      background-blend-mode: overlay;
      background-color: rgba(var(--rgb-card-background-color), 0.5);
    }
cards:
  - type: custom:mushroom-template-card
    entity: person.MY_PERSON
    primary: MY_PERSON
    secondary: >-
      {{ iif(states(entity) == 'not_home', 'away', states(entity)) | title }} |
      {{ states('sensor.MY_IPHONE_geocoded_location') }}
    picture: '{{ state_attr(entity, ''entity_picture'') }}'
    badge_icon: >-
      {% set zone = iif(states(entity) == 'not_home', 'away', states(entity)) %}
      {%- if 'home' in zone.lower() -%}
        mdi:home
      {%- elif zone == 'MY_WORK' -%}
        mdi:office-building
      {%- else -%}
        mdi:home-export-outline
      {%- endif -%}
    badge_color: >-
      {% set zone = iif(states(entity) == 'not_home', 'away', states(entity))
      %}  {%- if 'home' in zone.lower() -%}
        green
      {%- elif zone == 'MY_WORK' -%}
        blue
      {%- else -%}
        red
      {%- endif -%}
    fill_container: true
    multiline_secondary: false
    layout: horizontal
    tap_action:
      action: more-info
    card_mod:
      style: |
        :host {
          height: 70px;
          --mush-icon-size: 60px;
          --secondary-text-color: var(--primary-text-color);
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.MY_IPHONE_steps
      - type: entity
        entity: sensor.MY_IPHONE_battery_state
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: 0px 0px 0px 0px;
          --chip-background: none;
        }

To make it work you have to replace the following text:

YOUR_API_KEY → This is your API Key from Geoapify
MY_IPHONE → This is the name of your device_tracker. I used the device_tracker from the mobile_app integration
MY_PERSON → This is the name of your person entity
MY_WORK → This is the zone where you work (optional)

supperka · June 6, 2024, 12:56pm

Awesome thank you,

I’m just little tweak

    secondary: >-
      {{ iif(states(entity) == 'not_home', 'away', states(entity)) | title }} |
      {{ states('sensor.MY_IPHONE_geocoded_location') }}
    picture: '{{ state_attr(entity, ''entity_picture'') }}'

Text was so long to show on card.

So my looks

    secondary: >-
      {{ iif(states(entity) == 'not_home', 'away', states(entity)) | title }} |
      ul. {{state_attr('sensor.pogo5x_geocoded_location', 'thoroughfare') }}
      čís.{{ state_attr('sensor.pogo5x_geocoded_location', 'premises') }} PSČ {{
      state_attr('sensor.pogo5x_geocoded_location', 'postal_code') }}

ElVit · June 6, 2024, 2:50pm

Thank you for your improvment .
I will add it also into my cards.

Unfortunatelly I can not see the attribute premises, maybe because I am using an iPhone?
But for me the attributes Name, Postal Code and Sub Locality worked quit well.

supperka · June 6, 2024, 2:51pm

Hello again , how can I change color text or opacity?
on computer is text barely visible.

ElVit · June 6, 2024, 2:58pm

I think its the 0.5 in line 8.

background-color: rgba(var(--rgb-card-background-color), 0.5);

supperka · June 6, 2024, 3:10pm

that’s for background color and opacity.

ElVit · June 12, 2024, 12:38pm

Oh so I misunderstood your question.
In my opinion it makes more sense to change the opacity of the background image than the text color opacity.
And also I don’t know how to change the text opacity, sorry.

But you can maybe change the the map style.
Please see the Geoapify Docs for more infos.
Currently I use osm-bright.
Simply change this to a darker style e.g. dark-matter-yellow-roads if you are using a bright text color.

ElVit · June 12, 2024, 12:55pm

One more improvment from my side:

It is also possible to change the color or icon of the map marker depending on your location.
Simply change the background url for this:

background: url('https://maps.geoapify.com/v1/staticmap?style=osm-bright&width=600&height=230&center=lonlat:{{ state_attr('device_tracker.MY_IPHONE', 'longitude') }},{{ state_attr('device_tracker.MY_IPHONE', 'latitude') }}&zoom=14.0&marker=lonlat:{{ state_attr('device_tracker.MY_IPHONE', 'longitude') }},{{ state_attr('device_tracker.MY_IPHONE', 'latitude') }};type:material;{{ iif(is_state('person.MY_PERSON', 'home'), 'color:green;icon:home;', iif(is_state('person.MY_PERSON', 'MY_WORK'), 'color:blue;icon:building;', 'color:red;')) }}icontype:awesome&scaleFactor=2&apiKey=YOUR_API_KEY');

audiophilone · June 12, 2024, 8:44pm

it wont work for me…whats my fault?

type: custom:stack-in-card
card_mod:
  style: |
    ha-card {
      background: url('https://maps.geoapify.com/v1/staticmap?style=osm-bright&width=600&height=230&center=lonlat:{{ state_attr('device_tracker.s24_ultra_marko', 'longitude') }},{{ state_attr('device_tracker.s24_ultra_marko', 'latitude') }}&zoom=14.0&marker=lonlat:{{ state_attr('device_tracker.s24_ultra_marko', 'longitude') }},{{ state_attr('device_tracker.s24_ultra_marko', 'latitude') }};type:material;color:%23ff3421;icontype:awesome&scaleFactor=2&apiKey=);
      background-size: cover;
      background-blend-mode: overlay;
      background-color: rgba(var(--rgb-card-background-color), 0.5);
    }
cards:
  - type: custom:mushroom-template-card
    entity: person.marko
    primary: MY_PERSON
    secondary: >-
      {{ iif(states(entity) == 'not_home', 'away', states(entity)) | title }} |
      {{ states('sensor.MY_IPHONE_geocoded_location') }}
    picture: '{{ state_attr(entity, ''entity_picture'') }}'
    badge_icon: >-
      {% set zone = iif(states(entity) == 'not_home', 'away', states(entity)) %}
      {%- if 'home' in zone.lower() -%}
        mdi:home
      {%- elif zone == 'MY_WORK' -%}
        mdi:office-building
      {%- else -%}
        mdi:home-export-outline
      {%- endif -%}
    badge_color: >-
      {% set zone = iif(states(entity) == 'not_home', 'away', states(entity))
      %}  {%- if 'home' in zone.lower() -%}
        green
      {%- elif zone == 'MY_WORK' -%}
        blue
      {%- else -%}
        red
      {%- endif -%}
    fill_container: true
    multiline_secondary: false
    layout: horizontal
    tap_action:
      action: more-info
    card_mod:
      style: |
        :host {
          height: 70px;
          --mush-icon-size: 60px;
          --secondary-text-color: var(--primary-text-color);
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.MY_IPHONE_steps
      - type: entity
        entity: sensor.MY_IPHONE_battery_state
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: 0px 0px 0px 0px;
          --chip-background: none;
        }

5rtz

Zenia · June 13, 2024, 9:18pm

Thank you for this card. I modify mine a little bit using your suggestion about background

My code:

type: custom:stack-in-card
mode: vertical
card_mod:
  style: |
    ha-card {
      border: none !important;
     # background: none !important;
      --vertical-stack-card-gap: 10px;
      background: url('https://maps.geoapify.com/v1/staticmap?style=dark-matter-yellow-roads&width=600&height=230&center=lonlat:{{ state_attr('device_tracker.sm_s918u', 'longitude') }},{{ state_attr('device_tracker.sm_s918u', 'latitude') }}&zoom=14.0&marker=lonlat:{{ state_attr('device_tracker.sm_s918u', 'longitude') }},{{ state_attr('device_tracker.sm_s918u', 'latitude') }};type:material;color:%23ff3421;icontype:awesome&scaleFactor=2&apiKey=API KEY');
      background-size: 135%;
    }
cards:
  - type: custom:stack-in-card
    mode: horizontal
    card_mod:
      style: |
        ha-card {
          border: none !important;
          background: none !important;
        }
    cards:
      - type: custom:mushroom-person-card
        name: Yevgeniy
        entity: person.yevgeniy
        layout: vertical
        icon_type: entity-picture
        primary_info: state
        secondary_info: false
        card_mod:
          style:
            mushroom-shape-avatar$: |
              .picture {
               display: flex;
               border-radius: 50%;
               {% if states(config.entity) == 'home' %}
                 animation: pinggreen 6s infinite;
               {% else %}
                 animation: pingred 6s infinite;
               {% endif %}
              }
              @keyframes pinggreen {
               0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
               100% {box-shadow: 0 0 5px 15px transparent;}
              }
              @keyframes pingred {
               0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
               100% {box-shadow: 0 0 5px 15px transparent;}
              }
            .: |
              ha-card { 
              border: none !important;
              background: none !important;
              margin-left: -50px !important;
              }            
      - type: custom:stack-in-card
        mode: vertical
        card_mod:
          style: |
            ha-card {
              border: none !important;
              background: none !important;
              margin-left: -55px !important;
            } 
        cards:
          - type: custom:mushroom-template-card
            primary: >-
              {%- if is_state('sensor.sm_s918u_battery_state', 'charging') %}

              Charging 🔌

              {%- elif is_state('sensor.sm_s918u_battery_state', 'discharging')
              %}

              Discharging 🙃

              {% else %}

              Full 💯

              {% endif %}
            secondary: Battery {{ states('sensor.sm_s918u_battery_level') }}%
            entity: sensor.sm_s918u_battery_state
            icon: |2
                    {% set bl = states('sensor.sm_s918u_battery_level') | int %}
                    {% if bl < 10 %} mdi:battery-outline
                    {% elif bl < 20 %} mdi:battery-10
                    {% elif bl < 30 %} mdi:battery-20
                    {% elif bl < 40 %} mdi:battery-30
                    {% elif bl < 50 %} mdi:battery-40
                    {% elif bl < 60 %} mdi:battery-50
                    {% elif bl < 70 %} mdi:battery-60
                    {% elif bl < 80 %} mdi:battery-70
                    {% elif bl < 90 %} mdi:battery-80
                    {% elif bl < 100 %} mdi:battery-90
                    {% elif bl == 100 %} mdi:battery
                    {% else %} mdi:battery-unknown
                    {% endif %}
            icon_color: |2-
                    {% set bl = states('sensor.sm_s918u_battery_level') | int %}
                    {% if bl < 10 %} red
                    {% elif bl < 20 %} red
                    {% elif bl < 30 %} red
                    {% elif bl < 40 %} orange
                    {% elif bl < 50 %} orange
                    {% elif bl < 60 %} green
                    {% elif bl < 70 %} green
                    {% elif bl < 80 %} green
                    {% elif bl < 90 %} green
                    {% elif bl < 100 %} green
                    {% elif bl == 100 %} green
                    {% else %} grey
                    {% endif %}
            card_mod:
              style: |
                ha-card {
                  border: none !important;
                  background: none !important;
                  justify-content: center;
                  --chip-icon-size: 24px;
                  --chip-height: 54px;
                  --chip-with:
                  width: var(--chip-height) !important;
                  border-radius: 50% !important;                      
                }
              alignment: center
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        card_mod:
          style: |
            ha-card {
              border: none !important;
              background: none !important;
              font-size: 30px !important;
            }
        entity: sensor.sm_s918u_geocoded_location
        icon: mdi:google-maps
        use_entity_picture: false
    card_mod:
      style: |
        ha-card {
          border: none !important;
          background: none !important;
          margin-left: -23px !important;
          
        }
    alignment: center

Krona · June 15, 2024, 3:24am

Fantastic card! But why is my map not as dark as yours? The text is barely visible

Zenia · June 15, 2024, 10:29am

check this part of url line
Thank you for compliment

Krona · June 15, 2024, 1:07pm

Problem is that’s another map. I want the original but dark one as elVit and supperka shows in their posts. Not sure where i fail, i copied the same code as in the first post

Zenia · June 15, 2024, 2:14pm

Try to change font color and opacity

david1 · June 17, 2024, 2:00am

Nice! for the step info, does the iphone have to be on the same network as Home-assistant? or can it pull it from the cloud

Intro_Verti · June 17, 2024, 1:42pm

Awesome looking card!
Unfortunately I don’t see the possibility to create an API on the website of Geoapify (via <Geoapify / My Projects> ).

Hopefully their support can help me out, so I can create this great Person Card!

ElVit · June 20, 2024, 4:57pm

Maybe this will help you:

text-shadow: 0px 0px 5px white;

Add this code simply in the ha-card context where the background image is set.

For alternative configurations of text-shadow see this link.