Hi!, i’ve trying to add this config to my sensor.yaml but I’m not able to do it I always get error, I don’t know why, I have checked the indentation, could you explain a little bit more where to add it or who, also tried adding it to the template.yaml and get this in the log:
Invalid config for [template]: [trigger] is an invalid option for [template]. Check: template->sensor->5->trigger.
I would love to have the arrive/left info
my configuration.yaml is like :template: !include template.yamlsensor: !include sensors.yaml
Sorry for the late answer. I can look at it. I have some ideas or did you already figured it out?
when is put two card on one page they both slide when I push either one of the, is it possible to only slide the one I push on? Answer: if the input_boolean is the same then both move. Make two different booleans first card ex. input_boolean.edwin_present and second one input_boolean.edwin_present1 or something like that.
I have the sensors defined in templates.yaml.
In configuration.yaml, I have the following:
template: !include_dir_merge_list templates
…and in the root config folder, I have a folder named templates. My templates.yaml file resides there.
However, I think your problem may be solved by adding an “s” to your filename reference:template: !include templates.yamltemplate: !include template.yaml
1 Like
thanks a lot!! it worked
template: !include_dir_merge_list templates
and then created the folder and the templates.yaml file.
edi023
March 18, 2023, 8:28pm
211
thank you sir that is the solution! one step closer to final layout.
now I have to figure out how I can replace the map with something, for example a music player and add some extra info about that room. (Can you tell me which part are for that maps part, sorry still a noob and learning)
One step at the time
I apologize I have not been on here… Family, work …life.
If you still need help please let me know!!!
I’m going to pm you. This is not anymore only person card matter. It’s more like a room card nowadays.
gharl
March 25, 2023, 10:09pm
214
I am new to homeassistant and you all have great person-cards.
I was able to adapt the @VaReTaS card, but I’m not able to add more person. I want to add all my family. How could I do? Do I have to copy and paste all the code several times? THANKS!
dansity
March 31, 2023, 12:23pm
215
I don’t have cloud connection for HA so wherever someone left the house the location and proximity remained triggered indefinitely. Also I value the privacy of the family so I don’t track them, for me the home/not home is enough.
This is how it looks:
type: custom:button-card
entity: person.name
aspect_ratio: 1/1
name: Person
show_entity_picture: true
show_name: false
hold_action:
action: none
styles:
card:
- background-color: rgba(15,15,18,0.4)
- border-radius: 5%
- padding: 5%
- font-size: 10px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
- justify-self: end
- align-self: middle
grid:
- grid-template-areas: '"icon icon" "n n" "battery status"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-size: 15px
- align-self: middle
- justify-self: start
- padding-bottom: 10px
custom_fields:
icon:
- clip-path: circle()
- width: 80%
- pointer-events: none
- display: grid
- border: 5px solid
- border-color: |-
[[[
if (states['binary_sensor.uptimekuma_name_telefon'].state =='off') {
return "#888888";
} else {
return "#00CC66";}
]]]
- border-radius: 500px
- margin: 0 +7% 0 0
- justify-self: end
- opacity: 1
status:
- justify-self: end
- color: white
- margin-bottom: '-5px'
- font-size: 15px
battery:
- margin-bottom: '-5px'
- align-self: middle
- justify-self: start
- font-size: 15px
- color: white
- '--text-color-sensor': >-
[[[ if (states["sensor.phone_battery_level"].state < 50)
return "#EF4F1A"; ]]]
custom_fields:
icon: >
[[[ return entity === undefined ? null : `<img
src="${states[entity.entity_id].attributes.entity_picture}" width="100%">`;
]]]
status: |
[[[
if (states['binary_sensor.uptimekuma_name_telefon'].state =='off') {
return `<ha-icon icon="mdi:home-export-outline"
style="width: 26px; height: 26px; margin: 0 5px 0 0; color: '#888888';">
</ha-icon><span>Távol</span>`;
}
if (states['binary_sensor.uptimekuma_name_telefon'].state =='on') {
return `<ha-icon
icon="mdi:home"
style="width: 26px; height: 26px; margin: 0 5px 0 0; color: 888888;">
</ha-icon><span>Itthon</span>`;
} else {
return `<ha-icon
icon="mdi:map-marker-radius"
style="width: 26px; height: 26px; margin: 0 5px 0 0; color: 888888;">
</ha-icon><span>Ismeretlen</span>`;
}
]]]
battery: |
[[[
if (states['sensor.redmi_phone_battery_state'].state =='charging') {
return `<ha-icon
icon="mdi:battery-charging"
style="width: 24px; height: 24px; color: #fff;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.phone_battery_level'].state}%</span></span>`;
} else {
return `<ha-icon
icon="mdi:battery"
style="width: 24px; height: 24px; color: #fff;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.redmi_phone_battery_level'].state}%</span></span>`;
}
]]]
1 Like
dansity
March 31, 2023, 12:27pm
216
in Home Assistant you have to create multiple person under Settings/Person. You will need to install HA on their phone, login and give all the permission depending what do you want to track (location, battery, wifi etc)
1 Like
videodj
April 8, 2023, 11:10am
217
This my current card, it’s so close to how I want it, but because the person entity doesn’t show state driving, I work around this with a few sensors, so the image and border change based on state. However, this means I can’t view the map when clicking on the button. So I used custom:stack-in-card and added a second button below just for the map. I’ve tried so many variations and everything it just falls short of what I want, but I’m still learning when it comes to Lovelace.
- type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: vertical-stack
cards:
- type: custom:button-card
entity: sensor.dave_current_location
show_entity_picture: true
entity_picture: /local/images/dave/normal.png
state:
- value: home
entity_picture: /local/images/dave/door1.png
- value: Work
entity_picture: /local/images/dave/office.png
- value: School
entity_picture: /local/images/dave/schoolbus.png
- value: Kick Boxing
entity_picture: /local/images/dave/boxing.png
- value: Swimming
entity_picture: /local/images/dave/water.png
- value: Stables
entity_picture: /local/images/dave/horse.png
- value: Amys Parents
entity_picture: /local/images/dave/closed.png
- value: Daves Parents
entity_picture: /local/images/dave/closed.png
- value: not_home
entity_picture: /local/images/dave/where.png
- value: Driving
entity_picture: /local/images/dave/car.png
show_name: false
show_icon: false
show_last_changed: true
triggers_update: all
tap_action:
action: none
custom_fields:
status: |
[[[
if (states['sensor.dave_current_location'].state =='Driving') {
return `<ha-icon icon="mdi:car"
style="width: 20px; height: 20px; color: var(--primary-color);"></ha-icon><span> Driving</span>`;
}
if (states['sensor.dave_current_location'].state =='not_home') {
return `<ha-icon icon="mdi:home-export-outline"
style="width: 20px; height: 20px; color: var(--primary-color);"></ha-icon><span> Away</span>`;
}
if (states['sensor.dave_current_location'].state =='home') {
return `<ha-icon icon="mdi:home"
style="width: 20px; height: 20px; color: var(--primary-color);"></ha-icon><span> Home</span>`;
}
if (states['sensor.dave_current_location'].state =='Work') {
return `<ha-icon icon="mdi:office-building"
style="width: 20px; height: 20px; color: var(--primary-color);"></ha-icon><span> Work</span>`;
}
else {
return `<ha-icon icon="mdi:map-marker-radius"
style="width: 20px; height: 20px; color: var(--primary-color);"></ha-icon><span> ${entity.state}</span>`;
}
]]]
place: |
[[[
if (states['sensor.dave_current_location'].state =='not_home')
return `${states['sensor.dave_place_name'].state}`
]]]
battery: |
[[[
var i = states['sensor.daves_phone_battery_level'].attributes.icon;
var b = states['sensor.daves_phone_battery_level'].state;
return `<ha-icon icon='${i}' style='width: 20px; color: var(--battery-color-sensor); vertical-align:2px'>
</ha-icon> <span><span style="color: var(--text-battery-color-sensor);">${b}% </span></span>`;
]]]
proximity: |
[[[
if (states['sensor.dave_from_home'].state <= 0)
return ""
else return `<ha-icon icon="mdi:home-export-outline"
style="width: 20px; height: 20px; color: var(--primary-color);">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${states['sensor.dave_from_home'].state} Mins</span></span>`
]]]
work: |
[[[
if (states['sensor.dave_to_work_distance'].state <= 0.2)
return ""
else return `<ha-icon icon="mdi:office-building"
style="width: 20px; height: 20px; color: var(--primary-color);">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${states['sensor.dave_to_work'].state} Mins</span></span>`
]]]
wifi: |
[[[
if (states['binary_sensor.daves_phone_wifi_state'].state =='off') {
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);"></span></span>`;
}
if (states['sensor.daves_phone_wifi_connection'].state =='<not connected>') {
return `<ha-icon icon="mdi:wifi"
style="width: 20px; height: 20px; color: var(--primary-color);">
</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: var(--primary-color);">
</ha-icon> <span><span style="color: var(--text-wifi-color-sensor);">${states['sensor.daves_phone_wifi_connection'].state}</span></span>`;
}
]]]
storage: |
[[[
return `<ha-icon icon="mdi:harddisk"
style="width: 20px; height: 20px; color: var(--primary-color);">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${states['sensor.daves_phone_internal_storage'].state}% Free</span></span>`
]]]
styles:
card:
- height: 260px
name:
- top: 15%
- left: 5%
- position: absolute
- font-size: 12px
label:
- bottom: 2%
- position: absolute
- font-size: 10px
icon:
- bottom: 7%
- left: 0%
- width: 120px
- height: 120px
- position: relative
- border: |
[[[
if (states['sensor.dave_current_location'].state =='Driving') return '5px solid #EB6011';
if (states['sensor.dave_current_location'].state =='home') return '5px solid #77c66e';
if (states['sensor.dave_current_location'].state =='Work') return '5px solid deepskyblue';
if (states['sensor.dave_current_location'].state =='School') return '5px solid #EF881A';
if (states['sensor.dave_current_location'].state =='Kick Boxing') return '5px solid #28055D';
if (states['sensor.dave_current_location'].state =='Swimming') return '5px solid #341AEF';
if (states['sensor.dave_current_location'].state =='Stables') return '5px solid #EBD411';
if (states['sensor.dave_current_location'].state =='Amys Parents') return '5px solid #E411EB';
if (states['sensor.dave_current_location'].state =='Daves Parents') return '5px solid #9811EB';
if (states['sensor.dave_current_location'].state =='not_home') return '5px solid #EB2511';
else return '5px solid gray';
]]]
- border-radius: 20%
custom_fields:
status:
- top: 2%
- left: 5%
- position: absolute
- font-size: 12px
battery:
- top: 2%
- left: 68%
- position: absolute
- font-size: 12px
- color: ''
- '--battery-color-sensor': |-
[[[
if (states['sensor.daves_phone_battery_level'].state < 30) return "#ff1a1a";
if (states['sensor.daves_phone_battery_level'].state < 50) return "#F3970A";
if (states['sensor.daves_phone_battery_level'].state < 101) return "#50A14F";
else return "#ffc640"
]]]
place:
- top: 10%
- left: 5%
- position: absolute
- font-size: 10px
proximity:
- bottom: 23%
- left: 55%
- position: absolute
- font-size: 12px
work:
- bottom: 23%
- left: 5%
- position: absolute
- font-size: 12px
storage:
- bottom: 15%
- left: 5%
- position: absolute
- font-size: 12px
wifi:
- bottom: 7%
- left: 5%
- position: absolute
- font-size: 12px
- color: ''
- '--text-wifi-color-sensor': |-
[[[
if (states["sensor.daves_phone_wifi_connection"].state =='<not connected>')
return "#aaaaaa";
if (states["binary_sensor.daves_phone_wifi_state"].state =='off')
return "#aaaaaa";
]]]
- type: custom:button-card
entity: person.dave_stears
show_entity_picture: false
show_name: false
show_icon: false
icon: mdi:map
show_last_changed: false
triggers_update: all
styles:
card:
- height: 20px
label:
- bottom: 10%
- position: absolute
- font-size: 12px
custom_fields:
status:
- bottom: 7%
- left: 5%
- width: 100%
- position: absolute
custom_fields:
status: |
[[[
if (states['person.dave_stears'].state =='home') {
return `<ha-icon icon=""
style="width: 20px; height: 20px; color: var(--primary-color);"></ha-icon><span></span>`;
}
else {
return `<ha-icon icon="mdi:map"
style="width: 20px; height: 20px; color: var(--primary-color);"></ha-icon><span> Map</span>`;
}
]]]
- type: custom:stack-in-card
cards:
- type: vertical-stack
cards:
- type: custom:button-card
entity: sensor.amy_current_location
show_entity_picture: true
entity_picture: /local/images/amy/normal.png
state:
- value: home
entity_picture: /local/images/amy/door1.png
- value: Work
entity_picture: /local/images/amy/office.png
- value: School
entity_picture: /local/images/amy/schoolbus.png
- value: Kick Boxing
entity_picture: /local/images/amy/boxing.png
- value: Swimming
entity_picture: /local/images/amy/water.png
- value: Stables
entity_picture: /local/images/amy/horse.png
- value: Amys Parents
entity_picture: /local/images/amy/closed.png
- value: Daves Parents
entity_picture: /local/images/amy/closed.png
- value: not_home
entity_picture: /local/images/amy/where.png
- value: Driving
entity_picture: /local/images/amy/car.png
show_name: false
show_icon: false
show_last_changed: true
triggers_update: all
tap_action:
action: none
custom_fields:
status: |
[[[
if (states['sensor.amy_current_location'].state =='Driving') {
return `<ha-icon icon="mdi:car"
style="width: 20px; height: 20px; color: var(--primary-color);"></ha-icon><span> Driving</span>`;
}
if (states['sensor.amy_current_location'].state =='not_home') {
return `<ha-icon icon="mdi:home-export-outline"
style="width: 20px; height: 20px; color: var(--primary-color);"></ha-icon><span> Away</span>`;
}
if (states['sensor.amy_current_location'].state =='home') {
return `<ha-icon icon="mdi:home"
style="width: 20px; height: 20px; color: var(--primary-color);"></ha-icon><span> Home</span>`;
}
if (states['sensor.amy_current_location'].state =='Work') {
return `<ha-icon icon="mdi:office-building"
style="width: 20px; height: 20px; color: var(--primary-color);"></ha-icon><span> Work</span>`;
}
else {
return `<ha-icon icon="mdi:map-marker-radius"
style="width: 20px; height: 20px; color: var(--primary-color);"></ha-icon><span> ${entity.state}</span>`;
}
]]]
place: |
[[[
if (states['sensor.amy_current_location'].state =='not_home')
return `${states['sensor.amy_place_name'].state}`
]]]
battery: |
[[[
var i = states['sensor.amys_phone_battery_level'].attributes.icon;
var b = states['sensor.amys_phone_battery_level'].state;
return `<ha-icon icon='${i}' style='width: 20px; color: var(--battery-color-sensor); vertical-align:2px'>
</ha-icon> <span><span style="color: var(--text-battery-color-sensor);">${b}% </span></span>`;
]]]
proximity: |
[[[
if (states['sensor.amy_from_home'].state <= 0)
return ""
else return `<ha-icon icon="mdi:home-export-outline"
style="width: 20px; height: 20px; color: var(--primary-color);">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${states['sensor.amy_from_home'].state} Mins</span></span>`
]]]
work: |
[[[
if (states['sensor.amy_to_work'].state <= 0.2)
return ""
else return `<ha-icon icon="mdi:office-building"
style="width: 20px; height: 20px; color: var(--primary-color);">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${states['sensor.amy_to_work'].state} Mins</span></span>`
]]]
wifi: |
[[[
if (states['binary_sensor.amys_phone_wifi_state'].state =='off') {
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);"></span></span>`;
}
if (states['sensor.amys_phone_wifi_connection'].state =='<not connected>') {
return `<ha-icon icon="mdi:wifi"
style="width: 20px; height: 20px; color: var(--primary-color);">
</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: var(--primary-color);">
</ha-icon> <span><span style="color: var(--text-wifi-color-sensor);">${states['sensor.amys_phone_wifi_connection'].state}</span></span>`;
}
]]]
storage: |
[[[
return `<ha-icon icon="mdi:harddisk"
style="width: 20px; height: 20px; color: var(--primary-color);">
</ha-icon> <span>\<span
style="color: var(--text-color-sensor);">${states['sensor.amys_phone_internal_storage'].state}% Free</span></span>`
]]]
styles:
card:
- height: 260px
name:
- top: 15%
- left: 5%
- position: absolute
- font-size: 12px
label:
- bottom: 2%
- position: absolute
- font-size: 10px
icon:
- bottom: 7%
- left: 0%
- width: 120px
- height: 120px
- position: relative
- border: |
[[[
if (states['sensor.amy_current_location'].state =='Driving') return '5px solid #EB6011';
if (states['sensor.amy_current_location'].state =='home') return '5px solid #77c66e';
if (states['sensor.amy_current_location'].state =='Work') return '5px solid deepskyblue';
if (states['sensor.amy_current_location'].state =='School') return '5px solid #EF881A';
if (states['sensor.amy_current_location'].state =='Kick Boxing') return '5px solid #28055D';
if (states['sensor.amy_current_location'].state =='Swimming') return '5px solid #341AEF';
if (states['sensor.amy_current_location'].state =='Stables') return '5px solid #EBD411';
if (states['sensor.amy_current_location'].state =='Amys Parents') return '5px solid #E411EB';
if (states['sensor.amy_current_location'].state =='Daves Parents') return '5px solid #9811EB';
if (states['sensor.amy_current_location'].state =='not_home') return '5px solid #EB2511';
else return '5px solid gray';
]]]
- border-radius: 20%
custom_fields:
status:
- top: 2%
- left: 5%
- position: absolute
- font-size: 12px
battery:
- top: 2%
- left: 68%
- position: absolute
- font-size: 12px
- color: ''
- '--battery-color-sensor': >-
[[[ if
(states['sensor.amys_phone_battery_level'].state <
30) return "#ff1a1a";
if (states['sensor.amys_phone_battery_level'].state < 50) return "#F3970A";
if (states['sensor.amys_phone_battery_level'].state < 101) return "#50A14F";
else return "#ffc640"
]]]
place:
- top: 10%
- left: 5%
- position: absolute
- font-size: 10px
proximity:
- bottom: 23%
- left: 55%
- position: absolute
- font-size: 12px
work:
- bottom: 23%
- left: 5%
- position: absolute
- font-size: 12px
storage:
- bottom: 15%
- left: 5%
- position: absolute
- font-size: 12px
wifi:
- bottom: 7%
- left: 5%
- position: absolute
- font-size: 12px
- '--text-wifi-color-sensor': >-
[[[ if
(states["sensor.amys_phone_wifi_connection"].state
=='<not connected>')
return "#aaaaaa";
if (states["binary_sensor.amys_phone_wifi_state"].state =='off')
return "#aaaaaa";
]]]
- type: custom:button-card
entity: person.amy_stears
show_entity_picture: false
show_name: false
show_icon: false
icon: mdi:map
show_last_changed: false
triggers_update: all
styles:
card:
- height: 20px
label:
- bottom: 10%
- position: absolute
- font-size: 12px
custom_fields:
status:
- bottom: 7%
- left: 0%
- width: 100%
- position: absolute
custom_fields:
status: |
[[[
if (states['person.amy_stears'].state =='home') {
return `<ha-icon icon=""
style="width: 20px; height: 20px; color: var(--primary-color);"></ha-icon><span></span>`;
}
else {
return `<ha-icon icon="mdi:map"
style="width: 20px; height: 20px; color: var(--primary-color);"></ha-icon><span> Map</span>`;
}
]]]
4 Likes
Kubas
April 10, 2023, 7:44am
218
Hi all,
type: custom:button-card
entity: person.jakub
aspect_ratio: 1/1
name: Person
show_entity_picture: true
show_name: false
hold_action:
action: none
state:
- value: home
styles:
custom_fields:
icon:
- border-color: '#77c66e'
- value: not_home
styles:
card:
- background-color: '#dedede'
custom_fields:
icon:
- border-color: '#EF4F1A'
- value: Work
styles:
custom_fields:
icon:
- border-color: deepskyblue
styles:
card:
- background-color: lightblue
- border-radius: 5%
- padding: 5%
- color: gray
- font-size: 10px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
- justify-self: end
- align-self: middle
grid:
- grid-template-areas: '"icon status" "n n" "battery proximity" "wifi ss" "sd sd"'
- grid-template-columns: 2fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-size: 15px
- align-self: middle
- justify-self: start
- padding-bottom: 10px
custom_fields:
icon:
- clip-path: circle()
- width: 60%
- pointer-events: none
- display: grid
- border: 5px solid
- border-color: gray
- border-radius: 500px
- margin: 0 +10% 0 0
- justify-self: end
- opacity: 1
status:
- align-self: start
- justify-self: end
- color: gray
proximity:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- color: gray
wifi:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- color: gray
- '--text-wifi-color-sensor': >-
[[[ if (states["sensor.kubikuv_iphone_bssid"].state == '<not
connected>') return "#aaaaaa"; ]]]
battery:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- color: gray
- '--text-color-sensor': >-
[[[ if (states["sensor.kubikuv_iphone_battery_level"].state < 50) return
"#EF4F1A"; ]]]
custom_fields:
icon: >
[[[ return entity === undefined ? null : `<img
src="${states[entity.entity_id].attributes.entity_picture}" width="100%">`;
]]]
status: |
[[[
if (states['person.jakub'].state =='not_home') {
return `<ha-icon icon="mdi:home-export-outline"
style="width: 20px; height: 20px; color: '#888888';">
</ha-icon><span> Away</span>`;
}
if (states['person.jakub)'].state =='home') {
return `<ha-icon
icon="mdi:home"
style="width: 20px; height: 20px; color: 888888;">
</ha-icon><span> ${entity.state}</span>`;
} else {
return `<ha-icon
icon="mdi:map-marker-radius"
style="width: 20px; height: 20px; color: 888888;">
</ha-icon><span> ${entity.state}</span>`;
}
]]]
proximity: |
[[[
return `<ha-icon
icon="mdi:map-marker-distance"
style="width: 20px; height: 20px; color: #888888;">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${states['proximity.home'].state} Kms</span></span>`
]]]
battery: |
[[[
if (states['sensor.m2101k6g_battery_state'].state =='charging') {
return `<ha-icon
icon="mdi:battery-charging"
style="width: 20px; height: 20px; color: #888888;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.kubikuv_iphone_battery_level'].state}% battery</span></span>`;
} else {
return `<ha-icon
icon="mdi:battery"
style="width: 20px; height: 20px; color: #888888;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.kubikuv_iphone_battery_level'].state}% battery</span></span>`;
}
]]]
wifi: |
[[[
if (states['sensor.kubikuv_iphone_bssid'].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.kubikuv_iphone_bssid'].state}</span></span>`;
}
]]]
videodj
April 10, 2023, 12:56pm
219
There’s an extra ) in the entity name, remove it and it will work.
Kubas
April 10, 2023, 1:05pm
220
Hi,
thank you for your advice, I corrected it but with same result.
ButtonCardJSTemplateError: TypeError: Cannot read properties of undefined (reading ‘state’) in ‘return `<ha-icon icon=“mdi:map-marker-distance” style="width: 20px; height: 20px; color: #…’
videodj
April 10, 2023, 1:25pm
221
No sure then, I copied your code and removed the ) and it worked fine. Although that error is now different and refers to a different line.
videodj
April 10, 2023, 1:35pm
222
This relates to “proximity.home”, are you using waze travel time?
This should be a sensor, in the format sensor.home
Kubas
April 10, 2023, 2:30pm
223
That was the issue. Thank you so much for your help
videodj
April 10, 2023, 2:47pm
224
No problem, sometimes an extra set of eyes helps.
Stianker1
April 16, 2023, 12:16pm
225
Hi!
carltonb
May 3, 2023, 9:45pm
226
Have a question about your card.
1 Like
I just changed my configuration.yaml as yours like:
