Lovelace: Button card

Sorry, I misunderstood you.
Open Raw Editor and paste them at the same level as resources (top)

1 Like

hi!
in an above reply i saw a post of a button card with a circle-sensor-card in it to show the brightness of the light from the button card (@lubbertkramer). if i try his code it won’t show the brightness. But if i change the circle-sensor-card’s entity ('[[brightness]]') to my light’s entity then it shows just the on/off state. As you can see in the picture, that’s the current state. hope someone can help me. Thanks!!

type: 'custom:button-card'
name: Ledstrip Kast
icon: 'mdi:led-strip-variant'
entity: light.wled_kast
color: auto
aspect_ratio: 1/1
show_state: true
show_label: false
tap_action:
  action: toggle
  haptic: light
styles:
  card:
    - border-radius: 10px
    - width: 105px
    - height: 105px
  state:
    - font-size: 11px
    - font-family: Helvetica
    - margin-left: auto
    - margin-right: auto
    - text-transform: capitalize
    - font-weight: bold
  grid:
    - grid-template-areas: '"n n" "i i" "s brightness"'
    - grid-template-rows: 1fr 2fr 1fr
    - grid-template-columns: 1fr 1fr
  img_cell:
    - align-self: center
    - text-align: start
  name:
    - justify-self: start
    - margin-left: auto
    - margin-right: auto
    - font-weight: bold
    - font-family: Helvetica
    - font-size: 13px
  label:
    - font-family: Helvetica
    - font-size: 14px
    - font-weight: bold
    - padding: 0px 10px
    - justify-self: start
    - padding-right: 10px
  custom_fields:
    brightness:
      - max: 100
      - min: 0
      - width: 2em
      - overflow: visible
      - position: absolute
      - left: 4em
      - top: 4em
custom_fields:
  brightness:
    card:
      type: 'custom:circle-sensor-card'
      entity: light.wled_kast
      max: 100
      min: 0
      stroke_width: 15
      stroke_color: var(--theme-button-icon-color-state-on)
      gradient: true
      font_style:
        color: var(--theme-button-name-color-state-on)
label: |
  [[[
    if (typeof(entity) === 'undefined') return;
    if ('brightness' in entity.attributes)
    {
      if (entity.attributes
      && (entity.attributes.brightness <= 255)) {
        var bri = Math.round(entity.attributes.brightness / 2.55);
        return (bri ? bri : '0') + '%';
      }
    }
  ]]]
state:
  - value: '[[[ return '''' + entity.state + ''''; ]]]'
    spin: '[[spin]]'
    styles:
      card:
        - '--ha-card-background': >-
            [[[ return 'var(--theme-button-card-color-state-' + entity.state +
            ')'; ]]]
      icon:
        - color: >-
            [[[ return 'var(--theme-button-icon-color-state-' + entity.state +
            ')'; ]]]
        - animation: >-
            [[[ return 'var(--theme-button-icon-animation-state-' + entity.state
            + ')'; ]]]
      lock:
        - color: >-
            [[[ return 'var(--theme-button-lock-color-state-' + entity.state +
            ')'; ]]]
      label:
        - color: >-
            [[[ return 'var(--theme-button-label-color-state-' + entity.state +
            ')'; ]]]
      name:
        - color: >-
            [[[ return 'var(--theme-button-name-color-state-' + entity.state +
            ')'; ]]]
      state:
        - color: >-
            [[[ return 'var(--theme-button-state-color-state-' + entity.state +
            ')'; ]]]
      custom_fields:
        brightness:
          - fill: >-
              [[[ return 'var(--theme-button-card-color-state-' + entity.state +
              ')'; ]]]

Screenshot_1|99x102

entity.attributes.brightness should be the way to go.

@RomRider

since the latest release I encounter a weird behaviour.
I have the following card (pre 3.2.3):

As soon as I update to the newest release it looks like this (white overlay):

Interestingly this only happens in Safari (also tried it in Firefox).

The yaml in question:

- type: custom:mod-card # robovac
  style: |
    ha-card {
      height: 115px;
      background-color: var(--primary-background-color);
      border-radius: 15px;
      box-shadow: 
        {% if is_state('sun.sun', 'above_horizon') %}
          -4px -4px 4px 0 rgba(255,255,255,.5),4px 4px 4px 0 rgba(0,0,0,.03);
        {% else %}
          -4px -4px 4px 0 rgba(50, 50, 50,.5),4px 4px 4px 0 rgba(0,0,0,.15);
        {% endif %}   
    }
  card:
    type: custom:vertical-stack-in-card
    cards:
      - type: entities
        entities:
          - entity: vacuum.robovac
            type: custom:multiple-entity-row
            name: Robovac
            show_state: false
            entities:
              - attribute: status
                name: Status
              - attribute: battery_level
                name: Battery
                unit: '%'
              - entity: counter.vacuum_counter
                name: Count
        style: |
          ha-card {
            height: 70px;
          }
      - type: horizontal-stack
        cards:
          - type: custom:button-card
            color: auto
            entity: vacuum.robovac
            size: 25%
            icon: mdi:play
            show_name: false
            tap_action:
              action: call-service
              service: vacuum.turn_on
              service_data:
                entity_id: vacuum.robovac
          - type: custom:button-card
            color: auto
            entity: vacuum.robovac
            size: 25%
            icon: mdi:pause
            show_name: false
            tap_action:
              action: call-service
              service: vacuum.pause
              service_data:
                entity_id: vacuum.robovac
          - type: custom:button-card
            color: auto
            entity: vacuum.robovac
            size: 25%
            icon: mdi:broom
            show_name: false
            tap_action:
              action: call-service
              service: vacuum.clean_spot
              service_data:
                entity_id: vacuum.robovac
          - type: custom:button-card
            color: auto
            entity: vacuum.robovac
            size: 25%
            icon: mdi:map-marker
            show_name: false
            tap_action:
              action: call-service
              service: vacuum.locate
              service_data:
                entity_id: vacuum.robovac
          - type: custom:button-card
            color: auto
            entity: vacuum.robovac
            size: 25%
            icon: mdi:home-map-marker
            show_name: false
            tap_action:
              action: call-service
              service: vacuum.return_to_base
              service_data:
                entity_id: vacuum.robovac

What i did was using a custom field for a sensor template which shows the brightness. In my template i refer to the custom button card config that’s in my lovelace. That’s why only [[brightness]] is used, that maps to sensor.brightnesshal for example

              - type: custom:decluttering-card
                template: button_default
                variables:
                  - entity: light.hal
                  - name: Hal
                  - icon: 'mdi:lightbulb'
                  - brightness: sensor.lighthal

This is related to vertical-stack-in-card, not button-card.

Fortunately, I’ve just created a drop-in replacement for vertical-stack-in-card which supports 0.107.0 and an bunch of other features :slight_smile:

Check it out here:

4 Likes

thanks for this, we needed a new vertical-stack-in-card! Love the new functionality this offers at a glance, will dive in . Much appreciated!
Not sure if this solves our ‘grid’ demand, but certainly offers immediate benefits. Cool!

My lights can be controlled but there is no way to know if the light is on or off. That is the reason that I want to have a button with two type areas: one for on and one for off (in the same button).

Is it possible to achieve that with the button card? can I somehow define two tap areas on the button?

Thx

Yes, using custom_fields you can embed 2 other button cards inside the button-card, one for on and one for off :slight_smile:

1 Like

I have succeeded to create some initial demo of such button. Thx. I’ve got strange issue. If I call the light.turn_on service directly, the light turn on and off. If I create script for turn on / off, the card work as expected. Any idea why (below is the working version)?

  - type: custom:button-card
    name: "Light"
    aspect_ratio: 1/1
    custom_fields:
      'on':
        card:
          type: custom:button-card
          name: 'ON'
          icon: mdi:lightbulb-outline
          style: |
            ha-card {
              box-shadow: none;
            }
          tap_action:
            action: call-service
            service: script.light_turn_on
            service_data:
              entity_id: light_008
      'off':
        card:
          type: custom:button-card
          name: 'OFF'
          icon: mdi:lightbulb-off-outline
          style: |
            ha-card {
              box-shadow: none;
            }
          tap_action:
            action: call-service
            service: script.light_turn_off
            service_data:
              entity_id: light_008
    styles:
      custom_fields:
        'on':
          - overflow: unset
      card:
        - overflow: unset
      grid:
        - grid-template-areas: '"n n" "on off"'
        - grid-template-columns: 50% 50%
        - grid-template-rows: 50% 50%

If it double clicks you’re probably not using the latest version of the card. What is the javascript console saying?

This is my version, where do I see the javascript console?

Hi there!
since the 0.107 version , when i click on a button with toggle action, instead of activate action it’s opening the more information tab.
Any idea ?

action: toggle
color: orange
color_type: card
custom_fields:
  notification: |
    [[[ return states['switch.nonaffecte'].state ]]]
entity: script.chauffage_lit
icon: 'mdi:hotel'
name: Chauffage lit
size: 30%
styles:
  card:
    - font-size: 18px
    - font-weight: bold
  custom_fields:
    notification:
      - background-color: |
          [[[
            if (states['switch.nonaffecte'].state == 'off')
              return "green";
            return "red";
          ]]]
      - border-radius: 20%
      - position: absolute
      - left: 70%
      - top: 5%
      - height: 25px
      - width: 30px
      - font-size: 12px
      - line-height: 20px
  grid:
    - position: relative
type: 'custom:button-card'

There are so many awesome examples that people have created with this card that I feel the card templates and a screenshot of each should be put on the Github repo so others can easily copy / take inspiration from them without sifting through over 3000 posts… I know this is a big ask but if each template author submitting their code if woudn’t be too hard… please?

5 Likes

I wss thinking about this lately, let me put something in place. :slight_smile:

4 Likes

He meant Chrome browser (via … More Tools -> Developer Tools, click on Console tab)

EDIT: Seems to be a browser issue, works on my android phone but not firefox.

Ive made a slider inside my button but the state value is not updated until I refresh the browser. Bug or is it a limitation? The custom:slider-entity-row works when not used inside a button.
image

- type: custom:mod-card
        style: |
          ha-card {
            padding: 8px 16px 20px 16px;
          }
        card:
          type: custom:layout-card
          min_columns: 1
          max_columns: 1
          layout: vertical
          justify_content: start
          cards:
            - type: custom:button-card
              name: Gardin
              template: slider_button
              icon: mdi:blinds
              custom_fields:
                slider:
                  card:
                    type: custom:slider-entity-row
                    full_row: true
                    hide_state: false
                    entity: input_number.curtain_slider

That might be a bug, please open an issue on gh and paste your full button config with the template, I’ll have a look.

You need to use tap-action and call-service like this:

  - color_type: blank-card
    type: 'custom:button-card'
  - color: auto
    entity: script.everyday_tv_rum
    icon: 'mdi:lightbulb-on-outline'
    name: Dag
    tap_action: 
      action: call-service
      service: script.turn_on
      service_data:
        entity_id: script.everyday_tv_rum
    styles:
      card:
        - height: 90px
        - width: 90px
    type: 'custom:button-card'
  - color: auto
    entity: script.focus_tv_rum
    icon: 'mdi:book-open-variant'
    name: Focus
    tap_action: 
      action: call-service
      service: script.turn_on
      service_data:
        entity_id: script.focus_tv_rum
    styles:
      card:
        - height: 90px
        - width: 90px
    type: 'custom:button-card'
  - color: auto
    entity: script.relax_tv_rum
    icon: 'mdi:lightbulb-on'
    name: Soft
    tap_action: 
      action: call-service
      service: script.turn_on
      service_data:
        entity_id: script.relax_tv_rum
    styles:
      card:
        - height: 90px
        - width: 90px
    type: 'custom:button-card'
  - color_type: blank-card
    type: 'custom:button-card'
type: horizontal-stack
2 Likes

Thank you ! It’s working!

1 Like