Lovelace: Button card

I have looked through the documentation and have not seen any information on creating a round button. Could you please share your config for the circular entity picture button? Thanks!

You should just need to specify
border-radius: 100%
For the card and entity-picture in styles

Thank you!

I started making a summary card: https://gist.github.com/iantrich/d2a485a6bc13c689564a6fe1306712d4
image

Idea is to provide a Google Home Hub/Homekit Inspired summary of your active elements in your house. I’m stopping here though and going to work on a dedicated summary-card that will be a cleaner to configure and therefore easier for others to use. I’ll post back here when I have a MVP to share, but for now you can play around with what I posted.

Edit: I’m now having second thoughts. I was thinking that by doing a dedicated card, I could specify tap actions for each line of text, but I’m not sure if that is worth the effort…there are things I could add, of course, but that was my initial thought. Any other thoughts on this?

4 Likes

Does anyone know if there is a way to make the entire card transparent, so that is does not show up with a background or border? I want to create a Tracking Card that simply shows the picture entity and text.

I have made a mod, similar to card-mod which allows 3D touch to be used on cards in Lovelace.
Makes for a great Apple Home-like experience! See the post here.

2 Likes

Just like this:

  styles:
    card:
      - box-shadow: unset
      - background-color: unset

Thanks, that was easy!

Nice, I was currently handling this with a markdown card and template sensors. This looks cool.

I started with markdown but soon figured it was going to get tedious…well more tedious :slight_smile:

Exactly, will give it a try.

Hi All,

I am trying to implement an occupancy display using the custom button card. I have started out with a template from petro31 git as the basis and have produced the below code.

I have set an entity_picture: as the default background and then via the state: value “off” and I am trying to apply a grayscale filter. I have searched throught this thread and seen mutiple examples, and also taken note of the breaking change back in 1.5 - but I just cant get this working !!!

can someone please have a look at my code and check to see if there is anything obvious that i have missed.

            - type: custom:button-card
              color: auto
              show_state: true
              show_name: true
              show_label: true
              show_entity_picture: true
              entity: input_boolean.home.occupancy
              entity_picture: /local/picture.jpg
              styles:
                entity_picture:
                  - width: 100%
                  - padding-bottom: 0%
                card:
                  - height: 80px
                  - width: 80px
                  - border-radius: 15px
                  - margin: 8px 0px 0px 0px
                  - padding: 0px
                name:
                  - justify-self: start
                  - align-self: start
                  - padding: 0px 0px
                  - font-size: 15px
                  - font-weight: bold
                  - color: white
                label:
                  - font-size: 11px
                  - font-family: Helvetica
                  - text-transform: capitalize
                  - font-weight: bold
                  - align-self: end
                  - justify-self: start
                  - padding: 9px 10px
                state:
                  - font-size: 11px
                  - font-family: Helvetica
                  - text-transform: capitalize
                  - font-weight: bold
                  - align-self: end
                  - justify-self: start
                  - padding: 9px 10px
                lock:
                  - align-items: flex-end 

              state:
                - value: "off"
                  entity_picture:
                    - filter: grayscale(100%)

You’re missing styles:

              state:
                - value: "off"
                  styles:
                    entity_picture:
                      - filter: grayscale(100%)

nope still doesnt work :frowning:

            - type: custom:button-card
              color: auto
              show_state: true
              show_name: true
              show_label: true
              show_entity_picture: true
              entity: input_boolean.home.occupancy
              entity_picture: /local/picture.jpg
              styles:
                entity_picture:
                  - width: 100%
                  - padding-bottom: 0%
                card:
                  - height: 80px
                  - width: 80px
                  - border-radius: 15px
                  - margin: 8px 0px 0px 0px
                  - padding: 0px
                name:
                  - justify-self: start
                  - align-self: start
                  - padding: 0px 0px
                  - font-size: 15px
                  - font-weight: bold
                  - color: white
                label:
                  - font-size: 11px
                  - font-family: Helvetica
                  - text-transform: capitalize
                  - font-weight: bold
                  - align-self: end
                  - justify-self: start
                  - padding: 9px 10px
                state:
                  - font-size: 11px
                  - font-family: Helvetica
                  - text-transform: capitalize
                  - font-weight: bold
                  - align-self: end
                  - justify-self: start
                  - padding: 9px 10px
                lock:
                  - align-items: flex-end 
                  
              state:
                - value: "off"
                  styles:
                    entity_picture:
                      - filter: grayscale(100%)

Your entity looks wrong also… Maybe the second dot should be an underscore? :wink:
entity: input_boolean.home.occupancy

winner winner chicken dinner!!! :+1:

your the man romrider :smiley:

Took a little time tonight and finished my summary card
image
I haven’t cleaned it up at all and probably won’t as @RomRider just released some breaking changes and I’m actually just going to use notification indicators to highlight areas that are active and their counts instead. The summary text got to be a bit much. Regardless, here’s the gross configuration :slight_smile:

Preview of notification button view. Still a WIP

6 Likes

Ooh, those notification buttons are looking slick.

Not yet released, but it’s a small breaking change :stuck_out_tongue:

You’ll be able to leverage the new custom_fields feature for that :slight_smile:

1 Like

Right now it is some wonky CSS :stuck_out_tongue_winking_eye: