Fun with custom:button-card

template first few lines seems not right.

Try this as standalone button n let me know how it looks.

type: custom:button-card
entity: device_tracker.NAMEHERE
triggers_update: person.NAMEHERE
show_icon: false
show_name: false
styles:
  card:
    - background-color: white
    - box-shadow: true
    - border-radius: 5%
    - padding: 15%
    - font-size: 12px
    - text-transform: capitalize
    - font-familly: cursive
  grid:
    - grid-template-areas: '"i zone" "i battery""i watch" "ln1 ln2" "ln1 ln3"'
    - grid-template-columns: 100px auto
    - grid-template-rows: auto
  custom_fields:
    i:
      - justify-self: left
    zone:
      - justify-self: left
      - padding-top: 20px
      - padding-bottom: 5px
      - font-size: 15px
    battery:
      - justify-self: start
      - font-size: 15px
      - '--text-color-sensor': '[[[ if (states["sensor.NAMEHERE"].state <= 20) return "red"; ]]]'
    ln1:
      - justify-self: left
      - margin-left: 1px
    ln2:
      - white-space: normal
      - text-align: start
      - text-align-last: left
      - margin-left: '-70px'
custom_fields:
  i: |
    <img height= 100px src='/local/_20220825_155544.JPG'>
  zone: |
    [[[
      if (states['person.NAMEHERE'].state == 'Home')
        return `<ha-icon
          icon="mdi:home"
          style="width:20px;height:20px;color:SteelBlue">
          </ha-icon><span> <span style="color: var(--text-color-sensor);">${states['person.NAMEHERE'].state}</span></span>`
       else 
        return `<ha-icon
          icon="mdi:map-marker-radius-outline"
          style="width:22px;height:22px;color:orange">
          </ha-icon><span> <span style="color: var(--text-color-sensor);">${states['person.NAMEHERE'].state}</span></span>`;
    ]]]

PS:
Also do testing on entities you have in this are populating its state under Developer Tools

Is there any way to display the arm_night button in a custom button card where an alarm panel badge is inserted? I tried this but does not behave in the same way that a standard alarm panel does:


type: custom:button-card
entity: alarm_control_panel.alarmo
name: Alarmo
icon: mdi:shield-lock
color: orange
styles:
  name:
    - font-size: 10px
  card:
    - height: 55px
states:
  - arm_home
  - arm_away
  - arm_night
state:
  - value: armed_away
    color: rgb(0, 150, 0)
    icon: mdi:shield-lock
  - value: armed_home
    color: rgb(248, 216, 89)
    icon: mdi:shield-lock
  - value: armed_night
    color: rgb(0, 100, 255)
    icon: mdi:shield-lock
  - value: disarmed
    color: rgb(150, 0, 0)
    icon: mdi:shield-home-outline
  - value: triggered
    color: rgb(248, 216, 89)
    icon: mdi:shield-lock

This is the display result of code above:

image

And this is what I see when I click on the badge (no night mode button):

Any advice, please?

I love the layout you have, this is what I’ve been trying to achieve for awhile now. I’ve been working on my dashboard and for some reason I can’t for the life of me figure out how you got your “Entry & Formal” to span the whole width. I know noob approach but I tried just adding more entities but everything just gets smaller. any ideas? Also, sorry if this was already asked, I couldn’t find any replies asking this.

@Kay0ss, if I remember correctly I think I used a combination of horizontal and vertical stack cards to contain the sections. I’ve changed it since then, so it’s different now.

Okay, that’s what I figured, I also tried “panel: true” but that just kinda halfway did the job.

Yes, I use panel mode too. I finally got a chance to look at my config and can reply with more detail.

To make the layout in the photo of my last reply I’m using a horizontal stack as the top level card with two vertical stack cards to get the main columns (see first expando section below).

I stopped using horizontal stack below that because I found it hard to control the widths of my sections when I had multiple sections in a row. I’m now using a custom button card to contain the sections and they equalize much better across the row based on natural size. For detail about the problem I was having with horizontal stack, see here.

The dashboard in panel mode uses this yaml for to set up the 2 main columns
type: horizontal-stack
cards:
  - type: vertical-stack
    cards:
      - !include ../cards/entry-and-formal.yaml
      - !include ../cards/eating-patio-garage-upstairs.yaml
      - !include ../cards/lounge-guestdownstairs.yaml
      - !include ../cards/motivation-with-date.yaml
  - type: vertical-stack
    cards:
      - !include ../cards/perimeter.yaml
      - !include ../cards/critical-devices.yaml
      - !include ../cards/pool.yaml
My alternate technique instead of using horizontal stack

This is the ../cards/eating-patio-garage-upstairs.yaml file referenced by the previous yaml, which is the second row on the left side of the photo in my previous reply. This is acting as an invisible container and sets margins to replicate the gaps between cards that you normally get with the horizontal stack. It’s a bit more work to tailor it for how many cards you want to show horizontally, but it gave me much better results than a horizontal stack.

type: custom:button-card
styles:
  card: 
    - padding: 0
  grid:
    - display: contents
  custom_fields:
    group1:
      - margin-right: 4px
    group2:
      - margin-left: 4px
      - margin-right: 4px
    group3:
      - margin-left: 4px
custom_fields:
  group1:
    card:
      !include eating-patio.yaml
  group2:
    card:
      !include upstairs.yaml
  group3:
    card:
      !include garage.yaml

Edit: Figured it out.

          - type: custom:button-card
            icon: mdi:pause-box-outline
            show_name: false
            tap_action:
              action: call-service
              service: button.press
              service_data:
                entity_id: button.octoprint_pause_job

Is it possible to press a “button entity” from custom:button-card?

I’m working on 3D printer dashboard with the Octoprint integration. One of the entites that is auto-created is Pause Job, Resume Job, and Stop Job:
image

The entity ID’s of these are:

  • button.octoprint_pause_job
  • button.octoprint_resume_job
  • button.octoprint_stop_job

I’m able to trigger these from a normal Button Card, but can’t figure out how to do it from custom:button-card.

For my card config, this defaults to open with more-info:

type: custom:button-card
entity: button.octoprint_pause_job

But it doesn’t actually click the “press” button. It just opens the more-info panel.

image
I’ve also tried adding a tap_action: toggle but that didn’t work.

Here’s my card. Like I said, I have it working with normal button cards, but I’d like to customize the colors if possible. I wasn’t able to get it working with call-service button.press, either. Could be a syntax issue though.

image

Do you guys have any other suggestions I can try?

1 Like

Is it possible to set the card background colour through an operator state template?

This is what I assumed would work but… it doesn’t. Icon works as expected.

thanks!

state:
  - operator: template
    value: >
      [[[ return states['sensor.something'].attributes.is_something === 'false' ]]]
    icon: mdi:weather-night
    styles:
      card:
        - background-colour: red

Does it work if you spell it background-color?

Whether that works or not, you can probably use the color property of the custom button card instead, as long as the card’s color_type property is card (my template does use color_type: card):

state:
  - operator: template
    value: >
      [[[ return states['sensor.something'].attributes.is_something === 'false' ]]]
    icon: mdi:weather-night
    color: red
1 Like

Duh! Yes, it absolutely works with background-color instead of background-colour…! :sweat_smile:

I don’t know how I missed that… It’s been a long day… :upside_down_face:

Thanks!

You groups of buttons with nice round corners and a heading with text. How do you make those? Like this group
image

If possible, maybe show the yaml for a group?

@khvej8, sure thing. Check out the original post, in this section.

1 Like

Have anyone crafted a GUI for creating custom button cards designs?
Because the yaml is killing me.

I would like to set some of the card/style properties based on a mediaquery.

Is this possible? any examples would be appreciated.

1 Like

Ufff… this card is soooo packed with features that any UI would be…. well, too big, filled with stuff and so i think practically not usable…
Things are really almost limitless. The only and best thing is to learn yaml.

1 Like

I’m thinking in the lines of (for a template/card);

  • Setup grids
  • Add images to specific placeholder in card
  • Add entity info to specific placeholder in card
  • Set basic color options for the entire card
  • set conditions, or sumting like that, for the card.

Why?
Because I am struggling with my self, and my ideas for cards. And if the threshold for even beginning to create the card is too high, I wont get of the ground…

I noticed you never got any help. Here is my Alarm button, which I use to arm it ‘home’ at night. This is on the bottom of most of my dashboard pages.

type: custom:button-card
template: button_row
styles:
  card:
    - border: 1px solid rgb(68,115,158)
    - box-shadow: 0px 0px 2px 1px rgb(68,115,158) inset
custom_fields:
  buttons:
    card:
      type: custom:mushroom-alarm-control-panel-card
      entity: alarm_control_panel.folsom_alarm
      states:
        - armed_home
      show_keypad: false
      name: Home Alarm
      fill_container: true
      secondary_info: state
      primary_info: name
      layout: horizontal

This is what it looks like, the button is over to the right, tapping it arms the alarm ‘home’
image

Hope it helps you, good luck.

2 Likes

You’re going to have a bad time with this card if you don’t take the time to learn yaml. There’s no simple template for what you’re asking for. There’s an example section in the documents, which you should get familiar with as it describes the yaml.

If you don’t want to learn yaml, then you should use mushroom cards or something that’s 100% ui. This card is way too complicated to come up with a UI, let alone a template.

Hi @petro
I was knee deep in yaml before, and I liked it. It’s the fact that HA and yaml is so flexible that everything can be done anyway the creator of, for example this awsome card, any application wants.

So I’m with you on the yamlying. Just wanted to vent something I actually think is a good idea; More UI for everyone. At least a “basic” UI-get-started-thingy :smiley:

Peace

I have just built a simple music dash for the wife and am wanting to get the icons on the buttons to rotate when a playlist is selected and playing.

I would like the music icon to spin, showing the active playlist, i did experiment with the animation function within the button but only for effect.

Is this possible and if so any pointers would be great. Fairly new to HA so go easy on me :grinning:.

Sparky

cards:
          - type: custom:button-text-card
            tap_action:
              action: toggle
            entity: script.iconic_playlist_everywhere
            title: Iconic Playlist
            subtitle: My Playlists
            icon: mdi:music-box-multiple-outline
            icon_animation: null
            icon_color: green
            icon_size: 40
          - type: custom:button-text-card
            tap_action:
              action: toggle
            entity: script.all_music_everywhere
            title: Feeling Happy
            subtitle: An Amazon Playlist
            icon: mdi:music-box-multiple
            icon_animation: null
            icon_color: orange
            icon_size: 40
          - type: custom:button-text-card
            tap_action:
              action: toggle
            entity: script.epic_playlist_everywhere
            title: Epic Playlist
            subtitle: My Playlists
            icon: mdi:music-box-multiple-outline
            icon_animation: null
            icon_color: purple
            icon_size: 40
          - type: custom:button-text-card
            tap_action:
              action: toggle
            entity: script.classic_electro_everywhere
            title: Classic Electro
            subtitle: My Playlists
            icon: mdi:music-box-multiple
            icon_animation: null
            icon_color: red
            icon_size: 40
          - type: custom:button-text-card
            tap_action:
              action: toggle
            entity: script.epic_playlist_everywhere
            title: All Our Music
            subtitle: My Playlists
            icon: mdi:music-box-multiple-outline
            icon_animation: null
            icon_color: blue
            icon_size: 40
          - type: custom:button-text-card
            tap_action:
              action: toggle
            entity: script.1663087818783
            title: Mark's Playlist
            subtitle: My Playlists
            icon: mdi:music-box-multiple
            icon_animation: null
            icon_color: green
            icon_size: 40
          - type: custom:button-text-card
            tap_action:
              action: toggle
            entity: script.70s_dance_everywhere_2
            title: 70's Disco
            subtitle: An Amazon Playlist
            icon: mdi:music-box-multiple-outline
            icon_animation: null
            icon_color: orange
            icon_size: 40
          - type: custom:button-text-card
            tap_action:
              action: toggle
            entity: script.rare_groove_playlist_everywhere
            title: My Rare Groove
            subtitle: My Playlists
            icon: mdi:music-box-multiple
            icon_animation: null
            icon_color: purple
            icon_size: 40
          - type: custom:button-text-card
            tap_action:
              action: toggle
            entity: script.friday_night_bangers_everywhere_2
            title: Friday Night Bangers
            subtitle: An Amazon Playlist
            icon: mdi:music-box-multiple-outline
            icon_animation: null
            icon_color: red
            icon_size: 40
          - type: custom:button-text-card
            tap_action:
              action: toggle
            entity: script.bombay_dub_orchestra
            title: Bombay Dub Orchestra
            subtitle: An Amazon Playlist
            icon: mdi:music-box-multiple
            icon_animation: null
            icon_color: blue
            icon_size: 40
          - type: custom:button-text-card
            tap_action:
              action: toggle
            entity: script.amy_winehouse_everywhere
            title: Amy Winehouse
            subtitle: An Amazon Playlist
            icon: mdi:music-box-multiple-outline
            icon_animation: null
            icon_color: green
            icon_size: 40