Lovelace: Button card

HomeAutoFred · June 16, 2019, 6:43pm

Here is an interesting problem I have with my config.

My blind open/ closed button does not seem to obey the theme that has been applied to each button. You can see from the following two pictures that the on/ off - open/ closed states are completely different - the blind produces a black icon and black border where it should be yellow ?!?!

Is this because the button card is reading the states on/ off only and does not understand the open/ closed states?

States:
Capture1 Capture2

Anchor:

  standard_button_style2: &standardbuttonstyle2
       type: "custom:button-card"
       color: auto
       show_label: true
       show_state: true
       show_name: true
       styles:  
         card:
           - border-radius: 12px
           - height: 63px
           - width: 63px
           - margin: 8px 8px 4px 0px
         label:
           - font-size: 9px
           - font-family: Helvetica
           - padding: 0px 6px
           - justify-self: start
         state:
           - font-size: 9px
           - font-family: Helvetica
           - justify-self: start
           - text-transform: capitalize
           - padding-left: 6px
         grid:
           - grid-template-areas: '"i" "n" "s" "l"'
           - grid-template-columns: 1fr
           - grid-template-rows: 1fr min-content min-content
         img_cell:
           - justify-content: start
           - align-items: start
           - margin-right: 25%
         name:
           - justify-self: start
           - padding-left: 6px
           - font-weight: bold
           - font-family: Helvetica 
           - font-size: 9px
         icon:
           - align-self: flex-start
           - height: 62%
           - width: 62%
       state:
         - value: "closed"
           styles:
             card:
               - box-shadow: 0px 0px 10px 3px var(--button-card-light-color)

       hold_action:
         action: more-info
       tap_action:
         action: call-service
         service: script.turn_on
         service_data:
           entity_id: script.lounge_blind_toggle

RomRider · June 16, 2019, 7:50pm

To merge states when using templates you have to declare an id, see documentation and an example here

Yes it’s only on/off, you can use the state object to do what you want, see here

And you have lots of examples here in the forum also.

VDRainer · June 16, 2019, 8:47pm

Yeah, i saw this, but to be honest, it took some time for me to understand it.
Got it now, thanks alot!

HomeAutoFred · June 17, 2019, 3:31pm

Yes it’s only on/off, you can use the state object to do what you want, see here

And you have lots of examples here in the forum also.

Thank you for the response and understood - the problem that ‘I think I have’ is that the inherited style from the master theme is being ignored - for example when I apply a box shadow color directly as below this works:

       state:
         - value: "closed"
           operator: '=='
           styles:
             card:
               - box-shadow: 0px 0px 10px 3px blue

       state:
         - value: "open"
           operator: '=='
           styles:
             card:
               - box-shadow: 0px 0px 10px 3px red

…but when I apply a variable to match the currently applied theme as below:

       state:
         - value: "closed"
           operator: '=='
           styles:
             card:
               - box-shadow: 0px 0px 10px 3px var(--button-card-light-color)

This is being ignored.

Is this because the variable that is being applied does not match the entity type i.e. a switch?

RomRider · June 17, 2019, 3:53pm

You have 2 state objects in your config, but it’s an array. See here for an example: https://github.com/custom-cards/button-card/blob/master/README.md#with-operator-on-state

HomeAutoFred · June 17, 2019, 5:31pm

I have it working now by using the following snippet

       state:
         - value: 'open'
           operator: '=='
           color: var(--paper-item-icon-color)

         - value: 'closed'
           operator: '=='
           color: var(--paper-item-icon-active-color)
           styles:
             card: 
               - box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)

Just so that I understand correctly I have to match all values in the array and be explicit in the styles that are applied for this instance (open/ closed) for it to work correctly?

RomRider · June 17, 2019, 8:01pm

Yes, that’s the idea. You declare the states that you want to match (BTW, operator: '==' is the default, you don’t have to explicitly write it), and for each one you apply your specificities. It can be styles, or icons or specific labels, names, …
You can also use the operator: default to match everything that didn’t match a state in the array, it’s like an else.
The order in which you put the entries in the state object matters. The first one to match will be used (meaning if you put default at the beginning, nothing else after will match for example)

HomeAutoFred · June 17, 2019, 9:42pm

That makes perfect sense now

Thank you

tismondo · June 19, 2019, 4:10pm

I’ve made a very simple button card using the icon_state_name2nd layout but am having some spacing/alignment issues. I’m sure its user error but can’t figure out what I’m doing wrong.

      - entity: light.alfred
        layout: icon_state_name2nd
        show_last_changed: true
        show_state: false
        size: 30%
        styles:
          label:
            - font-size: 9px
            - padding-right: 15px
            - justify-self: right
          name:
            - justify-self: right
            - padding-right: 15px
        tap_action:
          action: toggle
        type: 'custom:button-card'

The card looks like this:
deleteme1
which as you can see has a lot of wasted space at the top and the icon is not aligned with the text. I’ve tried removing top padding, etc using styles but it seems like the card is holding that space for a state element (but of course I’m not displaying one; by default it’s turned off and as you can see in my config I even tried forcing it off using show_state: false but the space won’t go away) If I turn on show_state: true everything looks balanced, the state text “Off” appears and everything looks aligned… but I’m not interested in displaying the state on the card.

How do I keep it off and properly align everything?

sbmlat · June 20, 2019, 3:33am

What were those RSSI multi sensors?

Pretty good interface.

RomRider · June 20, 2019, 6:10am

It’s probably a slight CSS bug on my side, I’ll have a look but I’m traveling currently that’s why I’m a bit silent

tismondo · June 20, 2019, 6:30am

Ah, cheers for the quick reply. I’ve been able to get it mostly aligned by limiting the card height and forcing some craziness in the amount of padding used. It’s still slightly off balance but much better than pictured above.

If you think it might be a bug, is it useful for me to submit a bug report or is my post above sufficient?

roflcoopter · June 20, 2019, 10:51am

I’m trying to do some slight altering of the code to test some stuff, are there any instructions on how to build this locally? Cant find any on github

iantrich · June 20, 2019, 12:20pm

npm install
npm run build

tomerbs · June 21, 2019, 2:57pm

Hi Simbesh,

Do you mind sharing your fan code.

Thanks

jarrah · June 21, 2019, 3:45pm

That would be from the old version of this button card and unlikely to be code compatible unfortunately. Latest version can be found here: https://github.com/custom-cards/button-card

hoffdad · June 21, 2019, 7:10pm

I tried looking through this entire thread, and still can’t figure out if there’s a way to change both icon and card color with state changes… anyone successfully get it to work and could provide an example?

iantrich · June 21, 2019, 8:24pm

super basic example

      - type: custom:button-card
        entity: switch.livingroom_lamp
        state:
          - styles:
              card:
                - '--paper-card-background-color': white
              icon:
                - color: yellow
              value: 'on'

iantrich · June 23, 2019, 10:50pm

I’ve been using the simple-weather-card for awhile now, but have recently went all in with button-card. .So to replace that information I came up with my own Dark Sky button-card and wanted to share:
Note: I haven’t tested all weather conditions, so there might be some bugs in the state section

type: custom:button-card
entity: weather.dark_sky
name_template: "return states['weather.dark_sky'].attributes.temperature + '°F - ' + states['weather.dark_sky'].attributes.forecast[0].temperature + '°F / ' + states['weather.dark_sky'].attributes.forecast[0].templow + '°F'"
label_template: "return '\U0001F4A7 ' + (states['weather.dark_sky'].attributes.forecast[0].precipitation || 0) + ' in';"
color: auto
icon: mdi:weather-sunny
size: 30%
show_state: true
show_label: true
tap_action:
  action: more-info
  haptic: light
state:
  - value: clear-night
    icon: mdi:weather-night
  - value: cloudy
    icon: mdi:weather-cloudy
  - value: overcast
    icon: mdi:weather-cloudy-arrow-right
  - value: fog
    icon: mdi:weather-fog
  - value: hail
    icon: mdi:weather-hail
  - value: lightning
    icon: mdi:weather-lightning
  - value: lightning-rainy
    icon: mdi:weather-lightning-rainy
  - value: partlycloudy
    icon: mdi:weather-partlycloudy
  - value: pouring
    icon: mdi:weather-pouring
  - value: rainy
    icon: mdi:weather-rainy
  - value: snowy
    icon: mdi:weather-snowy
  - value: snowy-rainy
    icon: mdi:weather-snowy-rainy
  - value: sunny
    icon: mdi:weather-sunny
  - value: windy
    icon: mdi:weather-windy
  - value: windy-variant
    icon: mdi:weather-windy-variant
styles:
  card:
    - border-radius: 12px
    - width: 105px
    - height: 105px
    - --paper-card-background-color: white
  label:
    - color: gray
    - font-size: 11px
    - font-family: Helvetica
    - padding: 0px 10px
    - justify-self: start
  state:
    - font-size: 11px
    - font-family: Helvetica
    - padding: 0px 10px
    - justify-self: start
    - text-transform: capitalize
    - font-weight: bold
    - padding-left: 10px
    - color: gray
  grid:
    - grid-template-areas: '"i" "n" "s" "l"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content
  img_cell:
    - align-self: start
    - text-align: start
    - margin-right: 60px
  name:
    - justify-self: start
    - padding-left: 10px
    - font-weight: bold
    - font-family: Helvetica 
    - font-size: 11px
    - color: gray
  icon:
    - color: gray

iantrich · June 23, 2019, 11:09pm

I replaced my lovelace-flower-card with a button-card as well. I chose to not display light and temperature levels as those are not usually something I need at a glance, but more so at a historical/graphical level. I have those displayed in a custom popup-card using mini-graph-card

type: custom:button-card
entity: sensor.palm_moisture
name: Majesty Palm
label_template: "return states['sensor.palm_conductivity'].state + 'µS/cm | \U0001F50B' + states['sensor.palm_battery'].state + '%'"
entity_picture: /local/ravenea rivularis.jpg
size: 30%
show_entity_picture: true
show_state: true
show_label: true
tap_action:
  action: more-info
  haptic: light
state:
  - operator: '>'
    styles:
      card:
        - filter: opacity(50%)
    value: 20
styles:
  card:
    - border-radius: 12px
    - width: 105px
    - height: 105px
    - --paper-card-background-color: white
  label:
    - color: gray
    - font-size: 10px
    - font-family: Helvetica
    - padding: 0px 10px
    - justify-self: start
  state:
    - font-size: 11px
    - font-family: Helvetica
    - padding: 0px 10px
    - justify-self: start
    - text-transform: capitalize
    - font-weight: bold
    - padding-left: 10px
    - color: gray
  grid:
    - grid-template-areas: '"i" "n" "s" "l"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content
  img_cell:
    - align-self: start
    - text-align: start
    - margin-right: 60px
  name:
    - justify-self: start
    - padding-left: 10px
    - font-weight: bold
    - font-family: Helvetica 
    - font-size: 11px
    - color: gray
  icon:
    - color: gray

Shoutout to @jimz011 for the styles