Home Assistant Custom Button Card Uses and Examples

today's video comes with the request of a subscriber they ask some questions about some of the things they've seen in my home assistant dashboards well one of the most common things that I use across all of my different dashboards is the custom button card so I'm going to talk about that in a little more detail today so hang around [Music] hi and welcome to resin chem Tech now the custom button card is a highly versatile and customizable add-on that you can use in your dashboards to do a lot of different things in fact it has so many features and options I'm only going to be able to cover a few of them today but I'm going to show you the most common ways that I use it and also provide you some examples that you might be able to adapt into your own dashboards as always be sure to check the video description for links for more details and additional information with that let's get started to use the custom button card you do have to install it through the home assistant community store now if you don't have the home assistant community store installed I'll leave a link down in the video description with information on how to install that into home assistant but from within the home assistant community store once you have it installed we're going to go to front end and then you're going to explore and download repositories you'll simply search for button card here but since I already have it installed pull it up here and you should see this screen in this button card by ROM Rider make sure you're getting the right one now this page also contains a lot of information on all the features and the details of how to implement those features into your own custom button cart now since this is a custom card it is going to require writing a little bit of yaml I'm not going to go into the details of all of the documentation here you can take a look at that yourself but it is pretty complete so I'm going to show you some examples and between my examples and what's published here on the documentation page which I'll leave a link to down in the video description you should be able to figure out how to create your own custom button card and have it do just about anything that you want but let's take a look at some examples now so what I've done here is I've created a temporary dashboard page and I've pulled copies of my custom buttons from other dashboards that I have in home assistant and I'll put them here all in one spot so we can take a look at them and I'll show you a few different the features and a little bit of the yaml that I used but I'm not going to go into a lot of detail I will make the yaml for this entire dashboard available and you can find a link to that in the video description so between how I use the yaml to implement some of these and the official documentation on the custom button card you should be able to figure out how to adapt these for your own use so in this first set of examples I'm just using some custom button cars to control physical switches or lights let's take just a little bit closer look at that and edit that and here is the kitchen sink light now notice when I click that it turns on and it obviously turned the light on as well but it indicates the state here by the color or the fact that it lights up now if I like instead of using the card I can switch this type to Icon and now notice that the icon instead of the card itself is what lights up so that is a very easy change to make if I go over here and take a look at the family room and we'll turn that on again I have complete control of even the color so if I just make a simple color change here and now I'm getting this pinkish color so I can use any color I want again I can use the card or I can use the icon to indicate the current state of the physical switch or a lamp so that is pretty easy and pretty straightforward next I've also created what I'm calling virtual or templated switches this would be to control my overhead brightness of my basement lights when the lights are at 100 the switch is on when it's anything else it's off same thing for 75 and 50 so not only can I click these and actually change the brightness level of the lights I can also use this same thing which is a physical switch to actually turn the lights off or turn them back on so in this case what I've done is I've created template switches equal to the brightness and use those as off or on and again created a custom button card to reflect the current brightness of the lights in the basement next we'll take a look at how we can use these custom buttons and tie those to Binary sensors now binary sensors are things like door or window sensors or maybe even motion detectors anything that has an on or off or true or false state and here you can now see that the laundry door is open there's a couple different things here we haven't seen yet for one not only did the color change to indicate the state but it is now flashing and we're going to talk about animation here in just a second but also the icon itself changed so let's take just a little bit closer look at how that is done so we will edit this and we will go to that particular one which is the laundry door and notice I've got a state option down here I have a state of off so when the door is closed to the binary sensors reporting off and a value of on within those States I can pretty much change anything I want about the button itself so in this case I actually changed the color I go from red to green and I also actually change the icon itself from a material design icon of door to door open that allows me to actually change the state and the color and the icon and a lot of other properties of the button based on the state of the entity that it's tied to now we'll come back to animation here in just a second now obviously we can't change the state I can't click this button and suddenly open open the door although with a garage door being a cover I actually could open my garage door by clicking this button but similar to Binary sensors we can also tie our custom button cars to input booleans and those we can click on and control so an input Boolean much like a binary sensor has a true or false or offer on in my case this is showing some different voice notifications I've got in the house but I can simply click that button and turn those voice notifications off and notice much like I showed up here with these when I did click that and change the state I actually changed the color and I changed the icon so I can turn those off and on individually or my case I actually have a master button that will turn all of my voice notifications off at one time but it's nice having a visual notification in terms of colors and the state of the icon itself to let me know whether the input Boolean is off or on and again just to show you quickly how that is done it's very similar to the binary sensors but we will come down and we will take a look at one of those so again I'm just using a state icon here I'm tied to an input Boolean and again this is the big button here and when it has a state of on I want this color when it is off I want to change that to the kind of that gray color that we see here and I'm also changing the icon to be voice off instead of Voice on now everything we've talked about so far in this First Column have been tied to a state that has either an on or off or true or false opened or closed but it is possible to also take your custom buttons and modify those and change things like the icon or other properties based on a numeric value something that might be an entity that reports back in numeric value in this case I'm showing battery percentages but it could be an input number or anything else that reports a value back let's take a quick look at how that works so we're going to edit that and take a look here this happens to be the mailbox icon that you're seeing and again State before we had either on or off in this particular case we're actually going to look at different values and say greater than or equal to so if the battery percentage is greater than or equal to 95 percent show this icon if it's greater or equal to 75 percent show this icon and I can repeat that all the way down for different values for that battery and change the icon again I could change the color in fact I believe when the battery percentage gets so low I actually do change that to Red to let me know it's time to change a battery so you can tie the properties of your custom button card to numeric values as well as to just Boolean values you can also use custom button cards for navigation you can actually have a button that you can click that can take you to any other page or dashboard within home assistant or can even take you to a website outside of Home assistant now you might want to use this somewhere say where you're having maybe a tablet kiosk or something like that and you don't necessarily want the menus across the top but you want to be able to have the users navigate to a different page if we take a look at how that's done it's really pretty simple all we do is give it an action of navigate and give it a path now if you're going to use an external web page there's actually is a URL that you'll use in there instead of navigation path but that will actually pop open a new tab in the browser but so you can also use custom buttons to perform navigation within and externally to sites outside of your dashboards custom button cards can also be used to launch a script or really pretty much call any other service that's available in home assistant now something you'll notice a little bit different about these buttons is I'm not using a standard icon instead I actually have images that I uploaded and assigned as a picture to these cards so let's take a quick look at those edit that and we'll take a look at this first one which is the ESPN button now I'm actually going to call service I'm actually going to run a script and what this script does is actually going to change the the TV over to ESPN but the interesting thing here is the ESPN logo what I've done with that is I actually uploaded my own image that I've captured from ESPN and I've put it in my www folder and I can call that as an entity picture to show up and use on the button card so once again a lot of flexibility in this case you can use your own custom images instead of a standard material design icon on your custom buttons and finally why I've covered a little bit of these looking at some of the other buttons I'm going to talk a little bit about animations and styles there are a lot of different ways that you can animate your buttons and I've just got a few examples here that we will take a quick look at the first one is this rotating fan blade that really shows me anytime my hva system is running I can even change the color whether that's based on heating or cooling but again down here you can see that when I've got a value of on I'm actually telling it what animation to use for that icon and again you can look up those animation types there's some documented in the custom button documentation but really it's any kind of CSS style animation you can drop in here and use so I won't go into a lot of detail but notice in this case I'm using a rotation and this particular case for the showing of the garage door I'm actually using a blank and down here you notice I actually have a fade of a background of a rather large card that's because the size of the image was large but you do this on a much smaller scale if you want something like sunrise sunset something like that you want to actually tie to your card itself take a quick look at that what I've done there is really is just set some keyframes and in my case I'm actually just having it swap every 10 seconds and so it's just rotating through a series of images so that is another way that you can use animations on your custom button cards but it's by no means the only options for animation so those are just a few examples of how I use the custom button card and by no means even scratches the surface of other things that you can do with this card including having complete control and layout of the display within the custom button card itself so if you want to learn more about the custom button card be sure to check out the links in the video description where I will link to the custom button card documentation and we'll also link to a copy of all the yamble that I used to set up those buttons you saw on my sample dashboard so if you saw anything in this video that you liked or found helpful do me a favor and hit that thumbs up button that lets me and YouTube know more people ought to see this video click that subscribe button to see more of my videos and ding a little bell icon if you want to be notified when I release new content and as always I'd like to say thank you for watching and I hope to see you soon thank you [Music]

Channel: ResinChem Tech

Views: 5,766

Keywords: Home Assistant, Dashboards, Lovelace, YAML

Id: 5Pi21pqfbxA

Length: 12min 43sec (763 seconds)

Published: Sat Apr 08 2023