Fun with custom:button-card

Share your Projects! Dashboards & Frontend
1043

it was along time ago. I think this is the method I used
https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily-part-1/388590/3050?u=frosty

1 Like
1044

I’ll look into this! Thanks!

1045

Hi all, I wondered if I could get some help please.

I’ve recently implemented custom:button-card into a could of my dashboard elements and so far this post along with a few other resources has given me everything I need.

I’m trying to add some logic into a template so that the notification element in custom_fields is only displayed when a variable matches some specific values. I’ve tested the logic and that’s all working but I’m not even sure if it’s possible to do what I want. Here is an example which hopefully shows what I’m getting at.

button_card_templates:
  lightandoccupancy:
    icon: mdi:lightbulb
    aspect_ratio: 1/1
    name: |
      [[[ return [variables.cardname] ]]]
    styles:
      name:
        - font-size: 15px
        - padding: 7%
      icon:
        - margin-top: 18%
        - scale: 95%
      card:
        - scale: 80%
      grid:
        - position: relative
      custom_fields: |
        [[[
          if (states[variables.occupancyentity].state in ['on', 'off'])
            return
              notification:;
                - background-color: |
                    [[[
                      if (states[variables.occupancyentity].state == 'on')
                        return "#ffc107";
                      return "#44739e";
                    ]]]
                - border-radius: 50%;
                - position: absolute;
                - left: 70%;
                - top: 5%;
                - height: 15px;
                - width: 15px;
                - font-size: 0px;
                - line-height: 20px;
                - icon: mdi:lightbulb;
       ]]]
    custom_fields:
      notification: |
        [[[ return (states[variables.lightentity].state) ]]]
1046

Hi, the if else should be like this

    - background: |
        [[[
          if (states['yourentity'].state == 'off')
            return '#FF204E';
          else
            return '#8DECB4';
        ]]]

You need the ‘ ‘ in the last code too

1047

Thanks for the tips

1048

Hello everyone!

I’m stuck here. I’m just trying to create a stack of buttons, and one of them is supposed to toggle the side menu bar, but I’m getting an error with this code:

  bnt_3:
    card:
      type: custom:button-card
      icon: mdi:menu
      tap_action:
        action: call-service
        service: |-
          [[[
            this.dispatchEvent(new Event('hass-toggle-menu', { bubbles: true, composed: true}));
            return none;
          ]]]

If the button is a single one it works:

type: custom:button-card
icon: mdi:menu
tap_action:
  action: call-service
  service: |-
    [[[
      this.dispatchEvent(new Event('hass-toggle-menu', { bubbles: true, composed: true}));
      return none;
    ]]]
1049

lets keep discussing this in the ‘official’ button-card thread, and not double do things… keeps it tidy

1050

Hi Mike, can you share code? Looks awesome:)

thx