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



The Picture Elements card in Home assistant is one of the most flexible cards available for the Lovelace 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 floor plan and add entities to that image using the Picture Elements card.
—————–
WRITTEN GUIDE
—————–

—————–
RECOMMENDED VIDEOS
—————–
Home Assistant new User Interface

How to set up Lovelace on Home Assistant

Home Assistant: Hass.io Installation:

How To use the Home Assistant IDE add-on

How to set up Themes in Home Assistant + 20 free themes

Install Hassbian (Home Assistant) in a Raspberry Pi 3

—————–
SUPPORT THE CHANNEL
—————–
PATREON:
BUY ME A COFFEE:
AMAZON AFFILIATE LINK:
—————–
VISIT MY WEBSITE
—————–

—————–
SUBSCRIBE TO THE CHANNEL
—————–

—————–
FOLLOW ME ON
—————–
TWITTER:
FACEBOOK:
INSTAGRAM:
GOOGLE+:
—————–
MY GEAR
—————–
Camera:
Lens 1:
Lens 2:
Mic 1:
Mic 2:
Tripod:
—————–
DISCLOSURE
—————–
Some of the links on this video, are affiliate links, meaning, at no additional cost to you, I will earn a commission if you click through and make a purchase.
—————–
SOUNDTRACK
—————–
Song: Doing Just Fine by Lakey Inspired
SoundCloud:
—————–
#HomeAssistant #Hassio #LovelaceUI

25 Replies to “How to set up the Picture Elements card in Home Assistant – Lovelace”

  1. Daniel Opsteegh

    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.

  2. Vaughan Lundin

    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

  3. David Lister

    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.

  4. sean stockemer

    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?

  5. Norman Hamer

    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?

  6. dzeykop

    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

  7. Antonio Schneider

    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!

Leave a Reply

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