Maybe, I did not try, you can use this straight away on the card.
Cheers
This does not work:
loc: |
[[[
return `<ha-icon
icon={{state_attr(‘sensor.where_is_ignacio’, ‘icon’)}}
style="width: 20px; height: 20px;">
</ha-icon>${states['sensor.where_is_ignacio'].state}<span></span>`
]]]
I get the room name to display but not the icon:
and here is a screenshot that shows that the sensor has the correct icon:
Please tell me what kind of sensors?
Those sensors are from Android companion app.
- is battery charging
- same
- sleep status from app sensors
Hi I’m new in HA and I’m trying to crate my card.
In Hassio where I have to copy the card?
wifi: |
[[[
if (states['sensor.iphone_van_lars_ssid'].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);">Not Connected</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.iphone_van_lars_ssid'].state}</span></span>`;
}
]]]
When is use this line of code everything works, only i’m from the nettherlands. How can i set it up to say Niet Verbonden (not connected)
try this:
wifi: |
[[[
if (states['sensor.iphone_van_lars_ssid'].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);">Niet Verbonden</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.iphone_van_lars_ssid'].state}</span></span>`;
}
]]]
it could be the state of the sensor. Can you go to developer tools > states and show me what sensor.iphone_van_lars_ssid says?
Thats says ‘’ Not Connected ‘’
Here, check mine which is working fine:
wifi: |
[[[
if (states['sensor.ad_s22_wifi_connection'].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.ad_s22_wifi_connection'].state}</span></span>`;
}
]]]
Just change the sensor to yours and it should work fine
agh, remove the < and > from the 3rd line…
if (states['sensor.iphone_van_lars_ssid'].state =='Not Connected') {
^ ^
I cannot see any difference between yours and his.
I guess it is the:
'<Not Connected>'
vs mine that has:
'<not connected>'
Guess that the capitalization may have something to do with it
yes, I think you’re right!
interestingly, I don’t have the < and > in my version which also works fine.
wifi: |
[[[
if (states['sensor.monkeybutler_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 style="color: var(--text-wifi-color-sensor);">Disconnected</span>`;}
else if (states['sensor.monkeybutler_connection_type'].state == 'Cellular') { return `
<ha-icon icon="mdi:wifi" style="width: 20px; height: 20px; color: #ffffff;"></ha-icon>
<span style="color: var(--text-color-sensor);">${states['sensor.monkeybutler_connection_type'].state}</span>`;}
else { return `
<ha-icon icon="mdi:wifi" style="width: 20px; height: 20px; color: #ffff00;"></ha-icon>
<span style="color: var(--text-color-sensor);">${states['sensor.monkeybutler_connection_type'].state} (${states['sensor.monkeybutler_ssid'].state}</span>)`;
}
]]]
Where do you add this button card template code?
Thanks in advance
nevermind I already figure it out.
@MicheleMercuri . I like your card and would love to make one for my family stucked with the other cards like yours. Would you mind sharing your code? Thank you.
here it is type: picture-elementsimage: /local/person_blank.jpgelements: - type: ima - Pastebin.com (it’s a picture-elements card)
and attached a sample picture
