Use battery icon from the HA app battery sensor on a custom button card?

Hello,

Where/how did you defined the “work” or any other zone to be showed in this new person cards?

This is the code for one person:

 - type: custom:button-card # MARTIJN
                entity: person.martijn
                show_entity_picture: true
                entity_picture: /local/images/martijn_werk.gif
                show_name: true
                show_last_changed: true
                triggers_update: all
                state:
                  - value: home
                    name: 🏡 Thuis
                    entity_picture: /local/images/martijn.gif
                    styles:
                      card:
                        - height: 170px
                      entity_picture:
                        - margin-top: 12px
                        - width: 60%
                        - position: relative
                      name:
                        - color: "#7DDA9F"

                  - value: Werk
                    name: 🏥 Werk
                    entity_picture: /local/images/martijn_werk.gif
                    styles:
                      card:
                        - height: 170px
                      name:
                        - color: "#7DDA9F"
                      entity_picture:
                        - width: 60%
                        - position: relative
                        - margin-top: 20px

                  - value: not_home
                    name: |
                      [[[
                        return `🗺️ ${states['sensor.martijn_stad'].state}`                                                   
                      ]]]
                    entity_picture: /local/images/martijn.gif
                    styles:
                      card:
                        - height: 170px
                      name:
                        - color: "#93ADCB"
                      entity_picture:
                        - margin-top: 12px
                        - opacity: 0.3
                        - width: 60%
                        - position: relative

                  - value: unknown
                    name: |
                      [[[
                        return `🗺️ ${states['sensor.martijn_stad'].state}`                                                   
                      ]]]
                    operator: default
                    entity_picture: /local/images/martijn.gif
                    styles:
                      card:
                        - height: 170px
                      entity_picture:
                        - margin-top: 12px
                        - opacity: 0.3
                        - width: 60%
                        - position: relative
                      name:
                        - color: gray
                custom_fields:
                  activity: |
                    [[[
                      if (states['sensor.iphone_max_activity'].state == 'Walking')
                      return `<img src="/local/images/martijn_walking.png" style="width:16px; height:16px"></img>`
                      if (states['sensor.iphone_max_activity'].state == 'Running')
                      return `<img src="/local/images/martijn_running.png" style="width:16px; height:16px"></img>`
                      if (states['sensor.iphone_max_activity'].state == 'Automotive')
                      return `<img src="/local/images/martijn_auto.png" style="width:16px; height:16px"></img>`
                      if (states['sensor.iphone_max_activity'].state == 'Cycling')
                      return `<img src="/local/images/martijn_bike.png" style="width:16px; height:16px"></img>`                                                  
                      else return ""
                    ]]]
                  battery: |
                    [[[
                      var i = states['sensor.iphone_max_battery_level'].attributes.icon;
                      var b = states['sensor.iphone_max_battery_level'].state;
                      return `${b}%<span style='vertical-align: 1px'></span><ha-icon icon='${i}' style='width: 16px; vertical-align:2px'></ha-icon>`
                    ]]]
                  traveltime: |
                    [[[
                      if (states['sensor.martijn_thuis'].state == 0)
                      return ""
                      else return `<ha-icon
                          icon="mdi:clock"
                          style="width: 16px; height: 16px; vertical-align: 2px; padding-right: 2px">
                          </ha-icon>${
                        states['sensor.martijn_thuis'].state
                      }`
                    ]]]
                  distance: |
                    [[[
                      if (states['sensor.martijn_distance'].state <= 0.2)
                      return ""
                      else return `<ha-icon
                          icon="mdi:map-marker-distance"
                          style="width: 16px; height: 16px; vertical-align: 2px; padding-right: 1px">
                          </ha-icon>${
                        states['sensor.martijn_distance'].state
                      }`
                    ]]]
                  albert_heijn: |
                    [[[
                      if (states['person.martijn'].state == 'Albert Heijn')
                      return `<img src="/local/images/ah.png" style="width:25px; height:25px"></img>`
                      else return ""
                    ]]]
                styles:
                  name:
                    - font-size: 16px
                  label:
                    - font-size: 8px
                  icon:
                    - width: 80%
                    - position: absolute
                    - top: 1%
                  custom_fields:
                    albert_heijn:
                      - height: 30%
                      - width: 30%
                      - position: absolute
                      - top: 45%
                      - left: 10%
                    activity:
                      - height: 20%
                      - position: absolute
                      - top: 15%
                      - right: 2px
                    distance:
                      - position: absolute
                      - left: 2px
                      - top: 2px
                      - font-size: 12px
                    traveltime:
                      - position: absolute
                      - left: 2px
                      - top: 15%
                      - font-size: 12px
                    battery:
                      - align-self: right
                      - position: absolute
                      - right: 2px
                      - top: 2%
                      - font-size: 12px
                      - color: >-
                          [[[ if (states["sensor.iphone_max_battery_level"].state < 30) return
                          "#e45649"; if (states["sensor.iphone_max_battery_level"].state < 50)
                          return "#ffa229"; if (states["sensor.iphone_max_battery_level"].state <
                          101) return "#50A14F"; else return "#ffc640"]]]
2 Likes

Hello!

Can you help me implementing this person card? I’m a newbie @ Home Assistant, and all the help youd be appreciated

This is excellent and loving the card.
I just wanted to know if its possible to pull in the zone state for the location rather than defining them separately for each person? I’ve not a clue on how to achieve this.
Thanks

I am loving this… would be amazing to have the complete family displayed in my wall mounted touchscreen… But i am missing the first step.
I have home assistant running on my raspberry pi.
So does everyone need to have the HA app installed on there phone to connect?
And i see someone placing a geusts icon…
Could someone please explain the first basic steps roughly

The phone sensors are provided by the HA companion app. So it depends on what kind of information you want to display on your person card.

Hello, can you please help me make my code for showing two persons in this card. Everything is fine for one but i can’t make it for two :confused:

type: custom:button-card
entity: person.name
aspect_ratio: 1/1
name: Dimitar
show_entity_picture: true
show_name: true
hold_action:
  action: none
state:
  - value: home
    styles:
      custom_fields:
        icon:
          - border-color: '#77c66e'
  - value: Away
    styles:
      card:
        - background-color: '#dedede'
      custom_fields:
        icon:
          - border-color: '#EF4F1A'
  - value: In Sofia
    styles:
      custom_fields:
        icon:
          - border-color: deepskyblue
styles:
  card:
    - width: 300px
    - height: 250px
    - background-color: transperant
    - border-radius: 5%
    - padding: 4%
    - color: grey
    - font-size: 15px
    - text-shadow: 0px 0px 0px black
    - text-transform: capitalize
    - justify-self: start
    - align-self: middle
  grid:
    - grid-template-areas: '"icon status" "n n" "battery proximity" "wifi ss" "sd sd"'
    - grid-template-columns: 2fr 1fr
    - grid-template-rows: 1fr min-content min-content min-content min-content
  name:
    - padding-left: 15px
    - font-size: 20px
    - align-self: middle
    - justify-self: start
    - padding-bottom: 7px
    - color: white
    - font-weight: bold
  custom_fields:
    icon:
      - clip-path: circle()
      - width: 62%
      - pointer-events: none
      - display: grid
      - border: 6px solid
      - border-color: grey
      - border-radius: 500px
      - margin: 0 +20% 0 0
      - justify-self: end
      - opacity: 1
    status:
      - padding-bottom: 90%
      - padding-right: 35%
      - color: grey
    proximity:
      - padding: 0.5em 0px
      - align-self: middle
      - justify-self: start
      - color: gray
    wifi:
      - padding: 0.5em 0px
      - padding-right: 20%
      - color: grey
      - '--text-wifi-color-sensor': >-
          [[[ if (states["sensor.iphone_connection_type"].state == '<not
          connected>') return "#aaaaaa"; ]]]
    battery:
      - padding: 0.5em 0px
      - padding-right: 35%
      - color: green
      - '--text-color-sensor': >-
          [[[ if (states["sensor.iphone_battery_level"].state < 20)
          return "#b30000";
              if (states["sensor.iphone_battery_level"].state < 40)
          return "#ea5545";
              if (states["sensor.iphone_battery_level"].state < 60)
          return "#ef9b20";
              if (states["sensor.iphone_battery_level"].state < 80)
          return "#87bc45";
              if (states["sensor.iphone_battery_level"].state < 101)
          return "green";]]]
custom_fields:
  icon: >
    [[[ return entity === undefined ? null : `<img
    src="${states[entity.entity_id].attributes.entity_picture}" width="100%">`;
    ]]]
  status: |
    [[[
      if (states['person.name'].state =='not_home') { 
      return `<ha-icon icon="mdi:home-export-outline"
        style="width: 20px; height: 20px; color: 'grey';">
        </ha-icon><span> Away</span>`;
      } 
      if (states['person.name'].state =='home') { 
      return `<ha-icon 
        icon="mdi:home"
        style="width: 20px; height: 20px; color: green;">
        </ha-icon><span> ${entity.state}</span>`;
      } else {
      return `<ha-icon 
        icon="mdi:map-marker-radius"
        style="width: 20px; height: 20px; color: deepskyblue;">
        </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['sensor.person'].state} m</span></span>`
    ]]]
  battery: |
    [[[
      var i = states['sensor.iphone_battery_level'].attributes.icon;
      if (states['sensor.iphone_battery_state'].state =='Charging') { 
        return `<ha-icon
        icon="mdi:battery-charging"
        style="width: 20px; height: 20px; color: #00d8ff;">
        </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.iphone_battery_level'].state}% battery</span></span>`;
      } else {
        return `<ha-icon
        icon='${i}'
        style="width: 20px; height: 20px; color: var(--text-color-sensor);">
        </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.iphone_battery_level'].state}% battery</span></span>`;
      }
    ]]]
  wifi: |
    [[[
      if (states['sensor.iphone_connection_type'].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 if (states['sensor.iphone_connection_type'].state == 'Cellular') { 
        return `<ha-icon icon="mdi:signal-cellular-3" style="width: 20px; height: 20px; color: gey;"></ha-icon>
      <span style="color: var(--text-color-sensor);">${states['sensor.iphone_connection_type'].state}</span>`;}
        else {
        return `<ha-icon
        icon="mdi:wifi"
        style="width: 20px; height: 20px; color: grey;">
        </ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.iphone_ssid'].state}</span></span>`;
      }
    ]]]  ```