UI Lovelace Card

thuva · March 24, 2021, 11:19am

I am trying to include https://github.com/custom-cards/button-card.

I put the file button-card.js in config/www folder, and where should I create ui-lovelace-card.yaml?

in config I created a file called ui-lovelace.yaml and copied everything from overview and in configuration I added

lovelace:
mode: yaml

but where should I create this: ui-lovelace-card.yaml

Vlavonvidden · March 24, 2021, 11:59am

I think this might be the wrong section of the forum for this kind of question, but it’s up to the mods to decide.

You can create your lovelace yaml files in your config folder, where your configuration.yaml file is. From here, have a look at the doc and use the default examples to begin with.

Two things :

Using lovelace in yaml mode is fine, but I’d suggest starting with storage in order to retain UI’s editability within HA’s web interface. This could help you better understand what’s going on.
You seem to have added your button card manually. have a look at HACS, it’ll make your life easier.

finity · March 24, 2021, 2:20pm

It looks like those installation docs are pretty poorly written.

I assume you are using ui mode for lovelace (since you don’t already have a ui-lovelace.yaml file).

So, once you add the file above to the ‘config/www/’ folder then go to the “configuration->lovelace dashboards” section of HA from the left side menu.

Then select “resources” tab.

Then click “add resource” in the bottom left.

then add the file local where you put the js file above.

if you put it in “config/www” then you will write that as “/local/”

so you should end up with something like:

/local/button-card.js

But the advice to install and run HACS is highly recommended since it will do all of the installation stuff for you.

thuva · March 24, 2021, 2:21pm

got working. Thanks a lot

MilesAheadToo · January 17, 2022, 1:13pm

I’m at the same place you were a year ago. I did add it though HACS and in my Resources tab I have this:

I updated the web browser as instructed. I’m using Chrome, which I’m told is up to date - Version 97.0.4692.71 (Official Build) (64-bit).

I then tried to add the person-entity-card as follows:

Edit dashboard
Click on “Add card”
Select “Manual”

image1540×240 5.16 KB

I then tried two settings, both of which give me the same error, that ther person-entity-card’ isn’t found.

image1554×312 15.6 KB

image1532×312 25.6 KB

What am I doing incorrectly?

MilesAheadToo · January 17, 2022, 1:37pm

It all turned out to be a double quote rather than a single quote!!

In other words
type: 'custom: person-entity-card' fails,
whereas
type: "custom: person-entity-card" works just fine.

Why then does HA default to the single quote when one selects to add a manual or custom card?

MilesAheadToo · January 17, 2022, 5:45pm

I don’t get an error, but I also do not see anything in the card.