I’m guessing Middle East. Those are very hard sundays 
1 Like
But Friday’s are great 
2 Likes
This is my roomba take on the integration for my 676 model, if somebody like it here is the code
elements:
- entity: vacuum.roomba
style:
'--paper-item-icon-color': withe
left: 1%
top: 66%
transform: 'scale(1.5,1.5)'
type: state-icon
- entity: vacuum.roomba
style:
color: withe
left: 12%
top: 68%
transform: 'scale(1.5,1.5)'
type: state-label
- entity: sensor.roomba_battery_level
style:
'--paper-item-icon-color': withe
left: 2%
top: 82%
transform: 'scale(1.5,1.5)'
type: state-icon
- entity: sensor.roomba_battery_level
style:
left: 12%
top: 84%
transform: 'scale(1.5,1.5)'
type: state-label
- icon: 'mdi:play-circle-outline'
style:
left: 32%
top: 85%
transform: 'scale(1.5,1.5)'
tap_action:
action: call-service
service: vacuum.start
service_data:
entity_id: vacuum.roomba
type: icon
- icon: 'mdi:pause-circle-outline'
style:
left: 45%
top: 85%
transform: 'scale(1.5,1.5)'
tap_action:
action: call-service
service: vacuum.pause
service_data:
entity_id: vacuum.roomba
type: icon
- icon: 'mdi:stop-circle-outline'
style:
left: 58%
top: 85%
transform: 'scale(1.5,1.5)'
tap_action:
action: call-service
service: vacuum.stop
service_data:
entity_id: vacuum.roomba
type: icon
- icon: 'mdi:map-marker-alert'
style:
left: 71%
top: 85%
transform: 'scale(1.5,1.5)'
tap_action:
action: call-service
service: vacuum.locate
service_data:
entity_id: vacuum.roomba
type: icon
- icon: 'mdi:home-map-marker'
style:
left: 84%
top: 85%
transform: 'scale(1.5,1.5)'
tap_action:
action: call-service
service: vacuum.return_to_base
service_data:
entity_id: vacuum.roomba
type: icon
- entity: sensor.vacuum_roomba_tray
style:
color: withe
left: 79%
top: 67%
transform: 'scale(1.5,1.5)'
type: state-label
- icon: 'mdi:delete-variant'
style:
left: 92%
top: 68%
transform: 'scale(1.5,1.5)'
type: icon
image: /local/pictures/roomba-676.jpg
type: picture-elements
2 Likes
I’m building a keypad page for my alarm and I’d like the numbers on the keypad to change color when they are tapped. Is there a way to have them show a different image file on “click”? Here’s a screenshot of the page and a sample of the buttons I’d like to swap when the numbers are touched.
1 Like
i like it, sorry i cant help, but maybe this tread will
Carlgarton,
I am just about to start building the same thing! Except yours is much cooler than I had in mind!
I will have a look through your code and give it a go…
What controllers have you placed on the radiators?
I have not purchased any yet… Can you suggest any?
Thanks for posting the code. Regards Adrian
Patrick,
Been reading for days to figure out what you’ve accomplish when I saw your card. I’m struggling with pulling temperature data from my Honeywell climate.ktchen entity and putting it in a state-badge. Would really appreciate it if I could ask you for a favor and send me your yaml code for me to copy and learn from. Thanks
Hi SolarCzar,
Here it is. What you are looking for is the “- attribute: current_temperature” to display. I’m using honeywell as well.
- style:
font-size: x-small
left: 9%
top: 14.8%
text: HVAC
type: 'custom:text-element'
- entity: climate.home
style:
color: 'RGBA(0,0,0,0)'
font-size: 75%
left: 9%
top: 24%
title: HVAC Thermostat
type: state-badge
- attribute: hvac_action
entity: climate.home
prefix: 'State: '
style:
font-size: 75%
left: 9%
top: 29%
suffix: ''
type: state-label
- attribute: current_temperature
entity: climate.home
prefix: ''
style:
font-size: 85%
left: 6%
top: 32%
suffix: °F
type: state-label
- attribute: current_humidity
entity: climate.home
prefix: ''
style:
font-size: 85%
left: 13%
top: 32%
suffix: '%'
type: state-label
Full picture-element card:
elements:
- entity: light.hallway_main_lights
style:
left: 44%
top: 36%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: light.hallway_main_lights
style:
left: 44%
top: 45%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: light.hallway_main_lights
style:
left: 47%
top: 52%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: light.hallway_main_lights
style:
left: 56%
top: 52%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: light.kitchen_main_lights
style:
left: 26%
top: 12%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: light.kitchen_main_lights
style:
left: 36%
top: 12%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: light.kitchen_main_lights
style:
left: 26%
top: 22%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: light.kitchen_main_lights
style:
left: 36%
top: 28%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: light.kitchen_table_pendants
style:
left: 48.5%
top: 18%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: switch.kitchen_island_pendants
style:
left: 30%
top: 19.5%
transform: 'translate(-50%, -50%) scale(.5, .5)'
tap_action:
action: toggle
type: state-icon
- entity: switch.kitchen_island_pendants
style:
left: 33.5%
top: 19.5%
transform: 'translate(-50%, -50%) scale(.5, .5)'
tap_action:
action: toggle
type: state-icon
- entity: switch.kitchen_island_pendants
style:
left: 37%
top: 19.5%
transform: 'translate(-50%, -50%) scale(.5, .5)'
tap_action:
action: toggle
type: state-icon
- entity: light.family_room_main_lights
style:
left: 63%
top: 14%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: light.family_room_main_lights
style:
left: 73%
top: 14%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: light.family_room_main_lights
style:
left: 83%
top: 14%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: light.family_room_main_lights
style:
left: 63%
top: 28%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: light.family_room_main_lights
style:
left: 73%
top: 28%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: light.family_room_main_lights
style:
left: 83%
top: 28%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: light.family_room_accent_lights
style:
left: 88%
top: 18%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: light.family_room_accent_lights
style:
left: 88%
top: 25%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- aspect_ratio: 1/1
entity: fan.family_room_fan
show_name: false
show_state: false
size: 100%
spin: false
state:
- spin: true
value: 'on'
style:
left: 73%
top: 21%
width: 10%
styles:
card:
- background-color: 'rgb(255,255,255,0)'
- box-shadow: 0px 0px 0px 0px
tap_action:
action: more-info
type: 'custom:button-card'
value: 'off'
- entity: light.stairs_main_lights
style:
left: 63%
top: 37%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: switch.playroom_light
style:
left: 80%
top: 45%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: switch.garage_entry_main_lights
style:
left: 56%
top: 62%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- entity: light.porch_fan_light
style:
left: 26%
top: 3%
transform: 'translate(-50%, -50%) scale(.7, .7)'
tap_action:
action: toggle
type: state-icon
- aspect_ratio: 1/1
color_type: icon
entity: fan.porch_fan
show_name: false
show_state: false
size: 100%
spin: false
state:
- spin: true
value: 'on'
style:
left: 35%
top: 3%
width: 7%
styles:
card:
- background-color: 'rgb(255,255,255,0)'
- box-shadow: 0px 0px 0px 0px
tap_action:
action: more-info
type: 'custom:button-card'
value: 'off'
- entity: weather.karr_daynight
style:
font-size: 75%
left: 9.5%
top: 4%
type: state-icon
- attribute: temperature
entity: weather.karr_daynight
style:
font-size: 85%
left: 6%
top: 9%
suffix: °F
type: state-label
- attribute: humidity
entity: weather.karr_daynight
style:
font-size: 85%
left: 14%
top: 9%
suffix: '%'
type: state-label
- style:
font-size: x-small
left: 9%
top: 14.8%
text: HVAC
type: 'custom:text-element'
- entity: climate.home
style:
color: 'RGBA(0,0,0,0)'
font-size: 75%
left: 9%
top: 24%
title: HVAC Thermostat
type: state-badge
- attribute: hvac_action
entity: climate.home
prefix: 'State: '
style:
font-size: 75%
left: 9%
top: 29%
suffix: ''
type: state-label
- attribute: current_temperature
entity: climate.home
prefix: ''
style:
font-size: 85%
left: 6%
top: 32%
suffix: °F
type: state-label
- attribute: current_humidity
entity: climate.home
prefix: ''
style:
font-size: 85%
left: 13%
top: 32%
suffix: '%'
type: state-label
- style:
font-size: x-small
left: 9%
top: 38%
text: Internet
type: 'custom:text-element'
- entity: binary_sensor.metronet_gateway
style:
color: 'RGBA(0,0,0,0)'
font-size: 60%
left: 1.5%
top: 38.8%
transform: 'scale(.8,.8)'
title: Internet
type: state-badge
- entity: sensor.speedtest_ping
style:
color: 'RGBA(0,0,0,0)'
font-size: 60%
left: 9%
top: 38.8%
transform: 'scale(.8,.8)'
title: Internet
type: state-badge
- entity: sensor.speedtest_download
style:
color: 'RGBA(0,0,0,0)'
font-size: 60%
left: 1.5%
top: 47%
transform: 'scale(.8,.8)'
title: Internet
type: state-badge
- entity: sensor.fast_com_download
style:
color: 'RGBA(0,0,0,0)'
font-size: 60%
left: 9%
top: 47%
transform: 'scale(.8,.8)'
title: Internet
type: state-badge
- entity: media_player.rokutv
style:
left: 89%
top: 17%
transform: rotate(90deg) rotateX(70deg) skewX(18deg)
width: 6%
type: 'custom:now-playing-poster'
- entity: media_player.rokutv
style:
left: 60%
top: 25%
transform: rotate(-0deg) rotateX(-50deg) skewX(-0deg)
width: 10%
type: 'custom:now-playing-poster'
- entity: media_player.kitchen
style:
left: 48%
top: 26%
transform: rotate(0deg) rotateX(0deg) skewX(0deg)
width: 7%
type: 'custom:now-playing-poster'
- conditions:
- entity: alarm_control_panel.home_alarm
state: armed
elements:
- entity: alarm_control_panel.home_alarm
style:
font-size: 50%
left: 68.5%
top: 81%
type: state-badge
type: conditional
- conditions:
- entity: input_boolean.guest_mode
state: 'on'
elements:
- entity: input_boolean.guest_mode
style:
font-size: 50%
left: 68.5%
top: 81%
tap_action:
action: toggle
type: state-badge
type: conditional
- entity: input_boolean.guest_mode
style:
font-size: 60%
left: 17%
top: 75%
tap_action:
action: toggle
type: state-badge
- conditions:
- entity: sensor.mail_usps_mail
state_not: '0'
elements:
- entity: sensor.mail_usps_mail
icon: 'mdi:mail'
style:
left: 58%
top: 93%
tap_action:
action: navigate
navigation_path: /lovelace/mail
type: state-icon
type: conditional
- conditions:
- entity: sensor.mail_usps_delivering
state_not: '0'
elements:
- entity: sensor.mail_usps_delivering
style:
left: 65%
top: 93%
tap_action:
action: navigate
navigation_path: /lovelace/mail
type: state-icon
type: conditional
- conditions:
- entity: sensor.mail_fedex_delivering
state_not: '0'
elements:
- entity: sensor.mail_usps_delivering
style:
left: 65%
top: 93%
tap_action:
action: navigate
navigation_path: /lovelace/mail
type: state-icon
type: conditional
- conditions:
- entity: sensor.mail_ups_delivering
state_not: '0'
elements:
- entity: sensor.mail_usps_delivering
style:
left: 65%
top: 93%
tap_action:
action: navigate
navigation_path: /lovelace/mail
type: state-icon
type: conditional
- conditions:
- entity: sensor.mail_amazon_packages
state_not: '0'
elements:
- entity: sensor.mail_usps_delivering
style:
left: 65%
top: 93%
tap_action:
action: navigate
navigation_path: /lovelace/mail
type: state-icon
type: conditional
- entity: media_player.office
style:
left: 84%
top: 67%
width: 10%
type: 'custom:now-playing-poster'
- entity: media_player.office
style:
color: 'RGBA(0,0,0,0)'
left: 84%
top: 67%
type: state-label
- entity: media_player.office
style:
left: 86.5%
top: 62%
transform: rotate(90deg) rotateX(80deg) skewX(-0deg)
type: 'custom:now-playing-poster'
- conditions:
- entity: media_player.xbox_one
state: 'on'
elements:
- entity: media_player.xbox_one
style:
left: 73%
top: 92%
type: state-icon
type: conditional
- conditions:
- entity: sensor.basement_tv_electrical_measurement
state_not: '0.0'
elements:
- entity: sensor.basement_tv_electrical_measurement
style:
font-size: 60%
left: 73%
top: 98%
type: state-label
type: conditional
- entity: person.patrick
style:
font-size: 60%
left: 83%
top: 93%
type: state-badge
- entity: person.charissa
style:
font-size: 60%
left: 93%
top: 93%
type: state-badge
- charging_state:
entity_id: binary_sensor.blink_evse_ischarging
state: 'on'
color_gradient:
- '#ff0000'
- '#ffff00'
- '#00ff00'
entity: sensor.mychevy_2012_chevrolet_volt_battery_level
name: []
style:
color: 'RGBA(0,0,0,0)'
left: 49%
top: 80%
type: 'custom:battery-state-card'
- entity: sensor.mychevy_2012_chevrolet_volt_battery_level
style:
font-size: 70%
left: 45%
top: 84%
type: state-label
- entity: binary_sensor.blink_evse_ispluggedin
style:
left: 44.2%
top: 68%
type: state-icon
- entity: sensor.garage_temperature
style:
font-size: 60%
left: 37%
top: 64%
type: state-badge
- conditions:
- entity: group.basement_occupancy
state: 'on'
elements:
- entity: group.basement_occupancy
icon: 'mdi:motion-sensor'
style:
'--paper-item-icon-color': gold
left: 59%
top: 44%
width: 5%
type: state-icon
type: conditional
- entity: binary_sensor.front_door
icon: 'mdi:door'
style:
left: 67%
top: 67%
type: state-icon
- entity: binary_sensor.back_door
icon: 'mdi:door'
style:
left: 48%
top: 6%
type: state-icon
- entity: binary_sensor.garage_entry_door
icon: 'mdi:door'
style:
left: 51%
top: 61%
type: state-icon
- entity: cover.middle_garage_door
hold_action:
action: more-info
name: Middle Garage
style:
left: 29%
top: 91%
tap_action:
action: call-service
service: cover.toggle
service_data:
entity_id: cover.middle_garage_door
type: state-icon
- entity: cover.right_garage_door
hold_action:
action: more-info
name: Right Garage
style:
left: 44%
top: 91%
tap_action:
action: call-service
service: cover.toggle
service_data:
entity_id: cover.right_garage_door
type: state-icon
image: /local/images/House_032620_Overhead_1080_1_shadow_nolight_crop.png
type: picture-elements
m,
2 Likes
Patrick,
You’re Awesome thanks. I LOVE HA, but I have a day job and have struggle constantly to simply find the appropriate syntax for much of the coding needing to be efficient. I was up until 3am and came up with this… It works, but is a lot less efficient than yours, so thanks.
- entity: sensor.kitchen_temperature_sensor
style:
font-size: 9px
left: 45%
top: 50%
type: state-badge
- entity: sensor.bedroom_temperature_sensor
style:
font-size: 9px
left: 52%
top: 20%
type: state-badge
sensor:
- platform: template
sensors:
kitchen_temperature_sensor:
friendly_name: "Kitchen"
value_template: '{{ states.climate.kitchen.attributes.temperature }}'
unit_of_measurement: '°F'
bedroom_temperature_sensor:
friendly_name: "Bedroom"
value_template: '{{ states.climate.bedroom.attributes.temperature }}'
unit_of_measurement: '°F'
I don’t want to be one of those people that doesn’t do the research to find the answer, but the problem is that the answers are confusing and time consuming, so thank you thank you for your help. It’s guys like you that help us newbies grow and pay it forward.
Trey
Hi all, I’m wondering if any of you picture-elemets gurus could help me execute on an idea.
What I want is a card that has only text and which respects the theme colors. I want to just position some labels and sensor values on a blank canvas but without the picture which is a requirement for picture-elements.
I really wanted to use picture-elements because it seems quite easy to lay things out but the requirement for a picture background means that it’s not going to look quite right with my changing themes… I tried it with markdown card but it wasn’t flexible enough with positioning the text to do what I wanted.
What do you think, is there some way to do this or do I have to learn how to make custom cards (which looks pretty far out of my level of ability seeing as I have no web development or javascript expertise)?
Thanks all.
You can use a transparent png as (background) image.
2 Likes
So simple. Of course. Thank you.
Hi all,
One more question, I want this:
But get this:
Is there any way to tell the state-label that I don’t want it showing the units of my sensor? Or do I have to make a template sensor without a unit?
Code is here:
- type: picture-elements
image: /local/images/coronavirus_transparent.png
elements:
# - type: state-label
# entity: sensor.czechia_coronavirus_current
# style:
# top: 33%
# left: 45%
# font-size: large
# Header
- style:
font-size: large
right: -13%
top: 15%
text: Coronavirus In Czechia
type: 'custom:text-element'
# - style:
# font-size: large
# left: 56%
# top: 15%
# text: In
# type: 'custom:text-element'
# - style:
# font-size: large
# left: 72%
# top: 15%
# text: Czechia
# type: 'custom:text-element'
#Numbers
# - type: state-label
# entity: sensor.czechia_coronavirus_current
# style:
# font-size: x-large
# left: 20%
# top: 42%
- style:
font-size: x-large
left: 20%
top: 42%
text: 6838
type: 'custom:text-element'
# - type: state-label
# entity: variable.czechia_coronavirus_new_yesterday
# style:
# font-size: x-large
# left: 51%
# top: 42%
- style:
font-size: x-large
left: 51%
top: 42%
text: 438
type: 'custom:text-element'
# - type: state-label
# entity: variable.czechia_coronavirus_new_today
# style:
# font-size: x-large
# left: 82%
# top: 42%
- style:
font-size: x-large
left: 82%
top: 42%
text: 121
type: 'custom:text-element'
Also is there any way to center something on the card? The header label moves around based on which device I open it on when positioned from the right. If I position it from the left it goes off the left of the card or wraps the text…
Regarding your unit problem.
Can’t you use the customize tool and just remove that?
Normally you add stuff, but I can’t see a reason why it wouldn’t work to remove a attribute.
And the position.
I believe that is because the image you base it on is larger than the screen size of the phone.
Untested, but perhaps you can resize the image smaller and use scaling to scale down the values the same way.
Maybe that will make it easier to fit?
I have not bothered but this is a possible solution I have thought of.
1 Like
Thanks. Yes, I guess I could. I use the sensors and variables in other places, and didn’t want to create new ones, but I suppose that’s what I’ll do.
About the position, is there a way to know the right size to make the image? I just compared the image to the card size on my screen and tried to trim it to the right size. How many pixels wide is a normal card?
Sorry can’t help you with that. It is just a guess as I said, based on that when I flip my phone on the side everything looks good.
But don’t know what size the image has to be to be correct.
Created my own take on a media player card. Used picture-elements, button-card and mini media player-card. Still working on some stuff to add, so not final yet 
8 Likes
