Installing the Custom Button Card?

Bleak_Chimera · June 28, 2021, 5:30pm

I’m feeling a little bit like a crazy person here… I see everyone doing cool things with the custom button card, but the link in the installation to button-card.js is broken, and I don’t see that file anywhere. How do I actually install it?

qoheleth · June 28, 2021, 5:50pm

Manual Installation

Download the button-card
Note that this is a direct link to the .js file. Most browsers won’t load this if you just click on it. You need to right-click and do a “save as”. Then follow the rest of these directions.
Place the file in your config/www folder
Include the card code in your ui-lovelace-card.yaml

title: Home resources: - url: /local/button-card.js type: module

Write configuration for the card in your ui-lovelace.yaml

Installation and tracking with `hacs`

Make sure the HACS component is installed and working.
Search for button-card and add it through HACS
Add the configuration to your ui-lovelace.yaml

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

Refresh home-assistant.

I used the HACS method to install.

Bleak_Chimera · June 28, 2021, 6:00pm

I already linked directly to what you’ve just copied and pasted here… this doesn’t address my question.

Bleak_Chimera · June 28, 2021, 8:52pm

The correct link is

https://github.com/custom-cards/button-card/releases/download/v3.4.2/button-card.js

qoheleth · June 29, 2021, 12:09am

When you said the link was “broken”, I assumed you meant that the link went nowhere or to someplace it shouldn’t. (That’s the textbook definition of a broken link.)
I checked the link and it downloaded a .js file that is in fact identical to the .js file in your corrected link.
I thought possibly that you had the same result I did when I simply clicked on the link. (It was blocked by my anti-virus.) So I added the explanation of doing a save-as to bypass that apparently-does-nothing result.
At this point, I’m not at all sure why you had a problem with the original link.
However, you did exactly what folks should do, if they link in a github readme doesn’t appear to work: Go looking through the github for the latest release and download that. I should have included that in my earlier response. I’m glad that worked for you.

jasondreher · September 16, 2021, 2:59pm

I cant see to get the button-card.js working. Any thoughts?
I have
-added the button-card.js to my www folder and added it to resources:
-tried to install the HACS button-card but it just spins (never installs)
-rebooted several times…

Here is my dashboard

title: Tablet
# Include external resources
resources:
  - url: https://cdn.jsdelivr.net/gh/bramkragten/weather-card/dist/weather-card.min.js
    type: module
  - url: /local/button-card.js
    type: module
  - url: /community/button-card/button-card.js 
    type: module    
# Optional background for all views. Check https://developer.mozilla.org/en-US/docs/Web/CSS/background for more examples.
background: center / cover no-repeat url("/background.png") fixed
# Exclude entities from "Unused entities" view
excluded_entities:
  - weblink.router



views:


        
- icon: mdi:home-assistant
  cards: 
  
    - type: vertical-stack
      cards:

        - type: 'custom:button-card'
          entity: light.living_room_lamp
          icon: mdi:light-bulb
          color: rgb(28, 128, 199)
          state:
            - value: 'off'
              color: rgb(255, 0, 0)

My lovelace view says “Custom element doesn’t exist:button-card”

pedolsky · September 16, 2021, 6:15pm

Use one entry:

/local/community/button-card.js

P.S. Or - if the .js file is in a additional folder:


/local/community/button-card/button-card.js

jasondreher · September 16, 2021, 7:15pm

That did not work… It still says “Custom element doesn’t exist: cutton-card”
There are files in “\www\community\button-card” button-card.js & button-card.js.gz

pedolsky · September 16, 2021, 7:20pm

You only need the .js file. The second one is the zipped version.

Which yaml mode is this in your code above?

jasondreher · September 16, 2021, 7:27pm

From a seperate dashboard…

  dashboards:
    lovelace-generated: # Needs to contain a hyphen (-)
      mode: yaml
      filename: ui-office_tablet.yaml
      title: Office Tablet
      icon: mdi:tablet-dashboard
      show_in_sidebar: true
      require_admin: false

pedolsky · September 16, 2021, 7:41pm

Ok. So when you use yaml mode then you should put the ressources in the config file:

https://www.home-assistant.io/lovelace/dashboards/#adding-more-dashboards-with-yaml

jasondreher · September 16, 2021, 7:52pm

and I did have it there just in case here is the entire lovelace part…

lovelace:
  mode: yaml  
  resources:
    - url: /local/my-custom-card.js
      type: js
    - url: /local/my-webfont.css
      type: css
    - url: /local/vertical-stack-in-card.js
      type: js 
    - url: /local/Home-Assistant-Mail-And-Packages-Custom-Card-master/mail-and-packages-card.js
      type: js
    - url: /local/grid-layout.js
      type: js
    - url: /local/layout-card.js
      type: js
    - url: /local/button-card.js
      type: module
    - url: /local/community/button-card/button-card.js 
      type: js
#https://github.com/mattieha/slider-button-card
    - url: /local/slider-button-card.js 
      type: js
    
#  - url: /local/custom_ui/weather-card.js
#    type: 
  dashboards:
    lovelace-generated: # Needs to contain a hyphen (-)
      mode: yaml
      filename: ui-office_tablet.yaml
      title: Office Tablet
      icon: mdi:tablet-dashboard
      show_in_sidebar: true
      require_admin: false

pedolsky · September 16, 2021, 8:02pm

So why do you repeat them in your dashboard? Sure, that this is correct?

jasondreher · September 16, 2021, 8:28pm

Ok, after a whole bunch of cleanup it would not work, but found a page that shows to clear cache (ctrl+R) and that worked.

Thanks for your help!!!

PX80 · October 4, 2021, 2:50pm

Obviously the HACS install method is still broken as there is no way i can install via HACS.

I edited the Dashboard as below but still gives an error … i wonder if url is ok

title: Home
resources:

url: /local/button-card.js
type: module

However looking into configuration → resources its listed as HACS Resource

/hacsfiles/button-card/button-card.js?hacstag=xyz

qoheleth · October 4, 2021, 11:06pm

You don’t need those resources statements in the dashboard file at all.
The only place you need them is in configuration.yaml as follows:

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

AzzMG · December 19, 2021, 11:13pm

Thank you sir.
This was what I needed to do to get it to work.

Snawork · January 14, 2022, 11:29pm

buonasera bohème61, ti scrivo in italiano perche forse è piu facile la traduzione per te…
sono un neofita e vorrei installare button-card per comandare il mio telecomando, almeno per cominciare, potresti aiutarmi nell’installazione, ti avverto e da meno di due settimane che opero su homeassistant, ho capito che dovrei scaricare il file da github perche su hacs non la vedo.
te ne sarei grato se mi volessi aiutare. GRAZIE

boheme61 · January 15, 2022, 2:06am

Hej Snawork , det ville være lættere for mig at oversætte fra engelsk, Dansk eller Svensk …

Here is the “manual installation guide”

Manual Installation

Download the button-card
Place the file in your config/www folder
Include the card code in your ui-lovelace-card.yaml

# title: Home
# resources:
#   - url: /local/button-card.js
#     type: module

Write configuration for the card in your ui-lovelace.yaml

But as you see in the overall guide, there is a lot configuration effort, and i cant help you there, as im also quite new to HA since November ( but i found it in HACS, as i recall ) but maybe it was in a custom-repository, not in default HACS-repository , so if you are new(2 weeks experience in HA) i suggest you wait with trying to configure your remote-control

Here is the repository on Github

If you decide to download it from Github, you follow above procedure, and restart HA, then you have to create a “custom” Lovelace.Yaml file ( as well as adding url: to this in your /config/configuration.yaml ) , as you should not edit your default Lovelace (frontpage) or other you might have created via “Manage Dashboard”

I have so far only created 4 UI Controlled Dashboards, no “dashboard.yaml” ui-lovelace.yaml , and when it comes to “Button-design” are my needs so far limited style/size etc, a lot of this can you accomplice by “merging” cards … actually i just got my Android TCL-TV remote into AQARA-Hub-M2( IR- Controller ), 2 days ago, but it doesnt show up in HA, “Homekit”-aqara integration, all other Aqara/xaumi devices i have work perfect in HA , so far i can only use my phone-ap for this TV-remote , and/or certain functions through Google-Home/assistant … beside i have alot more important stuff
to integrate and automate, than my tv-remote.
If it’s only a “Button” you are looking for, there are other cards ( and as i said can you test which “funktions” you can merge from other cards…
example:
multi-entities-card
custom:slider-button-card
and place then in layout-cads
or grid

Wish you good luck … BR Jørgen

Snawork · January 15, 2022, 11:07pm

Grazie mille per la tua gentilezza, ti auguro buona serata, spero di riuscirci. A presto pasquale

Installing the Custom Button Card?

Manual Installation

Installation and tracking with hacs

Manual Installation

Installation and tracking with `hacs`