jlnbln
March 26, 2024, 5:36pm
353
You mean like this?
No problem. Here is the code.
type: custom:button-card
name: Julian
show_name: false
show_state: false
show_icon: true
show_entity_picture: true
entity: person.julian_spillner
tap_action:
action: more-info
styles:
card:
- background-color: var(--contrast2)
- padding: 10px 10px 10px 0px
grid:
- grid-template-areas: '"icon name btn" "icon state btn"'
- grid-template-columns: 60px 1fr min-content
- grid-template-rows: min-content
img_cell:
- justify-content: start
- position: absolute
- width: 40px
- height: 40px
- left: 0
- bottom: 0
- margin: 0 0 8px 10px
- border-radius: 50%
- border: |
[[[
if (entity.state == 'home') {
return '1px solid var(--green)';
} else {
return 'none';
}
]]]
entity_picture:
- justify-content: start
- position: absolute
- width: 40px
- height: 40px
- left: 0
- bottom: 0
- margin: 0 0 0 0
- border-radius: 500px
icon:
- width: 50px
- color: var(--contrast1)
custom_fields:
name:
- align-self: start
- justify-self: start
- background: none
- padding: 0
state:
- align-self: start
- justify-self: start
- background: none
- padding: 0
- margin-top: '-5px'
btn:
- align-self: end
- justify-self: end
icon:
- align-self: start
- justify-self: start
badge:
- position: absolute
- left: 38px
- top: 7px
custom_fields:
name:
card:
type: custom:button-card
name: Julian
styles:
card:
- color: var(--contrast20)
- font-size: 14px
- font-weight: 600
- background: none
state:
card:
type: custom:button-card
entity: '[[[ return entity.entity_id ]]]'
show_icon: false
name: |
[[[
return states['person.julian_spillner'].state;
]]]
state:
- value: home
name: Home
- value: not_home
name: Away
styles:
card:
- color: var(--contrast20)
- font-size: 12px
- background: none
- opacity: '0.7'
badge:
card:
type: custom:button-card
entity: '[[[ return entity.entity_id ]]]'
show_icon: true
show_name: false
icon: mdi:home
state:
- value: home
icon: mdi:home
styles:
card:
- background: var(--green)
- value: not_home
icon: mdi:home-export-outline
styles:
card:
- background: var(--red)
styles:
card:
- border-radius: 50%
- width: 16px
- height: 16px
- background: none
icon:
- color: black
- width: 12px
btn:
card:
type: custom:mushroom-chips-card
chips:
- type: entity
tap_action:
action: more-info
entity: sensor.julians_iphone_12_battery_level
content_info: none
card_mod:
style: |
ha-card {
--chip-background: {{ 'var(--contrast4)' if states('sensor.julians_iphone_12_battery_level') | float > 10 else 'var(--red)' }};
--color: {{ 'var(--contrast20)' if states('sensor.julians_iphone_12_battery_level') | float > 10 else 'var(--black)' }};
padding: 0px!important;
border-radius: 100px!impportant;
--primary-text-color: var(--contrast20);
3 Likes
lilp69
April 3, 2024, 10:05am
354
Hi,
type: vertical-stack
cards:
- show_current: true
show_forecast: true
type: weather-forecast
entity: weather.albert
forecast_type: daily
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: person.lilphoenix
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: null
custom_fields:
icon:
- border-color: '#EF4F1A'
- value: Work
styles:
custom_fields:
icon:
- border-color: orange
- value: Lamures
styles:
custom_fields:
icon:
- border-color: lightblue
- value: Lyon
styles:
custom_fields:
icon:
- border-color: lightblue
styles:
card:
- 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: 80%
- 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.oneplus_wifi_connection"].state ==
'<not connected>') return "#aaaaaa"; ]]]
battery:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- color: gray
- '--text-color-sensor': >-
[[[ if (states["sensor.oneplus_battery_level"].state < 50)
return "#EF4F1A"; ]]]
alarm:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- color: gray
custom_fields:
icon: >
[[[ return entity === undefined ? null : `<img
src="${states[entity.entity_id].attributes.entity_picture}"
width="100%">`; ]]]
status: |
[[[
if (states['person.lilphoenix'].state =='not_home') {
return `<ha-icon icon="mdi:home-export-outline"
style="width: 20px; height: 20px; color: red;">
</ha-icon><span style="color: red;"> Away</span>`;
}
if (states['person.lilphoenix'].state =='home') {
return `<ha-icon
icon="mdi:home"
style="width: 20px; height: 20px; color: green;">
</ha-icon><span style="color: green;"> ${entity.state}</span>`;
}
if (states['person.lilphoenix'].state =='Work') {
return `<ha-icon
icon="mdi:briefcase"
style="width: 20px; height: 20px; color: orange;">
</ha-icon><span style="color: orange;"> ${entity.state}</span>`;
}
if (states['person.lilphoenix'].state =='Lyon') {
return `<ha-icon
icon="mdi:home-city"
style="width: 20px; height: 20px; color: lightblue;">
</ha-icon><span style="color: lightblue;"> ${entity.state}</span>`;
}
if (states['person.lilphoenix'].state =='Lamures') {
return `<ha-icon
icon="mdi:barn"
style="width: 20px; height: 20px; color: lightblue;">
</ha-icon><span style="color: lightblue;"> ${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['sensor.home_lilphoenix_distance'].state} Kms</span></span>`
]]]
battery: |
[[[
if (states['sensor.oneplus_battery_state'].state =='charging') {
return `<ha-icon
icon="mdi:battery-charging"
style="width: 20px; height: 20px; color: green;">
</ha-icon> <span><span style="color: green;">${states['sensor.oneplus_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.oneplus_battery_level'].state}% battery</span></span>`;
}
]]]
wifi: |
[[[
if (states['sensor.oneplus_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.oneplus_wifi_connection'].state}</span></span>`;
}
]]]
- type: custom:button-card
entity: person.flo
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:
- 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: 80%
- 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.iphone_de_flo_connection_type"].state ==
'<not connected>') return "#aaaaaa"; ]]]
battery:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- color: gray
- '--text-color-sensor': >-
[[[ if (states["sensor.iphone_de_flo_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.flo'].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.flo'].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.flo'].state} Kms</span></span>`
]]]
battery: |
[[[
if (states['sensor.iphone_de_flo_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.iphone_de_flo_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.iphone_de_flo_battery_level'].state}% battery</span></span>`;
}
]]]
wifi: |
[[[
if (states['sensor.iphone_de_flo_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);">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.iphone_de_flo_ssid'].state}</span></span>`;
}
]]]
- type: horizontal-stack
cards: []
- type: custom:mini-graph-card
name: Température
entities:
- entity: sensor.temperature_salon_temperature
name: Salon
color: green
tap_action:
double_tap_action: sensor.temperature_salon_humidity
action: more-info
action: more-info
- entity: sensor.ble_temperature_temperature_masterbedroom
name: Master bedroom
color: lightblue
- entity: sensor.ble_temperature_temperature_salle_de_bain
name: Salle de bain
color: yellow
- entity: sensor.temperature_158d0001c2a1bb
name: Bedroom
show:
labels: true
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: separator
name: Lumières master bedroom
icon: mdi:bed-king-outline
- square: false
type: grid
columns: 3
lines: 2
cards:
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.ampoule_chambre_tbo
name: Tibo
icon: mdi:lightbulb
tap_action:
action: toggle
double_tap_action:
action: more-info
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.ampoule_chambre_flo
name: Flo
icon: mdi:lightbulb
tap_action:
action: toggle
double_tap_action:
action: more-info
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.nous_p3_light_chambre
name: Chambre
icon: mdi:lightbulb
tap_action:
action: toggle
double_tap_action:
action: more-info
- type: custom:bubble-card
card_type: separator
name: Lumières salon
icon: mdi:sofa-outline
- square: false
type: grid
columns: 2
lines: 2
cards:
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.nous_p2_light_salon_1
name: Salon 1
icon: mdi:lightbulb
tap_action:
action: toggle
double_tap_action:
action: more-info
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.nous_p3_light_salon_2
name: Salon 2
icon: mdi:lightbulb
tap_action:
action: toggle
double_tap_action:
action: more-info
- type: custom:bubble-card
card_type: separator
name: Entrée
icon: mdi:door
- square: false
type: grid
columns: 1
lines: 2
cards:
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.ampoule_entree
name: Entrée
icon: mdi:lightbulb
tap_action:
action: toggle
double_tap_action:
action: more-info
But don’t know how.
Thanks.
BitStab
April 8, 2024, 2:32pm
355
Hi Osher,
i had the same problem as you. You need to extract the states values first to variables as they are not available in the scripts afterwards. Thats why i used variables in my version.
Greets
Sulli68
April 17, 2024, 1:47pm
356
Hello Dave
Can you tell me in your code, where do you get the binary sensor ‘binary_sensor.daves_phone_wifi_state’ ? because I don’t have such a sensor.
Thanks
S.
Have you guys seen this card? I think this looks so good!
6 Likes
Frosty
April 18, 2024, 11:11pm
358
I really is a nice dashboard. he has a github.com page here
3 Likes
This is a great card, but i don’t understand the background piece … I am not able to get a background to display… I changed the person name to my own and matched the local/images/ path to my own, but I am still not able to get it to work…?
|
[[[
if (states['person.me'].state == 'home' )
return '#191f2b';
return 'url(/local/agata/' + states['person.me'].state +
'.png';
]]]
Sure, bare in mind that some of these sensors were guesses …
Also, what is the 3rd and 4th icon you have in your card? What are the sensor names? (english)
This is the best i was able to get the card…The distance bar I’m not sure about…I have a travel integration set up through waze to track my proximity from home… it reports an odd value, so I’m not sure if that’s correct… also the icon on the lower left I also have a proximity sensor to do essentially the same thing… I’ve only ever seen it show 0 MI at this time; which i presume to be correct because I’m at home. I have also not been able to get the separator bar to appear between the distance and the buttons. Again, these sensors have all been best guesses up to this point.
type: custom:vertical-stack-in-card
style: |
ha-card{
box-shadow: none;
}
cards:
- variables:
person: person.andrew_sutcliffe
bg: |
[[[
if (states['person.andrew_sutcliffe'].state == 'home' )
return '#191f2b';
return 'url(/local/images/' + states['person.andrew_sutcliffe'].state +
'.jpg';
]]]
type: custom:button-card
triggers_update: all
show_name: false
show_icon: false
show_state: false
show_label: false
styles:
card:
- box-shadow: none
- border-radius: 15px 15px 0 0 var(--primary-background-color)
- padding: 0
- height: 140px
- background: var(--primary-background-color)
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 0px
custom_fields:
item1:
card:
type: custom:button-card
styles:
card:
- height: 20px
- border-radius: 0
- border: 0px solid var(--primary-background-color)
- box-shadow: 1px black
- padding: 0
- background: var(--primary-background-color)
item2:
card:
type: custom:button-card
entity: '[[[ return variables.person ]]]'
show_entity_picture: true
show_name: false
show_icon: false
styles:
card:
- padding: 0
- height: 120px
- box-shadow: none
- border-radius: 3px 3px 0 0
- background: null
- background-image: '[[[ return variables.bg ]]] '
- background-size: cover
- background-position: center
- overflow: visible
img_cell:
- width: 80px
- height: 80px
- border-radius: 509%
- border: 4px solid
- border-color: |
[[[
if (states['binary_sensor.withings_in_bed'].state == 'Clear' )
return "var(--state-icon-active-color)";
return "var(--state-icon-color)";
]]]
- place-self: center
- position: relative
- top: '-29%'
grid:
- grid-template-areas: '"i"'
entity_picture:
- width: 85px
- filter: |
[[[
if (states['person.andrew_sutcliffe'].state != 'home' )
return 'grayscale(100%)';
return 'null';
]]]
- type: custom:bar-card
max: 500
height: 12
style: |
bar-card-value {
margin: auto;
margin-top: -4px;
text-shadow: 0px 2px #000000;
color: gray;
}
ha-card{
background: rgba(0, 0, 0, 0.0);
margin-top: -45px;
}
entities:
- entity: sensor.andrew_tracker
positions:
icon: 'off'
indicator: 'on'
minmax: 'off'
value: inside
name: ' '
- type: horizontal-stack
cards:
- entity: sensor.home_andrew_samsung_phone_distance
show_entity_picture: true
show_name: false
font-size: 11px
show_state: true
icon: mdi:map-marker-distance
styles:
card:
- height: 55px
- border-top: 1px solid var(--state-icon-color)
- background: none
- padding-top: 9px
- margin-bottom: 2px
- font-size: 11px
state:
- operator: '=='
value: 0
color: var(--state-icon-color)
- operator: '!='
value: 0
color: var(--state-icon-active-color)
type: custom:button-card
- entity: sensor.andrew_samsung_phone_battery_level
show_entity_picture: true
show_name: false
show_state: true
show_label: true
font-size: 11px
styles:
card:
- height: 55px
- border-top: 1px solid var(--state-icon-color)
- background: none
- padding-top: 9px
- margin-bottom: 2px
- font-size: 11px
icon:
- color: |
[[[
if (states['sensor.andrew_samsung_phone_battery_level'].state == 'on' )
return "var(--state-icon-active-color)";
return "var(--state-icon-color)";
]]]
state:
- operator: '>'
value: 90
icon: |
[[[
if (states['sensor.andrew_samsung_phone_battery_level'].state == 'on')
return 'mdi:battery-charging-100';
return 'mdi:battery';
]]]
- operator: <
value: 89
icon: |
[[[
if (states['sensor.andrew_samsung_phone_battery_level'].state == 'on')
return 'mdi:battery-charging-' + Math.ceil(entity.state / 10) * 10;
return 'mdi:battery-' + Math.ceil(entity.state / 10) * 10;
]]]
type: custom:button-card
- entity: sensor.andrew_samsung_phone_detected_activity
show_entity_picture: false
show_name: false
show_last_changed: true
show_state: false
show_label: true
styles:
card:
- height: 55px
- border-top: 1px solid var(--state-icon-color)
- background: none
- padding-top: 9px
- margin-bottom: 2px
- font-size: 11px
state:
- value: still
icon: mdi:human-male
label: null
color: var(--state-icon-color)
font-size: 11px
- value: in_vehicle
icon: mdi:car-back
label: null
color: var(--state-icon-active-color)
font-size: 11px
type: custom:button-card
- entity: sensor.andrew_samsung_phone_phone_state
show_entity_picture: true
show_name: false
font-size: 11px
show_state: false
show_last_changed: true
styles:
card:
- height: 55px
- border-top: 1px solid var(--state-icon-color)
- background: none
- padding-top: 9px
- margin-bottom: 2px
- font-size: 11px
state:
- value: ringing
icon: mdi:phone-ring
color: var(--state-icon-active-color)
- value: idle
icon: mdi:phone-hangup
color: var(--state-icon-color)
- value: offhook
icon: mdi:phone-in-talk
color: var(--state-icon-active-color)
type: custom:button-card
- entity: sensor.andrew_samsung_phone_wifi_ip_address
show_entity_picture: true
show_name: false
show_state: true
icon: mdi:wifi
state:
- value: 192.168.1.149
color: var(--state-icon-color)
- operator: '!='
value: <not connected>
color: var(--state-icon-active-color)
styles:
card:
- height: 55px
- border-top: 1px solid var(--state-icon-color)
- background: none
- padding-top: 9px
- margin-bottom: 2px
- font-size: 11px
type: custom:button-card
Snak3D0c
April 19, 2024, 5:13pm
362
So first off, thank you.
type: custom:button-card
entity: person.kristof
variables:
phone_battery_level_sensor: '[[[ return states["sensor.in2023_battery_level"].state]]]'
phone_battery_state_sensor: '[[[ return states["sensor.in2023_battery_state"].state]]]'
phone_wifi_sensor: '[[[ return states["sensor.in2023_wifi_connection"].state]]]'
aspect_ratio: 4/1
name: Person
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
styles:
card:
- background-color: '#202124'
- border-radius: 5%
- padding: 1% 1% 1% 1%
- color: gray
- font-size: 10px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
- justify-self: center
- align-content: center
- width: 300px
- height: 150px
grid:
- grid-template-areas: '"icon status" "icon battery" "icon wifi" "icon proximity"'
- grid-template-columns: 1.5fr 1fr
- grid-template-rows: 0.2fr 0.2fr 0.2fr 0.2fr
- 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: gray
proximity:
- align-self: middle
- justify-self: start
- color: gray
wifi:
- justify-self: start
- color: gray
- '--text-wifi-color-sensor': >-
[[[ if (variables.phone_wifi_sensor == '<not connected>') return
"#aaaaaa"; ]]]
battery:
- align-self: middle
- justify-self: start
- color: gray
- '--text-color-sensor': >-
[[[ if (variables.phone_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: 20px; height: 20px; color: 888888;">
</ha-icon><span> ${entity.state}</span>`;
} else {
if (entity.state =='[YOUR OTHER LOCATION]') {
return `<ha-icon icon="mdi:pizza"
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>`;
}
}
]]]
battery: |
[[[
if (variables.phone_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.phone_battery_level_sensor}% Battery</span></span>`;
} else {
return `<ha-icon
icon="mdi:battery-medium"
style="width: 20px; height: 20px; 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: 20px; height: 20px; color: #888888;">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${variables.proximity_sensor} Km</span></span>`
]]]
wifi: |
[[[
if (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);">${variables.phone_wifi_sensor}</span></span>`;
}
]]]
In the example it displays perfectly, but when i push on ‘done’ after editing my dashboard, it is stuck behind another card.
I disabled the proximity because i don’t seem to have that sensor.
i added height and with because it was way too big, don’t know if this is the correct way
Detected activity (bike, walk, still, driving etc its a sensor from app,(
Thanks for clarifying some of these things. Seems there is a known issue with waze and device tracker’s right now
opened 12:59PM - 11 Apr 24 UTC
integration: waze_travel_time
### The problem
Adding new entry on Waze integration with person entity as Orig… in and zone entity as Destination zone give "Unknown error occured" if the person is in the zone
### What version of Home Assistant Core has the issue?
2024.4.2
### What was the last working version of Home Assistant Core?
_No response_
### What type of installation are you running?
Home Assistant OS
### Integration causing the issue
Waze Travel Time
### Link to integration documentation on our website
https://www.home-assistant.io/integrations/waze_travel_time
### Diagnostics information
_No response_
### Example YAML snippet
_No response_
### Anything in the logs that might be useful for us?
```txt
Registratore: aiohttp.server
Fonte: /usr/local/lib/python3.12/site-packages/aiohttp/web_protocol.py:421
Prima occorrenza: 14:48:14 (1 occorrenze)
Ultima registrazione: 14:48:14
Error handling request
Traceback (most recent call last):
File "/usr/local/lib/python3.12/site-packages/aiohttp/web_protocol.py", line 452, in _handle_request
resp = await request_handler(request)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/aiohttp/web_app.py", line 543, in _handle
resp = await handler(request)
^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/aiohttp/web_middlewares.py", line 114, in impl
return await handler(request)
^^^^^^^^^^^^^^^^^^^^^^
File "/usr/src/homeassistant/homeassistant/components/http/security_filter.py", line 92, in security_filter_middleware
return await handler(request)
^^^^^^^^^^^^^^^^^^^^^^
File "/usr/src/homeassistant/homeassistant/components/http/forwarded.py", line 210, in forwarded_middleware
return await handler(request)
^^^^^^^^^^^^^^^^^^^^^^
File "/usr/src/homeassistant/homeassistant/components/http/request_context.py", line 26, in request_context_middleware
return await handler(request)
^^^^^^^^^^^^^^^^^^^^^^
File "/usr/src/homeassistant/homeassistant/components/http/ban.py", line 88, in ban_middleware
return await handler(request)
^^^^^^^^^^^^^^^^^^^^^^
File "/usr/src/homeassistant/homeassistant/components/http/auth.py", line 236, in auth_middleware
return await handler(request)
^^^^^^^^^^^^^^^^^^^^^^
File "/usr/src/homeassistant/homeassistant/components/http/headers.py", line 32, in headers_middleware
response = await handler(request)
^^^^^^^^^^^^^^^^^^^^^^
File "/usr/src/homeassistant/homeassistant/helpers/http.py", line 73, in handle
result = await handler(request, **request.match_info)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/src/homeassistant/homeassistant/components/http/decorators.py", line 71, in with_admin
return await func(self, request, *args, **kwargs)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/src/homeassistant/homeassistant/components/config/config_entries.py", line 222, in post
return await super().post(request, flow_id)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/src/homeassistant/homeassistant/components/http/data_validator.py", line 73, in wrapper
result = await method(view, request, data, *args, **kwargs)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/src/homeassistant/homeassistant/helpers/data_entry_flow.py", line 122, in post
result = await self._flow_mgr.async_configure(flow_id, data)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/src/homeassistant/homeassistant/data_entry_flow.py", line 356, in async_configure
result = await self._async_configure(flow_id, user_input)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/src/homeassistant/homeassistant/data_entry_flow.py", line 402, in _async_configure
result = await self._async_handle_step(
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/src/homeassistant/homeassistant/data_entry_flow.py", line 506, in _async_handle_step
result: _FlowResultT = await getattr(flow, method)(user_input)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/src/homeassistant/homeassistant/components/waze_travel_time/config_flow.py", line 137, in async_step_user
if await is_valid_config_entry(
^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/src/homeassistant/homeassistant/components/waze_travel_time/helpers.py", line 23, in is_valid_config_entry
await client.calc_routes(resolved_origin, resolved_destination)
File "/usr/local/lib/python3.12/site-packages/pywaze/route_calculator.py", line 297, in calc_routes
name=route["routeName"],
~~~~~^^^^^^^^^^^^^
KeyError: 'routeName'
```
### Additional information
_No response_
I tried a few things to get the background images to work, still no luck with that. For my understanding as an example…
[[[
if (states['person.andrew_sutcliffe'].state == 'home' )
return '#191f2b';
return 'url(/local/images/' + states['person.andrew_sutcliffe'].state +
'.jpg';
]]]
since "state == ‘home’ " is lower case…AND the state of person.andrew_sutcliffe is “home” , then the picture located in “/local/images” would need to be named “home.jpg”, correct?
Thanks again for responding and your help so far… I COMPLETELY understand not having the time and will to deal any more. Trying to get this to work, myself, so i can walk away.
Frosty
April 20, 2024, 5:12pm
365
I am not sure on the syntax but there’s an ( before url but no closing ) is that right?
Ok, I did some digging and rearranged some things and here is where i landed… The card will now show a background, I ended up figuring out that it likes the state name, not the zone name and also the picture has to be named as the state name.
This is a powerful ass card dude, nice job!
I hope the waze integration gets fixed soon !
Home
Zone specific
type: custom:vertical-stack-in-card
style: |
ha-card{
box-shadow: none;
}
cards:
- variables:
person: person.andrew_sutcliffe
bg: |
[[[
if (states['person.andrew_sutcliffe'].state == 'home' )
return "url('/local/images/" + states['person.andrew_sutcliffe'].state + ".jpg')";
if (states['person.andrew_sutcliffe'].state == 'Menards 2800 Wiley Blvd SW, Cedar Rapids, IA 52404' )
return "url('/local/images/" + states['person.andrew_sutcliffe'].state + ".png')";
return '#191f2b';
]]]
type: custom:button-card
triggers_update: all
show_name: false
show_icon: false
show_state: false
show_label: false
styles:
card:
- box-shadow: none
- border-radius: 15px 15px 0 0 var(--primary-background-color)
- padding: 0
- height: 140px
- background: var(--primary-background-color)
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 0px
custom_fields:
item1:
card:
type: custom:button-card
styles:
card:
- height: 20px
- border-radius: 0
- border: 0px solid var(--primary-background-color)
- box-shadow: 1px black
- padding: 0
- background: var(--primary-background-color)
item2:
card:
type: custom:button-card
entity: '[[[ return variables.person ]]]'
show_entity_picture: true
show_name: false
show_icon: false
styles:
card:
- padding: 0
- height: 120px
- box-shadow: none
- border-radius: 3px 3px 0 0
- background: null
- background-image: '[[[ return variables.bg ]]]'
- background-size: cover
- background-position: center
- overflow: visible
img_cell:
- width: 80px
- height: 80px
- border-radius: 509%
- border: 4px solid
- border-color: |
[[[
if (states['binary_sensor.withings_in_bed'].state == 'Clear' )
return "var(--state-icon-active-color)";
return "var(--state-icon-color)";
]]]
- place-self: center
- position: relative
- top: '-29%'
grid:
- grid-template-areas: '"i"'
entity_picture:
- width: 85px
- filter: |
[[[
if (states['person.andrew_sutcliffe'].state != 'home' )
return 'grayscale(100%)';
return 'null';
]]]
- type: custom:bar-card
max: 500
height: 12
style: |
bar-card-value {
margin: auto;
margin-top: -4px;
text-shadow: 0px 2px #000000;
color: gray;
}
ha-card{
background: rgba(0, 0, 0, 0.0);
margin-top: -45px;
}
entities:
- entity: sensor.menards_travel_distance
positions:
icon: 'off'
indicator: 'on'
minmax: 'off'
value: inside
name: ' '
- type: horizontal-stack
cards:
- entity: sensor.home_andrew_samsung_phone_distance
show_entity_picture: true
show_name: false
font-size: 11px
show_state: true
icon: mdi:map-marker-distance
styles:
card:
- height: 55px
- border-top: 1px solid var(--state-icon-color)
- background: none
- padding-top: 9px
- margin-bottom: 2px
- font-size: 11px
state:
- operator: '=='
value: 0
color: var(--state-icon-color)
- operator: '!='
value: 0
color: var(--state-icon-active-color)
type: custom:button-card
- entity: sensor.andrew_samsung_phone_battery_level
show_entity_picture: true
show_name: false
show_state: true
show_label: true
font-size: 11px
styles:
card:
- height: 55px
- border-top: 1px solid var(--state-icon-color)
- background: none
- padding-top: 9px
- margin-bottom: 2px
- font-size: 11px
icon:
- color: |
[[[
if (states['sensor.andrew_samsung_phone_battery_level'].state == 'on' )
return "var(--state-icon-active-color)";
return "var(--state-icon-color)";
]]]
state:
- operator: '>'
value: 90
icon: |
[[[
if (states['sensor.andrew_samsung_phone_battery_level'].state == 'on')
return 'mdi:battery-charging-100';
return 'mdi:battery';
]]]
- operator: <
value: 89
icon: |
[[[
if (states['sensor.andrew_samsung_phone_battery_level'].state == 'on')
return 'mdi:battery-charging-' + Math.ceil(entity.state / 10) * 10;
return 'mdi:battery-' + Math.ceil(entity.state / 10) * 10;
]]]
type: custom:button-card
- entity: sensor.andrew_samsung_phone_detected_activity
show_entity_picture: false
show_name: false
show_last_changed: true
show_state: false
show_label: true
styles:
card:
- height: 55px
- border-top: 1px solid var(--state-icon-color)
- background: none
- padding-top: 9px
- margin-bottom: 2px
- font-size: 11px
state:
- value: still
icon: mdi:human-male
label: null
color: var(--state-icon-color)
font-size: 11px
- value: in_vehicle
icon: mdi:car-back
label: null
color: var(--state-icon-active-color)
font-size: 11px
- value: unknown
icon: mdi:head-question
label: null
color: var(--state-icon-active-color)
font-size: 11px
type: custom:button-card
- entity: sensor.andrew_samsung_phone_phone_state
show_entity_picture: true
show_name: false
font-size: 11px
show_state: false
show_last_changed: true
styles:
card:
- height: 55px
- border-top: 1px solid var(--state-icon-color)
- background: none
- padding-top: 9px
- margin-bottom: 2px
- font-size: 11px
state:
- value: ringing
icon: mdi:phone-ring
color: var(--state-icon-active-color)
- value: idle
icon: mdi:phone-hangup
color: var(--state-icon-color)
- value: offhook
icon: mdi:phone-in-talk
color: var(--state-icon-active-color)
type: custom:button-card
- entity: sensor.andrew_samsung_phone_wifi_connection
show_entity_picture: true
show_name: false
show_state: true
icon: mdi:wifi
state:
- value: Home_router
color: var(--state-icon-color)
- operator: '!='
value: <not connected>
color: var(--state-icon-active-color)
styles:
card:
- height: 55px
- border-top: 1px solid var(--state-icon-color)
- background: none
- padding-top: 9px
- margin-bottom: 2px
- font-size: 11px
type: custom:button-card
4 Likes
iona
April 22, 2024, 8:31pm
367
Thanks for sharing, any ideas why variables var(--) are not working for me? It works fine without it strangely.
Also, how would I add a border for 'not_home' state value? thanks
Edit: Not sure if it’s ideal way of going about it, but for not_home, I coded this:
[[[
if (entity.state == 'home') {
return '1px solid green';
} else {
return '1px solid red';
}
]]]
jlnbln
April 22, 2024, 8:52pm
368
The variables need to be defined in your theme.
1 Like
lilp69
April 23, 2024, 12:46pm
369
Hi,
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: person.lilphoenix
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:
- border-radius: 5%
- padding: 5%
- color: >-
[[[ if (states['person.lilphoenix'].state =='Work') return
"deepskyblue"; if (states['person.lilphoenix'].state
=='not_home') return "#dedede"; if
(states['person.lilphoenix'].state =='Home') return
"#77c66e"]]]
- 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 alarm" "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: 80%
- 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: >-
[[[ if (states['person.lilphoenix'].state =='Work') return
"deepskyblue"; if (states['person.lilphoenix'].state
=='not_home') return "#dedede"; if
(states['person.lilphoenix'].state =='Home') return
"#77c66e"]]]
proximity:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
alarm:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
wifi:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- '--text-wifi-color-sensor': >-
[[[ if (states["binary_sensor.oneplus_wifi_state"].state
== '<not connected>') return "#aaaaaa"; ]]]
battery:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.oneplus_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.lilphoenix'].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.lilphoenix'].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: >-
[[[ if (states['person.lilphoenix'].state =='Work') return
"deepskyblue"; if (states['person.lilphoenix'].state
=='not_home') return "#dedede"; if
(states['person.lilphoenix'].state =='Home') return
"#77c66e"]]];">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${states['sensor.home_oneplus_distance'].state} Kms</span></span>`
]]]
battery: |
[[[
if (states['sensor.oneplus_battery_state'].state =='charging') {
return `<ha-icon
icon="mdi:battery-charging"
style="width: 20px; height: 20px; color: >-
[[[ if (states['person.lilphoenix'].state =='Work') return
"deepskyblue"; if (states['person.lilphoenix'].state
=='not_home') return "#dedede"; if
(states['person.lilphoenix'].state =='Home') return
"#77c66e"]]]">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.oneplus_battery_level'].state}% battery</span></span>`;
} else {
return `<ha-icon
icon="mdi:battery"
style="width: 20px; height: 20px; color: >-
[[[ if (states['person.lilphoenix'].state =='Work') return
"deepskyblue"; if (states['person.lilphoenix'].state
=='not_home') return "#dedede"; if
(states['person.lilphoenix'].state =='Home') return
"#77c66e"]]]">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.oneplus_battery_level'].state}% battery</span></span>`;
}
]]]
wifi: |
[[[
if (states['sensor.oneplus_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.oneplus_wifi_connection'].state}</span></span>`;
}
]]]
alarm: |
[[[
return `<ha-icon
icon="mdi:alarm"
style="width: 20px; height: 20px; color: >-
[[[ if (states['person.lilphoenix'].state =='Work') return
"deepskyblue"; if (states['person.lilphoenix'].state
=='not_home') return "#dedede"; if
(states['person.lilphoenix'].state =='Home') return
"#77c66e"]]]">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${states['sensor.oneplus_next_alarm'].state}</span></span>`
]]]
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: person.flo
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:
- border-radius: 5%
- padding: 5%
- color: >-
[[[ if (states['person.flo'].state =='Work') return
"deepskyblue"; if (states['person.flo'].state
=='not_home') return "#dedede"; if
(states['person.flo'].state =='home') return
"#77c66e"]]]
- 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 alarm" "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: 80%
- 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: >-
[[[ if (states['person.flo'].state =='Work') return
"deepskyblue"; if (states['person.flo'].state
=='not_home') return "#dedede"; if
(states['person.flo'].state =='Home') return
"#77c66e"]]]
proximity:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
alarm:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
wifi:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- '--text-wifi-color-sensor': >-
[[[ if (states["sensor.iphone_de_flo_ssid"].state ==
'<Not Connected>') return "#aaaaaa"; ]]]
battery:
- padding: 0.5em 0px
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if
(states["sensor.iphone_de_flo_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.flo'].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.flo'].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: >-
[[[ if (states['person.flo'].state =='Work') return
"deepskyblue"; if (states['person.flo'].state
=='not_home') return "#dedede"; if
(states['person.flo'].state =='home') return
"#77c66e"]]];">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${states['proximity.flo'].state} Kms</span></span>`
]]]
battery: |
[[[
if (states['sensor.iphone_de_flo_battery_state'].state =='charging') {
return `<ha-icon
icon="mdi:battery-charging"
style="width: 20px; height: 20px; color: >-
[[[ if (states['person.flo'].state =='Work') return
"deepskyblue"; if (states['person.flo'].state
=='not_home') return "#dedede"; if
(states['person.flo'].state =='home') return
"#77c66e"]]]">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.iphone_de_flo_battery_level'].state}% battery</span></span>`;
} else {
return `<ha-icon
icon="mdi:battery"
style="width: 20px; height: 20px; color: >-
[[[ if (states['person.flo'].state =='Work') return
"deepskyblue"; if (states['person.flo'].state
=='not_home') return "#dedede"; if
(states['person.flo'].state =='Home') return
"#77c66e"]]]">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.iphone_de_flo_battery_level'].state}% battery</span></span>`;
}
]]]
wifi: |
[[[
if (states['sensor.iphone_de_flo_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);">Disconnected</span></span>`;
} else {
return `<ha-icon
icon="mdi:wifi"
style="width: 20px; height: 20px;">
</ha-icon> <span><span style="color: var(--text-color-sensor);">${states['sensor.iphone_de_flo_ssid'].state}</span></span>`;
}
]]]
alarm: |
[[[
return `<ha-icon
icon="mdi:alarm"
style="width: 20px; height: 20px; color: >-
[[[ if (states['person.lilphoenix'].state =='Work') return
"deepskyblue"; if (states['person.lilphoenix'].state
=='not_home') return "#dedede"; if
(states['person.lilphoenix'].state =='Home') return
"#77c66e"]]]">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${states['sensor.oneplus_next_alarm'].state}</span></span>`
]]]
Now, I wish next alarm indicator display like : Friday 24/04/26 6h15.
Also the second person card isn’t update to geolocated.
maurizio53
April 24, 2024, 4:26pm
371
How do you remove the borders in the stack-in-card cards?
keep:
border: false
and with card_mod, but unsuccesfully…
iona
April 26, 2024, 4:42pm
372
Could you share the variables you had used please? thanks.
Osher
May 4, 2024, 12:29am
373
Oh thanks.
