reclus23
May 5, 2024, 5:51am
374
I’m new and I just started and thanks to your examples I’m learning. I have a problem with the configuration and I don’t know where the error is. can you please help me?
type: custom:button-card
entity: person.eugenio
variables:
phone_battery_level_sensor: '[[[ return states["sensor.magic2_battery_level"].state]]]'
phone_battery_state_sensor: '[[[ return states["sensor.magic2_battery_state"].state]]]'
proximity_sensor: '[[[ return states["sensor.casa_eugenio_distanza"].state]]]'
phone_wifi_sensor: '[[[ return states["sensor.magic2_wifi_bssid"].state]]]'
aspect_ratio: 2/1
name: Eugenio
show_entity_picture: true
show_name: false
hold_action:
action: none
state:
- value: home
styles:
card:
- background-color: '#202124'
custom_fields:
icon:
- border-color: '#77c66e'
- value: not_home
styles:
card:
- background-color: '#202124'
custom_fields:
icon:
- border-color: deepskyblue
- value: null
styles:
card:
- background-color: '#202124'
custom_fields:
icon:
- border-color: '#B83838'
styles:
card:
- background-color: '#202124'
- border-radius: 5%
- padding: 2% 5% 5% 5%
- color: gray
- font-size: 10px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
- justify-self: center
- align-content: center
grid:
- grid-template-areas: '"icon status" "icon battery" "icon wifi" "icon proximity"'
- grid-template-columns: 1.5fr 1fr
- grid-template-rows: 1fr 1fr 1fr 1fr
- align-content: center
name:
- font-size: 15px
- align-self: middle
- justify-self: start
custom_fields:
icon:
- clip-path: circle()
- width: 60%
- pointer-events: none
- display: grid
- border: 5px solid
- border-color: '#808080'
- border-radius: 500px
- margin: 0 0 0 0
- opacity: 1
- align-self: center
- justify-self: center
status:
- justify-self: start
- color: white
proximity:
- align-self: middle
- justify-self: start
- color: white
wifi:
- justify-self: start
- color: white
- '--text-wifi-color-sensor': >-
[[[ if (variables.phone_wifi_sensor == '<not connected>') return
"#aaaaaa"; ]]]
battery:
- align-self: middle
- justify-self: start
- color: white
- '--text-color-sensor': >-
[[[ if (variables.magic2_battery_level_sensor < 35) return "#EF4F1A";
]]]
custom_fields:
icon: >
[[[ return entity === undefined ? null : `<img
src="${states[entity.entity_id].attributes.entity_picture}" width="100%">`;
]]]
status: |
[[[
if (entity.state =='not_home') {
return `<ha-icon icon="mdi:home-export-outline"
style="width: 20px; height: 20px; color: '#888888';">
</ha-icon><span> On the way</span>`;
}
if (entity.state =='home') {
return `<ha-icon
icon="mdi:home"
style="width: 40px; height: 40px; color: 888888;">
</ha-icon><span> ${entity.state}</span>`;
} else {
if (entity.state =='[YOUR OTHER LOCATION]') {
return `<ha-icon icon="mdi:pizza"
style="width: 40px; height: 40px; color: '#888888';">
</ha-icon><span> ${entity.state}</span>`;
}
else{
return `<ha-icon
icon="mdi:map-marker-radius"
style="width: 40px; height: 20px; color: 888888;">
</ha-icon><span> ${entity.state}</span>`;
}
}
]]]
battery: |
[[[
if (variables.magic2_battery_state_sensor =='charging') {
return `<ha-icon
icon="mdi:battery-charging-medium"
style="width: 20px; height: 20px; color: #888888;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${variables.magic2_battery_state_sensor}% Battery</span></span>`;
} else {
return `<ha-icon
icon="mdi:battery-medium"
style="width: 40px; height: 40px; color: #888888;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${variables.phone_battery_level_sensor}% Battery</span></span>`;
}
]]]
proximity: |
[[[
return `<ha-icon
icon="mdi:map-marker-distance"
style="width: 40px; height: 40px; color: #888888;">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${variables.proximity_sensor} Km</span></span>`
]]]
wifi: |
[[[
if (variables.sensor.magic2_wifi_bssid =='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);">${variables.phone_wifi_sensor}</span></span>`;
}
]]]
t
by clicking on the link there is my card with the error
https://i.postimg.cc/zvcLh96K/person.png
Hi, I do not know if this could be the problem but you missed a ; at the end. It’s the only thing different I can see.
reclus23
May 5, 2024, 8:09am
376
Hi d13g0m0nt3s, thank you for help.
1 Like
Hi again I think I found the error. You are no using the variable
The if should be:
if (variables.phone_wifi_sensor
Not
If (variables.sensor.magic2_wifi_bssid
reclus23
May 5, 2024, 9:07am
378
nothing…
I recreate the card and worked for me replacing the variable. Also noticed a loose t letter at the end of your code. Change the variable and remove the t
reclus23
May 5, 2024, 9:42am
380
changed the variable and removed the “t”, but nothing…
type: custom:button-card
entity: person.eugenio
variables:
phone_battery_level_sensor: '[[[ return states["sensor.magic2_battery_level"].state]]]'
phone_battery_state_sensor: '[[[ return states["sensor.magic2_battery_state"].state]]]'
phone_wifi_sensor: '[[[ return states["sensor.magic2_wifi_bssid"].state]]]'
proximity_sensor: '[[[ return states["sensor.casa_eugenio_distanza"].state]]]'
aspect_ratio: 2/1
name: Eugenio
show_entity_picture: true
show_name: false
hold_action:
action: none
state:
- value: home
styles:
card:
- background-color: '#202124'
custom_fields:
icon:
- border-color: '#77c66e'
- value: not_home
styles:
card:
- background-color: '#202124'
custom_fields:
icon:
- border-color: deepskyblue
- value: null
styles:
card:
- background-color: '#202124'
custom_fields:
icon:
- border-color: '#B83838'
styles:
card:
- background-color: '#202124'
- border-radius: 5%
- padding: 2% 5% 5% 5%
- color: gray
- font-size: 10px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
- justify-self: center
- align-content: center
grid:
- grid-template-areas: '"icon status" "icon battery" "icon wifi" "icon proximity"'
- grid-template-columns: 1.5fr 1fr
- grid-template-rows: 1fr 1fr 1fr 1fr
- align-content: center
name:
- font-size: 15px
- align-self: middle
- justify-self: start
custom_fields:
icon:
- clip-path: circle()
- width: 60%
- pointer-events: none
- display: grid
- border: 5px solid
- border-color: '#808080'
- border-radius: 500px
- margin: 0 0 0 0
- opacity: 1
- align-self: center
- justify-self: center
status:
- justify-self: start
- color: white
proximity:
- align-self: middle
- justify-self: start
- color: white
wifi:
- justify-self: start
- color: white
- '--text-wifi-color-sensor': >-
[[[ if (variables.phone_wifi_sensor == '<not connected>') return
"#aaaaaa"; ]]]
battery:
- align-self: middle
- justify-self: start
- color: white
- '--text-color-sensor': >-
[[[ if (variables.magic2_battery_level_sensor < 35) return "#EF4F1A";
]]]
custom_fields:
icon: >
[[[ return entity === undefined ? null : `<img
src="${states[entity.entity_id].attributes.entity_picture}" width="100%">`;
]]]
status: |
[[[
if (entity.state =='not_home') {
return `<ha-icon icon="mdi:home-export-outline"
style="width: 20px; height: 20px; color: '#888888';">
</ha-icon><span> On the way</span>`;
}
if (entity.state =='home') {
return `<ha-icon
icon="mdi:home"
style="width: 40px; height: 40px; color: 888888;">
</ha-icon><span> ${entity.state}</span>`;
} else {
if (entity.state =='[YOUR OTHER LOCATION]') {
return `<ha-icon icon="mdi:pizza"
style="width: 40px; height: 40px; color: '#888888';">
</ha-icon><span> ${entity.state}</span>`;
}
else{
return `<ha-icon
icon="mdi:map-marker-radius"
style="width: 40px; height: 20px; color: 888888;">
</ha-icon><span> ${entity.state}</span>`;
}
}
]]]
battery: |
[[[
if (variables.magic2_battery_state_sensor =='charging') {
return `<ha-icon
icon="mdi:battery-charging-medium"
style="width: 20px; height: 20px; color: #888888;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${variables.magic2_battery_state_sensor}% Battery</span></span>`;
} else {
return `<ha-icon
icon="mdi:battery-medium"
style="width: 40px; height: 40px; color: #888888;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${variables.phone_battery_level_sensor}% Battery</span></span>`;
}
]]]
proximity: |
[[[
return `<ha-icon
icon="mdi:map-marker-distance"
style="width: 40px; height: 40px; color: #888888;">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${variables.proximity_sensor} Km</span></span>`
]]]
wifi: |
[[[
if (states['variables.phone_wifi_sensor'].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.magic2_wifi_bssid'].state}</span></span>`;
}];
Now you missed two ]] at the end and remove the last ;
wifi: |
[[[
if (states['variables.phone_wifi_sensor'].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.magic2_wifi_bssid'].state}</span></span>`;
}];
Should be
wifi: |
[[[
if (states['variables.phone_wifi_sensor'].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.magic2_wifi_bssid'].state}</span></span>`;
}
]]]
reclus23
May 5, 2024, 9:53am
382
if after the last parenthesis I don’t put any sign and leave it blank, the card disappears and I get this message:
ButtonCardJSTemplateError: TypeError: Cannot read properties of undefined (reading ‘state’) in ‘if (states[‘variables.phone_wifi_sensor’].state ==’‘) { return `<ha-icon i…’
You are making more changes to your code that do not need to be changed
${states[‘sensor.magic2_wifi_bssid’].state}
Your are using a states like if was a variable
Should be like your initial code
${variables.phone_wifi_sensor}
And the if is wrong too
Please take your initial code, change the variable in the if ( and remove the t, it should work
wifi: |
[[[
if (variables.phone_wifi_sensor =='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);">${variables.phone_wifi_sensor}</span></span>`;
}
]]]
reclus23
May 5, 2024, 10:40am
384
I did as you said and the problem disappeared but I don’t have the wifi connection. I have an empty space (which is better than my initial situation)
Braakie
May 5, 2024, 11:32am
385
You have the wrong sensor in top of the code
‘[[[ return states[“sensor.magic2_wifi_bssid”].state]]]’
Post the actual wifi: part only, please.
I notice that you have duplicate tags in all the custom fields. That do not produce any error but is unnecessary. You have <span><span style…</span></span> you can remove the first and last in all your custom fields.
Try what Braakie said too. With my own sensor worked as you can see in my previous screenshot
reclus23
May 5, 2024, 12:05pm
387
d13g0m0nt3s and Braakie thank you! It works!
2 Likes
BitStab
May 6, 2024, 10:17am
388
Hi, sorry for the late response, but i was busy with other things.
i don’t know if this line really works. Can you porvide me with a screenshot, so i can understand what’s really happening?
Jon_White
May 15, 2024, 1:36am
389
Used a mushroom template card with info from life360 - now that it is working again!
multiline secondary true looks nicer but this is part of a large dashboard and it starts to overflow other cards
type: custom:mushroom-template-card
primary: My Name
secondary: |-
{%- set person = "my_name" %}
{% if is_state("device_tracker.life360_" + person, "home") -%}
Home
{%- elif state_attr("device_tracker.life360_" + person, "place",) is none -%}
{{state_attr("device_tracker.life360_" + person, "address") }}
{%- else -%}
{{ state_attr("device_tracker.life360_" + person, "place") }}
{%- endif %}
icon: ''
entity: device_tracker.life360_my_name
picture: >-
{%- set person = "my_name" %}
{%- set pic = state_attr("device_tracker.life360_" + person, "entity_picture") %}
{{ pic }}
fill_container: true
multiline_secondary: false
badge_icon: >-
{%- set person = "my_name" %}
{%- set battery = state_attr("device_tracker.life360_" + person,
"battery_level") %}
{% if state_attr("device_tracker.life360_" + person, "battery_charging") is true -%}
{%- set batterychg = "charging-" %}
{% else %}
{%- set batterychg = "" %}
{%- endif %}
{% if battery < 40 -%}
mdi:battery-{{ batterychg }}30
{%- elif battery < 70 -%}
mdi:battery-{{ batterychg }}60
{% else %}
mdi:battery-{{ batterychg }}90
{%- endif %}
badge_color: >-
{%- set person = "my_name" %}
{%- set battery = state_attr("device_tracker.life360_" + person,
"battery_level") %}
{% if state_attr("device_tracker.life360_" + person, "battery_charging") is true -%}
blue
{% else %}
{% if battery < 40 -%}
red
{%- elif battery < 70 -%}
yellow
{% else %}
green
{%- endif %}
{%- endif %}
2 Likes
Zenia
May 15, 2024, 11:12am
390
Off topic question, what you have done with Life360 integration to make it work again? I try to log in again, and no success. It’s said wrong credentials.
Zenia
May 15, 2024, 11:23am
391
Here is mine:
type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
border: none !important;
# background: none !important;
--vertical-stack-card-gap: 10px;
background: url('/local/MyPictures/rock wall.jpg');
background-size: 200%;
}
cards:
- type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
}
cards:
- type: custom:mushroom-person-card
name: Yevgeniy
entity: person.yevgeniy
layout: vertical
icon_type: entity-picture
primary_info: state
secondary_info: false
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
display: flex;
border-radius: 50%;
{% if states(config.entity) == 'home' %}
animation: pinggreen 6s infinite;
{% else %}
animation: pingred 6s infinite;
{% endif %}
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
.: |
ha-card {
border: none !important;
background: none !important;
margin-left: -50px !important;
}
- type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
margin-left: -55px !important;
}
cards:
- type: custom:mushroom-template-card
primary: >-
{%- if is_state('sensor.sm_s918u_battery_state', 'charging') %}
Charging 🔌
{%- elif is_state('sensor.sm_s918u_battery_state', 'discharging')
%}
Discharging 🙃
{% else %}
Full 💯
{% endif %}
secondary: Battery {{ states('sensor.sm_s918u_battery_level') }}%
entity: sensor.sm_s918u_battery_state
icon: |2
{% set bl = states('sensor.sm_s918u_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_s918u_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 %}
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
justify-content: center;
--chip-icon-size: 24px;
--chip-height: 54px;
--chip-with:
width: var(--chip-height) !important;
border-radius: 50% !important;
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: entity
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
font-size: 30px !important;
}
entity: sensor.sm_s918u_geocoded_location
icon: mdi:google-maps
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
margin-left: -23px !important;
}
alignment: center
1 Like
Chykan
May 15, 2024, 11:36am
392
Mine is pretty simple. I have a 15.6" uPerfect vertical monitor connected to a pi400.
I have a large HOME and AWAY status so you can see it across the room 15m.
Mushroom Person Card display status of each person.
When up close you can click on a card to show a map of were the person is
AWAY status, turns OFF heat pumps and other items in the house.
HOME & AWAY Status can be set manually by hitting the sticky floating navigation menu button at the bottom of the page.
HOME & AWAY Status is also set automatically using device tracker and proximity intergrations.
1 Like
Chykan
May 15, 2024, 11:49am
393
Creating Avatars I tried a fair few applications. Microsoft Teams Avatar App gave some good results with realistic results.[HERE] . It is FREE and you can create 3 different Avatars at a time and just use the snip tool or print screen to copy the image in the app. (Set up avatars for Microsoft Teams - Microsoft Teams | Microsoft Learn )
3 Likes
