Lovelace: Button card

Share your Projects! Dashboards & Frontend
3710

If it goes on and then back off, it’s something else I think.

To debug you can do:

  sonos_master:
    card:
      variables:
        test: "[[[ console.log(`input_select.sonos_master's state: '${entity.state}'`) ]]]"
      entity: input_select.sonos_master
      name: '[[name]]'
      state:
        - color: var(--primary-color)
          value: '[[value]]'
      tap_action:
        action: call-service
        service: input_select.select_option
        service_data:
          entity_id: input_select.sonos_master
          option: '[[value]]'
      template: input_button_thick_name
      type: custom:button-card

And then check your js console for the state (it will probably be displayed 5 times because you have 5 buttons). It will be enclosed in quotes so that you can see if there’s something wrong.

3711

This may be a total newb question, but how do i do that?

3712

See here: https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins#browser-console

3713

Thanks. The console shows it returning the correct state. And when I enter the view, the correct button is “on”, then it goes “off” and a couple of seconds later comes “on” again. The whole time showing this:

image
image800×38 1.81 KB

3714

When you change the view, it’s replaying the whole history of your state change (I think that’s a lovelace thing? I can see that happening on my side also for a long time).
Because you have 105 messages, this also means you had 21 state change of your input_select while the view was not displayed (or maybe displayed ?) or because you still have triggers_update: all in your config (105 messages / 5 buttons = 21 state change)

3715

ok, I removed triggers_update: all, now the button does not update at all until I click on a different button. The console is still showing the correct state but it is never refreshing (only 5 messages). I am very sure this was not the case when i first set up these buttons, when I entered the view, the proper button was always “on”. Why would the button not turn “on” if the state matches?

3716

Hey I just updated to 0.109 and there are two issues I am facing:

  1. Text (for my headings) that is size 32px is being cut off from the bottom. Text below 16px is not being cut off. Before the update, the text was not cut off.

  2. Some cards are showing the entity state as all lowercase (ex: “closed” whereas previously they would show “Closed”). This is not an issue with any regular home assistant cards.

I’ve tried restarting HA and reinstalling button card but to no avail. Any fixes for these two issues?

3717

Fix already pushed, but I didn’t release yet.
In the meantime, you can do this:

styles:
  card:
   - line-height: normal

What does “some” mean?

3718

The only reason I can think of would be that the state doesn’t match or that you have competing css settings.
Could you share your template? (I have the same setup as you with input_select and for me it’s working fine)

3719

Apologies for the lack of clarity.

When I mean some, I mean that the entities belonging to the domains cover, media_player, and lock show their states as lowercase. For example, “closed” instead of “Closed”, and “idle” instead of “Idle”, etc.

Entities belonging to the domains group, light, binary_sensor, and switch show their states correctly formatted.

3720

Ok, there was probably an update with how the translations work. Could you file a bug on github please? I’ll have a look.

3722

*I accidentally submitted my previous post without replying back to you. Here it is below:

Just submitted the bug on Github. Thank you for your quick replies and help. Your card is the primary reason I enjoy Home Assistant so much.

3723

Looking for some help. I’m trying to set the icon color based on the state of a different entity, but it’s not working for me.
I should mention that I was trying to get this to work prior to .109 / 3.3.1 and it’s still failing, but possibly for a different reason.
Prior to .109 / 3.3.1 the JS would return something like RGB(123,123,123) but the icon color still remained white.
After .109 / 3.3.1 the JS returns RGB(UNDEFINED).

My card:

entity: input_boolean.music_sync_office
name: Music Sync
state:
  - color: var(--disabled-text-color)
    icon: 'mdi:lightbulb-group-off-outline'
    value: 'off'
  - color: |-
      [[[ 
        return 'rgb(' + states['light.office_lamp'].attributes.rgb_color + ')';
      ]]]
    icon: 'mdi:lightbulb-group'
    name: 'Music Sync'
    value: 'on'
template: my-button-card-default
type: 'custom:button-card'
3724

Would there be a possibility to fill the background for say 50% (like the big number card) ?
The big number card appears to not being maintained anymore, and it also does not support tap/hold/…

1 Like
3725

:tada::tada: Version 3.3.2 :tada::tada:

Bugfixes

  • Fix text would be cropped with 0.109 (Fix #316)
  • Fix for translations not behaving properly with 0.109 (Fix #319)
3 Likes
3726

Because rgb_color in states['light.office_lamp'].attributes.rgb_color is probably undefined. Also rgb_color is an array (when it’s not undefined) so you can’t use it directly. To access each value you would have to use rgb_color[0], rgb_color[1] and rgb_color[2].

Yes, like this (assuming your entity is a sensor that goes from 0 to 100, else you’d have to convert it to a 0 to 100 range):

styles:
  card:
    - background-color: |
        [[[
          const value = Number(entity.state);
          const color_left = 'rgba(255,0,0,0.8)'; // red
          const color_right = 'rgba(236,255,0,1)';  // yellow
          return `linear-gradient(to right, ${color_left} 0%, ${color_left} ${value}%, ${color_right} ${value}%, ${color_right} 100%)`;
        ]]]
3727

Ok - so I determined that the rgb_color was undefined until I changed the bulb’s color… then it existed. :man_shrugging:

So, now I’m using your suggestion but getting the same result (the icon stays white):

- color: |-
      [[[ 
        return 'rgb(' + states['light.office_lamp'].attributes.rgb_color[0] + ',' + states['light.office_lamp'].attributes.rgb_color[1] + ',' + states['light.office_lamp'].attributes.rgb_color[2] + ')';
      ]]]

I can see that what is returned is correct: RGB(255,36,41) so I’m assuming it has something to do with variable type? All of the JS (and an awful lot of the YAML) I know, I’ve just learned while designing my Lovelace UI :slight_smile:

3728

Thanks for your quick reply @RomRider

However, the code appears to no work :frowning:

              - type: custom:button-card
                icon: mdi:lightbulb
                aspect_ratio: 1/1
                name: Test
                entity: sensor.zonneboiler_temp2
                styles:
                  card:
                    - background-color: |
                        [[[
                          const value = Number(entity.state);
                          const color_left = 'rgba(255,0,0,0.8)'; // red
                          const color_right = 'rgba(236,255,0,1)';  // yellow
                          return `linear-gradient(to right, ${color_left} 0%, ${color_left} ${value}%, ${color_right} ${value}%, ${color_right} 100%)`;
                        ]]]
3729

color doesn’t support template, probably something I should add. Instead move that same template to:

state:
  - value: 'on'
    styles:
      icon:
        - color: |-
            [[[ 
              return 'rgb(' + states['light.office_lamp'].attributes.rgb_color[0] + ',' + states['light.office_lamp'].attributes.rgb_color[1] + ',' + states['light.office_lamp'].attributes.rgb_color[2] + ')';
            ]]]
3730

Sorry, the property background-color doesn’t support gradients, instead it’s background :smiley:

              - type: custom:button-card
                icon: mdi:lightbulb
                aspect_ratio: 1/1
                name: Test
                entity: sensor.zonneboiler_temp2
                styles:
                  card:
                    - background: |
                        [[[
                          const value = Number(entity.state);
                          const color_left = 'rgba(255,0,0,0.8)'; // red
                          const color_right = 'rgba(236,255,0,1)';  // yellow
                          return `linear-gradient(to right, ${color_left} 0%, ${color_left} ${value}%, ${color_right} ${value}%, ${color_right} 100%)`;
                        ]]]
1 Like