Floor plan image wont display in picture elements or glance using lovelace

Configuration Frontend
1

floor plan image wont display in picture elements or glance using lovelace.
I have read a lot, have tried a few things, no success.
Frustration has set in so time to ask for help.
I have a floor plan image fplan1.png
I have created a config directory in homeassistant directory with a www folder under config.
I have tried /local/fplan1.png
I have tried /config/fplan1.png
have tried /config/www/fplan1.png
have tried /home/pi/homeassistant/config/fplan1.png
have tried /home/pi/homeassistant/config/www/fplan1.png

I also tried creating a config dir and a config/www directory under root with the fplan1.png file in there. Each time I restart home assistant.

this is the code from lovelace editor

elements:
  - entity: sensor.ent_temp
    style:
      left: 40%
      top: 32%
    type: state-badge
image: /local/fplan1.png
type: picture-elements

I am using homeassistant 0.108.3 in a docker container on a pi3

thanks
Ian

image
image1366Ɨ768 91.8 KB

2

if I use http://ip add:8123/local/fplan1.png in my browser I get a file error 404
so for some reason it is not resolving the /local ?

3

Any help out there. Iā€™ve exhausted trying to find a solution. Cant be the only one looking for a solution surely

4

think I will give up on home assistant, little support

5

Mine is in /local/floorplan.png ā€¦ How did you upload it? Did you check permissions?

6

Hello Brandon,
thanks for the info

I created a local directory under the root directory and copied the file to \local
same result wont display
the ownership of the file is pi. Is that correct?

-rw-rā€“r-- 1 pi pi 381741 Oct 26 23:46 fplan1.png

thanks

7

Hey there,

I have a similar issue; Iā€™m running HA on an rPi 4. For me, the results are inconsistent - I can see the image on some devices and not others. Have you tried confirming you can open the image file in the browser using the file editor within the home assistant UI?

I suspect that the reason for browsing to the file is because we are using HA inside docker and need to expose th actual path to the container; the path will look something like this: https://homeassistant.mydomain.com:8123/api/hassio_ingress/NCNB5-znyCdaMXNsThAUBN05JVNlhkSXN22Yfpu-63o/api/file?filename=/config/www/floorplan.png

Good luck.
If you want, you could reduce the string using TinyURL, but that would introduce an external dependancy.

8

Hi Phil,
thanks for the reply. Using the editor in lovelace picture elements the image doesnā€™t display.
thanks for the idea re full url will investigate.
I dont think I am using hassio cant see any other editor within home assistant.
My homeassistant is on a pi3. About every few months it corrupts the sd card & I reload it with a backup image. I must see if I can get the image to a usb drive and see if it will run from usb, or port the whole thing across to a dedicated linux box.

regards

9

Hi again,

So after a bit of faffing about (hosting the file on a seperate webserver) I have managed to apply the floor plan picture element conssistently, switching back locally, using the following string: image: /local/filename.png

The file is located in the folder path /config/www

Hope that helps.

As for the corruption; SD cards are only good for a fixed number of reads and writes before they die. I know that Hassbian includes a utility to move the DB writes to a USB drive, but not sure how to do that in docker. You could try Googling ā€œMove File System to USB/External drive for hassbian on Raspberry Pi 3ā€ for inspiration. :slight_smile:

10

thanks for the update phil,
I did try using /local/fplan1.png to reference the file in lovelace pic elements
I tried locating the png file in /config/www/fplan1.png and also tried /config/www under the the pi and also under homeassistant directories without success.
Just wondering if you could let me know the file attributes for your filename.png file please. Iā€™m wondering if its an ownership or attributes problem.

re the sd card, mine corrupts after a month or 2. I reload the backup image to it and its good for another period, so the card doesnt die, just corrupts the os. I was wondering if the logs might grow too large so must try to find how the logs are managed.

11

I had this exact same issue. My picture elements card was not loading my overlaid floorplans. I would just get a grey screen with a broken screen icon. I also had the 404 error, despite the fact that the image URL reference was for the correct image, in the correct location.

After a lot of experimentation, I managed to get my card to work for each ā€˜-type: imageā€™ by using the style option and transform & translate to position the image within the card properly. (transform should be two spaces in btw)

style:
transform: ā€˜translate (-0%, -100%)ā€™

This corrected the the issue once I had hard cleared the cache on my Chrome browser.

12

thanks for that reply I didnt see it when you posted. just saw it when looking back at old posts so my apologies

13

I had the same issue, I am using nabucasa cloud solution. I managed to fix it by replacing the local address with the external link provided by nabucasa in the configuration screen. I hope this will help someone.

1 Like