I’m trying to use this custom card:
After following the installation instructions, I tried to use the card, but I get this error in the UI:
Custom element doesn't exist: moon-phases
Here is how things are laid out in the file system:
lovelace.yaml:
- url: /local/moon-phases/moon.js
type: module
What am I missing?
I suspect because the images need to be in the images directory.
It should be custom:moon-phases.
Not sure if it’s a post, debug line or actual config error.
I use this solution with real images that are located in HA in the www folder
resources need to be under the lovelace: key in the configuration.yaml
configuration.yaml:
lovelace:
resources:
- url: /local/moon-phases/moon.js
type: module
- other resources
if you split the config then it could be separated out like this:
configuration.yaml:
lovelace:
mode: yaml
resources: !include ui_lovelace_resources.yaml
then in ui_lovelace_resources.yaml:
- url: /local/moon-phases/moon.js
type: module
- other resources
so I guess what I’m saying is that it depends on how you have your config setup where they need defined and how.
you haven’t shown us that part yet.
I only have this single reference in lovelace.yaml, as per the documentation:
- url: /local/moon-phases/moon.js
type: module
I’m not clear on what “other resources” are.
This link leads to a 404.
This is how I use the card:
- type: custom:moon-phases
entities:
- sensor.moon
- sun.sun
The error in the UI doesn’t include the ‘custom’ part.
Actually, they are in the ‘images’ folder as well.
there is no such thing as “lovelace.yaml” unless you created it.
Then it would be worthless unless you reference that file somewhere in your configuration.yaml file.
Then if the syntax in either of those two locations is incorrect it would give you the error you are seeing.
you aren’t giving us that information so we can’t help you figure out the problem.
additional resources other than the resource in question.
what documentation?
The link is in my first post.
You incorrectly followed the instructions. it says to put the resource in the ui-lovelace.yaml file not a lovelace.yaml file.
However those instructions are outdated as well since the resources no longer go into the ui-lovelace.yaml but instead go under the lovelace: key in your configuration.yaml file as I explained in my first post.
Ok, I see, but I don’t have a ui_lovelace.yaml. Just configuration.yaml and lovelace.yaml.
Here is the contents for lovelace.yaml:
resources:
- url: /hacsfiles/weather-card/weather-card.js
type: module
- url: /hacsfiles/lovelace-animated-background/animated-background.js
type: module
- url: /hacsfiles/card-tools.js
type: module
- url: /hacsfiles/secondaryinfo-entity-row.js
type: module
- url: /hacsfiles/lovelace-multiple-entity-row/multiple-entity-row.js
type: module
- url: /local/template-entity-row.js
type: module
- url: /local/mini-media-player-bundle.js?v=1.12.1
type: module
- url: /local/custom_cards/canvas-gauge-card.js
type: module
- url: /local/moon-phases/moon.js
type: module
Everything else here works just fine. There is an include in my configuration.yaml to this file, so this should be proper.
lovelace: !include lovelace.yaml
That’s the information I was asking for. That extra info is really helpful.
So you did split the config.
did you restart HA/reload lovelace after you added the files?
Yes, thanks for the help, by the way.
try putting quotes around the card definition:
- type: 'custom:moon-phases'
entities:
- sensor.moon
- sun.sunThanks, but still doesn’t work.
Strange because I open the link without a problem.
Hi, I got card working on my ui-lovelace, but when I remove - sun.sun the card dissapear. (I would like to get a transparent background). Any idea/suggestion?.
My code in yaml:
- type: 'custom:moon-phases'
entities:
- sensor.moon
# - sun.sun