Lovelace: Button card

Wow!

I also tested the the last tested as part of the template, but it has to be formatted, and I prefer to have it on another row.

That’s what I needed, name_template, I’ll wait the new release!!

Thanks

cool, that’s why I asked @RomRider if he would consider adding that feature, and he did! so nice when a component has true and dedicated development. Great you got it working. O, and you can add a line break in the template to have it show on an extra line.

When you use the color_type: card, the text and icon color will be either black or white based on the background luminance. You can override it by setting a fixed style for name

1 Like

Just downloaded the “beta” 1.10 and all is working fine

42

          - type: "custom:button-card"
            color_type: icon
            entity: sensor.qnapb3c_cpu_usage
            icon: mdi:chip
            size: 30px
            name_template: >
              return 'CPU: ' + entity.state + '%';
            show_label: true
            show_name: true
            action: none
            styles:
              icon:
                - height: 18px
              card:
                - height: 80px
              label:
                - font-size: 12px
            show_last_changed: true

Thanks again!

1 Like

yes, Ive found out in the meantime, thanks this is working great at the moment. Ive even tested to have the default color set in the template and override it only when operator: template evaluates to true. Works like a charm!

      - type: custom:button-card
        template: button_picture_script_small
        name: Clear
        entity_picture: '/local/hue_scenes/clear.png'
        tap_action:
          action: call-service
          service: script.tiles_set_hue_scene
          service_data:
            option: 'Helder'
        state:
          - operator: template
            value: >
              return states['input_select.hue_scenes'].state === 'Helder'
            color: '#fcdb97'
#          - operator: default
#            color: grey

and template:

button_picture_script_small:
  size: 70%
  show_state: false
  show_label: false
  show_name: true
  show_entity_picture: true
  color_type: card
  tap_action:
    action: toggle
    haptic: light
  hold_action:
    action: more-info
    haptic: success
  styles:
    card:
      - border-radius: 12px
      - width: 70px
      - height: 70px
    name:
#      - justify-self: start
      - padding-left: 3px
      - font-weight: bold
      - font-family: Helvetica 
      - font-size: 13px
  state:
    - operator: default
      color: grey

truly minimizes the config, and makes it very robust. Thanks again!

1 Like

One question, I see two tap_action (one in the template and one in the main code) and no condition, which one is going to be used?

ha, missed that copying from another template, thanks! Doesn’t really trouble since the config overrides the template…
but it can (should) be left out from the template in this setting probably, or at least be minimized to the haptic. Will see if they merge the way.

I’m new with templates, so I’m trying to do this

              - type: "custom:button-card"
                template: qnap_button_card_template
                entity: sensor.qnapb3c_cpu_usage
                icon: mdi:chip
                name_template: >
                  return 'CPU: ' + entity.state + '%';

and the template

qnap_button_card_template:
  color_type: icon
  size: 30px
  show_label: true
  show_name: true
  action: none
  styles:
    icon:
      - height: 18px
    card:
      - height: 80px
    name:
      - color: white
      - font-size: 16px
    label:
      - font-size: 12px
  show_last_changed: true

where I should put the template in ui-lovelace.yaml ?

Some place specific ?

I’ve put at the end of the file and also within the tab where the card is defined, but it does not work

Thanks

no that won’t work, the template should be a global HA template, so place (or reference) it in ui-lovelace.yaml.

Are you using yaml mode? If so you can do this (of course adapt to your file/folder structure):

##############################################################################################################
# Mqtt Hub Lovelace configuration file, calling all Views via !include /config/lovelace/view_***
# for ease of editing the separate Views, and prevent errors while doing so to the full setup
##############################################################################################################

title: Mqtt Hub Lovelace
resources: !include /config/lovelace/resources/resources.yaml
button_card_templates: !include lovelace/includes/button_card_templates.yaml

etcetc

and have the button_cards_templates.yaml contain the templates:

button_picture_script_small:
  size: 70%
  show_state: false
  show_label: false
  show_name: true
  show_entity_picture: true
  color_type: card
  tap_action:
#    action: toggle
    haptic: light
  hold_action:
#    action: more-info
    haptic: success
  styles:
    card:
      - border-radius: 12px
      - width: 70px
      - height: 70px
    name:
#      - justify-self: start
      - padding-left: 3px
      - font-weight: bold
      - font-family: Helvetica 
      - font-size: 13px
  state:
    - operator: default
      color: grey

Yes, I’m using yaml mode, I’ve put after the resources: without using the !include way and strangely does not work

title: My home
resources:
  - url: /customcards/custom-lovelace/thermostat-card/thermostat-card.js?track=true
    type: module
.....

qnap_button_card_template:
  color_type: icon
  size: 30px
  show_label: true
  show_name: true
  action: none
  styles:
    icon:
      - height: 18px
    card:
      - height: 80px
    name:
      - color: white
      - font-size: 16px
    label:
      - font-size: 12px
  show_last_changed: true

EDIT:

Done it!

I’ve done your way, with includes, and now it’s working, I was missing the button_card_templates: and then the template

1 Like

Cool, it took me some time, but I have some working result now. From here I can build it out to include more stuff. Thanks for the help.

Result:

5 Likes

hello
is there anyway to define color according to lamp color (xiaomi) to the text only when on

image

i search this solution that is not the ideal for me…the real want that i wish is somethink like this:

image

looking very nice indeed!
how did you calculate the buttons widths, above the actual light buttons?

also, I take it this is desktop view? does it fit the mobile device also?

You can have the buttons call the MQTT service in the on tap action and then have something listen for the correct messages. I do all my logic in node red so i have node red listen for some mqtt actions. This is how I do the dim lights button below where it sends a message to mqtt and node red listens and dims some lights and turns some off.

image

I would like to have a card like yours for my fan/light. Right now I have the below setup but yours is much more compact.

image

If you want something that works right now, pop over to the fan-control-entity-row page and setup the custom card. This card works well is the inspiration behind my attempt to recreate it using button-card.

If you’d rather work from my incomplete configuration, here it is. As of now, the fan speed, on/off button and the button coloring are either incomplete. don’t work, or both. Also, don’t forget to change my entity ids to your own.

I offer this purely as a courtesy. As I said, this only partially works in my environment. I may abandon my efforts since it appears that to do this properly, I may have to learn Jinja 2 which may be outside of my capacity to do at this point. Good luck!

Button Templates

button_card_templates:
  ceiling-fan-icon-settings:
    show_icon: true
    show_label: false
    show_name: false
    styles:
      card:
        - height: 36px
        - width: 50px
      grid:
        - grid-template-areas: '"i"'
        - grid-template-columnns: auto
      icon:
        - height: 26px
        - width: 26px
    state:
      - value: 'on'
        # styles:
        #   icon:
        spin: true

  ceiling-fan-name-settings:
    show_icon: false
    show_label: false
    show_name: true
    styles:
      card:
        - height: 36px
      grid:
        - grid-template-areas: '"n"'
        - grid-template-columnns: auto
      name:
        - justify-self: start
    state:
      - value: 'on'
        styles:
          name:
            color_type: icon
            color: rgb(181, 142, 49)

  fan-speed-settings:
    show_icon: false
    styles:
      card:
        - height: 35px
        - font-size: 12px
        - width: 35px
        - border: 1px solid white
        - border-radius: 5px
        - text-transform: uppercase
        - --paper-card-background-color: grey
      icon:
        - icon-size: 14px
    state:
      - value: 'on'
        styles:
          name:
            - color: blue
      - value: 'off'
        styles:
  vertical-divider-grey:
    color_type: blank-card
    styles:
      card:
        - width: 3px
        - color: '#292929'

  horizontal-divider-grey:
    color_type: blank-card
    styles:
      card:
        - height: 3px
        - background-color: '#292929'

  horizontal-divider-blk:
    color_type: blank-card
    styles:
      card:
        - height: 3px
        - background-color: '#222222'

Card

- type: custom:vertical-stack-in-card
  cards:
    - type: custom:button-card
      template: horizontal-divider-grey
    - type: horizontal-stack
      cards:
        - type: custom:button-card
          template: ceiling-fan-icon-settings
          entity: fan.living_room_fan
          tap_action:
            action: call-service
            service: fan.toggle
            service_data:
              entity_id: fan.living_room_fan
        - type: custom:button-card
          template: vertical-divider-grey
        - type: custom:button-card
          template: ceiling-fan-name-settings
          entity: fan.living_room_fan
          name: Fan
          tap_action:
            action: call-service
            service: fan.toggle
            service_data:
              entity_id: fan.living_room_fan

        - type: custom:button-card
          entity: fan.living_room_fan
          template: fan-speed-settings
          name: low
          tap_action:
            action: call-service
            service: fan.set_speed
            service_data:
              entity_id: fan.living_room_fan
              speed: low
        - type: custom:button-card
          template: vertical-divider-grey
        - type: custom:button-card
          entity: fan.living_room_fan
          template: fan-speed-settings
          name: med
          tap_action:
            action: call-service
            service: fan.set_speed
            service_data:
              entity_id: fan.living_room_fan
              speed: medium
        - type: custom:button-card
          template: vertical-divider-grey
        - type: custom:button-card
          entity: fan.living_room_fan
          template: fan-speed-settings
          name: high
          tap_action:
            action: call-service
            service: fan.set_speed
            service_data:
              entity_id: fan.living_room_fan
              speed: high
        - type: custom:button-card
          template: vertical-divider-grey
        - type: custom:button-card
          entity: fan.living_room_fan
          template: fan-speed-settings
          name: Off
          tap_action:
            action: call-service
            service: fan.toggle
            service_data:
              entity_id: fan.living_room_fan
        - type: custom:button-card
          template: vertical-divider-grey
    - type: custom:button-card
      template: horizontal-divider-grey

Can the new templates work with the storage mode, if I am not using the yaml mode? Or do I need to go back to using yaml mode.

I’ve been trying to figure out where to place the template in the UI editor but so far no places have worked.

YAML mode only.
Edit: It’s possible in storage mode also.

I think I’m attempting to do something unorthodox. I’m trying to check for the value in speed_list, an attribute of a fan entity and then apply coloring to the appropriate Low, Medium, High button. The snippet below would appear once in each card with the value low/medium/high where appropriate.

Am I doing this right? (Syntax adopted from a previous Mariusthvdb example.)

state:
  - operator: template
    value:
      return states['fan.office_fan'].speed_list === 'low'
    color: rgb(181, 142, 49)
  - operator: default

EDIT: After reading through the States section under Templating, I suspect I should be using return state_attr instead of return state but can’t seem to get that working either.

You are missing attributes and a >:

value: >
  return states['fan.office_fan'].attributes.speed_list === 'low'

Also, the templates are not the one from home-assistant for this button. This is plain javascript,check the documentation on github.

I needed to clear the cache and hard reset, now it looks like it is pulling the template