How to set up the Picture Elements card in Home Assistant – Lovelace

How to set up the Picture Elements card in Home Assistant – Lovelace


The Picture Elements car in Home
Assistant is one of the most flexible cards available for the loveless UI
allowing us to add icons text and services on different parts of an image
today I’m going to show you how to set up an image of a floorplan and add
entities to that image using the picture elements car. Alright let’s go ahead and
get started. So here I have an image of a floor plan that I created there are a
few apps out there that you can use to create this but one that I highly
recommend is called Magicplan it is a very easy to use app and it’s available
on both iOS and Android you can create a floor plan for free and export an image
for just $3.00 which is pretty cheap for all the features that you get and also
how easy it is to use so I definitely recommend it if you would like to check
it out you can find a link in the description below alright so once you
have an image of a floor plan you need to save it in the www folder if you
don’t have this folder yet you will need to create it inside the home assistant
config folder now open the lovelace.yaml file and set up a separate view
for the floor plan. you also want to set up the view as a panel select that the
picture element card displays in full width then define the card type as a
picture elements and below add the floor plan image using the path /local/
and then the name of the picture including the file extension all right
so now below you can start adding all the elements that you want on top of the
floor plan there are a few elements that you can use the first one that we’re
going to look at is the state-badge which allows adding sensors to the image
define the element type as a state-badge then for the entity enter the name for
the sensor that you want to display now to specify the position of the elements
on the image you will need to use this style variable and set the volume for
the top and left variables if you increase the percentage for the top it
will position the element more towards the bottom and the same thing goes for
the left if you increase the value it will move the element more towards the
right the style variable uses CSS so there are several things that you can
change for example if you want to change the size of the font you can change it
using the variable font size save the changes to the file and refresh the
lovelace UI and you will now have a floor plan image in a full panel view
and with the new state badge created there are no other variables available
for the state badge that you can use but to add more functionality to the sensor
entity you could use the state label with the state label you can add the
same sensor and add some tags either before or after the entity using the
variables prefix or suffix you can also use the variables tab action and hold
action to either open the morning for pop up call a service or navigate to
another view here’s an example for the same weather sensor I set up the element
type as a state label for the entity I entered the same weather sensor then I
added some text to show before the entity using the prefix variable the
text is also enclosed within quotes so space could be added at the end to
separate text from the entity value I also added a tap action variable and I
set it to navigate and then below I use the navigation path variable set to the
view where I want to navigate to lastly I use the style variable to set the
position of the label and I also change the font size now the state label shows
up with the entity data and when clicked on is going to navigate to the view that
are specified so apart from the state badge and the state label you also have
the state icon which allows adding entity icons like switches and lights to
see the current state with the state icon you can also use the variables tap
action hold action navigation path and service here’s an example that I set up
from a living room light I define the element type as a state icon for the entity I
added a switch that is connected to my lamp and I also give it a title which is
shows up when I hover over the icon I set up the tab action as a toggle so
like that when I click on it it turns the light on and off by default the icons are a bit small but
we can make them bigger by adding the options iron icon height and iron icon a
width to the style variable now there is also the icon element which works
similar to the state icon the only difference is that it doesn’t show the
state of the entity it also has the same variables available with the addition of
the icon variable to be able to define the icon that we want to display for the
specific entity here’s an example I used this element I set up an icon element
from a living room camera and I defined the icon that I wanted to use for this
entity then I added a variable iron icon fill color to match the color of the
icon with my current theme now I didn’t add the tab action variable because by
default when you tap on the icon it shows the more info pop-up but if you
want to set something else you can always say that variable like on this
example where I set up an icon to navigate to another view alright so
those were the state elements available plus the icon element now let’s take a
look at this service button which allows adding a button to call a service a
perfect example for this will be to create a master button that would turn
off all your lights at the same time let me show you an example
after you define the element type as a service button add a title that will be
the label for the button the service set it to homeassistant.turn_off
then set the variable service data with the entity ID group.all_lights if
you’re like me and you have some light entities and also some smart switches
connected to lamps then you can create a script like this to group all the lights
together and then add the script name to the service variable
now anytime you want to turn off all your lights at once instead of tapping
on each individual light you can use the service button to do it quickly so it is
definitely an essential element to set up on your floor plan especially if you
have several lights all right last but not least let’s take a look at the image
element which allows adding additional images on top of the main picture it is
very convenient because you can create some cool effects like for example
making a room on a floor plan look darker when the light is off and then
brighter when the light is turned on you also have access to the variables that
we use on the previous element with the addition of the variables image camera
image state image filter and a state filter okay so for example to make the
room look darker when the lights are off you will first need to make a copy of
the floor plan and crop the image to just that room that you need after that
save the image and the www folder then in the lovelace file define the element
type as an image set up the line entity for that rule then add the tap action
variable and if you want to tap anywhere on the image to turn the line on and off
then set it to toggle otherwise set it to none if you are using a state icon to
toggle the light now add the variable image and add the path for the new
cropped image then using the variable State filter set up the brightness for
the on and off state for the light entity now position the image using the
style variable and also add the width to specify the size of the image now
anytime that you turn the light on and off the specific room in the floor plan
will change between a normal image and a darker image another way that we can set
up the same example is by using two cropped images for a room one with a
normal brightness and the other one that will be darker or you can do like me and
set up a vignette to give it a better look when the light is off then instead
of using the filter and the state filter variables you can use the state image
and set up the two images on the on and off alright so there’s a lot more ways that
you can use the picture elements card and make it work better for your own
setup I hope that this walkthrough of the available elements can help you
accomplish that now of future videos I also want to go
over some of the available custom cards for lovelace I already have a few in
mind that I want to cover but I would definitely like to get some more
feedback so definitely let me know in the comments below
alright guys like always thank you for watching if you like this video give it
a thumbs up don’t forget to subscribe if you haven’t done so already and I will
see you in the next video

Only registered users can comment.

  1. REMINDER: Check out the written guide on my website for any changes to the configuration.
    –> https://www.juanmtech.com/set-up-the-picture-elements-card-in-home-assistant/

  2. Thanks for this video, great info! I was wondering, how did you set the Home Assistant window UI to show without any chrome or boarders? I really like the simplistic all green window. I use the "create shortcut" feature of Chrome browser to create an "APP" and open HA dashboard on a new window but it is a regular window, with boarders and default colors. Thanks!

  3. Hey Juan
    Thank you for your amazing work 👍 I like your series about HA

    I see you use visual studio code is there a possibility that you make video about this program and how to set up, what you use and what is important?

    Thank you
    Joe

  4. Great video! Is it possible to add the text of an entity attribute (such as thermostat temperature) as an element over the floorplan?

  5. Can you try out Zigbee2Mqtt? The setup process seem to be complicated for beginners. You can find Zigbee2Mqtt here :https://community.home-assistant.io/t/zigbee2mqtt-getting-rid-of-your-proprietary-zigbee-bridges-xiaomi-hue-tradfri/52108

  6. Thanks for such a great video. Just a quick question. Is it possible to add input_select to the floor plan?

  7. Can you share your configuration file?
    How you control the computer and Living room TV.
    Interested in TV remote numbers setup …

  8. I think Home Assistant looks pretty good except I can't figure out how to copy or backup the system and restore it if I have a SD card crash. The only documents on backups at Home Assistant are incomprehensible. Have you ever backed up Hassio and if so could you do a detailed video on how to do it?

  9. I Love the way you explain….. Can i make the following the way you just explained.
    https://www.youtube.com/watch?v=8PHBqQnFyTw

  10. Hey Juan. Great video! I love your channel. Do you have an explanation of the math required to place an image element on a picture elements card? This–>
    (style:
    top: 57.2%
    left: 31.8%
    width: 64.4%)
    or was it just trial and error?

  11. thanks for video! I copied your config but in my case all the entities stay in bottom of the image, seems the the style command si ignored. Any idea?

  12. Great instruction video. One problem I have is how to make my layout to be a larger image. I tried increasing the size of picture with no success. Help would be appreciated.

  13. Thanks for the awesome video. It would appreciate it for some more updated videos on Home Assistant as HA ( Hassio ) is changing so often. Like to see more ideas and tips and tricks with Lovelace. Thanks again

  14. Thanks for this usefull video! I have been experimenting and ran in to a problem. I made a simple picture elements card with two elements: a state label and an image. This image changes according to the state of the entity which is linked to the alarmpanel in HA . The strange thing is that the card (which is not a panel btw) works on my computer (Mac) but on the ipad, it does not show the image. I checked several browsers, but there is no image. The state label does work on the ipad. Hope someone can help…… Thanks.

  15. Maybe I'm late to the party but you should change the title with "How to create a Floorplan with Picture Elements card in Home Assistant – Lovelace"

  16. I can't make the card load the picture….created the www folder, whitelisted it, jpg or png, /local/picture.png or /local/www/picture.png……I tried everything but couldn't make this simple thing work! Any advice?

  17. any chance we could get a yaml file? I would love to browse through this as a whole instead of the parts, I am trying to wrap my head around this and it would help a lot.

  18. Gracias, si bien esta explicado muy bien es muy complicado para mi, igual logre grandes avances, te felicito por el aporte

Leave a Reply

Your email address will not be published. Required fields are marked *