Person Card with Static Map API Background

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.

Freeman59 · July 26, 2024, 7:55pm

Hello !

Thanks for sharing this amazing view Also I have 2 questions

First : As I’m using a white dashboard, I can see line that separate first column of the second one
First is logo of the person with Zone | Geocoded location where the second one is custom:mushroom-chips-card

Could you tell me how to delete these line ?

Also, How can I get a higher view of the card ? I don’t really know how to expand high of it.

Thanks !

ElVit · July 28, 2024, 8:08am

Hi,

I can also see some lines but only while the card is loading. Then they are gone. I think the card_mod part should remove these lines.
Maybe you have a custom theme which adds these lines back? Or your card_mod plugin is maybe not working?

And to make this card bigger I simply added an empty markdown card like so:

  - type: custom:mushroom-template-card
  …
  - type: markdown
    content: ' '
    card_mod:
      style: |
        :host {
          height: 40px;
        }
  - type: custom:mushroom-chips-card
  …

giuseppebaldi · October 25, 2024, 9:00pm

This is really great, thank you.

One question: I copied your code & input my data, everything works except the badge doesn’t update depending on location. It only shows the mdi:home-export-outline and is red all the time. What might be causing this?

type: custom:stack-in-card
card_mod:
  style: |
    ha-card {
      background: url('https://maps.geoapify.com/v1/staticmap?style=dark-matter-purple-roads&width=600&height=240&center=lonlat:{{ state_attr('device_tracker.pixel_8_pro_g', 'longitude') }},{{ state_attr('device_tracker.pixel_8_pro_g', 'latitude') }}&zoom=14.0&marker=lonlat:{{ state_attr('device_tracker.pixel_8_pro_g', 'longitude') }},{{ state_attr('device_tracker.pixel_8_pro_g', '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.giuseppebaldi
    primary: Giuseppe
    secondary: >-
      {{ iif(states(entity) == 'not_home', 'away', states(entity)) | title }} |
      {{ states('sensor.pixel_8_pro_g_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 == 'zone.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 == 'zone.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: 75px;
          --primary-text-color: #e0e0e0;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.pixel_8_pro_g_battery_level
      - type: entity
        entity: sensor.pixel_8_pro_g_battery_state
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: 0px 0px 0px 0px;
          --chip-background: none;
          --color: #D3D3D3;
          --primary-text-color: #e0e0e0;
        }

giuseppebaldi · October 25, 2024, 9:45pm

Was at work while I was working on this or probably would’ve caught it sooner, but there appears to be an issue with the {%- elif zone == ‘zone.work’ -%} line, changing it to {%- if ‘work’ in zone.lower() -%} fixed the issue but I’m not knowledgeable enough to know why, what it means or if this will cause a problem later. But thought I’d share.