Home Assistant Community

Lovelace: Button card

#21

Very useful card, thanks for sharing! I am wondering if it is possible to set a custom color for the off state?

2 Likes

#22

Great work. Can we define different icons based on the state of the entity? I was trying to use it with my Garage door cover entity. Would be good to show separate icons when it’s open vs closed.

2 Likes

#23

I’m working on that :wink:

1 Like

#24

Just an empty color button?

0 Likes

#25

I was able to show the name without an icon by setting an invalid icon. That’s because if you do not set an icon, it does not show the name.

image

1 Like

#26

I released a new version! I updated this topic and created a changelog on github.

More feature requests and feedback are very welcome and appreciated!
Thanks!

4 Likes

#27

Thanks for this card @kuuji! I’ve noticed that if I have color_type of card and the entity is off, the tile uses var(--disabled-text-color), which doesn’t look quite right. Adding the following solves this for me:
color_off: var(--disabled-icon-color)

Also, this makes a really cool tile interface by adding the following to get a square tile:

style:
- height: 0
- padding-bottom: 50%
- padding-top: 50%

The only issue I have is that I haven’t figured out how to add a name for a temperature entity where the state is used instead of an icon.

0 Likes

#28

Hey @JoRoCoBo! Thanks a lot for your feedback!

Adding the following solves this for me:
color_off: var(--disabled-icon-color)

That is a great idea. I’ll add that by default for the card style in my next release

Also, this makes a really cool tile interface by adding the following to get a square tile:

I can show that as an example on the readme. Or feel free to take a screenshot and snippet of your configuration and open a PR.

The only issue I have is that I haven’t figured out how to add a name for a temperature entity where the state is used instead of an icon.

It works for me but it shows next to each other.
I’d have to figure out a way to make that better. Dang CSS =/
image

              - type: "custom:button-card"
                entity: light.office
                show_state: true
                name: Office
0 Likes

#29

Hi,
i like to use your card on my amazon fire tablet with the silk browser. But it says that

n.setConfig is not a function

Maybe you could have a look?

0 Likes

#30

Hey @teqqy

n.setConfig is not a function

It sounds like your web browser does not support custom components. This is fairly new technology that doesn’t work everywhere. Some lovelace component don’t use it but this card does (and other ones too)

I’d suggest going with chrome if you can, it seems to have the best support afaik.

For reference, the lovelace faq about this =>

0 Likes

#31

Excelente!
Tks for “color_type” and “show_state”. I only need now “service” in “action” and image suport.

0 Likes

#32

Tks for “color_type” and “show_state”. I only need now “service” in “action” and image suport.

That’s on my radar ;). That and support for the tracker_card.

Likely in my next release.

1 Like

#33

Hi @kuuji

Thnx for this useful nice dashboard , very useffull & nice. Please , could you advice , when I am trying to use command :

  • type: “custom:no-card”
    I am getting following message :

Sun Sep 02 2018 19:59:47 GMT+0200 (Central European Summer Time)
http://X.X.X.X:8123/local/no-card.js:7:1 Uncaught SyntaxError: Unexpected token <

Could you advise please ?

Thank you.
hassbian
raspberry 3+
Home Assistant 0.77.2

0 Likes

#34

So, I started using the buttons and realized that it will be nice to have an option to templatize icons. We can allow different icons based on states (something that is currently being used in LL). Alternately, we already have the icon_template that folks are using to set the icons based on the state (or other conditions). We can probably use that information.

Since, we are using LL, we should probably use the state_image option.

0 Likes

#35

I’m unsure what no-card.js is. But it’s not from my project, unless you renamed it.

Did you follow the instructions here?

0 Likes

#36

That’s neat. I’ll look into the implementation of the picture-elements to do something similar and keep a similar naming.

Thanks for the tip! :+1:

0 Likes

#37

Completed work.

Button with icon, is different size of button without icon.

10 Likes

#38

Good job…please share :slight_smile:

1 Like

#39
  - type: vertical-stack
    cards:
      - type: horizontal-stack  
        cards:
          - type: "custom:no-card"
          - type: "custom:button-card"
            entity: script.controle_tv_sala_mudo
            icon: mdi:volume-off
            style:
              - --disabled-text-color: white
          - type: "custom:no-card"
          - type: "custom:button-card"
            entity: script.controle_tv_sala_power
            icon: mdi:power
            style:
              - background-color: red
              - --disabled-text-color: white
          - type: "custom:no-card"
    
      - type: horizontal-stack  
        cards:
          - type: "custom:no-card"
          - type: "custom:button-card"
            entity: script.controle_tv_sala_1
            name: "1"
            show_state: false
          - type: "custom:button-card"
            entity: script.controle_tv_sala_2
            show_state: false
            name: "2"
          - type: "custom:button-card"
            entity: script.controle_tv_sala_3
            show_state: false
            name: "3"
          - type: "custom:no-card"
      - type: horizontal-stack  
        cards:
          - type: "custom:no-card"
          - type: "custom:button-card"
            entity: script.controle_tv_sala_4
            name: "4"
            show_state: false
          - type: "custom:button-card"
            entity: script.controle_tv_sala_5
            show_state: false
            name: "5"
          - type: "custom:button-card"
            entity: script.controle_tv_sala_6
            show_state: false
            name: "6"
          - type: "custom:no-card"
      - type: horizontal-stack  
        cards:
          - type: "custom:no-card"
          - type: "custom:button-card"
            entity: script.controle_tv_sala_7
            name: "7"
            show_state: false
          - type: "custom:button-card"
            entity: script.controle_tv_sala_8
            show_state: false
            name: "8"
          - type: "custom:button-card"
            entity: script.controle_tv_sala_9
            show_state: false
            name: "9"
          - type: "custom:no-card"

          
      - type: horizontal-stack 
        cards:
          - type: "custom:no-card"
          - type: "custom:no-card"
          - type: "custom:button-card"
            entity: script.controle_tv_sala_0
            show_state: false
            name: "0"
          - type: "custom:no-card"
          - type: "custom:no-card"
          
      - type: horizontal-stack 
        cards:
          - type: "custom:button-card"
            entity: script.controle_tv_sala_cima
            icon: mdi:menu-up-outline
            style:
              - --disabled-text-color: white
          - type: "custom:no-card"
          - type: "custom:button-card"
            entity: script.controle_tv_sala_seta_cima
            icon: mdi:menu-up
            style:
              - --disabled-text-color: var(--primary-text-color)
          - type: "custom:no-card"
          - type: "custom:button-card"
            entity: script.controle_tv_sala_up
            icon: mdi:volume-plus
            style:
              - --disabled-text-color: white
              
      - type: horizontal-stack 
        cards:
          - type: "custom:button-card"
            entity: script.controle_tv_sala_baixo
            icon: mdi:menu-down-outline
            style:
              - --disabled-text-color: white
          - type: "custom:button-card"
            entity: script.controle_tv_sala_seta_esquerda
            icon: mdi:menu-left
            style:
              - --disabled-text-color: var(--primary-text-color)
          - type: "custom:button-card"
            entity: script.controle_tv_sala_ok
            #icon: mdi:solid
            name: "OK"
            show_state: false
            style:
              - --disabled-text-color: white
              - font-weight: bold
              - height: 3.1em;
          - type: "custom:button-card"
            entity: script.controle_tv_sala_seta_direita
            icon: mdi:menu-right
            style:
              - --disabled-text-color: var(--primary-text-color)
          - type: "custom:button-card"
            entity: script.controle_tv_sala_down
            icon: mdi:volume-minus
            style:
              - --disabled-text-color: white
          
      - type: horizontal-stack 
        cards:
          - type: "custom:button-card"
            entity: script.controle_tv_sala_return
            icon: mdi:undo-variant
            style:
              - --disabled-text-color: white
          - type: "custom:no-card"
          - type: "custom:button-card"
            entity: script.controle_tv_sala_seta_baixo
            icon: mdi:menu-down
            style:
              - --disabled-text-color: --disabled-text-color
              - background-color: var(--paper-card-background-color)
          - type: "custom:no-card"
          - type: "custom:no-card"
          

      - type: horizontal-stack
        cards:
          - type: picture-elements
            image: /local/img/lovelace/button-label.png
            elements:
              - type: service-button
                title: "NET"
                service: media_player.select_source
                service_data:
                  entity_id: media_player.tv_sala
                  source: "HDMI 4"
                style:
                  left: 52%
                  top: 50%
                  font-size: 1.5em
          - type: picture-elements
            image: /local/img/lovelace/button-label.png
            elements:
              - type: service-button
                title: "Apple TV"
                service: media_player.select_source
                service_data:
                  entity_id: media_player.tv_sala
                  source: "HDMI 3"
                style:
                  left: 52%
                  top: 50%
                  font-size: 1.5em
          - type: picture-elements
            image: /local/img/lovelace/button-label.png
            elements:
              - type: service-button
                title: "AUX"
                service: media_player.select_source
                service_data:
                  entity_id: media_player.tv_sala
                  source: "HDMI 2"
                style:
                  left: 52%
                  top: 50%
                  font-size: 1.5em
                  
      - type: horizontal-stack
        cards:
          - type: picture-elements
            image: /local/img/lovelace/button.png
            elements:
              - type: image
                image: "/local/img/canais/netflix.png"
                service: script.controle_tv_sala_netflix
                tap_action: call-service
                style:
                  left: 50%
                  top: 50%
                  icon-size: 50px
                  width: 90%
          - type: picture-elements
            image: /local/img/lovelace/button.png
            elements:
              - type: image
                image: "/local/img/canais/globo2.png"
                service: script.tv_sala_globo
                tap_action: call-service
                style:
                  left: 50%
                  top: 50%
                  width: 90%
          - type: picture-elements
            image: /local/img/lovelace/button.png
            elements:
              - type: image
                image: "/local/img/canais/natgeo.png"
                service: script.tv_sala_natgeo
                tap_action: call-service
                style:
                  left: 50%
                  top: 50%
                  width: 90%
          - type: picture-elements
            image: /local/img/lovelace/button.png
            elements:
              - type: image
                image: "/local/img/canais/discovery.png"
                service: script.tv_sala_discovery
                tap_action: call-service
                style:
                  left: 50%
                  top: 50%
                  width: 90%
                  
                  
                  
                  
      - type: horizontal-stack
        cards:
          - type: picture-elements
            image: /local/img/lovelace/button.png
            elements:
              - type: image
                image: "/local/img/canais/history.png"
                service: script.tv_sala_history
                tap_action: call-service
                style:
                  left: 50%
                  top: 50%
                  width: 90%
          - type: picture-elements
            image: /local/img/lovelace/button.png
            elements:
              - type: image
                image: "/local/img/canais/discovery_turbo.png"
                service: script.tv_sala_discovery_turbo
                tap_action: call-service
                style:
                  left: 50%
                  top: 50%
                  icon-size: 50px
                  width: 90%
          - type: picture-elements
            image: /local/img/lovelace/button.png
            elements:
              - type: image
                image: "/local/img/canais/pfc.png"
                service: script.tv_sala_pfc
                tap_action: call-service
                style:
                  left: 50%
                  top: 50%
                  width: 90%
          - type: picture-elements
            image: /local/img/lovelace/button.png
            elements:
              - type: image
                image: "/local/img/canais/combate.png"
                service: script.tv_sala_combate
                tap_action: call-service
                style:
                  left: 50%
                  top: 50%
                  width: 90%
                  
      - type: horizontal-stack
        cards:
          - type: picture-elements
            image: /local/img/lovelace/button.png
            elements:
              - type: image
                image: "/local/img/canais/sportv.png"
                service: script.tv_sala_sportv
                tap_action: call-service
                style:
                  left: 50%
                  top: 50%
                  width: 90%
          - type: picture-elements
            image: /local/img/lovelace/button.png
            elements:
              - type: image
                image: "/local/img/canais/axn.png"
                service: script.tv_sala_axn
                tap_action: call-service
                style:
                  left: 50%
                  top: 50%
                  icon-size: 50px
                  width: 90%
          - type: picture-elements
            image: /local/img/lovelace/button.png
            elements:
              - type: image
                image: "/local/img/canais/telecine.png"
                service: script.tv_sala_telecine
                tap_action: call-service
                style:
                  left: 50%
                  top: 50%
                  width: 90%
          - type: picture-elements
            image: /local/img/lovelace/button.png
            elements:
              - type: image
                image: "/local/img/canais/hbo.png"
                service: script.tv_sala_hbo
                tap_action: call-service
                style:
                  left: 50%
                  top: 50%
                  width: 90%
5 Likes

#40

That looks great! Where is this no-card ?

0 Likes