I have seen many posting about adding the “ui-lovelace.yaml” to the home assistant config directory and then add the cards to the “www” directory to use them. Well on the new Docker Home Assistant it has Lovelace console built in and stores the configuration in a “.storage” hidden directory with 24 pre-made cards. I tried putting the “ui-lovelace.yaml” in but it defaults to the one built into the docker. Now you can add the basic cards to the views in the “Configure UI” section but not sure how to add the custom cards like “monster-card” or “weather-card” to select that one. Any help would be appreciated. Thanks ahead.
1 Like
Edit the lovelace file in raw mode…
click on 3 dots top right and configure ui
tap 3 dots a second time and select raw editor.
Put it in there at the top as per custom card instructions.
2 Likes
Ah cool I see that now! Thanks a bunch for that. Been banging my head to figure it out.
1 Like
So where do you put the .js files then? Still in the WWW directory? Then direct it to /local?
yes… follow the directions for the card. A lot of cards now are using the /customcards/ instead of /local/
customcards does not have an issue with caching and you don’t need to specify the version. The local and customcards folders are endpoints that link back to /www/
If you are creating the www folder, you need to restart home assistant after you create it.
Thanks I had the /www/ directory already for icons and pics. I was putting the .js files in that directory because on most of the lovelace instructions they say to put them there. So I get this straight I need to put another directory in /www/ called /customcards/ ? or put it in the root of HA config files? Sorry for the confusion I am new to HA and it seems overwhelming at first. I having a ton of issue with getting components to add to it.
Got it. Thanks for all the help
I have the same question, where did you end up putting the customcards folder? Thanks
There does not need to be one, cards should go in www, or a sub-dir of it.
1 Like
Right I understand that and I put the resources at the top of the lovelace file:
resources:
- url: /local/plan-coordinates.js?v=2
type: js - url: /local/monster-card.js?v=2
type: js
I did it just /local/ once and then made subdirectory /local/customcards/ but no joy. I have to use the raw editor because this docker has lovelace built in and seem to not use the standard yaml file of ui-lovelace.yaml. I has a file under the .storage directory just called “lovelace” were the configuration is at. It does not seem to take the resource information when restarted. The config check comes back green so I do not see any errors. When I open the “Configure UI” and add card I don’t see them but I am figuring they are there I just have to manually enter in the information.
change /local/ to /customcards/
Both are just endpoints that point to the www folder. You don’t have a local folder either do you?
Also if you use the customcards folder, you don’t need to and shouldn’t use a ?v=2 on the end… That is a way to break the cache in /local/ for a new version to make HA break and reload the card. /customcards/ doesn’t cache so you do not need to do that.
1 Like
/customcards/ is not a part of HA, that are served only if you have custom_updater installed.
Ah… thanks for clarifying that.
Ok Roger that! So I was doing it right by putting the .js files in the www directory. Now how do I get them to show when I use the Configuration UI? I put the resource section in manually in the raw UI editor but no joy of them showing up in the choices, just shows the 24 default ones still. The Lovelace UI is more built into the docker version of HA now on version 88.
Yes you need to manually add them like this:
- type: horizontal-stack
cards:
- type: custom:mini-graph-card
Where the custom:mini-graph-card is typed in manually. In the GUI editor:
To add, click on manual card in bottom right corner and type in the code…
1 Like
AH! I see now! Thanks David!
1 Like
I can’t seem to figure this out in my docker installation of Home Assistant. I have a mount point for “/config”. Do create a new folder inside “/config/www” and put plugins in there? Then the resources path is “/slider-entity-row.js”
For anyone still confused here is how I got it to work. /config is a mounted docker volume.
make a /config/www/plugins folders. Place your plugin there. In the resources tab enter the path:
/local/plugins/slider-entity-row.js
Hope this helps someone.
2 Likes