Fun with custom:button-card

qoheleth · May 26, 2022, 11:41pm

This is one that I’m using that’s working:

        [[[
          var icon = "mdi:map-marker";
          var color = "lightGrey";
          var status = states[variables.m1_entity].state;
          if (status != 'not_home') {
            icon = states['zone.'+status].attributes['icon'];
            color = "white";
          }
          return `<span>${variables.m1_name}:</span>
          <ha-icon icon="${icon}"
          style="width: 14px; height: 14px; color: ${color};"></ha-icon>
          <span>${status}</span>`
        ]]]

The only thing that I can see at first glance is the use of the backward quote (usually over by the 1 key on the keyboard) and the quotes in the icon=“stuff here” bit.

remmob · May 27, 2022, 7:11am

I have tried the following, but still not working!

[[[
  var rssistatus = states[sensor.signalstrength_screen_dubbeledeuren].state;
  return `<ha-icon icon=mdi:wifi style="width:12px; height:12px;"></ha-icon><span>${rssistatus}</span>`
]]]

When I remove the last span, it renders ok, there is a value in the sensor (I have tested that)
I have used the backward qoutes, although I have another template without these qoutes and thats working perfectly fine.

remmob · May 27, 2022, 7:43am

It seem that you have to use specific the double qoutes to get the state.

[[[
  var rssistatus = states["sensor.signalstrength_screen_dubbeledeuren"].state;
  return `<ha-icon icon=mdi:wifi style="width:12px; height:12px;"></ha-icon><span>${rssistatus}</span>` ]]]

This is working!

Airyphyla · May 29, 2022, 7:46am

Hi guys,

Was wondering if i can crop this button a bit more to being a square? I have no idea if this is even possible(?) I’ve made something in paint, left is it’s original state, right would be the button that i have in mind. Anyone about to help me along with this?

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:mushroom-light-card
    entity: light.living_room
    layout: vertical
    show_brightness_control: true
    use_light_color: true
  - type: custom:mini-graph-card
    font_size: 40
    line_width: 3
    align_state: center
    entities:
      - sensor.toon_current_temperature
    show:
      labels: false
      fill: true
      name: false
      icon: false
    color_thresholds:
      - value: 10
        color: '#013a63'
      - value: 10.5
        color: '#01497c'
      - value: 11
        color: '#014f86'
      - value: 11.5
        color: '#2a6f97'
      - value: 12
        color: '#2c7da0'
      - value: 12.5
        color: '#468faf'
      - value: 13
        color: '#468faf'
      - value: 13.5
        color: '#61a5c2'
      - value: 14
        color: '#89c2d9'
      - value: 14.5
        color: '#a9d6e5'
      - value: 15
        color: '#caf0f8'
      - value: 15.5
        color: '#ade8f4'
      - value: 16
        color: '#48cae4'
      - value: 16.5
        color: '#005f73'
      - value: 17
        color: '#94d2bd'
      - value: 17,5
        color: '#e9d8a6'
      - value: 18
        color: '#ffba08'
      - value: 18.5
        color: '#faa307'
      - value: 19
        color: '#f48c06'
      - value: 19.5
        color: '#e85d04'
      - value: 20
        color: '#dc2f02'
      - value: 20.5
        color: '#d00000'
      - value: 21
        color: '#9d0208'
      - value: 21.5
        color: '#6a040f'
      - value: 22
        color: '#370617'
      - value: 22.5
        color: '#03071e'
styles:
  custom_fields:
    graph:
      - filter: opacity(100%)
      - overflow: unset
  card:
    - overflow: unset
    - font-size: 15px
  grid:
    - grid-template-areas: '"i" "n" "graph"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content

Nameless · May 29, 2022, 1:13pm

Do you mean you want to try and convert this to a custom card from Mushroom & Mini Graph?

Airyphyla · May 29, 2022, 2:02pm

@Nameless Yes! thanks for your reply
I’m trying to get it to fit a bit more so i can get a square’ish button.

mikesn31 · June 3, 2022, 7:38pm

Can you post an example please?

tuupos · June 6, 2022, 6:10am

Hi all, I’m extensively using the custom button and I’m figgering it all out thanks to this amazing forum. But I’m running into an issue. If I have a button and embed a button within this button (through custom_fields) I cannot use javascript with entity.state for that embedded button. It always refers to the main button. Is it possible to use entity.state for the embedded button as well. It works when I write out the exact entity like this

 [[[
                      if (states['vacuum.am415x21'].state == 'error') return ' |   error';

but when I use

if (entity.state == 'error') return ' | error';

It wil not get the entity of the embedded card but of the main card even when triggering the js from inside the embedded button.

Using entity.state is easier for button_card_templates.

tuupos · June 6, 2022, 6:20am

After 1 week of trying and searching I finally posted here and figured it all out on my own…

By putting the entire button in a button_template it wil use the entity.state from the embedded card but when it is all plain in the main yaml/view it takes the main button instead of the embedded one.

Solved !

kbrown01 · June 30, 2022, 9:16pm

I am trying to “template-ize” some templates I have for custom button remote controls.
Right now, I have this in some custom button templates:

  patio_vizio:
    variables:
      tv: patio_vizio
      ip: >-
        [[[ return states['sensor.vizio_tvs'].attributes.tvs.find(x=>x.name ==
        'patio_vizio').ip ]]]
      port: >-
        [[[ return states['sensor.vizio_tvs'].attributes.tvs.find(x=>x.name ==
        'patio_vizio').port ]]]
      auth: >-
        [[[ return states['sensor.vizio_tvs'].attributes.tvs.find(x=>x.name ==
        'patio_vizio').auth ]]]
  office_vizio:
    variables:
      tv: office_vizio
      ip: >-
        [[[ return states['sensor.vizio_tvs'].attributes.tvs.find(x=>x.name ==
        'office_vizio').ip ]]]
      port: >-
        [[[ return states['sensor.vizio_tvs'].attributes.tvs.find(x=>x.name ==
        'office_vizio').port ]]]
      auth: >-
        [[[ return states['sensor.vizio_tvs'].attributes.tvs.find(x=>x.name ==
        'office_vizio').auth ]]]

Obviously I would rather have something more like:

  patio_vizio:
    variables:
      tv: patio_vizio
    template:
       - vizio_info
  office_vizio:
    variables:
      tv: office_vizio
    template:
       - vizio_info
  vizio_info:
    variables:
       ip: >-
         [[[ return states['sensor.vizio_tvs'].attributes.tvs.find(x=>x.name ==  '{something here I cannot figure out}').ip ]]]
       port: >-
         [[[ return states['sensor.vizio_tvs'].attributes.tvs.find(x=>x.name ==  '{something here I cannot figure out}').port ]]]
       auth: >-
         [[[ return states['sensor.vizio_tvs'].attributes.tvs.find(x=>x.name == '{something here I cannot figure out}'.auth ]]]

where the {something here I cannot figure out} would be the variables.tv from one of the templates. I have 6 Televisions and I would just like to template that down. So … how does one use a variable inside that return statement such that I could just use one template like ‘vizio_patio’ to populate all the needed variables?

[[[ return states['sensor.vizio_tvs'].attributes.tvs.find(x=>x.name ==  '${variables.tv}').ip ]]]

Will711990 · July 14, 2022, 8:03am

Hi everybody,

I’m playing with button_card and something (ok that really a detail…) annoying me…

  graph_temp_hum:
    variables:
      entity: "sensor.xiaomi_multisensor_salon_humidite"
      color: "var(--info-color)"
      name: "Default name"
      icon: "mdi:adjust"
    styles:
      card:
        - padding: 0px
      grid:
        - grid-template-areas: '"item1" "item2"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr max-content
    custom_fields:
      item1:
        card:
          entity: '[[[ return variables.entity ]]]'
          icon: '[[[ return variables.icon ]]]'
          template:
            - icon_info_vertical
          style: |
            ha-card {
              box-shadow: none;
              background: none;
              border-radius: var(--border-radius);
            }
          styles:
            card:
              - top: 12px
              - left: 12px
              - height: 47px
          type: 'custom:button-card'
      item2:
        card:
          type: 'custom:mini-graph-card'
          entities:
            - entity: '[[[ return variables.entity ]]]'
          line_color: '[[[ return variables.color ]]]'
          line_width: 10
          font_size: 55
          height: 120
          show:
            name: false
            icon: false
            legend: false
            state: true
          style: |
            ha-card {
              box-shadow: none;
              background: none;
              border-radius: var(--border-radius);
            }
          styles:
            card:
              - top: 4px
              - left: 12px

And the result:

How to reduce the tiny white gap ?

Thank you !!

Awallace89 · July 14, 2022, 10:36am

Hello is it possible if some one can help me please? I have a standard button card currently working to press a wiser integration, see below.

"show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: button.wiser_cancel_all_heating_overrides
name: ’ Cancel All Overrides’ "

When i try and run this toggle through a custom button card i get call service failed.

seldom · July 14, 2022, 2:27pm

you can’t toggle a button @awallace89
try

type: button
tap_action:
  action: call-service
  service: button.press
  data: {}
  target:
    entity_id: button.wiser_cancel_all_heating_overrides

Awallace89 · July 14, 2022, 7:01pm

I completely agree. Using the integrated lovelace button it works, however i cant get button.press service to work in the custom button. I have now just setup a script to press the wiser but. Thank you for your help.

seldom · July 14, 2022, 8:04pm

I thought you were asking for a standard button.
@Awallace89 try this for custom:button-card:

tap_action:
  action: call-service
  service: button.press
  service_data:
    entity_id: blah.blah

paddy0174 · July 14, 2022, 8:09pm

Please be so kind and format your code according to the forum rules (especially point 8 and 11). It is helpful for other people that want to answer your question. By not formatting the code properly, you loose ie. the indentation, that is the reason for errors in many, many cases. Without the formatting, we just can’t see, if there is an error. Thank you!

That being said, if you want to use the toggle service in custom:button-card, you need to set the entity via the “main” button part, not in the “service” part.

In theory something like this:

show_name: true
show_icon: true
type: custom:button-card
entity: button.wiser_cancel_all_heating_overrides
tap_action:
  action: toggle
name: ’ Cancel All Overrides’

What else you’d need is an entity besides a button. A button in HA speach is something that has no state, it is just like these push-buttons in real world, that only react as long as you press them. In theory that button of yours should have something it changes, eg. a binary_sensor or starting a script.

If I understand correctly what you’re doing, I’d choose a script or an automation, that runs and disables your “heating overrides” (not sure what that is) when the custom:button-card is pressed. If you can elaborate a little more about what you want to achieve in the end (this is the point 8 thingy ), I’m sure there would be a nice and compact solution in button-card.

seldom · July 14, 2022, 8:12pm

in custom:button-card I believe you can toggle switch. or light. type entities. For button type use button.press or input_button use input_button.press
Ignore what this paddyguy said about his theory and his understanding @awallace89. I guess he really just wanted to harass you about code formatting.

I have posted your solution above.

paddy0174 · July 14, 2022, 11:35pm

Uh, one know-it-all. But have you really thought through what you’re saying? Or did you just didn’t know it better…

Let’s see, maybe we can find some slow little examples, why you unwillingly proved my point for code formatting. Thanks btw.

I’ll take the example from above, should be easier for you to understand. If it’s still to fast, just say it, we’ll find a good example for you, too. If not, we’ll get some cookies for you. Just for you!

So this is, how unformatted code looks like:
“show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: button.wiser_cancel_all_heating_overrides
name: ’ Cancel All Overrides’”

This is, how formatted code looks like:

show_name: true
show_icon: true
type: custom:button-card
tap_action:
  action: toggle
entity: button.wiser_cancel_all_heating_overrides
name: ’ Cancel All Overrides’

but it could be just this, as whitespaces are deleted without proper formatting

show_name: true
show_icon: true
type: custom:button-card
tap_action:
  action: toggle
  entity: button.wiser_cancel_all_heating_overrides
name: ’ Cancel All Overrides’

Can YOU spot the difference? Hint, it’s the entity and it’s indentation. Can mean totally different things. I know, hard to understand for you, that this could matter in a yaml file, but believe it or not, it does.

Oh, and not to forget, the piece of code you posted, is not for the custom:button-card we’re talking about in this thread (and @awallace89 asked for twice), it’s for the HA default button-card. But hey, good choice, running around and telling people what their intentions are!

Tamsy · July 15, 2022, 12:51am

Sometimes I am missing the thumbs-down-button here.

electros · July 18, 2022, 2:30pm

Hi Shan can you please share the code for that 4 buttons from the top left?