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!
1 Like
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.
1 Like
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.
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.
- 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
9 Likes
Long Press support incomming
5 Likes
@RomRider Thank you very much for picking up the development on this card! The new version is absolutely great!
1 Like
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.
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.
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 ^
Thanks for this, loving it! Might have been asked before (tried searching), but is there a way to display secondary info on this underneath the name? Like the last changed?
That is not a current feature
1 Like
Thanks for keeping development going on this one!
Question; I was trying to simplify a button setup for alarm state which was previously quite complicated. I would expect below to also show the text (show_name=true) but does not show it. Did I miss anything?
type: 'custom:button-card'
entity: alarm_control_panel.ha_alarm
icon: 'mdi:bell'
action: more_info
show_state: false
show_name: true
state:
- value: disarmed
color: 'rgb(255, 0, 0)'
icon: 'mdi:bell-off'
name: "OFF"
- value: pending
color: 'rgb(251, 210, 41)'
icon: 'mdi:security'
name: "PENDING"
- value: armed_away
color: 'rgb(0, 255, 0)'
icon: 'mdi:security'
name: "ARMED"
Hi @Tyfoon,
Edit: just released 0.3.0 which includes it.
Note that your config is not valid anymore for action, please check the new documentation (it’s now in the tap_action YAML object)
This feature is not yet part of the latest release (0.2.0) even though it has been merged into master. It’s going to arrive soon 
In the meantime, if you want you can use the button-card.js from the master branch.
Cheers.
1 Like
New features
- Possibility to define a name per state and defaults to retrieving entity’s name if no name is provided
Breaking change
- Introduces a new
show_nameboolean parameter (default istrue) to display the name or not. Before if the name property was ommited, nothing would be displayed. Now it uses entity’s friendly name or entity’s name by default unless redefined in state or general config
that’s because it doesn’t go in customize.yaml. It goes in ui-lovelace.yaml. Because that’s where you’d use that anchor.
Done! Hope I opened it correctly, it’s an issue but I googled and couldn’t find a better way to open a feature request
1 Like
Am I doing something wrong or does color_type: card not play nice with rounded corners?
- type: custom:button-card
icon: mdi:start
entity: input_boolean.cycle1_manual_run
name: Morning Cycle
tap_action:
action: toggle
size: 15%
color_type: card
confirmation: true
state:
- value: 'on'
name: Start Morning Cycle
icon: mdi:play-circle
color: var(--background-card-color)
- value: 'off'
name: Stop Morning Cycle
color: green
style:
- animation: blink 2s ease infinite
icon: mdi:fountain
I’m happy to open a GitHub issue if it is one but I’ve only just started to use this card.
1 Like