Button card double tap template

Configuration Frontend
1

I’m stuck on a template for a custom button card. Help please!
I have a custom button card which toggles a light. It also toggles an associated input boolean on double tap. All my attempts to add a change of the light icon or a change of the light icon color using a javascript template have failed with the following type of error:

button-card/button-card.js:1695:80 Uncaught ButtonCardJSTemplateError: ReferenceError: input_boolean is not defined in ‘if (input_boolean.office_auto.state == true) return “mdi:desk-lamp”;’

Detail of my card:

- type: "custom:button-card"
  gridrow: 1 / 2
  gridcol: 1 / 2
  style: "ha-card { height: 100%; }"
  entity: light.office_desk
  icon: mdi:lightbulb-outline
  color: rgb(400,400,100)
  show_icon: true
  show_state: true
  state:
    - value: "off"
      color: rgb(50, 50, 100)
  double_tap_action: 
    action: call-service
    service: homeassistant.toggle
    service_data:
      entity_id: input_boolean.office_auto
    icon: > 
      [[[ 
        if (input_boolean.office_auto == true) return "mdi:desk-lamp";
      ]]]

Maybe there is a better way to go about this requirement. I have no experience in javascript or the embedding of templates in yaml but I am a user of yaml and appdaemon python.

2
  1. doulbe_tap_action does not allow the icon field. Review the actions and make sure your indentation is correct.
  2. You have to get the state of the input_boolean from the states object. That’s covered here and here.
    states['input_boolean.office_auto'].state == true
  1. You aren’t providing an else in your template. You’ll need to do that as well.

EDIT: I left out other details

  1. If you are trying to template the icon, you need to template the icon field itself. This is at the root level of the card.

  2. If you are trying to change the color based on the state of the input boolean, this requires adding the states field and properly creating a template statement that resolves to true and styling off that. To be honest, theres about 10 different ways to do this one. Either way, I suggest looking over the examples provided at the end of the custom button card docs.

3

Thanks @petro. You have given me quite a few things to digest there. I’ll work on them and hopefully report success!

4

Post your full card config if/when you get stuck and I’ll help you work through them

5

@petro, I have attempted to follow through all of your points and over a week or so I have read and re-read the button card doc and have searched as best I could throught the 4000+ long thread and very slowly the structure of this app emerges from my fog. I have given up the idea of changing the icon in the double tap action and am trying to change the color of the root level icon to red if the input boolean is true after it has been toggled. For experimental purposes I try to set it to green if the input boolean is false but really need to do nothing in that case.
The card as shown below does respond to the double tap action and I can see that that the input boolean does toggle. However, the icon does not change to either red or green.

  - title: Test Panel 2
    theme: backend-selected
    path: default_view
    panel: true
    debug_card-mod: true
    cards:
      - type: 'custom:layout-card'    #
        column_width: 100%            # For setting up panel view
        layout: vertical              #
        cards:
        - type: "custom:layout-card"
          layout: grid                                       # Grid
          gridcols: 158px 158px 158px 158px 158px 158px      # setup
          gridrows: 158px 158px 158px 158px 158px 158px      #
          cards:
          - type: "custom:button-card"
            gridrow: 1 / 2
            gridcol: 1 / 2
            style: "ha-card { height: 100%; }"
            entity: light.office_desk
            icon: mdi:lightbulb-outline
            color: rgb(400,400,100)
            show_icon: true
            show_state: true
            state:
              - value: "off"
                color: rgb(50, 50, 100)
            double_tap_action: 
              action: call-service
              service: homeassistant.toggle
              service_data:
                entity_id: input_boolean.office_auto
              color: > 
                [[[ 
                  if (states['input_boolean.office_auto'].state == true) return "red";
                  else return "green";
                ]]]

If my objective is not clear, I am trying to make a single button which can turn a light to on, off or auto where the auto mode is managed by appdaemon. Of course I also want the button to be ergonomically sensible with good visual feedback to the user. I am using the “hold” action to facilitate manual rgb cct adjustments to the light. The advantage of the double tap / single tap facility is that I can retain independent control of the manual on/off from the auto on /off. Appdaemon sorts out the relationships between the two.

6

Well, you keep putting color or icon inside double_tap_action. Maybe you aren’t understanding the docs. If a section does not list an attribute, you can’t use that attribute in that section. Previously, you did it with icon. Now you’re doing it with color. You need to put your logic on the root color level of the card. In the case of your card, you’d be using the logic on this line:

Same for icon.

So to recap

This is invalid because color is inside double_tap_action.

This is outside double tap action

            double_tap_action: 
              action: call-service
              service: homeassistant.toggle
              service_data:
                entity_id: input_boolean.office_auto
            color: > 
              [[[ 
                if (states['input_boolean.office_auto'].state == true) return "red";
                else return "green";
              ]]]

image
image720×617 29.5 KB

In your case, your logic should be:

        color: > 
          [[[ 
            if (states['input_boolean.office_auto'].state == true) return "red";
            else return "rgb(400,400,100)";
          ]]]

In this case your card icon color will always be ‘rgb(400, 400, 100)’ if the input_boolean is off. If on, it will be red.

Icon with a simliar template would do the same. But Again, it needs to be at the root level. I think you should read up on YAML and how indentation affects your configuration.

7

@petro, Thanks again for your perseverence in straightening me out. I have produced a simple button using the custom button card which changes color on single tap and changes a label on toggling of an input boolean using the double tap option. I did find that states[‘input_boolean.office_auto’].state == true does not work but states[‘input_boolean.office_auto’].state == “on” does work.
This button provides my minimum functional requirement and I am feeling just a little more confident in reading the docs to extend my button.
I note that the double tap requires very rapid finger action.
My working button setup follows:

 - title: Test Panel 2
    theme: backend-selected
    path: default_view
    panel: true
    debug_card-mod: true
    cards:
      - type: 'custom:layout-card'    #
        column_width: 100%            # For setting up panel view
        layout: vertical              #
        cards:
        - type: "custom:layout-card"
          layout: grid                                       # Grid
          gridcols: 158px 158px 158px 158px 158px 158px      # setup
          gridrows: 158px 158px 158px 158px 158px 158px      #
          cards:
          - type: "custom:button-card"
            gridrow: 1 / 2
            gridcol: 1 / 2
            style: "ha-card { height: 100%; }"
            entity: light.office_desk
            icon: mdi:lightbulb-outline
            color_type: icon
            show_icon: true
            show_state: true
            show_label: true
            label: > 
              [[[ 
                if (states['input_boolean.office_auto'].state == "on") return "Auto";
                else return "Manual";
              ]]]
            state:
              - value: 'on'
                color: rgb(400,400,100)
              - value: 'off'
                color: rgb(50,50,100)
            double_tap_action: 
              action: call-service
              service: homeassistant.toggle
              service_data:
                entity_id: input_boolean.office_auto