I tried adding a js module with a custom stylesheet to override the element #brokenimage that I see if I hover on the broken picture-glance card by inspecting the element (see snapshot below) although I understand that because of HA using DOM this is not as straightforward as it could be.
The element in question is (from inspecting the element):
#brokenImage {
background: url(/static/images/image-broken.svg) center center / 36px no-repeat grey;
}
How can I change the broken image svg (ie /static/images/image-broken.svg) with a different file? The reason why this is frustrating is because every so often HA reloads on the wall panel and while reloading I get a bunch of grey images which defeat the purpose of a nice user interface.
Here’s an example of my HA app while loading and fully loaded.
What I did was remove the microSD from my RPi and read it on a live linux distro laptop (or it’d work on a virtual machine environment too, neither Windows nor Mac will be able to access the filesystem so you have to get creative).
Once you put the SD into your PC you’ll see a bunch of drives being loaded, the one that has the image-broken.svg file is called “hassos-data”.
Now the fun part…
To make it short just open the terminal and access the hassos-data folder, once you’re in get root privileges with the following command:
sudo su
Then look for the file image-broken.svg
find ./ -iname "image-broken.svg"
You’ll get a number of folders where the file is in, those are the ones you’re interested in.
What I did was just to swap the image-broken.svg with a file with the same name but just blank.
This method still leaves you with the card being loaded with the default background color (in my case grey for cards with no image).
Ideally I’d want to change that color to black even if no image is found but I don’t know how to do that, if you have a suggestion please let me know.
I found a sneaky way of achieving the same result without accessing the filesystem that I thought I’d share.
Let me say that I am not a programmer and I only got to this solution by a LOT of trial and error but since it works for me then it might do so for others.
Here’s the steps I took:
Accessed HA panel where a broken image is present (you can also load a non-existent image to trigger it) like so:
Pulled up the “Dev Tools” in the browser by pressing F12 (or Ctrl + Shift + I also works, not so sure about the Mac combo) and selected the “Sources” tab (highlighted):
Right-clicked on one of the folders (a random one) listed on the left panel and selected “Search in folder” (highlighted):
This brings up a search panel down below. I then deleted whatever was in the search box and typed “brokenImage” (without quotes) then Enter, this brings up the “chunk” file where the function that sets the broken image picture is called (I guess that’s what happens?), then clicked on the brokenImage result (highlighted) to open the chunk file:
The chunk file is then open and the relevant brokenImage section that we searched for is highlighted:
I copied the whole code in the chunk file and pasted it in a file named styles.js that I created within the www folder, then saved (dah?!)
I edited the following lines in the styles.js files from this: