A Little Code Help Please

Could someone help me figure out what the problem is with this code please, I copied it from another user but, for me, I can’t get the wi-fi/cell etc to show correctly nor the charging status icons. Despite quite a few states using colour and different icons I just get this:

I’m fairly sure it’s a simple error and possibly something silly I am missing but, for the life of me I can’t work out what.

And the code I have is as follows:

type: horizontal-stack
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-person-card
        entity: person.kenneth_watt
        icon_type: entity-picture
        secondary_info: last-changed
        card_mod:
          style: |
            ha-card {
              background: transparent;
            }
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-chips-card
            alignment: center
            card_mod:
              style: |
                ha-card {
                    --chip-font-size: 0.3em;
                    --chip-icon-size: 0.5em;
                    --chip-border-width: 0;
                    --chip-box-shadow: none;
                    --chip-background: none;
                    --chip-border: none;
                    --chip-spacing: none;
                    --chip-font-weight: bold;
                }
            chips:
              - type: template
                entity: sensor.iphone_connection_type
                content: "{{ states('sensor.iphone_connection_type')}}"
                icon: |-
                  {% if is_state('sensor.iphone_connection_type','wifi')%}
                    mdi:wifi 
                  {% elif is_state('sensor.iphone_connection_type','vpn')%}
                    mdi:network
                  {% elif is_state('sensor.iphone_connection_type','cellular')%}
                    mdi:signal-4g
                  {% else %}
                    mdi:network-strength-off
                  {% endif %} 
                icon_color: >-
                  {% if is_state('sensor.iphone_connection_type','wifi') or
                  is_state('sensor.iphone_connection_type','vpn')%}
                    green
                  {% elif is_state('sensor.iphone_connection_type','cellular')%}
                    red
                  {% else %}
                    grey
                  {% endif %}  
                tap_action:
                  action: more-info
              - type: template
                entity: sensor.iphone_battery_level
                content: "{{ states('sensor.iphone_battery_level')}}%"
                icon: |-
                  {% set state = states('sensor.iphone_battery_level')|float %}
                  {% if state >= 0 and state < 10 %} mdi:battery-10
                  {% elif state >= 10 and state < 20 %} mdi:battery-20
                  {% elif state >= 20 and state < 30 %} mdi:battery-30
                  {% elif state >= 30 and state < 40 %} mdi:battery-40
                  {% elif state >= 40 and state < 50 %} mdi:battery-50
                  {% elif state >= 50 and state < 60 %} mdi:battery-60
                  {% elif state >= 60 and state < 70 %} mdi:battery-70
                  {% elif state >= 70 and state < 80 %} mdi:battery-80
                  {% elif state >= 80 and state < 95 %} mdi:battery-90
                  {% else %} mdi:battery
                  {% endif %}  
                icon_color: |-
                  {% set state = states('sensor.iphone_battery_level')|float %}
                  {% if state >= 0 and state < 20 %} red
                  {% elif state >= 20 and state < 50 %} orange
                  {% elif state >= 50 and state < 80 %} yellow
                  {% else %} green
                  {% endif %}        
                tap_action:
                  action: more-info
              - type: template
                entity: sensor.iphone_battery_state
                content: "{{ states('sensor.iphone_battery_state')}}"
                icon: |-
                  {% if is_state('binary_sensor.iphone_battery_state','on')%}
                    mdi:power-plug  
                  {% else %}
                    mdi:power-plug-off
                  {% endif %}                 
                icon_color: |-
                  {% if is_state('binary_sensor.iphone_battery_state','on')%}
                    blue
                  {% else %}
                    grey
                  {% endif %}
                tap_action:
                  action: more-info
grid_options:
  columns: 9
  rows: auto

You might not be sharing the sensor values in your companion app.
Check the values of your sensors in the developer tools.

Thanks but they all appear to be shared okay and the change is seen, as shown here:

2026-03-05_13-10-40

But the icon doesn’t update as I would expect that it should.

What does the developer tools say?

Do you mean this:

Battery_state == Charging , Is Not ‘on’ ( Unless you’ve found the “State == on” some where else ? )

Same goes for your other “Entities” … always check them in /Settings/Dev-Tools-#States, so you know what’s right , i.e device_tracker is Never “Away”, It’s “not_home”

I think the state is no longer wifi, but instead, wi-fi. Add the hyphen, that’s what I had to do.

@boheme61 is correct. The example you show is using a binary_sensor to check the state, but iOS doesn’t include that by default. Your options are to create a binary_sensor helper to provide the on/off logic, or even more simple, just use the included sensor and change the state from “on” to “Charging”

1 Like

Thank you.

I was out for a bit so managed to check that it does change to cellular just fine from and back to Wi Fi no problem. Just the icon and colour/s don’t change from what is shown above.

Same with charing and, I tried changing from “on” to “charging” which works just fine, no issues other than again the icon/colour doesn’t update as I would expect.

I just can’t seem to work out why given that what’s reported is correct and, if you click on the chip the info is all good, the sensor is fine and the status is shown correctly there.

Your screenshot says Charging and not charging.
Also be sure to correct it in all places.
You probably have an if line for the icon and another for the color.

Try -

type: horizontal-stack
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-person-card
        entity: person.kenneth_watt
        icon_type: entity-picture
        secondary_info: last-changed
        card_mod:
          style: |
            ha-card {
              background: transparent;
            }
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-chips-card
            alignment: center
            card_mod:
              style: |
                ha-card {
                    --chip-font-size: 0.3em;
                    --chip-icon-size: 0.5em;
                    --chip-border-width: 0;
                    --chip-box-shadow: none;
                    --chip-background: none;
                    --chip-border: none;
                    --chip-spacing: none;
                    --chip-font-weight: bold;
                }
            chips:
              - type: template
                entity: sensor.iphone_connection_type
                content: "{{ states('sensor.iphone_connection_type')}}"
                icon: |-
                  {% if is_state('sensor.iphone_connection_type','wi-fi')%}
                    mdi:wifi 
                  {% elif is_state('sensor.iphone_connection_type','vpn')%}
                    mdi:network
                  {% elif is_state('sensor.iphone_connection_type','cellular')%}
                    mdi:signal-4g
                  {% else %}
                    mdi:network-strength-off
                  {% endif %} 
                icon_color: >-
                  {% if is_state('sensor.iphone_connection_type','wi-fi') or
                  is_state('sensor.iphone_connection_type','vpn')%}
                    green
                  {% elif is_state('sensor.iphone_connection_type','cellular')%}
                    red
                  {% else %}
                    grey
                  {% endif %}  
                tap_action:
                  action: more-info
              - type: template
                entity: sensor.iphone_battery_level
                content: "{{ states('sensor.iphone_battery_level')}}%"
                icon: |-
                  {% set state = states('sensor.iphone_battery_level')|float %}
                  {% if state >= 0 and state < 10 %} mdi:battery-10
                  {% elif state >= 10 and state < 20 %} mdi:battery-20
                  {% elif state >= 20 and state < 30 %} mdi:battery-30
                  {% elif state >= 30 and state < 40 %} mdi:battery-40
                  {% elif state >= 40 and state < 50 %} mdi:battery-50
                  {% elif state >= 50 and state < 60 %} mdi:battery-60
                  {% elif state >= 60 and state < 70 %} mdi:battery-70
                  {% elif state >= 70 and state < 80 %} mdi:battery-80
                  {% elif state >= 80 and state < 95 %} mdi:battery-90
                  {% else %} mdi:battery
                  {% endif %}  
                icon_color: |-
                  {% set state = states('sensor.iphone_battery_level')|float %}
                  {% if state >= 0 and state < 20 %} red
                  {% elif state >= 20 and state < 50 %} orange
                  {% elif state >= 50 and state < 80 %} yellow
                  {% else %} green
                  {% endif %}        
                tap_action:
                  action: more-info
              - type: template
                entity: sensor.iphone_battery_state
                content: "{{ states('sensor.iphone_battery_state')}}"
                icon: |-
                  {% if is_state('sensor.iphone_battery_state','Charging')%}
                    mdi:power-plug  
                  {% else %}
                    mdi:power-plug-off
                  {% endif %}                 
                icon_color: |-
                  {% if is_state('sensor.iphone_battery_state','Charging')%}
                    blue
                  {% else %}
                    grey
                  {% endif %}
                tap_action:
                  action: more-info
grid_options:
  columns: 9
  rows: auto

I like this. I made another chip for it, too. This will show the state of the person, which includes the zone they could be in, of course. The icon will change to match the icon of the zone. Updated for your person entity. YMMV

              - type: template
                entity: person.kenneth_watt
                content: "{{ state_translated('person.kenneth_watt') }}"
                icon: >
                  {% set zone = 'zone.' ~ states('person.kenneth_watt') %} {{
                  state_attr(zone, 'icon') if state_attr(zone, 'icon') else
                  'mdi:account' }}
                tap_action:
                  action: more-info

EDIT Cleaned up the connection logic, this works good for me

                  - type: template
                    entity: sensor.iphone_connection_type
                    content: "{{ states('sensor.iphone_connection_type') }}"
                    icon: >-
                      {% set conn =
                      states('sensor.iphone_connection_type') | lower
                      %} {% if conn == 'wi-fi' %}
                        mdi:wifi 
                      {% elif conn == 'vpn' %}
                        mdi:network
                      {% elif conn == 'cellular' %}
                        mdi:signal-4g
                      {% else %}
                        mdi:network-strength-off
                      {% endif %} 
                    icon_color: >-
                      {% set conn =
                      states('sensor.iphone_connection_type') | lower
                      %} {% if conn in ['wi-fi','vpn'] %}
                        green
                      {% elif conn == 'cellular' %}
                        red
                      {% else %}
                        grey
                      {% endif %}
                    tap_action:
                      action: more-info

Thanks that last bit of code you gave solved the connection one, that now displays 100% correctly! :smiley:

The status shows different on different images as I was trying to show that it is updating, HAss knows what the state is just something in the code to change what’s shown seems to not be working.

Charging now working as well, brilliant, thanks you. :smiley:

Yea… I also noticed the person status chip isn’t working quite right. I’ve scoured the official docs and consulted AI. I’ve got some new logic to test out. I’ll post back when I have a working model.

Sure fire way to get sent down a bad rabbit hole using outdated information.

Consult the official documentation. Plan what you are trying to achieve and go for it. Gain understanding and wisdom as you proceed.

1 Like

I’m not an expert, but I don’t wholly rely on AI either. AI is a tool. Nothing more, nothing less. I have accomplished quite a few feats using AI. I appreciate the warning. I am well aware of it’s limitations. AI is not my strength. Perseverance is my strength. I will figure it out with trial-and-error.

1 Like

@kwatt I think I’ve got a working template. My wife was running errands today, so I was able to test it. Seems to work good for me. Since the home zone is an un-editable zone, it’s icon doesn’t exist in it’s attributes like any other zone created, even though it appears to in Developer Tools (strange…). The previous templates I tried don’t account for unique entity zone names. The one I’m using now is more robust as it differentiates the zones using friendly names. Give it a go and let me know if you have any issues.

          - type: template
            entity: person.kenneth_watt
            content: "{{ state_translated('person.kenneth_watt') }}"
            icon: |-
              {% set ps = states('person.kenneth_watt') %}
              {% if ps == 'home' %}
                mdi:home
              {% elif ps == 'not_home' %}
                mdi:map-marker-radius
              {% else %}
                {% set z = states.zone 
                   | selectattr('attributes.friendly_name','eq', ps) 
                   | map(attribute='entity_id') 
                   | list 
                   | first %}
                {{ state_attr(z,'icon') if state_attr(z,'icon') else 'mdi:map-marker-radius' }}
              {% endif %}
            tap_action:
              action: more-info

Fantastic, thank you I will give that a try and it’s all been working good from the last code you gave me, rock solid in fact. :smiley:

Just to let you know and others, that worked great, ends up looking like this for me:

It’s a lot of info in a very small space that can be taken in with little more than a glance, which I like.

4 Likes

:+1: Now, Take a Walk you only reach 2386 steps today :grin: