A other person card, created for mobile view and a popup card with location.
Code
square: false
columns: 3
type: grid
cards:
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-person-card
entity: person.fabian
use_entity_picture: true
hide_name: true
layout: vertical
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Fabian
content:
type: custom:mod-card
style: |
ha-card {
--padding-right: 15px;
--padding-left: 15px;
--padding-bottom: 15px;
--box-shadow: 0px 0px;
--ha-card-border-width: 0px;
}
card:
type: vertical-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.places_fabian_locatie
primary_info: none
icon: mdi:map-marker
icon_color: yellow
- type: map
entities:
- entity: person.fabian
dark_mode: false
auto_fit: true
default_zoom: 16
- type: custom:mushroom-chips-card
chips:
- type: template
icon_color: |2-
{% set state=states('binary_sensor.sm_s21_fabian_is_charging') %}
{% if state=='on' %}
green
{% elif state=='off' %}
#6f6f6f
{% endif %}
entity: binary_sensor.sm_s21_fabian_is_charging
icon: mdi:power-plug
tap_action:
action: more-info
- type: template
entity: sensor.sm_s21_fabian_battery_level
icon: |2
{% set bl = states('sensor.sm_s21_fabian_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_s21_fabian_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 %}
tap_action:
action: more-info
alignment: center
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-person-card
entity: person.naomi
use_entity_picture: true
hide_name: true
layout: vertical
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Naomi
content:
type: custom:mod-card
style: |
ha-card {
--padding-right: 15px;
--padding-left: 15px;
--padding-bottom: 15px;
--box-shadow: 0px 0px;
--ha-card-border-width: 0px;
}
card:
type: vertical-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.places_naomi_locatie
primary_info: none
icon: mdi:map-marker
icon_color: yellow
- type: map
entities:
- entity: person.naomi
dark_mode: false
auto_fit: true
default_zoom: 16
- type: custom:mushroom-chips-card
chips:
- type: template
icon_color: |2-
{% set state=states('sensor.naomi_s20_batterij_l360') %}
{% if state=='True' %}
green
{% elif state=='False' %}
#6f6f6f
{% endif %}
entity: sensor.naomi_s20_batterij_l360
icon: mdi:power-plug
tap_action:
action: more-info
- type: template
entity: sensor.naomi_s20_batterij_percentage_l360
icon: |2
{% set bl = states('sensor.naomi_s20_batterij_percentage_l360') | 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.naomi_s20_batterij_percentage_l360') | 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 %}
tap_action:
action: more-info
alignment: center
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-person-card
entity: person.pascalle
use_entity_picture: true
hide_name: true
layout: vertical
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Pascalle
content:
type: custom:mod-card
style: |
ha-card {
--padding-right: 15px;
--padding-left: 15px;
--padding-bottom: 15px;
--box-shadow: 0px 0px;
--ha-card-border-width: 0px;
}
card:
type: vertical-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.places_pascalle_locatie
primary_info: none
icon: mdi:map-marker
icon_color: yellow
- type: map
entities:
- entity: person.pascalle
dark_mode: false
auto_fit: true
default_zoom: 16
- type: custom:mushroom-chips-card
chips:
- type: template
icon_color: |2-
{% set state=states('binary_sensor.sm_s20_pascalle_is_charging') %}
{% if state=='on' %}
green
{% elif state=='off' %}
#6f6f6f
{% endif %}
entity: binary_sensor.sm_s20_pascalle_is_charging
icon: mdi:power-plug
tap_action:
action: more-info
- type: template
entity: sensor.sm_s20_pascalle_battery_level
icon: |2
{% set bl = states('sensor.sm_s20_pascalle_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_s20_pascalle_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 %}
tap_action:
action: more-info
alignment: center