Example of two of my crowded picture elements 
All rooms have an overlay with opacity based on measured lux, so will show up as dark if dark. Click in any room to toggle lights in the room.
The Network diag picture shows all Sonoffs, ESPs and other pingable equipment in the house.
very impressive! that’s a lot of hard work right there
Hi all !
well for my fist time i did a harmony hub remote where the background changes depending on what device are you using.
this is based on the sensor:
configuration.yaml
sensor:
- platform: template
sensors:
living_room:
value_template: ‘{{ states.remote.living_room.attributes.current_activity }}’
friendly_name: ‘Living room hub’
and the picture elements card:
elements:
Hope you all like it… it took me a better part of Sunday (first time i make one like this) 
Here is my setup, it took some doing and learning photoshop
It show’s 2 floors. the 1st floor is not done yet. so i’m just focussing on the 1st floor.
I forgot to show it in the video, but the orange layovers show in what area the lights are on. you can press that area anywhere to toggle the light state of corresponding light group.
i’ve used the following recourses:
If somebody needs the lovelace yaml code , just sent me a PM.
So, a little update.
I manged to remake the above without the use of any images except for the background and a 1 pixel transparent image (png).
I’ll share my code here
cards:
- elements:
- conditions:
- entity: group.covers
state: 'off'
elements:
- entity: group.covers
image: /local/trans.png
style:
top: 50%
left: 50%
width: 100%
height: 100%
background: 'rgba(240,255,240,0.7)'
type: image
- entity: group.covers
image: /local/trans.png
style:
top: 12.1%
left: 76.6%
width: 40%
height: 20%
background-image: >-
radial-gradient(farthest-side at 0%
100%,rgba(244,241,237,0.9)50%, rgba(240,255,240,0))
type: image
- entity: group.covers
image: /local/trans.png
style:
top: 73.2%
left: 17.8%
width: 28.7%
height: 49.8%
background-image: >-
radial-gradient(farthest-side at 100% 0%,
rgba(244,241,237,1)50%, rgb(240,255,240,0))
type: image
type: conditional
- conditions:
- entity: group.cover_warn
state: 'on'
elements:
- entity: group.cover_warn
image: /local/trans.png
style:
top: 50%
left: 50%
height: 100%
width: 100%
type: image
- entity: group.cover_warn
image: /local/trans.png
style:
top: 12.1%
left: 76.6%
width: 40%
height: 20%
background-image: >-
radial-gradient(farthest-side at 0% 100%,rgba(244, 229,
0,0.3)50%, rgba(240,255,240,0))
type: image
- entity: group.cover_warn
image: /local/trans.png
style:
top: 73.2%
left: 17.8%
width: 28.7%
height: 49.8%
background-image: >-
radial-gradient(farthest-side at 100% 0%, rgba(244, 229, 0,
0.5)50%, rgb(240,255,240,0))
type: image
type: conditional
- conditions:
- entity: group.cover_crit
state: 'on'
elements:
- entity: group.cover_crit
image: /local/trans.png
style:
top: 50%
left: 50%
height: 100%
width: 100%
background: 'rgb(255,0,0,0.15)'
type: image
- entity: group.cover_crit
image: /local/trans.png
style:
top: 12.1%
left: 76.6%
width: 40%
height: 20%
background-image: >-
radial-gradient(farthest-side at 0% 100%,rgba(255,0,0,0.5)50%,
rgba(240,255,240,0))
type: image
- entity: group.cover_crit
image: /local/trans.png
style:
top: 73.2%
left: 17.8%
width: 28.7%
height: 49.8%
background-image: >-
radial-gradient(farthest-side at 100% 0%, rgba(255,0,0,0.7)50%,
rgb(240,255,240,0))
type: image
type: conditional
- entity: light.beneden
image: /local/Beganegrond.png?011
state_filter:
'off': brightness(20%)
'on': brightness(100%)
style:
top: 0
transform: none
tap_action:
action: none
type: image
- type: conditional
conditions:
- entity: light.woonkamer
state: 'on'
elements:
- entity: light.woonkamer
type: state-label
style:
font-size: 0
left: 64.4%
top: 80.5%
height: 32%
width: 60.5%
background-image: |
linear-gradient(rgba(255,183,76,0), rgba(255,183,76,0.5))
- entity: light.woonkamer
hold_action:
action: navigate
navigation_path: /lovelace/5
image: /local/trans.png
style:
left: 64.4%
top: 80.6%
height: 32%
width: 60.5%
tap_action:
action: toggle
type: image
- entity: light.woonkamer_plafondlamp
style:
'--iron-icon-height': 40px
'--iron-icon-width': 40px
left: 70%
top: 81%
tap_action:
action: toggle
type: state-icon
- entity: light.tuinverlichting
style:
left: 93%
top: 16.5%
tap_action:
action: toggle
type: state-icon
- type: conditional
conditions:
- entity: light.fibaro_dimmer_eetkamer_level
state: 'on'
elements:
- entity: light.fibaro_dimmer_eetkamer_level
type: state-label
style:
font-size: 0
left: 82.2%
top: 35%
width: 25%
height: 25%
background: >-
radial-gradient(farthest-side at 70% 50%,rgba(255, 183, 76,0.8),
rgba(255, 183, 76,0))
- entity: light.fibaro_dimmer_eetkamer_level
hold_action:
action: navigate
navigation_path: /lovelace/6
image: /local/trans.png
style:
left: 82.2%
top: 35%
width: 25%
height: 25%
tap_action:
action: toggle
type: image
- type: conditional
conditions:
- entity: light.keuken
state: 'on'
elements:
- entity: light.keuken
type: state-label
style:
font-size: 0
left: 54.8%
top: 32.7%
width: 30%
height: 22%
background: >-
linear-gradient(to right, rgba(255, 183, 76,0.8), rgba(255, 183,
76,0))
- entity: light.keuken
hold_action:
action: navigate
navigation_path: /lovelace/6
image: /local/trans.png
style:
left: 54.9%
top: 32.7%
width: 30%
height: 22
tap_action:
action: toggle
type: image
- type: conditional
conditions:
- entity: light.bijkeuken
state: 'on'
elements:
- entity: light.bijkeuken
type: state-label
style:
font-size: 0
left: 48.7%
top: 12%
width: 17.8%
height: 16.2%
background: 'linear-gradient(rgba(255, 183, 76,0.8), rgba(255, 183, 76,0))'
- entity: light.bijkeuken
image: /local/trans.png
style:
left: 48.7%
top: 12%
width: 17.8%
height: 16.2%
tap_action:
action: toggle
type: image
- type: conditional
conditions:
- entity: light.wc
state: 'on'
elements:
- entity: light.wc
type: state-label
style:
font-size: 0
left: 46.6%
top: 48%
width: 13.5%
height: 7%
background: 'linear-gradient(rgba(255, 183, 76,0.8), rgba(255, 183, 76,0))'
- entity: light.wc
image: /local/trans.png
style:
left: 46.6%
top: 48.3%
width: 13.8%
tap_action:
action: toggle
type: image
- type: image
entity: media_player.sony_bravia_tv
image: /local/trans.png
style:
left: 43.2%
top: 67.5%
height: 4%
width: 14%
- type: conditional
conditions:
- entity: media_player.sony_bravia_tv
state: 'on'
elements:
- entity: media_player.sony_bravia_tv
type: state-label
style:
font-size: 0
left: 43.2%
top: 67.5%
height: 4%
width: 14%
background-image: >-
radial-gradient(farthest-side at 50% 0%,rgba(255,0,0,1)10%,
rgba(255,255,0,0.5) 50%, rgba(0,255,0,0) 100%
- type: conditional
conditions:
- entity: cover.garagepoort
state_not: closed
elements:
- entity: cover.garagepoort
type: state-label
hold_action:
action: toggle
style:
font-size: 0
left: 19%
top: 48.3%
height: 1.4%
width: 24%
background: red
- type: conditional
conditions:
- entity: binary_sensor.neo_coolcam_door_sensor_schuifpui_sensor
state: 'on'
elements:
- entity: binary_sensor.neo_coolcam_door_sensor_schuifpui_sensor
type: state-label
hold_action:
action: toggle
style:
font-size: 0
left: 76%
top: 20.9%
height: 1.4%
width: 25%
background: red
- entity: plant.eetkamerplant
style:
font-size: 0px
left: 90.7%
top: 24.5%
width: 8.5%
type: state-label
- type: conditional
conditions:
- entity: plant.eetkamerplant
state: problem
elements:
- entity: plant.eetkamerplant
type: state-label
style:
top: 24.5%
left: 90.5%
height: 12%
width: 15%
font-size: 0
background-image: 'radial-gradient(rgba(255,0,0,0.5) , rgb(255,0,0,0) 50%)'
- type: conditional
conditions:
- entity: binary_sensor.achterdeur
state: 'on'
elements:
- entity: binary_sensor.achterdeur
type: state-label
style:
font-size: 0
left: 57.7%
top: 13.6%
height: 6%
width: 2%
background: red
- type: conditional
conditions:
- entity: binary_sensor.garagedeur
state: 'on'
elements:
- entity: binary_sensor.garagedeur
type: state-label
style:
left: 38.7%
top: 12.6%
height: 5.7%
width: 2%
background: darkorange
- entity: sensor.solaredge_vermogen
icon: 'mdi:flash'
style:
color: grey
left: 32%
top: 25%
width: 1%
type: icon
- entity: sensor.power_consumption
icon: 'mdi:fuse'
style:
bottom: 48.8%
color: grey
left: 57.8%
transform: rotate(90deg)
width: 1%
type: icon
- entity: cover.garagepoort
style:
left: 19.5%
top: 44.9%
hold_action:
action: toggle
type: state-icon
- type: conditional
conditions:
- entity: cover.garagepoort
state_not: closed
elements:
- entity: cover.garagepoort
type: state-label
hold_action:
action: toggle
style:
font-size: 0
left: 19%
top: 48.3%
height: 1.4%
width: 24%
background: red
- type: conditional
conditions:
- entity: binary_sensor.aeotec_zw089_recessed_door_sensor_gen5_sensor
state: 'on'
elements:
- entity: binary_sensor.aeotec_zw089_recessed_door_sensor_gen5_sensor
type: state-label
style:
left: 33.1%
top: 56.5%
height: 7%
width: 1.6%
background: red
- entity: binary_sensor.beweging_trap
style:
left: 70%
top: 64%
tap_action:
action: toggle
type: state-icon
- entity: binary_sensor.beweging_boekenkast
style:
'--iron-icon-height': 15px
'--iron-icon-width': 15px
left: 35.5%
top: 93.5%
type: state-icon
- entity: binary_sensor.beweging_woonkamer
style:
left: 92%
top: 94%
type: state-icon
- entity: binary_sensor.beweging_keuken
style:
left: 51.5%
top: 36.7%
type: state-icon
- entity: binary_sensor.beweging_bijkeuken
style:
left: 50%
top: 12.7%
type: state-icon
- entity: sensor.downstairs_thermostat_target
style:
color: grey
font-weight: bold
font-size: 70%
left: 70%
top: 54.2%
tap_action:
action: none
type: state-label
- entity: climate.downstairs
style:
'--iron-icon-height': 20px
'--iron-icon-width': 20px
left: 70%
top: 51%
type: state-icon
- entity: sensor.woonkamer_temp
style:
align: center
color: gray
font-weight: bold
font-size: 65%
left: 54.3%
top: 80.5%
type: state-label
- entity: sensor.woonkamer_hum
style:
color: gray
font-weight: bold
font-size: 65%
left: 54.%
top: 82.7%
type: state-label
- entity: sensor.licht_woonkamer
style:
color: gray
font-weight: bold
font-size: 10px
left: 45%
top: 97.2%
type: state-label
- entity: sensor.eetkamerplant_temperature
style:
color: gray
font-weight: bold
font-size: 65%
left: 83.5%
top: 21.8%
type: state-label
- entity: sensor.licht_eettafel
style:
color: gray
font-weight: bold
font-size: 65%
left: 70%
top: 38%
type: state-label
- entity: binary_sensor.beweging_eettafel
style:
left: 70%
top: 34.5%
type: state-icon
- entity: camera.woonkamer
icon: 'mdi:eye-outline'
style:
'--iron-icon-height': 20px
'--iron-icon-width': 20px
bottom: 11%
color: grey
right: 5%
transform: rotate(90deg)
type: icon
- entity: camera.garage
icon: 'mdi:eye-outline'
style:
color: grey
left: 22%
top: 25%
type: icon
- entity: camera.eetkamer
icon: 'mdi:eye-outline'
style:
'--iron-icon-height': 20px
'--iron-icon-width': 20px
color: silver
right: 2.8%
top: 19.5%
transform: rotate(45deg)
type: icon
- entity: binary_sensor.beweging_gang
style:
bottom: 35.5%
left: 45%
type: state-icon
- entity: camera.gang
icon: 'mdi:eye-outline'
style:
'--iron-icon-height': 20px
'--iron-icon-width': 20px
bottom: 38.5%
color: grey
left: 58.6%
type: icon
- entity: media_player.google_home_woonkamer
style:
left: 92.2%
top: 77.6%
type: state-icon
- entity: binary_sensor.woonkamer_media
style:
'--iron-icon-height': 20px
'--iron-icon-width': 20px
left: 57.7%
top: 66.4%
type: state-icon
- entity: sensor.weather
style:
'--iron-icon-height': 40px
'--iron-icon-width': 40px
right: 13%
top: 10.5%
type: state-icon
- entity: sensor.buiten_temperature
style:
color: gray
font-size: 100%
font-weight: bold
left: 90%
top: 3.6%
type: state-label
- entity: switch.radiator_links
style:
'--iron-icon-height': 16px
'--iron-icon-width': 16px
'--paper-item-icon-color': silver
'--paper-item-icon-active-color': orange
left: 34.2%
top: 96.8%
tap_action:
action: toggle
type: state-icon
- entity: switch.radiator_rechts
style:
'--iron-icon-height': 16px
'--iron-icon-width': 16px
'--paper-item-icon-color': silver
'--paper-item-icon-active-color': orange
left: 93.8%
top: 96.8%
tap_action:
action: toggle
type: state-icon
- camera_image: camera.voordeur
camera_view: live
style:
left: 19%
top: 62%
width: 24%
type: image
image: /local/Beganegrond.png?012
type: picture-elements
- entities:
- entity: switch.greenwave_powernode_6_port_switch
- entity: switch.greenwave_powernode_6_port_switch_6
- entity: switch.greenwave_powernode_6_port_switch_5
- entity: switch.greenwave_powernode_6_port_switch_3
- entity: switch.greenwave_powernode_6_port_switch_2
- entity: switch.greenwave_powernode_6_port_switch_4
image: /local/banner.png?v3
type: picture-glance
type: vertical-stackVersion 0.3 of group-element available. Even more cool now. Very efficient use of picture-elements.
Anyone know if it’s possible to lay an input_select drop down on top of a picture-elements card? I’m imagining a picture of the front of my receiver with a blanked out display and two drop down menus on top of it. One for sources and one for audio format. When I try this:
- type: picture-elements
image: /local/interface_images/theater/receiver.png
elements:
- type: input_select.denon_source
I get “Unknown element type encountered: input_select.denon_source.” laid on top of the image of my receiver.
Edit: Well, I sort of got it going with a state-label:
- type: state-label
style:
left: 45%
top: 30%
font-size: 200%
entity: input_select.denon_source
The click brings up a pop-up where I can change the source. I still have to get that hooked into the actual changing of the source on the receiver. Not as elegant as I wanted but it’s working. If anyone has any way to do it without the pop-up I’d love to get ideas.
I haven’t found anything and wanted something similar for a floorplan to toggle which floor is visible. Currently I’m just using buttons for each floor that when clicked change the selected value of the input select.
I did something similar just using buttons. Not happy about how the white background looks with my shiny new brushed steel background but it’s something to work on later.
Went for a more colourful way to display my MiFlora data with a stripe for each.
The badges are a bit of a fudge as I couldn’t work out how to display a badge without text below it, so essentially I cut off the text display by limiting the size of the banner image.
In my case, the images are 272x43, like so:
- type: picture-elements
image: /local/oak-for-hass-halved.png
elements:
- type: state-badge
entity: sensor.miflora_ae_xx_moisture
style:
top: 68%
left: 10%
color: "#ffffff"
- type: state-badge
entity: sensor.miflora_ae_xx_conductivity
style:
top: 68%
left: 30%
color: "#ffffff"
- type: state-badge
entity: sensor.miflora_ae_xx_temperature
style:
top: 68%
left: 50%
color: "#ffffff"
The rest of it is fairly standard I guess, though for changing the font throughout the theme I used this tip:
For the curious it’s: an Oak, a serrated red Maple, regular Maple, Horse Chestnut, general garden patch reading, Lemon, Lemon, Labernum, and Robinia.
Wooow! Looks amazing. Mind sharing how you achieved this?
@adrkable I have set up a separate topic dedicated to my design (Picture Elements & Custom Layout Card Interface) I have more info and the actual code listed there.
here is my first picture-elements project. a digital car key-fob. i can lock,unlock,start and stop car engine. i leave in KSA and its so hot in here. my car is equipped with remoter starter i can turn on car engine from fob and it will run for 15 min it will cool down inside temperature.
i did not hack in to car ECU i had spare key-fob with d1 mini and 4066 ic i simulate button press on key-fob.
Hi,
Would you please share with me the instruction to use d1 mini and 4066 ic to simulate button press on keyfobs?
cheers
ALi
i used esphome on d1 mini here is the yaml
esphome:
name: car
platform: ESP8266
board: d1_mini
wifi:
ssid: "SSID"
password: "Your Password"
# Optional manual IP
manual_ip:
static_ip: 192.168.1.11
gateway: 192.168.1.1
subnet: 255.255.255.0
# Enable logging
logger:
# Enable Home Assistant API
api:
ota:
switch:
#lock pin GPIO
- platform: gpio
pin: D1
id: lock_btn
#Unlock pin GPIO
- platform: gpio
pin: D2
id: unlock_btn
#Engine pin GPIO
- platform: gpio
pin: D5
id: engine_btn
#start engine
- platform: template
name: Start Engine
id: start_engine
optimistic: true
turn_on_action:
- switch.turn_on: lock_btn
- delay: 800ms
- switch.turn_off: lock_btn
- delay: 400ms
- switch.turn_on: engine_btn
- delay: 4000ms
- switch.turn_off: engine_btn
- switch.turn_off: start_engine
#stop engine
- platform: template
name: Stop Engine
id: stop_engine
optimistic: true
turn_on_action:
- switch.turn_on: engine_btn
- delay: 4000ms
- switch.turn_off: engine_btn
- switch.turn_off: stop_engine
#Lock Car
- platform: template
name: Lock car
id: lock_car
optimistic: true
turn_on_action:
- switch.turn_on: lock_btn
- delay: 500ms
- switch.turn_off: lock_btn
- delay: 500ms
- switch.turn_on: lock_btn
- delay: 500ms
- switch.turn_off: lock_btn
- switch.turn_off: lock_car
#Unlock Car
- platform: template
name: Unlock car
id: unlock_car
optimistic: true
turn_on_action:
- switch.turn_on: unlock_btn
- delay: 500ms
- switch.turn_off: unlock_btn
- switch.turn_off: unlock_car
4066 ic is kind of relay for small components check below image how i connected ic with d1 mini and keyfob.
here is a video tutorial on how to use 4066
let me know if you need anymore help. i’m happy to help
Thank you.
This is great! How did you create the buttons to toggle between downstairs and upstairs? Can you share your yaml?
I used an input select with a service-call button. See the heading Creating a Floor Toggle in this post: https://aarongodfrey.dev/home%20automation/creating-a-3d-floorplan-in-home-assistant/