Lovelace: Button card

jimz011 · March 28, 2019, 12:59am

@DavidFW1960 My solution is probably worse though, a lot of code to accomplish a simple thing. It could however work fine if the colors in the card work for both themes (or apply some more transparancy to it). I only use one theme at the moment (I might work on making a day theme as well, but for now I am too busy reworking my entire frontend to be more simple, elegant and wife friendly).

ofcourse I will share the code:

              - cards:
                  - type: custom:state-switch
                    entity: light.woonkamer_plafond
                    states:
                      "on":
                         type: 'custom:card-modder'
                         style:
                           border-radius: 20px
                           border-style: solid
                           border-width: 1px
                           border-color: '#e5e5e5'
                           --paper-card-background-color: rgba(20, 20, 20, 0.4)
                           height: 50px 
                           padding: 20%
                           font-size: 13px
                         card:
                           entity: light.woonkamer_plafond
                           icon: 'mdi:ceiling-light'
                           name: Plafond
                           type: entity-button
                           tap_action:
                             action: toggle
                           hold_action: 
                             action: more-info
                      "off":
                         type: 'custom:card-modder'
                         style:
                           border-radius: 20px
                           box-shadow: 2px 2px rgba(0,0,0,0.3) 
                           height: 50px 
                           padding: 20%
                           font-size: 13px
                         card:
                           entity: light.woonkamer_plafond
                           icon: 'mdi:ceiling-light'
                           name: Plafond
                           type: entity-button
                           tap_action:
                             action: toggle
                           hold_action: 
                             action: more-info
                      "unavailable":
                         type: 'custom:card-modder'
                         style:
                           border-radius: 20px
                           box-shadow: 2px 2px rgba(0,0,0,0.3) 
                           height: 50px 
                           padding: 20%
                           font-size: 13px
                         card:
                           entity: light.woonkamer_plafond
                           icon: 'mdi:ceiling-light'
                           name: Plafond
                           type: entity-button
                           tap_action:
                             action: toggle
                           hold_action: 
                             action: more-info
                  - type: custom:state-switch
                    entity: light.eettafel_lamp
                    states:
                      "on":
                         type: 'custom:card-modder'
                         style:
                           border-radius: 20px
                           border-style: solid
                           border-width: 1px
                           border-color: '#e5e5e5'
                           --paper-card-background-color: rgba(20, 20, 20, 0.4)
                           height: 50px 
                           padding: 20%
                           font-size: 13px
                         card:
                           entity: light.eettafel_lamp
                           icon: 'mdi:ceiling-light'
                           name: Eettafel
                           type: entity-button
                           tap_action:
                             action: toggle
                           hold_action: 
                             action: more-info
                      "off":
                         type: 'custom:card-modder'
                         style:
                           border-radius: 20px
                           box-shadow: 2px 2px rgba(0,0,0,0.3) 
                           height: 50px 
                           padding: 20%
                           font-size: 13px
                         card:
                           entity: light.eettafel_lamp
                           icon: 'mdi:ceiling-light'
                           name: Eettafel
                           type: entity-button
                           tap_action:
                             action: toggle
                           hold_action: 
                             action: more-info
                      "unavailable":
                         type: 'custom:card-modder'
                         style:
                           border-radius: 20px
                           box-shadow: 2px 2px rgba(0,0,0,0.3) 
                           height: 50px 
                           padding: 20%
                           font-size: 13px
                         card:
                           entity: light.eettafel_lamp
                           icon: 'mdi:ceiling-light'
                           name: Eettafel
                           type: entity-button
                           tap_action:
                             action: toggle
                           hold_action: 
                             action: more-info
                  - type: custom:state-switch
                    entity: light.tafel_lamp
                    states:
                      "on":
                         type: 'custom:card-modder'
                         style:
                           border-radius: 20px
                           border-style: solid
                           border-width: 1px
                           border-color: '#e5e5e5'
                           --paper-card-background-color: rgba(20, 20, 20, 0.4)
                           height: 50px 
                           padding: 20%
                           font-size: 13px
                           white-space: nowrap
                         card:
                           entity: light.tafel_lamp
                           icon: 'mdi:lamp'
                           name: Tafel Lamp
                           type: entity-button
                           tap_action:
                             action: toggle
                           hold_action: 
                             action: more-info
                      "off":
                         type: 'custom:card-modder'
                         style:
                           border-radius: 20px
                           box-shadow: 2px 2px rgba(0,0,0,0.3) 
                           height: 50px 
                           padding: 20%
                           font-size: 13px
                           white-space: nowrap
                         card:
                           entity: light.tafel_lamp
                           icon: 'mdi:lamp'
                           name: Tafel Lamp
                           type: entity-button
                           tap_action:
                             action: toggle
                           hold_action: 
                             action: more-info
                      "unavailable":
                         type: 'custom:card-modder'
                         style:
                           border-radius: 20px
                           box-shadow: 2px 2px rgba(0,0,0,0.3) 
                           height: 50px 
                           padding: 20%
                           font-size: 13px
                           white-space: nowrap
                         card:
                           entity: light.tafel_lamp
                           icon: 'mdi:lamp'
                           name: Tafel Lamp
                           type: entity-button
                           tap_action:
                             action: toggle
                           hold_action: 
                             action: more-info
                  - type: custom:state-switch
                    entity: light.vloerlamp_2
                    states:
                      "on":
                         type: 'custom:card-modder'
                         style:
                           border-radius: 20px
                           border-style: solid
                           border-width: 1px
                           border-color: '#e5e5e5'
                           --paper-card-background-color: rgba(20, 20, 20, 0.4)
                           height: 50px 
                           padding: 20%
                           font-size: 13px
                           white-space: nowrap
                         card:
                           entity: light.vloerlamp_2
                           icon: 'mdi:floor-lamp'
                           name: Vloer Lamp
                           type: entity-button
                           tap_action:
                             action: toggle
                           hold_action: 
                             action: more-info
                      "off":
                         type: 'custom:card-modder'
                         style:
                           border-radius: 20px
                           box-shadow: 2px 2px rgba(0,0,0,0.3) 
                           height: 50px 
                           padding: 20%
                           font-size: 13px
                           white-space: nowrap
                         card:
                           entity: light.vloerlamp_2
                           icon: 'mdi:floor-lamp'
                           name: Vloer Lamp
                           type: entity-button
                           tap_action:
                             action: toggle
                           hold_action: 
                             action: more-info
                      "unavailable":
                         type: 'custom:card-modder'
                         style:
                           border-radius: 20px
                           box-shadow: 2px 2px rgba(0,0,0,0.3) 
                           height: 50px 
                           padding: 20%
                           font-size: 13px
                           white-space: nowrap
                         card:
                           entity: light.vloerlamp_2
                           icon: 'mdi:floor-lamp'
                           name: Vloer Lamp
                           type: entity-button
                           tap_action:
                             action: toggle
                           hold_action: 
                             action: more-info
                type: horizontal-stack

This is just a single row of 4 buttons. As you can see the code to achieve this the way I have done it is massive, though in all fairness I haven’t found any performance differences (but then again I run HA on a hexacore i7 along with some other virtual machines).

Took me a while to rewrite all of my previously existing code to the way it is now and I might rewrite everything again if this would ever be possible with the core entity button. Let me know what your thoughts on this would be.

DavidFW1960 · March 28, 2019, 1:06am

Ah I see you’re using card-modder and setting RGB as well so for mine, not much improvement of setting the theme and yours suffers from the same issue that if you switch theme, the colours of the button won’t change.

I think mine is simpler… In addition to the card above, I created a new theme for the on state called slateicon and it just has the one colour set in it like this:

    slateicon:                                    # Only used for Exit-Enter Button when ON
      paper-item-icon-color: '#b58e31'            # Set to var(--secondary-text-color) of current theme

Along with some instruction on how to edit it if I change theme from slate in the future. It does exactly what I was after though as I think this button-card has no future.

jimz011 · March 28, 2019, 1:31am

Exactly, I just use rgb to color the cards, that is why I said it will only work if the color can match both themes and my future day colors will be in the same line just lighter. Your way looks much better though, a lot less code, I might give that a try though. But will need some rest as I have been playing around with css and the way I’ve currently done it for way too long. Took me hours to get it to look acceptable, took me weeks to finetune the stuff and will probably change it another dozen times.

JozMar · April 1, 2019, 6:19pm

Hi,

I have strange issue - the buttons calling services sudenly stopped working few days ago - I dont think I changed any cards code nor the related devices.

Below is my code

cards:
  - color_type: card
    entity: fan.air_purifier
    name: Air Purifier
    show_state: true
    state:
      - color: 'rgb(6, 175, 247)'
        value: 'on'
      - color: var(--disabled-text-color)
        value: 'off'
    type: 'custom:button-card'
  - cards:
      - action: service
        color_type: label-card
        entity: fan.air_purifier
        icon: 'mdi:fan'
        name: Turbo
        service:
          action: set_speed
          data:
            entity_id: fan.air_purifier
            speed: favorite
          domain: fan
        show_state: true
        state:
          - color: 'rgb(6, 175, 247)'
            value: 'on'
          - color: var(--disabled-text-color)
            value: 'off'
        type: 'custom:button-card'
      - action: service
        color_type: label-card
        entity: fan.air_purifier
        icon: 'mdi:alpha-a-circle-outline'
        name: Auto
        service:
          action: set_speed
          data:
            entity_id: fan.air_purifier
            speed: auto
          domain: fan
        show_state: true
        state:
          - color: 'rgb(6, 175, 247)'
            value: 'on'
          - color: var(--disabled-text-color)
            value: 'off'
        type: 'custom:button-card'
      - action: service
        color_type: label-card
        entity: fan.air_purifier
        icon: 'mdi:power-sleep'
        name: Silent
        service:
          action: set_speed
          data:
            entity_id: fan.air_purifier
            speed: sleep
          domain: fan
        show_state: true
        state:
          - color: 'rgb(6, 175, 247)'
            value: 'on'
          - color: var(--disabled-text-color)
            value: 'off'
        type: 'custom:button-card'
    type: horizontal-stack
type: vertical-stack

What can be wrong?

Rondom · April 2, 2019, 10:16pm

Hey.
You said that I could do this with the core entity button now but when I look at that I cant seem to find any option for changing the button size, icon size or use a “space-button” or find the option to show the state instead of the name…

Have I missed something here?

jimz011 · April 2, 2019, 10:23pm

Yeah I am sorry, I said it wrong as david pointed out. I use card modder with core entity button, for my code you can check here:

jumper · April 12, 2019, 2:35am

I need to set some values based on input_select. This doesn’t work:

 type: entity-button
 icon: mdi:youtube
 name: LIVETV
 entity: >
        {% if   states('input_select.firetv_choices') = 'FireTV Living Room' %}
            media_player.firetv_living_room
        {% elif states('input_select.firetv_choices') = 'FireTV Bedroom' %}
            media_player.firetv_bedroom
        {% endif %}

Any way to use templates in the stock or custom:button-cards? I really don’t want to create another sensor that just reports the state of an input_select…

iantrich · April 12, 2019, 3:03am

jumper · April 12, 2019, 3:17am

Now we’re talking. Thanks @iantrich. I’ll have a go at it.

Does it support custom_updater?
What’s the if - elseif - else syntax in cases where there’s more than two choices as covered by: logical_test ? ‘xx’ : ‘yy’

jumper · April 12, 2019, 4:41am

So, I get “Invalid Entry” in Lovelace for my button tied to this code. (input_select defaults to “FireTV Living Room”
Resource is as follows, and ‘js’ is at this location:

url: /local/config-template-card.js
type: module

      - type: horizontal-stack
        cards:
          - type: custom:card-modder
            card:
              type: 'custom:config-template-card'
              variables:
                - states['input_select.firetv_choices'].state
              entities:
                - input_select.firetv_choices
              card:
                type: custom:entity-button
                entities:
                  - entity: "${vars[0] === 'FireTV Living Room' ? 'media_player.firetv_living_room' : 'media_player.firetv_bedroom'}"
                    icon: mdi:youtube
                    name: LIVETV
                    hold_action: none
                    tap_action:
                      action: call-service
                      service: script.set_plex_to_livetv
                      service_data:
                        entity_id: "${vars[0] === 'FireTV Living Room' ? 'media_player.firetv_living_room' : 'media_player.firetv_bedroom'}"
                        command: "am start -a android.intent.action.VIEW -d -n com.google.android.youtube.tv/com.google.android.apps.youtube.tv.activity.ShellActivity"
            style:
              background-color: rgba(56,60,69,1)
              border-radius: 20px
              border: solid 3px rgba(118,185,0,1)
              box-shadow: 3px 3px rgba(0,0,0,0.4)

RomRider · April 13, 2019, 3:13pm

Hi @iantrich ,

I added an operator functionality to the state object, if anyone can check and merge if appropriate:
https://github.com/custom-cards/button-card/pull/80

Extract from the updated documentation:
The definition order matters, the first item to match will be the one selected.

              - type: "custom:button-card"
                entity: sensor.temperature
                show_state: true
                state:
                  - value: 15
                    operator: '<='
                    color: blue
                  - value: 25
                    operator: '>='
                    color: red
                  - operator: 'default' # used if nothing matches
                    color: yellow

Available operators:

Operator	`value` example	Description
`<`	`5`	State is inferior to `value`
`<=`	`4`	State is inferior or equal to `value`
`==`	`42`	State is equal (`===` javascript) to `value`
`>=`	`32`	State is superior or equal to `value`
`>`	`12`	State is superior to `value`
`!=`	`normal`	State is not equal (`!==` javascript) to `value`
`regex`	`'^norm.*$'`	`value` regex applied to State does match
`default`	N/A	If nothing matches, this is used

Cheers

iantrich · April 13, 2019, 8:32pm

Thanks to @RomRider, we have v0.0.7 which adds operators to state. See the updated documentation on how to utilize.

jimz011 · April 13, 2019, 8:36pm

If only this card would have a hold_action it would be the best entity card out there.

SeanM · April 14, 2019, 8:32am

Thanks for your great contribution @RomRider, I have been wanting this feature! I am going to update a bunch of my buttons now with this new functionality. So far I’ve made a battery one real quick that goes from green, yellow, orange, red as it depletes.

        - type: "custom:button-card"
          icon: mdi:battery
          name: Battery
          color_type: card
          entity: sensor.seans_iphone_xs_battery_level
          show_state: true
          state:
            - value: "10"
              operator: '<='
              color: "#FF0000" #red
            - value: "20"
              operator: '<='
              color: "#ff6600" #red orange
            - value: "30"
              operator: '<='
              color: "#ff9933" #dark orange
            - value: "40"
              operator: '<='
              color: "#ffcc00" #light orange
            - value: "50"
              operator: '<='
              color: "#FFFF00" #yellow
            - value: "60"
              operator: '<='
              color: "#FFFF00" #yellow
            - value: "70"
              operator: '<='
              color: "#FFFF00" #yellow
            - value: "80"
              operator: '<='
              color: "#CCFF33" #yellow green
            - value: "90"
              operator: '<='
              color: "#66FF33" #light green
            - value: "100"
              operator: '<='
              color: "#279b37" #darkgreen

I would really love to see support for changing the icons based on state as well, if that is possible. For example in this code block I just shared, it would be neat to change the battery icon to mdi:battery-90 , mdi:battery-80, mdi:battery-70, mdi:battery-60 etc.

RomRider · April 14, 2019, 11:47am

@SeanM, icon is supported as well! Just add icon: mdi:the_icon_you_want to each state, it can be a different icon per state of course.
But you’re right, there’s no example, I’m going to add this in the documentation!

SeanM · April 14, 2019, 3:21pm

Thank you for clarifying! After a bunch of testing it seems the problem I ran into is that when it’s set to color_type: card the different state icons do not work. Only when it’s set to color_type: icon does it work. Hopefully support could be added to color_type: card as well?

I think i found another issue, unless I messed up on the operators. The values I set for '<=' 100 is not displaying, and same thing for '<' 10. Here is animated gif screen recording: https://gfycat.com/DownrightNearCurassow

and the code i used to test:

input_number:
  test:
    name: Testing States
    icon: mdi:battery-charging-outline
    min: 0
    max: 100
    step: 5

And here is the states.

        - type: "custom:button-card"
          icon: mdi:battery
          # name: Battery
          color_type: icon
          entity: input_number.test
          show_state: true
          state:
            - value: "10"
              operator: '<'
              color: "#FF0000" #red
              icon: "mdi:battery-10"

            - value: "20"
              operator: '<='
              color: "#ff6600" #red orange
              icon: "mdi:battery-20"

            - value: "30"
              operator: '<='
              color: "#ff9933" #dark orange
              icon: "mdi:battery-30"

            - value: "40"
              operator: '<='
              color: "#ffcc00" #light orange
              icon: "mdi:battery-40"

            - value: "50"
              operator: '<='
              color: "#FFFF00" #yellow
              icon: "mdi:battery-50"

            - value: "60"
              operator: '<='
              color: "#FFFF00" #yellow
              icon: "mdi:battery-60"

            - value: "70"
              operator: '<='
              color: "#FFFF00" #yellow
              icon: "mdi:battery-70"

            - value: "80"
              operator: '<='
              color: "#CCFF33" #yellow green
              icon: "mdi:battery-80"

            - value: "90"
              operator: '<='
              color: "#66FF33" #light green
              icon: "mdi:battery-90"

            - value: "100"
              operator: '<='
              color: "#279b37" #dark green
              icon: "mdi:battery-full"

Not sure if this is a bug or issue with the way I used operators? Thanks again for this amazing addition!

RomRider · April 14, 2019, 6:09pm

Hey,

Going to check for the color_type: card

For your other problem, you should delete the quotes for the value and also the <= 100, the icon mdi:battery-full doesn’t exist, it should be mdi:battery
For me it works with the modifications above mentioned, result being:

  - type: "custom:button-card"
    icon: mdi:battery
    # name: Battery
    color_type: icon
    entity: input_number.test
    show_state: true
    state:
    - value: 10
      operator: '<'
      color: "#FF0000" #red
      icon: "mdi:battery-10"

    - value: 20
      operator: '<='
      color: "#ff6600" #red orange
      icon: "mdi:battery-20"

    - value: 30
      operator: '<='
      color: "#ff9933" #dark orange
      icon: "mdi:battery-30"

    - value: 40
      operator: '<='
      color: "#ffcc00" #light orange
      icon: "mdi:battery-40"

    - value: 50
      operator: '<='
      color: "#FFFF00" #yellow
      icon: "mdi:battery-50"

    - value: 60
      operator: '<='
      color: "#FFFF00" #yellow
      icon: "mdi:battery-60"

    - value: 70
      operator: '<='
      color: "#FFFF00" #yellow
      icon: "mdi:battery-70"

    - value: 80
      operator: '<='
      color: "#CCFF33" #yellow green
      icon: "mdi:battery-80"

    - value: 90
      operator: '<='
      color: "#66FF33" #light green
      icon: "mdi:battery-90"

    - value: 100
      operator: '<='
      color: "#279b37" #dark green
      icon: "mdi:battery"

RichardU · April 14, 2019, 6:19pm

I’m not having any luck changing icons by state. I’ve tried a bunch of values, operators, etc.

type: 'custom:button-card'
entity: switch.output_033
name: Mute Status
color_type: icon
show_state: true
state:
  - value: 'on'
    operator: ==
    icon: 'mdi:volume-off'
  - value: 'off'
    operator: ==
    icon: 'mdi:volume-high'
  - operator: 'default'
    icon: 'mdi:volume-off'

RomRider · April 14, 2019, 6:46pm

@RichardU your problem will be fixed with the latest PR (meanwhile, if you add icon: whatever to the main part of the button config, it should work. The problem was when there was no icon defined in the main part of the config):
https://github.com/custom-cards/button-card/pull/82

@SeanM, I’ve added support for color_type: card also in the same PR

iantrich · April 14, 2019, 9:37pm

Version 0.0.8

Fix state icon for color_type: card and equal operators
Fix missing icon when no icon in default config and state used