Lovelace: Button card

DavidFW1960 · April 19, 2019, 5:43am

It’s leaving the button at the came color you see if you hover over the card after you tap on the button rather than returning to the normal color. Hopefully @RomRider can fix this. It’s more of an annoyance than anything. If you tap anywhere on the screen it reverts…

RomRider · April 19, 2019, 7:46am

Hey @RichardU,
That will be done, once this PR is merged:
https://github.com/custom-cards/button-card/pull/95

RomRider · April 19, 2019, 11:12am

Hey @Tomahawk,
Your icon position problem should be fixed with this PR once merged:
Home_Assistant

https://github.com/custom-cards/button-card/pull/97

RomRider · April 19, 2019, 11:13am

Hey @VDRainer, @DavidFW1960,
The button staying selected should be fixed with this PR once merged:
Apr-19-2019%2013-22-21

https://github.com/custom-cards/button-card/pull/97

VDRainer · April 19, 2019, 11:43am

Thanks a lot @RomRider!
Last weekend i decided to change everything to the entity-button.
Now i have something to do this weekend.

petro · April 19, 2019, 11:52am

You should use anchors! I set my system up to use anchors so I only need to swap the button type and attributes in 1 place:

anchors:
  remote_style: &remotestyle
    border-radius: 20px
    
  remote_button: &buttonremote
    type: entity-button
    show_name: false
    tap_action:
      action: toggle
    hold_action:
      action: none

Then in your configuration area just have this:

              - type: 'custom:card-modder'
                style:
                  <<: *remotestyle
                  --paper-item-icon-active-color: '#E45E65'
                card:
                  <<: *buttonremote
                  entity: switch.poweroff
              - type: 'custom:card-modder'
                style:
                  <<: *remotestyle
                  --paper-item-icon-active-color: '#E45E65'
                card:
                  <<: *buttonremote
                  entity: switch.zone_1
              - type: 'custom:card-modder'
                style:
                  <<: *remotestyle
                  --paper-item-icon-active-color: '#E45E65'
                card:
                  <<: *buttonremote
                  entity: switch.zone_2

When you swap to a new card, you’ll pretty much only need to update/change the anchor. And possibly do a find and replace on the --paper-item-icon-active-color field name.

I love it for styles. I can add a style and it just changes all cards everywhere that would use it.

RichardU · April 19, 2019, 1:15pm

Does anyone have any idea why the delay and off is not working?

Thanks, Richard

  - type: 'custom:button-card'
    color_type: icon
    entity: switch.one
    tap_action:
      - action: call-service
        service: switch.turn_on
        service_data:
          entity_id: switch.two
      - delay:
          seconds: 2
      - action: call-service
        service: switch.turn_off
        service_data:
          entity_id: switch.two

iantrich · April 19, 2019, 1:18pm

There’s no delay option. Just a single action. Write a script if you want something like that.

RomRider · April 19, 2019, 4:42pm

@RichardU, the purpose of the frontend is to display things not to handle logic.
For what you want to do, use a script as @iantrich stated and call the script from the button.

In your configuration.yml:

script:
  my_script:
    sequence:
    - service: switch.turn_on
      entity_id: switch.two
    - delay:
        seconds: 2
    - service: switch.turn_off
      entity_id: switch.two

In lovelace:

- type: 'custom:button-card'
  color_type: icon
  entity: switch.one
  tap_action:
    action: call-service
    service: script.turn_on
    service_data:
      entity_id: script.my_script

iantrich · April 19, 2019, 6:28pm

Version 0.2.0

New Features:

New url option in tap_action to open a new tab
New spin option added to state object to animate spinning

Fixes

Restore rounded corners

Breaking Changes

Deprecate icon: attribute

DavidFW1960 · April 20, 2019, 12:24am

Looks cool but I have no idea how I would use that or how it helps changing from the inbuilt button to this card… I also don’t use card-modder so there’s that…

daphatty · April 20, 2019, 12:30am

I literally did this when I saw @RomRider had taken up the mantle of updating this card. Now I get to update Home Asssitant! SOOO EXCITED!

petro · April 20, 2019, 12:32am

It’s just for cleaning up your lovelace yaml. I made a full remote with 180 buttons. I don’t want to configure something 180 times when I can use anchors to share all the common functionality.

In regards to normal lovelace, it would be this:

  - type: entity-button
    entity: switch.zone_1
    show_name: false
    tap_action:
      action: toggle
    hold_action:
      action: none
  - type: entity-button
    entity: switch.zone_2
    show_name: false
    tap_action:
      action: toggle
    hold_action:
      action: none
  - type: entity-button
    entity: switch.zone_3
    show_name: false
    tap_action:
      action: toggle
    hold_action:
      action: none

or with anchors:

anchors:
  remote_button: &buttonremote
    type: entity-button
    show_name: false
    tap_action:
      action: toggle
    hold_action:
      action: none

  - <<: *buttonremote
    entity: switch.zone_1
  - <<: *buttonremote
    entity: switch.zone_2
  - <<: *buttonremote
    entity: switch.zone_3

what’s easier to maintain when you want to change show_name to true for all 3 switches? The old way, I.E change all 3 individually. Or the anchor way, just changing the anchor. Now imagine that with 180 buttons with the same configuration.

DavidFW1960 · April 20, 2019, 12:45am

Ah so then you just change the anchor… gotcha. I don’t have more than a few buttons but I’ll bear this in mind for future use. Thanks.

SeanM · April 20, 2019, 1:50am

With the cool new tap_action support for external url I thought I’d spend a few mins making a couple Home Assistant Community buttons. Clicking these launch the external URL’s so it’s basically bookmarks inside your Home Assistant. Didn’t spend any time styling them or anything like that but maybe someone will find it useful.

Community-Links

- type: vertical-stack
  cards:

    - type: horizontal-stack
      cards:

        - type: "custom:button-card"
          name: Website
          color_type: card
          tap_action:
            action: url
            url: https://www.home-assistant.io
          icon: mdi:home-assistant

        - type: "custom:button-card"
          name: Community
          color_type: card
          tap_action:
            action: url
            url: https://community.home-assistant.io/
          icon: mdi:forum

        - type: "custom:button-card"
          name: Reddit
          color_type: card
          tap_action:
            action: url
            url: https://www.reddit.com/r/homeassistant/new/
          icon: mdi:reddit

    - type: horizontal-stack
      cards:

        - type: "custom:button-card"
          color_type: label-card
          color: var(--primary-color)
          name: Report Issues on GitHub
          style:
            - padding-top: 5px
            - padding-bottom: 5px
            - border-radius: 25px;
            - text-transform: uppercase

    - type: horizontal-stack
      cards:

        - type: "custom:button-card"
          name: Core
          color_type: card
          tap_action:
            action: url
            url: https://github.com/home-assistant/home-assistant/issues/
          icon: mdi:github-circle

        - type: "custom:button-card"
          name: Frontend
          color_type: card
          tap_action:
            action: url
            url: https://github.com/home-assistant/home-assistant-polymer/issues/
          icon: mdi:github-circle

        - type: "custom:button-card"
          name: iOS
          color_type: card
          tap_action:
            action: url
            url: https://github.com/home-assistant/home-assistant-iOS/issues/
          icon: mdi:github-circle

RomRider · April 20, 2019, 6:08am

Long Press support incomming

ffm777 · April 20, 2019, 10:10am

@RomRider Thank you very much for picking up the development on this card! The new version is absolutely great!

RichardU · April 20, 2019, 2:59pm

Thanks for your post. In what file are you defining the anchors? I’ve tried putting them in customize.yaml, but I’m getting errors.

petro · April 20, 2019, 3:08pm

anchors are a part of yaml, they go anywhere in the yaml file outside your main yaml structure. Read up on it here. This is not a home-assistant thing, it’s how yaml works as a whole.

https://blog.daemonl.com/2016/02/yaml.html

RichardU · April 20, 2019, 3:58pm

That’s what I thought. This gives me an error when placed in customize.yaml:

anchors:
  remote_style: &remotestyle
    border-radius: 20px

Then I read this:
http://www.thomasloven.com/blog/2018/08/YAML-For-Nonprogrammers/

This does not give an error in customize.yaml:

package.node_anchors:
  remote_style: &remotestyle
    border-radius: 20px

But even after a reboot, entering <<: *remotestyle in a Card Configuration gives me:

YAML Error: YAMLException: unidentified alias “remotestyle” at line 6, column 25: <<: *remotestyle ^