Lovelace: Button card

Share your Projects! Dashboards & Frontend
1060

o wow, that would really be cool.

would you be prepared to consider adding the config template to the button card itself, or at least allow the option? rationale, keeping all relevant code together in 1 file and be able to import that easily and robustly in maintenance:

my views look like:

title: Test
icon: mdi:test-tube
path: test
cards:
  - type: custom:compact-custom-header

  - !include /config/lovelace/tiles/tiles_family.yaml
  - !include /config/lovelace/tiles/tiles_input_select_scene.yaml
  - !include /config/lovelace/buttons/buttons_lights.yaml

and the buttons_lights.yaml is

type: 'custom:button-card'
name: Laundry
icon: 'mdi:ceiling-light'
entity: light.laundry_ceiling
label_template: >
  var bri = Math.round(states['light.laundry_ceiling'].attributes.brightness / 2.55);
  return (bri ? bri : '0') + '%';
color: auto
size: 30%
show_state: true
show_label: true
tap_action:
  action: toggle
  haptic: light
hold_action:
  action: more-info
  haptic: success
styles:
  card:
    - border-radius: 12px
    - width: 105px
    - height: 105px
    - --paper-card-background-color: rgb(255, 251, 239)
  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
  grid:
    - grid-template-areas: '"i" "n" "s" "l"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content
  img_cell:
    - align-self: center
    - text-align: start
    - margin-left: 10px
  name:
    - justify-self: start
    - padding-left: 10px
    - font-weight: bold
    - font-family: Helvetica 
    - font-size: 13px
state:
  - value: 'on'
    # spin: true (uncomment this line for spinning icon)
    styles:
      name:
        - color: black
      state:
        - color: gray
  - value: 'off'
    style:
      - opacity: 0.4
    styles:
      icon:
        - color: gray
      name:
        - color: gray
      state:
        - color: gray
  - value: 'unavailable'
    style:
      - opacity: 0.2
      - color: black
      - --paper-item-icon-color: black

ui-lovelace.yaml:

views:
  - !include /config/lovelace/views/view_Home.yaml
  - !include /config/lovelace/views/view_Lights.yaml
   ...
   ...
  - !include /config/lovelace/views/view_Test.yaml

if we’d need the button config template in ui-lovelace, that would compromise its simplicity again…

my first button :wink:

41
45

1061

I don’t get your point? Did you follow my link? it explains how the feature will work.

1062

please allow me a templating question:

if id only wanted to show the brightness in this button when on, in Tiles we’d use:

    templates:
      label: >
        if (state === 'unavailable') return 'Laundry n/a';
        if (state === 'off') return 'Laundry';
        return 'Laundry: ' + Math.round(attributes.brightness / 2.55) + ' %';

do we need to use the full entity in the Buttons config, or can we reference ‘state’ . I ask since nothing appears when using:

label_template: >
  var bri = Math.round(states['light.laundry_ceiling'].attributes.brightness / 2.55);
  if (state === 'on') return bri + '%';
1063

Everyone should read the documentation :blush::

Extract:

Inside the javascript code, you'll have access to those variables:

* entity: The current entity object, if the entity is defined in the card
* states: An object with all the states of all the entities (equivalent to hass.states)
* user: The user object (equivalent to hass.user)
* hass: The complete hass object

So you can access the entity state with entity.state :slight_smile:

1 Like
1064

yes, but I might have misunderstood this:

Define your config template in the main lovelace configuration and then use it in your button-card.

thought you implied that to be needed in the ui-lovelace.yaml… I take it now you mean the main setup for the card itself? Which would be perfect, thanks!

1065

You’ll be able to include the button-card templates config using the usual !include

1067

It’s - --paper-card-background-color: 'rgba(149, 165, 166, 1)' (you’re missing the double dashes)

1068

yes! thanks, was searching for that in the docs, but only found full paths…

using this now works just fine, and makes it possible to lift that out to the main config template I hope. makes many lines of code superfluous … :+1:

label_template: >
  var bri = Math.round(entity.attributes.brightness / 2.55);
  if (entity.state === 'on') return bri + '%';
1 Like
1069

seeking some more help please. I am trying to get a shallower but wider button to show Icon and label next to each other, centered on the button.

Just like this:

09

I’ve reached this:

12

but am lost for now which of the possible options I should change, would you please have a look? (to be precise: I want the icon, name and state centered in horizontal and vertical center…

type: vertical-stack
cards:
  - type: 'custom:button-card'
#    color_type: label-card
#    color: auto
    name: All hallway and ambient lights
    entity: group.all_hallway_lights
    layout: icon_name_state
#    color: auto
    size: 20px
    show_state: true
    show_label: true
    tap_action:
      action: toggle
      haptic: light
    hold_action:
      action: more-info
      haptic: success
    styles:
      card:
#        - border-radius: 12px
        - width: 330px
        - height: 40px
        - --paper-card-background-color: rgb(255, 251, 239)
      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
#      grid:
#        - grid-template-areas: '"i" "n" "s"'
#        - grid-template-columns: 1fr
#        - grid-template-rows: 1fr min-content min-content
      img_cell:
        - align-self: center
        - text-align: start
        - margin-left: 10px
      name:
        - justify-self: center
#        - padding-left: 10px
        - font-weight: bold
        - font-family: Helvetica 
        - font-size: 11px
    state:
      - value: 'on'
        #spin: true (uncomment this line for spinning icon)
        styles:
          name:
            - color: black
          state:
            - color: gray
      - value: 'off'
        style:
          - opacity: 0.4
        styles:
          icon:
            - color: gray
          name:
            - color: gray
          state:
            - color: gray
      - value: 'unavailable'
        style:
          - opacity: 0.2
          - color: black
          - --paper-item-icon-color: black

btw for now Ive ‘guessed’ the width of the top button to be 3 times a single button with something extra, but what would be the precise way of calculating that? Which variable is defining the space between buttons?

Thanks for having a look!

1070

hi there
i have this code:

type: vertical-stack
cards:

  • type: ‘custom:button-card’
    styles:
    card:
    - height: 5px
    - border-radius: 5px
    color_type: label-card
    color: ‘rgb(107, 140, 150)’
    name: INFORMAÇÃO
  • type: horizontal-stack
    cards:
    • type: ‘custom:button-card’
      color: auto
      entity: sensor.riscoincendio
      size: 70%
      name: Risco de Incendio
      show_label: true
      label_template: |
      return states[‘sensor.riscoincendio’].state;
      styles:
      card:
      - height: 170px
      - width: 150px

i wish that when states[‘sensor.riscoincendio’].state; is iqual to value A then the card is RED. when value is B is green. when Value is C is yellow…and other values
how can i do this?

1071

If you only want to show that when the state is on, then you adjust the states: “off” style to make the attribute in question invisible.

com-video-to-gif

Anchor

  custom_button_light_active_glow: &custom_button_light_active_glow
    type: "custom:button-card"
    layout: icon_label
    color: auto
    show_state: true
    show_name: true
    show_label: true
    styles:
      grid:
        - grid-template-rows: 30px auto 30px
      card:
        - border-radius: 15px
        - height: 105px
        - width: 105px
        - margin: 5px 5px 0px 0px
      icon:
        - align-self: end
        - height: 30px
        - width: 30px
      name:
        - justify-self: start
        - padding: 0px 10px
        - font-size: 13px
      label:
        - align-self: end
        - padding: 1px
        - font-size: 11px
        - font-weight: bold
        - font-family: Helvetica
      state:
        - font-size: 11px
        - font-family: Helvetica
        - text-transform: capitalize
        - font-weight: bold
        - align-self: end
        - justify-self: start
        - padding: 5px 10px
      lock:
        - align-items: flex-end
    state:
      - value: "on"
        styles:
          card:
            - --paper-card-background-color: rgba(40, 40, 40)
            - box-shadow: 0px 0px 10px 3px var(--button-card-light-color)
          name:
            - color: white
          state:
            - color: white
          label:
            - color: white
      - value: "off"
        styles:
          label:
            - color: rgba(0, 0, 0, 0.0)
    tap_action:
      action: toggle
    hold_action:
      action: more-info

Use in config

              - <<: *custom_button_light_active_glow
                name: Lights
                entity: switch.living_room
                icon: mdi:alpha-l-box
                label_template: >
                  var i;
                  var entities = states['group.living_room'].attributes.entity_id;
                  var count = 0;
                  for (i = 0; i < entities.length; i++) {
                    var state = states[entities[i]].state;
                    if (state === 'on') {
                      count += 1;
                    }
                  }
                  return count.toString() + ' of ' + entities.length.toString();
              - <<: *custom_button_light_active_glow
                label_template: >
                  var bri = Math.round(states['light.living_room'].attributes.brightness / 2.55);
                  return (bri ? bri : '0') + '%';
                name: Light
                entity: light.living_room
              - <<: *custom_button_switch_active_glow
                name: Outlet
                entity: switch.living_room_window

The section in question that shows/hides the label text is

      - value: "off"
        styles:
          label:
            - color: rgba(0, 0, 0, 0.0)
3 Likes
1072

is this in fact showing it but in an invisible color? Hence not changing the positioning of the other elements?

I am using this label_template now:

        label_template: >
          var bri = Math.round(entity.attributes.brightness / 2.55);
          return (bri ? bri : '0') + '%';

could that be placed in the Anchor also? since it uses entity.state or entity.attributes and no longer the hard coded name?

1073

Correct, it’s there but transparent. Shape stays the same, no need to manage other styles.

1074

Yes, but it will only work with light domain. If you attempt to use that anchor with a switch, it won’t show because the JS will have an error.

1075

I understand.
I thought these anchors could only be used in the file they are declared in. Since I try to use my views with !includes this would be in a button_lights.yaml file, and only configuring sets of Lights buttons…

No issues with switches… Might have to think it over, because I am not sure I need the brightness on all buttons, especially the count buttons. Unless there would be an override setting, or maybe use the same trick with the transparent color :wink:

1076

Wait for the next version please, it will solve this exact problem :slight_smile:

1077

no way to override, just make an anchor for count buttons and an anchor for light % buttons. That’s all I do. Still cuts the config down. And next version will have this templating crap so you can just use a template instead of an anchor. I’d guess that templates can merge better than anchors because you won’t get that double config attribute error in your logs with templates. Is that correct to assume @RomRider?

1078

ok I will, but in the meantime I am learning… thanks to you both!

got this far. cool!

33

1079

Yes, no such error with the new template feature.

1 Like
1080

Hey @RomRider

using layout: icon_name_state, what else do I need to set to have these centered vertically and horizontally?

in Lovelace: Button card posted few posts above, I’ve shared my config, and probably should leave out some extra settings I copied from the other buttons. Sofar, I find it rather difficult to accomplish such a simple goal… duh. what am I not seeing…