Lovelace: Button card

Nope nothing, not a single log unfortunately!

Think I may have got there at last. Try this:

tap_action:
  action: call-service
  service: vacuum.send_command
  service_data:
    entity_id: vacuum.robomac
    command: reset_consumable
    params:
      - >
        [[[ return states['input_select.robomac_reset'].state + '_time'; ]]]

There were a couple of issues. Needing to pass the parameter as a yaml list, and a missing .state to return the entity state in a javascript template. If it works, you should in theory be also able to set it out like this:

params: ["[[[ return states['input_select.robomac_reset'].state + '_time'; ]]]"]

Hi all
the last couple of days I began making my first custom buttons.
I need some help. mainly to understand if this can be done or not. ( I think not).
so I have the following simple button with the below code which is working. Don’t pay attention to the icons etc.
image

aspect_ratio: 1/0.6
name: Laundry
show_icon: false
color: steelblue
size: 45%
tap_action:
  action: fire-dom-event
  browser_mod:
    command: popup
    deviceID: b4dcdef6_ec5cae64
    title: Bath Lights
    card:
      type: entities
      entities:
        - entity: switch.bath_light_1
        - entity: switch.bath_light_2
        - entity: switch.wc_light
        - type: divider
        - entity: sensor.temperature_purifier
          secondary_info: last-changed
        - entity: input_number.how_water_temperature
        - entity: input_number.water_heater_minutes
        - entity: switch.sonoff_100099b6de
        - entity: sensor.water_heater_daily_time
        - entity: sensor.water_heater_time_on
          secondary_info: last-changed
        - type: divider
        - entity: sensor.bath_temp_2
          secondary_info: last-changed
show_name: true
entity: sensor.temperature_31
show_state: true
state:
  - value: 20
    operator: <
    color: red
  - value: 20
    operator: '>='
    color: steelblue
styles:
  card:
    - background-color: '#00000'
    - border-radius: 10%
    - font-size: 11px
    - color: steelblue
type: custom:button-card

Here is what I need ideally.
I would like (somehow) to add one more entity the binary.sensor.openclose42 and just show it’s state.
It is a door contact so I would like to saw “window:open or close”, or just open-close below or above the temperature.
Can this be done?

Works perfectly, thanks so much!!!

How can I remove the name and icon from the graph part?
image

- type: custom:button-card
            entity: sensor.ckb_value
            aspect_ratio: 1/1
            show_icon: false
            custom_fields:
              graph:
                card:
                  type: sensor
                  entity: sensor.ckb_value
                  graph: line
                  style: |
                    ha-card {
                      box-shadow: none;
                    }
            styles:
              custom_fields:
                graph:
                  - filter: opacity(50%)
                  - overflow: unset
              card:
                - overflow: unset
              grid:
                - grid-template-areas: '"n" "graph"'
                - grid-template-columns: 1fr
                - grid-template-rows: 1fr min-content min-content
            hold_action:
              action: more-info

Try this.

type: custom:button-card
entity: sensor.bathroom_temperature
aspect_ratio: 1/1
show_icon: false
custom_fields:
  graph:
    card:
      type: sensor
      name: ' '
      icon: ' '
      entity: sensor.bathroom_temperature
      graph: line
      style: ha-card {
      box-shadow: none; }
styles:
  custom_fields:
    graph:
      - filter: opacity(50%)
      - overflow: unset
  card:
    - overflow: unset
      grid:
        - grid-template-areas: '"n" "graph"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr min-content min-content
      hold_action:
        action: more-info

No name or icon.

no

1 Like

trying to style a button-card header with my button template:

button_default_title:
  aspect_ratio: 12/1
  tap_action:
    action: none
  styles:
    card:
      - background-color: var(--background-color-off)
      - color: var(--text-color-off)
      - font-size: 24px
#      - font-weight: bold
      - padding: 16px
    name:
      - justify-self: left

to have the same look as my regular card headers, which use:

    card_mod: &header
      style: |
        .card-header {
          background-color: var(--background-color-off);
          color: var(--text-color-off);
          padding-top: 0px;
          padding-bottom: 0px;
          margin: 0px 0px 16px 0px;
        }

(only need the button-card as header because of the fact I sometimes need to have a tap_action/hold action)

however, this is the result:

left the custom:button-card, right the regular entities card with the card-mod.

even though CSS Padding tells us padding: 16px should set it for all sides, I can not make it happen. It does change the left-side padding, but not the top and bottom. Ive also tried padding-top/padding-bottom, but that is fruitless also.

setting

    name:
      - padding-top: 16px
      - padding-bottom: 16px

doesnt work either…

but taking out aspect_ratio is getting really close:

button_default_title:
#  aspect_ratio: 12/1
  tap_action:
    action: none
  styles:
    card:
      - background-color: var(--background-color-off)
      - color: var(--text-color-off)
      - font-size: 24px
#      - font-weight: bold
      - padding-left: 16px
      - padding-top: 8px
      - padding-bottom: 8px
    name:
      - justify-self: left

Anyone around to help me make it happen 100% ?

thanks for having a look!

hello, I would like to create a button card that changes the background of the card to me when a template sensor varies as an attribute has an entity_picture.

type: custom:button-card
name: Radio
entity: input_boolen.web_radio
styles:
card:
- background: |
[[[
return ‘’ + states[‘sensor.template_radio_prova’].attributes.entity_picture;
]]]
- background-size: cover
- background-blend-mode: screen

I am in my novice

Hi All. In the button card example, how can i make the custom field icon spin and change color when state is “ON” image

Cant figure out to rewrite the code correctly.


temp: >
      [[[
        return `<ha-icon
          icon="mdi:thermometer"
          style="width: 12px; height: 12px; color: yellow;">
          </ha-icon><span>${entity.state}°C</span>`
      ]]]

``´´

Can we use new templating with custom button?

according to docs:

Avoid using states.sensor.temperature.state, instead use states('sensor.temperature'). It is strongly advised to use the states(), is_state(), state_attr() and is_state_attr() as much as possible, to avoid errors and error message when the entity isn’t ready yet (e.g., during Home Assistant startup).

tried replacing templates from states[''].state to states('') but it always gives error

hey guys,
i´m trying to get a button like this.

image

somehow i just dont manage to figure out how the grid stuff works.

3 button on the bottom should call a service when it´s getting taped.

anyone has something similar working already that i could copy and modify?

Why don’t use the templates of “minimalist” straight away, which Is what you are showing?

the only template i found is the cover template and somehow i didn‘t figure out what all i gotta change. made some small steps, might have to look into it again.

It Is under UI/config/minimalist-templates

1 Like

Don’t think so. Use javascript between [[[ and ]]]. It’s a challenge moving between yaml and javascript depending on the context. Here’s an example that works with button-card:

        tap_action:
          action:  call-service
          service: >
            [[[
              if ( states['alarm_control_panel.house'].attributes.arm_up_state == 'not_ready_to_arm' )
                return 'script.do_nothing';
              else
                return 'script.append_number_to_alarm_code';
            ]]]

Unfortunately no, I didn’t find a solution. Does anybody have an idea?

cover.set_cover_position → Doesn’t work.

Anyone can help here?

I have this code this does not work:

type: custom:button-card
tap_action:
  action: call-service
  service: cover.set_cover_position
  service_data:
    position: 75
  target:
    entity_id: cover.master_bedroom_shutter_1
name: Master Bedroom 75 Left
entity: cover.master_bedroom_shutter_1

It gives me this error:

Failed to call service cover/set_cover_position. must contain at least one of entity_id, device_id, area_id.

Strange is if I use regular button al works fine, for example this code works:

type: button
tap_action:
  action: call-service
  service: cover.set_cover_position
  service_data:
    position: 75
  target:
    entity_id: cover.master_bedroom_shutter_1
name: Master Bedroom 75 Left
entity: cover.master_bedroom_shutter_1

As this is a custom card, I don’t think it uses the target keyword in service calls.

Does this work?

type: custom:button-card
tap_action:
  action: call-service
  service: cover.set_cover_position
  service_data:
    entity_id: cover.master_bedroom_shutter_1
    position: 75

Yes, it works.
the entidy:id has to be placed in service_data.

Thanx.

How are you guys getting great spacing?

My buttons are just sitting on top of each other?