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
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?
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.
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
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
- 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?
entity: input_boolean.home.occupancy
winner winner chicken dinner!!!
your the man romrider
Took a little time tonight and finished my summary card
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
Preview of notification button view. Still a WIP
Ooh, those notification buttons are looking slick.
Not yet released, but it’s a small breaking change
You’ll be able to leverage the new custom_fields
feature for that
Right now it is some wonky CSS