Help with custom Lovelace Button card

Configuration Frontend
, ,
1

Hi everyone, I am new to Home Assistant and I have struggled through getting the basics up and running. I thought I would try the RomRider button card through HACS but I immediately ran into problems. Here is the instructions that I do not understand:

Installation and tracking with hacs:
1. Make sure the HACS component is installed and working.

2. Search for button-card and add it through HACS

3. Add the configuration to your ui-lovelace.yaml

resources:
  - url: /hacsfiles/button-card/button-card.js
    type: module

4. Refresh home-assistant.

I can not find the ui-lovelace.yaml file. And once I do find it, what ‘configuration’ do they want me to add to it?

Thanks
Sam (I am thinking this is going to be a long, slow painful road) :slight_smile:

2

Hello and welcome …

First check that you have HACS installed by clicking on ‘Configuration’, ‘Integrations’. You then click the orange button to add a new integration and select “HACS” from the list:

image
image513×724 44.7 KB

After restarting Home Assistant you should then see “HACS” in the sidebar. Click this then select “Frontend” followed by the blue button to add a new HACS repositary. Search for “Button-card”, select it then click the blue button “Install this Repository in HACS”.

Once installed you should see the following under “HACS”, “Frontend” and you can click on the “Repository” link for information on how to setup buttons in Lovelace.

image

To get started with an example button card you need to edit a dashboard then add a new manual card. You can then paste in some example yaml from the repository mentioned above and edit this to reference one of your own entities e.g.

type: 'custom:button-card'
entity: switch.ac
icon: mdi:air-conditioner
color: rgb(28, 128, 199)
1 Like
3

Thank you Mark. That got me started. I do, however have one question. Why do the official instructions tell you to put this code into a non-existant file called. ’ ui-lovelace.yaml?

In any case, thank you for your help. I can now play around with this card and put some jazz into my home project.

Sam :smile:

4

Hi,

I think this is refering to the ui lovelace yaml file, this used to be in /config but was moved to a hidden folder a while back as most things can be done with the UI editor now. You can still access this when in configuration mode in the UI editor by clicking on the three dots and selecting “Raw Configuration Editor”.

image

Be careful though, if you mess this up then your frontend won’t display correctly. I tend to stick with the UI editor if I can and only use the Raw Configuration Editor if I need to search for something or do a search and replace.