Person Cards - Show Off Yours

ignacio82 · September 6, 2022, 4:51pm

Hi everyone,

I’m trying to learn how to use custom:button-cardand struggling getting the layout right. This is the grid that I have in mind:

i	i	i	Availability [s]
i	i	i	Location
i	i	i	badge
personal phone battery	work phone battery	empty	wallet

This is what I’m getting:

and this is my code:

type: custom:button-card
entity: person.ignacio_martinez
aspect_ratio: 1/1
name: Ignacio
show_entity_picture: true
show_name: false
styles:
  grid:
    - grid-template-areas: ' "icon icon icon s" " icon icon icon loc" "icon icon icon s" "personal work l s " '
    - grid-template-columns: 1fr 1fr 1fr 1fr 
    - grid-template-rows: 1fr 1fr 1fr 1fr 
  custom_fields:
    icon:
      - clip-path: circle()
      - width: 25%
      - pointer-events: none
      - display: grid
      - border: 5px solid
      - border-color: gray
      - border-radius: 500px
      - margin: 0 0 0 +5%
      - opacity: 1
    loc:
      - padding-right: px
    personal:
      - padding-right: px
    work:
      - padding-right: px

custom_fields:
  icon: >
    [[[ return entity === undefined ? null : `<img
    src="${states[entity.entity_id].attributes.entity_picture}" width="100%">`;
    ]]]
  loc: >
    [[[
      return `<ha-icon
        icon="mdi:home"
        style="width: 16px; height: 16px; color: black;">
        </ha-icon>${entity.state}<span></span>`
    ]]]
  personal: >
    [[[
      return `<ha-icon
        icon="mdi:cellphone"
        style="width: 16px; height: 16px; color: black;">
        </ha-icon>${states['sensor.pixel_5_battery_level_2'].state}<span></span>`
    ]]]
  work: >
    [[[
      return `<ha-icon
        icon="mdi:cellphone-cog"
        style="width: 16px; height: 16px; color: black;">
        </ha-icon>${states['sensor.pixel_6_battery_level'].state}<span></span>`
    ]]]

What am I doing wrong?

VaReTaS · September 6, 2022, 9:56pm

I guess that the issue is here. I am no expert on the matter, but I would say the issue is here. Try some different values on this (would suggest that you check my initial post and see the code, you may try something different from there).

Hope it may help

VaReTaS · September 6, 2022, 10:00pm

Sorry, I missed this.

That was a mistake, my bad (I have 2 different phones and mixed it up). The sensor should be the same.

Cheers

DrewXT · September 7, 2022, 5:52am

@VaReTaS

I love the way you’re using the button-card here - one question, which I’ve been banging my head against for quite some time - how do I add an extra field under the Distance From Home?

My card currently looks like this

and the YAML like this:

  - type: custom:button-card
    entity: person.andrew
    aspect_ratio: 1/1
    name: Person
    show_entity_picture: true
    show_name: false
    hold_action:
      action: none
    state:
      - value: home
        styles:
          custom_fields:
            icon:
              - border-color: '#77c66e'
              - icon-color: green
      - value: not_home
        styles:
          card: null
          custom_fields:
            icon:
              - border-color: '#EF4F1A'
      - value: Work
        styles:
          custom_fields:
            icon:
              - border-color: deepskyblue
    styles:
      card:
        - border-radius: 5%
        - padding: 5%
        - color: gray
        - font-size: 10px
        - text-shadow: 0px 0px 0px black
        - text-transform: capitalize
        - justify-self: end
        - align-self: middle
      grid:
        - grid-template-areas: '"icon status" "n n" "battery proximity" "wifi ss" "sd sd"'
        - grid-template-columns: 2fr
        - grid-template-rows: 1fr min-content min-content min-content min-content
      name:
        - font-size: 15px
        - align-self: middle
        - justify-self: start
        - padding-bottom: 10px
      custom_fields:
        icon:
          - clip-path: circle()
          - width: 80%
          - pointer-events: none
          - display: grid
          - border: 5px solid
          - border-color: gray
          - border-radius: 500px
          - margin: 0 +10% 0 0
          - justify-self: end
          - opacity: 1
        status:
          - align-self: start
          - justify-self: end
          - color: white
        proximity:
          - padding: 0.5em 0px
          - align-self: middle
          - justify-self: start
          - color: white
        wifi:
          - padding: 0.5em 0px
          - align-self: middle
          - justify-self: start
          - color: white
          - '--text-wifi-color-sensor': >-
              [[[ if (states["sensor.pixel_3_xl_wifi_connection"].state == '<not
              connected>') return "#aaaaaa"; ]]]
        battery:
          - padding: 0.5em 0px
          - align-self: middle
          - justify-self: start
          - color: white
          - '--text-color-sensor': >-
              [[[ if (states["sensor.pixel_3_xl_battery_level"].state < 50)
              return "#EF4F1A"; ]]]
    custom_fields:
      icon: >
        [[[ return entity === undefined ? null : `<img
        src="${states[entity.entity_id].attributes.entity_picture}"
        width="100%">`; ]]]
      status: |
        [[[
          if (states['person.andrew'].state =='not_home') { 
          return `<ha-icon icon="mdi:home-export-outline"
            style="width: 20px; height: 20px; color: '#888888';">
            </ha-icon><span> Away</span>`;
          } 
          if (states['person.andrew'].state =='home') { 
          return `<ha-icon 
            icon="mdi:home"
            style="width: 20px; height: 20px; color: 888888;">
            </ha-icon><span> ${entity.state}</span>`;
          } else {
          return `<ha-icon 
            icon="mdi:map-marker-radius"
            style="width: 20px; height: 20px; color: 888888;">
            </ha-icon><span> ${entity.state}</span>`;
          }
        ]]]
      proximity: |
        [[[
          return `<ha-icon
            icon="mdi:map-marker-distance"
            style="width: 20px; height: 20px; color: #888888;">
            </ha-icon>  <span>\<span style="color: var(--text-color-sensor);">${states['proximity.andrew'].state} Kms</span></span>`
        ]]]
      battery: |
        [[[
          if (states['sensor.pixel_3_xl_battery_state'].state =='charging') { 
            return `<ha-icon
            icon="mdi:battery-charging"
            style="width: 20px; height: 20px; color: #888888;">
            </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.pixel_3_xl_battery_level'].state}% battery</span></span>`;
          } else {
            return `<ha-icon
            icon="mdi:battery"
            style="width: 20px; height: 20px; color: #888888;">
            </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.pixel_3_xl_battery_level'].state}% battery</span></span>`;
          }
        ]]]
      wifi: |
        [[[
          if (states['sensor.pixel_3_xl_wifi_connection'].state =='<not connected>') { 
            return `<ha-icon
            icon="mdi:wifi"
            style="width: 20px; height: 20px; color: var(--text-wifi-color-sensor);">
            </ha-icon> <span><span style="color: var(--text-wifi-color-sensor);">Disconnected</span></span>`; 
          } else {
            return `<ha-icon
            icon="mdi:wifi"
            style="width: 20px; height: 20px; color: #888888;">
            </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.pixel_3_xl_wifi_connection'].state}</span></span>`;
          }
        ]]]

VaReTaS · September 7, 2022, 8:13am

Hi,

If you want to add a new sensor under proximity, you can use the ss area and follow to add the sensor code on the custom_fields section (i.e., same as wifi or proximity). You can/should also rename the section to match the sensor field.

Imagine that the grid-template area looks like this:

"icon     status" 
"n        n" 
"battery  proximity" 
"wifi     ss" 
"sd       sd"'

So you also have room for additional sensors

TommyWelle · September 7, 2022, 9:32am

Cant get this to show my battery state.

Could you point out if you see some errors in my code?

type: custom:stack-in-card
mode: vertical
card_mod: null
style: |
  ha-card {
  background-color: rgba(255, 255, 255, .1);
  }
cards:
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-person-card
        entity: person.home_assistant
        icon: ' '
        icon_type: icon
        primary_info: none
        secondary_info: none
        card_mod:
          style: |
            mushroom-card { 
              background: url( {{ state_attr('person.home_assistant', 'entity_picture') }} ) no-repeat 0px center;
              background-size: 42px 42px;
            }
            ha-card {
              background-color: rgba(255, 255, 255, .7);
              margin-left: auto;
              margin-right: auto;
              width: 66px;
              border-radius: 50%;
            }
      - type: conditional
        conditions:
          - entity: sensor.top9_battery_state
            state: charging
        card:
          type: custom:mushroom-template-card
          entity: sensor.top9_battery_level
          layout: vertical
          icon_color: yellow
          fill_container: true
          name: Fold3
          icon: mdi:battery-charging-medium
          hide_name: true
          primary: Mobilen lader...
          secondary: 'Battery Level: {{ states(''sensor.top9_battery_level'') }}%'
          card_mod:
            style: |
              mushroom-shape-icon {
                animation: blink 1s linear infinite;
              }          
              @keyframes blink {
                50% {opacity: 0;}
              }
      - type: conditional
        conditions:
          - entity: sensor.top9_battery_state
            state: full
        card:
          type: custom:mushroom-template-card
          entity: sensor.top9_battery_level
          layout: vertical
          icon: |2
              {% set bl = states('sensor.top9_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.top9_battery_level') | int %}
              {% if bl < 10 %} "#cc0c16"
              {% elif bl < 20 %} "#e61e28"
              {% elif bl < 30 %} "#e3464e"
              {% elif bl < 40 %} orange
              {% elif bl < 50 %} "#f0b93a"
              {% elif bl < 60 %} "#f3f56c"
              {% elif bl < 70 %} "#f2f536"
              {% elif bl < 80 %} "#69f095"
              {% elif bl < 90 %} "#2ee669"
              {% elif bl < 100 %} "#05ad3b"
              {% elif bl == 100 %} "#03872d"
              {% else %} grey
              {% endif %}
          primary: 'Battery Level: {{ states(''sensor.top9_battery_level'') }}%'
          secondary: 'Battery Temp: {{ states(''sensor.top9_battery_temperature'') }}°'
          tap_action:
            action: more-info
          fill_container: true
      - type: conditional
        conditions:
          - entity: sensor.top9_battery_state
            state: discharging
        card:
          type: custom:mushroom-template-card
          entity: sensor.top9_battery_level
          layout: vertical
          icon: |2
              {% set bl = states('sensor.top9_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.top9_battery_level') | int %}
              {% if bl < 10 %} "#cc0c16"
              {% elif bl < 20 %} "#e61e28"
              {% elif bl < 30 %} "#e3464e"
              {% elif bl < 40 %} orange
              {% elif bl < 50 %} "#f0b93a"
              {% elif bl < 60 %} "#f3f56c"
              {% elif bl < 70 %} "#f2f536"
              {% elif bl < 80 %} "#69f095"
              {% elif bl < 90 %} "#2ee669"
              {% elif bl < 100 %} "#05ad3b"
              {% elif bl == 100 %} "#03872d"
              {% else %} grey
              {% endif %}
          primary: 'Battery Level: {{ states(''sensor.top9_battery_level'') }}%'
          secondary: 'Battery Temp: {{ states(''sensor.top9_battery_temperature'') }}°'
          tap_action:
            action: more-info
          fill_container: true
        styles:
          card:
            height: 66px;
  - type: custom:mushroom-template-card
    entity: sensor.top9_geocoded_location
    primary: >
      {% if (state_attr('sensor.top9_geocoded_location', 'direction_of_travel')
      == 'stationary') and
      (state_attr('sensor.top9_geocoded_location','home_zone') == 'zone.home')
      %} Tommy er hjemme:  {% elif
      (state_attr('sensor.top9_geocoded_location','direction_of_travel') ==
      'stationary')%}  Tommy er her:  {% else %}  Tommy er  {% endif %}
    secondary: >
      {% if (state_attr('sensor.top9_geocoded_location','direction_of_travel')
      == 'stationary') %}  {{
      state_attr('sensor.top9_geocoded_location','street_number') }} {{
      state_attr('sensor.top9_geocoded_location','street') }}, {{
      state_attr('sensor.top9_geocoded_location','city') }}, {{
      state_attr('sensor.top9_geocoded_location','postal_code') }}  {% else %}
      reiser...  {% endif %}
    icon: >-
      {% if (state_attr('sensor.top9_geocoded_locationn','direction_of_travel')
      == 'stationary') and (states('device_tracker.top9') == 'home') %}
      mdi:home-account  {% elif
      (state_attr('sensor.top9_geocoded_location','direction_of_travel') ==
      'stationary') and (states('device_tracker.top9') == 'not_home') %}
      mdi:domain  {% else %} mdi:car  {% endif %}
    icon_color: >-
      {% if (state_attr('sensor.top9_geocoded_location','direction_of_travel')
      == 'stationary') and (states('device_tracker.top9') == 'home') %} green {%
      elif (state_attr('sensor.top9_geocoded_location','direction_of_travel') ==
      'stationary') and (states('device_tracker.top9') == 'not_home') %} blue {%
      else %} cyan  {% endif %}
    tap_action:
      action: fire-dom-event
      browser_mod:
        command: popup
        title: Tommy's lokasjon
        icon: mdi:car
        card:
          type: map
          default_zoom: 15
          entities:
            - device_tracker.top9
          aspect_ratio: '16:9'
          hours_to_show: 4
          deviceID:
            - this
            - dashboard
    multiline_secondary: true

cowboysdude · September 7, 2022, 10:10am

Put this in your Developers tool → templates to see what you get…

{{ states(‘sensor.top9_battery_level’) }}

Plus I see you have this →

secondary: 'Battery Level: {{ states(''sensor.top9_battery_level'') }}%'

Should be:

secondary:  "Battery Level: {{ states('sensor.top9_battery_level') }}%"

You are using 2 single quotes instead of ", it’s showing you are using ’ ’ That will give you errors all day long.

There are several lines the same way… this will throw errors

TommyWelle · September 7, 2022, 11:43am

This happens:

The single quotes keeps coming back whenever i save the code.

TommyWelle · September 7, 2022, 12:18pm

Still dosnt work when i change to double quotes.

cowboysdude · September 7, 2022, 8:53pm

Ok well that’s a start

So I see by your template that it does read correctly, that’s good!

Lets keep looking…

I also see this… not sure if it’s the problem… but look at mine…

                  icon_color: |2-
                      {% set bl = states('sensor.sm_f926u1_battery_level') | int %}
                      {% if bl < 10 %} #cc0c16
                      {% elif bl < 20 %} #e61e28
                      {% elif bl < 30 %} #e3464e
                      {% elif bl < 40 %} orange
                      {% elif bl < 50 %} #f0b93a
                      {% elif bl < 60 %} #f3f56c
                      {% elif bl < 70 %} #f2f536
                      {% elif bl < 80 %} #69f095
                      {% elif bl < 90 %} #2ee669
                      {% elif bl < 100 %} #05ad3b
                      {% elif bl == 100 %} #03872d
                      {% else %} grey
                      {% endif %}

Look at yours… see the difference?

          icon_color: |2-
              {% set bl = states('sensor.top9_battery_level') | int %}
              {% if bl < 10 %} "#cc0c16"
              {% elif bl < 20 %} "#e61e28"
              {% elif bl < 30 %} "#e3464e"
              {% elif bl < 40 %} orange
              {% elif bl < 50 %} "#f0b93a"
              {% elif bl < 60 %} "#f3f56c"
              {% elif bl < 70 %} "#f2f536"
              {% elif bl < 80 %} "#69f095"
              {% elif bl < 90 %} "#2ee669"
              {% elif bl < 100 %} "#05ad3b"
              {% elif bl == 100 %} "#03872d"
              {% else %} grey
              {% endif %}

DrewXT · September 8, 2022, 4:01am

Perfect, I hadn’t got my head around that bit!

code now looks like this, which is great - how would you conditionally show a value?

e.g. if you’re location is at home, not show the distance or time to get home?

entity: person.andrew
aspect_ratio: 1/1
name: Person
show_entity_picture: true
show_name: false
hold_action:
  action: none
state:
  - value: home
    styles:
      custom_fields:
        icon:
          - border-color: '#77c66e'
          - icon-color: green
  - value: not_home
    styles:
      card: null
      custom_fields:
        icon:
          - border-color: '#EF4F1A'
  - value: Work
    styles:
      custom_fields:
        icon:
          - border-color: deepskyblue
styles:
  card:
    - border-radius: 5%
    - padding: 5%
    - color: gray
    - font-size: 10px
    - text-shadow: 0px 0px 0px black
    - text-transform: capitalize
    - justify-self: end
    - align-self: middle
  grid:
    - grid-template-areas: '"icon status" "n n" "battery proximity" "wifi timehome" "sd sd"'
    - grid-template-columns: 2fr 1fr
    - grid-template-rows: 1fr min-content min-content min-content min-content
  name:
    - font-size: 15px
    - align-self: middle
    - justify-self: start
    - padding-bottom: 10px
  custom_fields:
    icon:
      - clip-path: circle()
      - width: 80%
      - pointer-events: none
      - display: grid
      - border: 5px solid
      - border-color: gray
      - border-radius: 500px
      - margin: 0 +10% 0 0
      - justify-self: end
      - opacity: 1
    status:
      - align-self: start
      - justify-self: end
      - color: white
    proximity:
      - padding: 0.5em 0px
      - align-self: middle
      - justify-self: start
      - color: white
    timehome:
      - padding: 0.5em 0px
      - align-self: middle
      - justify-self: start
      - color: white
    wifi:
      - padding: 0.5em 0px
      - align-self: middle
      - justify-self: start
      - color: white
      - '--text-wifi-color-sensor': >-
          [[[ if (states["sensor.pixel_3_xl_wifi_connection"].state == '<not
          connected>') return "#aaaaaa"; ]]]
    battery:
      - padding: 0.5em 0px
      - align-self: middle
      - justify-self: start
      - color: white
      - '--text-color-sensor': >-
          [[[ if (states["sensor.pixel_3_xl_battery_level"].state < 50) return
          "#EF4F1A"; ]]]
custom_fields:
  icon: >
    [[[ return entity === undefined ? null : `<img
    src="${states[entity.entity_id].attributes.entity_picture}" width="100%">`;
    ]]]
  status: |
    [[[
      if (states['person.andrew'].state =='not_home') { 
      return `<ha-icon icon="mdi:home-export-outline"
        style="width: 20px; height: 20px; color: '#888888';">
        </ha-icon><span> Away</span>`;
      } 
      if (states['person.andrew'].state =='home') { 
      return `<ha-icon 
        icon="mdi:home"
        style="width: 20px; height: 20px; color: 888888;">
        </ha-icon><span> ${entity.state}</span>`;
      } else {
      return `<ha-icon 
        icon="mdi:map-marker-radius"
        style="width: 20px; height: 20px; color: 888888;">
        </ha-icon><span> ${entity.state}</span>`;
      }
    ]]]
  proximity: |
    [[[
      return `<ha-icon
        icon="mdi:map-marker-distance"
        style="width: 20px; height: 20px; color: #888888;">
        </ha-icon>  <span>\<span style="color: var(--text-color-sensor);">${states['proximity.andrew'].state} Kms</span></span>`
    ]]]
  battery: |
    [[[
      if (states['sensor.pixel_3_xl_battery_state'].state =='charging') { 
        return `<ha-icon
        icon="mdi:battery-charging"
        style="width: 20px; height: 20px; color: #888888;">
        </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.pixel_3_xl_battery_level'].state}% battery</span></span>`;
      } else {
        return `<ha-icon
        icon="mdi:battery"
        style="width: 20px; height: 20px; color: #888888;">
        </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.pixel_3_xl_battery_level'].state}% battery</span></span>`;
      }
    ]]]
  wifi: |
    [[[
      if (states['sensor.pixel_3_xl_wifi_connection'].state =='<not connected>') { 
        return `<ha-icon
        icon="mdi:wifi"
        style="width: 20px; height: 20px; color: var(--text-wifi-color-sensor);">
        </ha-icon> <span><span style="color: var(--text-wifi-color-sensor);">Disconnected</span></span>`; 
      } else {
        return `<ha-icon
        icon="mdi:wifi"
        style="width: 20px; height: 20px; color: #888888;">
        </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.pixel_3_xl_wifi_connection'].state}</span></span>`;
      }
    ]]]
  timehome: |
    [[[
      return `<ha-icon
        icon="mdi:car"
        style="width: 20px; height: 20px; color: #888888;">
        </ha-icon>  <span>\<span style="color: var(--text-color-sensor);">${states['sensor.andrew_travel_time'].state} Kms</span></span>`
    ]]]

TommyWelle · September 8, 2022, 5:35am

Yeah, i tried correcting that, but didnt do anything.

But in your entity sensor.john, is that a sensor you have made? What value are you fetching from that sensor?

cowboysdude · September 8, 2022, 8:22am

Ohhhhhhhhhh I sent you the original link to the post where I explained everything

You need to install places to get that sensor…
https://github.com/custom-components/places

That’s how you create sensor.john [or whatever name you want ]

I’m thinking that’s your error… you aren’t able to get the tracking data because it’s not there…

TommyWelle · September 8, 2022, 10:36am

But isnt that the same sensor as: sensor.top9_geocoded_location?

ignacio82 · September 9, 2022, 12:57am

I made a lot of progress but I cannot figure out how to use the icon of one of my entities that changes dynamically. For example:

There is no icon next to Emilie's office in the top left of my card. This is the code that I wrote:

type: custom:button-card
entity: person.ignacio_martinez
aspect_ratio: 1/1
name: Ignacio
show_entity_picture: true
show_name: false
state:
  - value: home
    styles:
      custom_fields:
        icon:
          - border-color: '#77c66e'
  - value: not_home
    styles:
      card:
        - background-color: '#dedede'
      custom_fields:
        icon:
          - border-color: '#EF4F1A'
  - value: Work
    styles:
      custom_fields:
        icon:
          - border-color: deepskyblue
styles:
  grid:
    - grid-template-areas: >-
        "icon icon loc loc" "icon icon avail avail" "icon icon badge badge"
        "personal work wallet wallet"
    - grid-template-columns: 1fr 1fr 1fr 1fr
    - grid-template-rows: 1fr 1fr 1fr 1fr
  custom_fields:
    icon:
      - clip-path: circle()
      - width: 100%
      - pointer-events: none
      - display: grid
      - border: 5px solid
      - border-color: gray
      - border-radius: 500px
      - margin: 0 0 0 +5%
      - opacity: 1
      - align-self: start
      - text-align: start
custom_fields:
  icon: >
    [[[ return entity === undefined ? null : `<img
    src="${states[entity.entity_id].attributes.entity_picture}" width="100%">`;
    ]]]
  avail: |
    [[[
      return `<ha-icon
        icon="mdi:calendar"
        style="width: 20px; height: 20px;">
        </ha-icon>${states['sensor.ignacio_s_availability'].state}<span></span>`
    ]]]
  loc: |
    [[[
      return `<ha-icon
        icon={states[sensor.where_is_ignacio].attributes.icon}
        style="width: 20px; height: 20px;">
        </ha-icon>${states['sensor.where_is_ignacio'].state}<span></span>`
    ]]]
  badge: |
    [[[
      return `<ha-icon
        icon="mdi:badge-account-outline"
        style="width: 20px; height: 20px;">
        </ha-icon>${states['sensor.ignacio_s_badge'].state}<span></span>`
    ]]]
  wallet: |
    [[[
      return `<ha-icon
        icon="mdi:wallet"
        style="width: 20px; height: 20px;">
        </ha-icon>${states['sensor.ignacio_s_wallet'].state}<span></span>`
    ]]]
  personal: |
    [[[
      return `<ha-icon
        icon="mdi:cellphone"
        style="width: 20px; height: 20px;">
        </ha-icon>${states['sensor.pixel_5_battery_level_2'].state}%<span></span>`
    ]]]
  work: |
    [[[
      return `<ha-icon
        icon="mdi:cellphone-cog"
        style="width: 20px; height: 20px;">
        </ha-icon>${states['sensor.pixel_6_battery_level'].state}%<span></span>`
    ]]]

My guess is that my error is here:

  loc: |
    [[[
      return `<ha-icon
        icon={states[sensor.where_is_ignacio].attributes.icon}
        style="width: 20px; height: 20px;">
        </ha-icon>${states['sensor.where_is_ignacio'].state}<span></span>`
    ]]]

Can somebody point me to how to fix this?

cowboysdude · September 9, 2022, 12:57am

sensor.john creates all these attributes…which are a result of installing places
Yes this shows all my info address…etc… but look on the internet it’s there already LOL

street_number: 525
street: Budd Street
city: City of Elmira
postal_town: -
postal_code: 14904
state_province: New York
country: United States
county: Chemung County
formatted_address: 525, Budd Street, Southport, City of Elmira, Chemung County, New York, 14904, United States
place_type: building
place_name: -
place_category: building
neighbourhood: -
previous_latitude: 42.0629727
previous_longitude: -76.8059108
current_latitude: 42.0629528
current_longitude: -76.8058892
devicetracker_entityid: device_tracker.sm_f926u1
devicetracker_zone: home
home_zone: zone.home
entity_picture: null
distance_from_home_km: 0.0 km
distance_from_home_m: 4.252
last_changed: 2022-09-08 19:49:20.356196
current_location: 42.0629528,-76.8058892
previous_location: 42.0629727,-76.8059108
home_latitude: 42.06291457651508
home_longitude: -76.80589199066164
direction_of_travel: stationary
map_link: Google Maps
options: zone,place
friendly_name: john

TommyWelle · September 9, 2022, 5:36am

Off topic:

Oh cool, you are from the US. Always wanted to go there, and New York too

Im from Norway, it’s freaking booring here lol.

On topic:
Thanks for your help. i couldnt figure it out, so i just went with the original mushroom one, didnt know about mushroom, i redisigned my whole panel to mushroom last night lol.

cowboysdude · September 9, 2022, 8:23am

Yeah I’m from NY but it’s a funny thing when someone sees this they think NY City… I’m about 5 hours from NY City … called Upstate NY which is all rural country and no big cities
So you may find it boring here too

It’s okay it’s not a bad thing places has a lot more info in it so trust me… It took me a minute to get this going too. It was a card from another guy on here and I modified a bit

You’re welcome if you need anything else let me know!!!

VaReTaS · September 9, 2022, 9:27am

ignacio82:

My guess is that my error is here:

  loc: |
    [[[
      return `<ha-icon
        icon={states[sensor.where_is_ignacio].attributes.icon}
        style="width: 20px; height: 20px;">
        </ha-icon>${states['sensor.where_is_ignacio'].state}<span></span>`
    ]]]

Can somebody point me to how to fix this?

Hi, @ignacio82

The issue is that the icon does not change automatically based on your location. You have to build something that assigns an icon for each location, with conditions based on the location. Here is an example from my card:

  status: |
    [[[
      if (states['person.xxx'].state =='not_home') { 
      return `<ha-icon icon="mdi:home-export-outline"
        style="width: 20px; height: 20px; color: '#888888';">
        </ha-icon><span> Away</span>`;
      } 
      if (states['person.xxx'].state =='home') { 
      return `<ha-icon 
        icon="mdi:home"
        style="width: 20px; height: 20px; color: 888888;">
        </ha-icon><span> ${entity.state}</span>`;
      } else {
      return `<ha-icon 
        icon="mdi:map-marker-radius"
        style="width: 20px; height: 20px; color: 888888;">
        </ha-icon><span> ${entity.state}</span>`;
      }
    ]]]

ignacio82 · September 9, 2022, 3:37pm

Thanks @VaReTaS. I was hoping to be able to use the icon assigned to sensor.where_is_ignacio because that entity updates its icon depending based on location inside my house (living room, bedroom, etc). Is that possible or do I have to recreate the code for that sensor inside my card? That is why I wrote icon={states[sensor.where_is_ignacio].attributes.icon} but I’m clearly getting that syntax wrong. In developers tools {{state_attr('sensor.where_is_ignacio', 'icon')}} gets me the automagically updated icon.