I recently saw this cool dashboard and the person cards caught my eye. As the dashboard creator also provided all the yaml code and a really helpful guide, I tried to rebuild it. I was already using the mushroom-person-card, so I “just” had to add the little icons (mushroom-chips-card) below it (using the vertical-stack-in-card). To display the network type and the charging status, you first have to enable these sensors in the Home Assistant Companion App on your mobile phone. This is my result:
001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 026 027 028 029 030 031 032 033 034 035 036 037 038 039 040 041 042 043 044 045 046 047 048 049 050 051 052 053 054 055 056 057 058 059 060 061 062 063 064 065 066 067 068 069 070 071 072 073 074 075 076 077 078 079 080 081 082 083 084 085 086 087 088 089 090 091 092 093 094 095 096 097 098 099 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 | type: horizontal-stackcards: - type: custom:vertical-stack-in-card cards: - type: custom:mushroom-person-card entity: person.nico 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.mi_8_network_type content: '{{ states(''sensor.mi_8_network_type'')}}' icon: |- {% if is_state('sensor.mi_8_network_type','wifi')%} mdi:wifi {% elif is_state('sensor.mi_8_network_type','vpn')%} mdi:network {% elif is_state('sensor.mi_8_network_type','cellular')%} mdi:signal-4g {% else %} mdi:network-strength-off {% endif %} icon_color: >- {% if is_state('sensor.mi_8_network_type','wifi') or is_state('sensor.mi_8_network_type','vpn')%} green {% elif is_state('sensor.mi_8_network_type','cellular')%} red {% else %} grey {% endif %} tap_action: action: more-info - type: template entity: sensor.mi_8_battery_level content: '{{ states(''sensor.mi_8_battery_level'')}}%' icon: |- {% set state = states('sensor.mi_8_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.mi_8_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.mi_8_battery_power content: '{{ states(''sensor.mi_8_battery_power'')}} W' icon: |- {% if is_state('binary_sensor.mi_8_is_charging','on')%} mdi:power-plug {% else %} mdi:power-plug-off {% endif %} icon_color: |- {% if is_state('binary_sensor.mi_8_is_charging','on')%} blue {% else %} grey {% endif %} tap_action: action: more-info - type: custom:vertical-stack-in-card cards: - type: custom:mushroom-person-card entity: person.user2 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.redmi_note_8_pro_network_type content: '{{ states(''sensor.redmi_note_8_pro_network_type'')}}' icon: >- {% if is_state('sensor.redmi_note_8_pro_network_type','wifi')%} mdi:wifi {% elif is_state('sensor.redmi_note_8_pro_network_type','vpn')%} mdi:network {% elif is_state('sensor.redmi_note_8_pro_network_type','cellular')%} mdi:signal-4g {% else %} mdi:network-strength-off {% endif %} icon_color: >- {% if is_state('sensor.redmi_note_8_pro_network_type','wifi') or is_state('sensor.redmi_note_8_pro_network_type','vpn')%} green {% elif is_state('sensor.redmi_note_8_pro_network_type','cellular')%} red {% else %} grey {% endif %} tap_action: action: more-info - type: template entity: sensor.mi_8_battery_level content: '{{ states(''sensor.redmi_note_8_pro_battery_level'')}}%' icon: >- {% set state = states('sensor.redmi_note_8_pro_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.redmi_note_8_pro_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.redmi_note_8_pro_battery_power content: '{{ states(''sensor.redmi_note_8_pro_battery_power'')}} W' icon: >- {% if is_state('binary_sensor.redmi_note_8_pro_is_charging','on')%} mdi:power-plug {% else %} mdi:power-plug-off {% endif %} icon_color: >- {% if is_state('binary_sensor.redmi_note_8_pro_is_charging','on')%} blue {% else %} grey {% endif %} tap_action: action: more-info |
Update 15.01.2025: When I migrated my dashboard to the new sections layout, I could get rid of the surrounding horizontal stack and had to adjust some minor things like font size and icon size. I also added the Steps sensor from my mobile phone (chekc here). Here is it, how it looks now:
001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 026 027 028 029 030 031 032 033 034 035 036 037 038 039 040 041 042 043 044 045 046 047 048 049 050 051 052 053 054 055 056 057 058 059 060 061 062 063 064 065 066 067 068 069 070 071 072 073 074 075 076 077 078 079 080 081 082 083 084 085 086 087 088 089 090 091 092 093 094 095 096 097 098 099 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | type: custom:vertical-stack-in-cardcards: - type: custom:mushroom-person-card entity: person.nocin 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.32em; --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.mi_8_network_type content: "{{ states('sensor.mi_8_network_type')}}" icon: |- {% if is_state('sensor.mi_8_network_type','wifi')%} mdi:wifi {% elif is_state('sensor.mi_8_network_type','vpn')%} mdi:network {% elif is_state('sensor.mi_8_network_type','cellular')%} mdi:signal-4g {% else %} mdi:network-strength-off {% endif %} icon_color: >- {% if is_state('sensor.mi_8_network_type','wifi') or is_state('sensor.mi_8_network_type','vpn')%} green {% elif is_state('sensor.mi_8_network_type','cellular')%} red {% else %} grey {% endif %} tap_action: action: more-info - type: template entity: sensor.mi_8_battery_level content: "{{ states('sensor.mi_8_battery_level')}}%" icon: |- {% set state = states('sensor.mi_8_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.mi_8_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.mi_8_battery_power content: "{{ states('sensor.mi_8_battery_power')}} W" icon: |- {% if is_state('binary_sensor.mi_8_is_charging','on')%} mdi:power-plug {% else %} mdi:power-plug-off {% endif %} icon_color: |- {% if is_state('binary_sensor.mi_8_is_charging','on')%} blue {% else %} grey {% endif %} tap_action: action: more-info - type: horizontal-stack cards: - type: custom:mushroom-chips-card alignment: center card_mod: style: | ha-card { --chip-font-size: 0.32em; --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.daily_steps_mi8 content: "{{ states('sensor.daily_steps_mi8')}} steps today" tap_action: action: more-info |