Great video, it helped me a lot for overall process. But being brand-new, I'm still looking for an example with one-single-simple button on the card (kitchen sink). Start with just one, which works. Every example I find starts with a yml containing dozens of elements.
I have the fortune of not needing to make my dashboards accepted by others like a wife. So I tend to leave my “Cleaning up dashboards “ as the last thing on The List. I do find YAML editing helpful here and you have provided a nice walkthrough which will help me. I am often jealous of others Dashboards and Kiosks but I still need to make my automations work at this point. I feel you have encouraged me to do some more Cleaning!
While the WAF/FAF is definitely a factor, for me I like to have an "at-a-glance" dashboard that provides me with the things that are most used or most important on a daily basis. I then make extensive use of colors and animations with the custom button cards for an easy-to-see and interpret status of those items. And anything that might need my attention normally flashes in red (like a garage door left open, or a Zigbee device that needs a battery) and this does grab my attention. But you are correct about the WAF/FAF. And a well-designed dashboard, through appropriate design and layout of controls, should also make it easy and intuitive for visitors and guests to manage key components of my smart home as well. As always, thanks for watching and the feedback!
The custom:button-card is by far one of the most useful cards in Home Assistant. I probably use it with 80% of the cards on my multi-room dashboard. But, I have to say, the most underrated feature of this card is its ability to use templates. Once you have a card designed the way you like, that configuration can be put into the raw editor and cards can reference the entire template with one line. For example, my basic light card is 31 lines long. Building on that, the YAML for my motion detector cards is another 31 lines for a total of 62 lines. I have six motion detectors. Without the ability to template the cards, that section would be roughly 360 lines long but instead only takes up 24 lines when calling the template. Additionally, making changes in just one spot is so much easier than having to track down every instance where a changes needs to be made.
I am very new to HA and have been trying to get custom button card working…watched countless videos, scoured the forums and Reddit. You broke it down in a very easy to understand way and I appreciate the sample yaml. I was able to get mine working with your help!
Congrats! Glad you got it working and that I was able to help out at least a little. I've been using Home Assistant for about 4 years now. It has definitely gotten better, but it can still be a little overwhelming when first starting out. Don't hesitate to reach back out if I can help out any in the future. I plan to do some additional "Home Assistant 101" videos down the road as well. Thanks for watching and taking the time to leave a comment.
Hi ResinChem, I love your video's. Can you make a tutorial of HA and person card with cellular info. Have searched and searched but could not find a nice video tutorial, you can be THE ONE who wil help thousands of less skilled persons :)
Awesome video; thanks for making it. I didn't know about button cards. I'm just dipping my toes into custom dashboards and hadn't come up with a lot of compelling use cases beyond just displaying statuses, but these buttons (and your suggestions) give me lots of great ideas.
You are welcome! I'm glad you found it helpful. As I mentioned, I use custom button cards extensively throughout my dashboards because of their versatility. They do take a bit of YAML to use, but the documentation is pretty complete. Thanks for watching and taking time to comment!
You are welcome! I use it a lot across multiple dashboards. I fear the day when it is no longer supported or becomes obsolete! Hopefully that doesn't happen for a very long time, but I've been bitten by other HACS components in the past that the original author abandoned and then Home Assistant changes something that causes that component to no longer function. But such is the nature of adopting community add-ons I guess. Thanks for watching and taking time to leave a comment. It is greatly appreciated!
Thanks. This one isn't so much a step-by-step how-to video like some of my others, but is meant to just show some of the things that can be done with the custom button card and to provide a general idea of how to do some of those things. The custom button card can do a lot more than I showed in this video... but the online documentation is pretty complete and is really helpful. Thanks for watching and taking time to comment!
Excellent video as usual. I did not know about this card so, using your video as a guide, I installed the Hacs custom button and configured a few buttons that actually work! I can edit the yaml for each individual button but in my searching using the terminal I have not found where the program is storing this YAML.
Thanks. Glad you found it useful. The YAML for the dashboards is not stored like other "normal" YAML files. The actual files, I believe, are stored in the hidden .storage folder but should never be edited directly from there. If you want to edit the raw dashboard YAML, the best option is to open up any page and after selecting 'edit', click the three dots again in the upper right again and select 'raw configuration editor'. This will give you the entire YAML for the dashboard. If you want to use a different editor, you can copy/paste the contents, edit and then paste back again. Not the most elegant solution, but it is currently the safest option. See this: community.home-assistant.io/t/where-is-the-lovelace-config-saved/87663 Hope that helps!
@@ResinChemTech Oh wow. I just did that and the whole Yaml for the dashboard is there. This will do. Thank you for the help!!! I guessed the Yaml was probably in one of the hidden folders but had not gone that far to look. Don't need to now.
You are welcome! I use the custom buttons in all sorts of ways as it is so versatile. What I showed were just a few examples. Glad you found it helpful. I'll be showing them again in an upcoming video, but used in a slightly different way. Thanks for taking time to post a comment.
By default, the area defined for the image size is fixed.. unless you want to redefine it using css (something I'm not very good at, but is described on the custom button Github page). However, for the best results using the default, make your image square... or as square as possible. Image size isn't really important (as long as it isn't too small)... it is the width vs. height that will impact the size more than the original image size. I think most of mine are in the 300 x 300 to 500 x 500 range.
Thanks! Hopefully it gives you some ideas on how to use the custom button card in your dashboards (or new ideas if you are already using it). Thanks for taking the time to post a comment!
You are welcome. It's amazing what all you can do with the custom button card... and I still discover new ways to implement it despite having used it for quite a while. Thanks for the comment!
Hello, Very useful video and helped me improve my dashboard At the end (11:55) you show a personal card, do you have a video on it to make it? for the moment I use a custom button to go to a page where this info is put separately
Awesome video, thank you very much. There is one thing I had a question about. I saw that you have the gauge card on some of your buttons. I've managed to make a gauge card connected to my thermostat but I cannot figure out how to add it to a button. I tried custom-fields but it just puts the gauge in a small area in the lower right corner and makes the button huge. Would you mind sharing how you create the gauge buttons that look right please?
I'm not really sure what you are referring to. I think the only place I show any gauge cards are in the very beginning intro where there is a screen shot of one of my dashboards. The gauges shown there are just standard Home Assistant gauge cards and not custom button cards. None of the actual examples that I cover in the rest of the video are gauge cards. I'm happy to try to help. If there is a particular part of the video you are referring to, please let me know the approximate time stamp and I'll try to provide a little more detail on that section if I can.
@@ResinChemTechOh ok sorry about that. It was one of them on your other dashboards. I assumed you had put the gauge on a button. Just a bad assumption on my part. Again thanks for this very helpful video. I set up a minimalist dashboard as my wife was getting frustrated with the default HA dashboard and want to use the buttons to get to the details if we want from the main page. So this video is coming in very helpful.
No problem! I get it about the wife! Despite having a couple of tablet kiosks setup, she rarely interacts with Home Assistant via the dashboards. She prefers to interact via voice, so I've put a lot of effort into voice-based automations that she can use. She occasionally uses a special mobile dashboard on her phone that I created just for her phone... and a couple of Zigbee buttons that I installed and configured in the master bedroom. But most of her interactions are via voice. Since we have multiple Google speakers throughout the house, she can ask for something just about anywhere and one of the speakers will hear her and launch the appropriate automation or routine in Home Assistant. Regardless, having a high WAF is important! Just let me know if you have any other questions or thoughts.
Thanks for this video, its very helpfull. I see that you made severel buttons for setting the brightness. Can you tell me if you can also put a brightness slider in a button, and if so.. how. Thanks allot
Well, I created the brightness buttons by creating 'virtual' switches in Home Assistant that can be turned on/off just like other switches. This is actually something I will be covering in a video coming out in a couple of weeks, so you might watch for that and I'll show exactly how I created those brightness switches. I don't think you can actually put a slider into the custom button. But the new default control for lights in Home Assistant has a slider, so you could set the click property of the button to 'more info...' and that would then pop up a slider control for the light.
Exactly correct! Back when I did this, I needed to have a script for both the turn_on and turn_off functions. Since I didn't want any action taken when the turn_off was called, I just created an empty dummy script. I can use this anytime or anywhere that a function, automation or script might be required but I don't want any real action taken. I'm not sure it is necessary anymore... but it was back when I initially created my dashboards and automations. Thanks for the kind words and posting a comment!
Thanks for this very usefull video. I created some buttons cards but they look bigger and I don't have the lovely colored layout with nice incon squares. How do you manage to get that ? Thanks in advance :)
The size can be somewhat controlled via the aspect_ratio setting of the custom button card... and by putting the cards in a grid card on your dashboard. By default, a card will take the entire height/width on the dashboard unless 'contained' by another card, such as a grid or horizontal stack. Colors are set (by icon or card) in the configuration of the card itself. And you can define different colors based on the state of the entity (e.g. a different color for "on" and "off"). This is all documented on the custom card site, which will tell you everything you need to know: github.com/custom-cards/button-card In addition, I made my entire configuration for the dashboard you see in the video available in a gist file. You can look at how I made certain buttons do certain things, or show in a particular way, and then adapt that to your own cards: gist.github.com/Resinchem/2972719d32014dce644b9fff6b1b223c
My HA does not have the list across the top? Yours has Basement, DIRECTV, etc.... how do I set that up? Thanks for the great videos! Hopefully soon I will have a nice looking HA like you have!
Those are each just a different view or tab within a dashboard. You can easily add a view by editing the dashboard. Along the top border where the first default view is listed, you should see a plus sign (+). Just click that and give the new view a name, an optional icon, etc. This will create a new blank view or page where you can add cards. You can find full details here: www.home-assistant.io/dashboards/views/
@@ResinChemTech Thank you! Guess I was over thinking it 🤦♂ .. on the custom card I have this message: "No visual editor available for type 'custom:button-card'." Do I need to install a Visual Editor? As you can see I am a newbie to this HA
Yeah... you are going to see that with most custom add-ons. Since it is not a default, built-in card for Home Assistant, it can't give you the normal 'visual editor' to set it up. And there isn't any kind of add-on for this. It means you simply have to configure the card using the code editor (YAML) as I show in the video. In fact, for pretty much any card type (built-in or add-on) you can switch to the code editor view... and in some cases, certain features are only available in the YAML view. It's just that most add-ons can only be configured via the code editor. Hang in there with Home Assistant! There is a bit of learning curve, but you'll quickly catch on. And there are plenty of folks out there, myself included, that are always happy to answer questions and try to help.
That's odd... because an update was just released a little over a week ago. I was prompted to upgrade in HACS... and you can see a new release was put out on Apr 2: github.com/custom-cards/button-card/releases/tag/v3.5.0 Now, it is true that no updates had been made for a while prior to this, but maybe that's because none were necessary for current functionality? So it does appear that the author is still maintaining the repo and making updates as needed. On the flip side, there are a lot of open issues that don't appear to have been addressed in quite a while either. But this is a risk you run with HACS components... if the author doesn't maintain them, there is a possibility that a future Home Assistant upgrade will break them. I dread the day if that ever happens to the custom button card as I will be forced to overhaul nearly all my dashboards!
I have installed the Button Card but really have no clue how to use it. Started an empty Dashboard and did a Add card followed by selecting Custom Button-card, I got a one line script prompt. What to do now? Expected to see options of icon to choose from. There is also a message saying there is no visual editor available. The TH-cam video’s do not show how a button card is made from scratch. Appreciate any help!
What you are seeing is correct. As I stated in the video, there is no visual editor for the custom button card (since it is a HACS add-on) and the card must be configured by entering in the appropriate YAML. The video also shows multiple examples of this YAML and how you create those cards. Also as mentioned, if you look in the video description for this video, you will find a link to the full documentation for the custom button card that will tell you how to configure it , plus there is a link to a full copy of the YAML that I used to set up the custom button cards as shown in the video that you can follow as an example.
You didn't cover this that I caught, how can I make that garage door icon animated so that I can see opening and closing? I'm not looking for blinking and bouncing, but an actual opening and closing animation.
Well, first you'd need some sort of sensor that could report back the various states of the garage door... e.g. open 10%, open 20%, open 30% etc. Since the button can only represent a state of the entity, the entity would need to report different parts of the opening process. But if you actually had something like that, then you could change the icon state based on the percentage of the door opening. I do something very similar to this with battery percentage for many of my sensors. But if the sensor only reports open/closed and since the button is reliant on the state of the entity, you first have to have/create an entity that shows the various opening stages of the door. Otherwise the only states you can key off of for the button are open and closed.
@@ResinChemTech I'm pretty sure the RatGDO (chamberlain garage door) does this if I'm not mistaken, since it reads/controls from the opener itself and not just a remote button.
My Tailwind garage door also has its own app icon with animation showing the door opening/closing. But I don't think it is possible to use those as part of the custom button card. There may be a way using templates or your own jpgs and the changing image background to duplicate something close to an opening garage door, but the standard material design icons generally don't include animations. You can check out the custom button documentation here: github.com/custom-cards/button-card
Hi, verry good video. But can you show, how to create a custom-button-card as a alarmcard width more tah one entity? For example: No alerts: Icon alert-bell color green. Alert Dishwasher salt empty: Icon change from alert-bell to dsihwasher-alert color change to red animation icon blink text change from nothing to ALERT!. Alert Coffeemaker beans empty: Icon change from alert-bell to coffeemaker-alert color change frpm green to red icon blink text change to ALERT! and so on... and all this together in one custom-button card. i hope you know what i mean. Thanks
I don't think the card can use more than one entity. You'd have to create a custom templated entity that returns the different values like dishwasher, coffeemaker, etc. as a single entity. The card could then use this custom templated entity's state value to change the icon, text and color of the card. But you'd have to create this custom templated entity via YAML and then base the custom button card's entity on that. You can search for Home Assistant template sensor to learn more about how to do that. The other option is to create create conditional cards and individual custom buttons on each one. Which cards (and therefore custom button cards) are shown would depend on the states of the dishwasher, coffeemaker, etc. I do have a video on how to use conditional cards if that might be helpful.
I'm not really doing anything special. It is the default theme except I tweaked a few colors and specified an image background. Other than than (and a few custom cards/controls - like the custom button card), it's not anything that I create from scratch. Just a few mods of what was already there.
I'm really new at this, about 3 weeks or so. So do I have to create a 2 supporting scripts also, 1 to dimm the lights to 50% and another to turn the switch on? (SHOWN AT 3:42) and is where is this created? a new yaml file? EX: "script.turn_on" and "script.basement_light_50%"?
It really depends upon how you want your switches/buttons to work... and that is handled in how you create the script or automation. For example, when you switch the lights on, do you want them to always turn on at 100%... or do you want them to turn on at the last brightness level as when they were turned off (e.g. 50%). Similarly, you can have each of the brightness buttons also turn the lights off/of or you can use a separate button/switch for that. You can certainly create the scripts via YAML... and unless you've setup a split configuration or Home Assistant packages, this would be done in your main configuration.yaml file. But if you are newer to Home Assistant or haven't worked much with YAML, I'd recommend creating your scripts via the UI editor and not mess around with the YAML at this point. You also don't have to worry about where the scripts are located when using the UI editor. So, basically, decide what you want your lights to do when you click a particular button. Use the UI script editor to create those steps. You will give your script a name when you create it, and that's the name you will use with the custom button card. I hope that helps a bit.
Hi, Is there anything to add to configuration.yaml in order to be able to modify yaml button card ? HA told me the different variables are not supported by the visual editor ?
No you don't need to add anything to your configruation.yaml. Like many custom components, you cannot use the dashboard visual editor to edit the component's atttributes. To use the custom button card, you have to use the code editor option in the dashboard design tool and enter in the card parameters in YAML. The message you are seeing "not supported by the visual editor" isn't an error message. It just means you can't edit the component in the visual editor and must use the code editor view instead. Hope that helps.
I host Home Assistant on Proxmox running on a standalone mini PC... and have been for around 3 years. I've been really happy with it. I just recently did a video on moving Home Assistant from a Raspberry Pi (or other platforms) here: th-cam.com/video/w6uCJlhXf60/w-d-xo.html
I want to animate and change color on my garage door and front entrance door. Can you show how to do it with cover.garage_door. I want it to flash red and change icon to open. and when is close greend and closed door.
I show the code for exactly that in the gist that is linked to in the video description. This is my garage door and it does just want you ask... changes color, icon and flashes when the garage door (cover) is opened. There are also a couple of example of normal doors as well.. where the icon changes, the color changes and flashes when open. Please see the examples there.. they should work identically for you, except you'll just need to change the entity names to match your doors.
Great video, it helped me a lot for overall process. But being brand-new, I'm still looking for an example with one-single-simple button on the card (kitchen sink). Start with just one, which works. Every example I find starts with a yml containing dozens of elements.
I have the fortune of not needing to make my dashboards accepted by others like a wife. So I tend to leave my “Cleaning up dashboards “ as the last thing on The List. I do find YAML editing helpful here and you have provided a nice walkthrough which will help me. I am often jealous of others Dashboards and Kiosks but I still need to make my automations work at this point. I feel you have encouraged me to do some more Cleaning!
While the WAF/FAF is definitely a factor, for me I like to have an "at-a-glance" dashboard that provides me with the things that are most used or most important on a daily basis. I then make extensive use of colors and animations with the custom button cards for an easy-to-see and interpret status of those items. And anything that might need my attention normally flashes in red (like a garage door left open, or a Zigbee device that needs a battery) and this does grab my attention.
But you are correct about the WAF/FAF. And a well-designed dashboard, through appropriate design and layout of controls, should also make it easy and intuitive for visitors and guests to manage key components of my smart home as well.
As always, thanks for watching and the feedback!
The custom:button-card is by far one of the most useful cards in Home Assistant. I probably use it with 80% of the cards on my multi-room dashboard. But, I have to say, the most underrated feature of this card is its ability to use templates. Once you have a card designed the way you like, that configuration can be put into the raw editor and cards can reference the entire template with one line.
For example, my basic light card is 31 lines long. Building on that, the YAML for my motion detector cards is another 31 lines for a total of 62 lines. I have six motion detectors. Without the ability to template the cards, that section would be roughly 360 lines long but instead only takes up 24 lines when calling the template.
Additionally, making changes in just one spot is so much easier than having to track down every instance where a changes needs to be made.
I am very new to HA and have been trying to get custom button card working…watched countless videos, scoured the forums and Reddit. You broke it down in a very easy to understand way and I appreciate the sample yaml. I was able to get mine working with your help!
Congrats! Glad you got it working and that I was able to help out at least a little.
I've been using Home Assistant for about 4 years now. It has definitely gotten better, but it can still be a little overwhelming when first starting out. Don't hesitate to reach back out if I can help out any in the future. I plan to do some additional "Home Assistant 101" videos down the road as well.
Thanks for watching and taking the time to leave a comment.
Exactly what i need: a list of properties and how to change them easily. Fancy stuff wellcome and Jupp: CSS rules
Hi ResinChem, I love your video's. Can you make a tutorial of HA and person card with cellular info. Have searched and searched but could not find a nice video tutorial, you can be THE ONE who wil help thousands of less skilled persons :)
Awesome video; thanks for making it. I didn't know about button cards. I'm just dipping my toes into custom dashboards and hadn't come up with a lot of compelling use cases beyond just displaying statuses, but these buttons (and your suggestions) give me lots of great ideas.
You are welcome! I'm glad you found it helpful. As I mentioned, I use custom button cards extensively throughout my dashboards because of their versatility. They do take a bit of YAML to use, but the documentation is pretty complete.
Thanks for watching and taking time to comment!
Thanks for this video! I also use the custom button card a lot. It's so versatile. I love seeing how others use it.
You are welcome! I use it a lot across multiple dashboards. I fear the day when it is no longer supported or becomes obsolete! Hopefully that doesn't happen for a very long time, but I've been bitten by other HACS components in the past that the original author abandoned and then Home Assistant changes something that causes that component to no longer function. But such is the nature of adopting community add-ons I guess.
Thanks for watching and taking time to leave a comment. It is greatly appreciated!
Great tutorial. Thank you!
You are welcome. Thanks for the comment!
Very nice video and all the best on a cold and wet English day
Thanks... pretty dreary where I am today as well, but I hope you stay warm and dry. Thanks for the comment!
Thanks for another informative video, showing me other ways to use custom button cards
Thanks. This one isn't so much a step-by-step how-to video like some of my others, but is meant to just show some of the things that can be done with the custom button card and to provide a general idea of how to do some of those things. The custom button card can do a lot more than I showed in this video... but the online documentation is pretty complete and is really helpful.
Thanks for watching and taking time to comment!
Excellent video as usual. I did not know about this card so, using your video as a guide, I installed the Hacs custom button and configured a few buttons that actually work! I can edit the yaml for each individual button but in my searching using the terminal I have not found where the program is storing this YAML.
Thanks. Glad you found it useful. The YAML for the dashboards is not stored like other "normal" YAML files. The actual files, I believe, are stored in the hidden .storage folder but should never be edited directly from there.
If you want to edit the raw dashboard YAML, the best option is to open up any page and after selecting 'edit', click the three dots again in the upper right again and select 'raw configuration editor'. This will give you the entire YAML for the dashboard. If you want to use a different editor, you can copy/paste the contents, edit and then paste back again. Not the most elegant solution, but it is currently the safest option. See this: community.home-assistant.io/t/where-is-the-lovelace-config-saved/87663
Hope that helps!
@@ResinChemTech Oh wow. I just did that and the whole Yaml for the dashboard is there. This will do. Thank you for the help!!! I guessed the Yaml was probably in one of the hidden folders but had not gone that far to look. Don't need to now.
Thanks for a great video... getting down to the "nuts and bolts" of the buttons... great for beginners!
You are welcome! Glad you found it helpful.
Thanks for taking time to leave a comment.
Excellent. Thanks for a tutorial on these custom buttons.
You are welcome. I hope you found it helpful.
I've been using custom buttons, but some good tips and ideas. thank you.
You are welcome! I use the custom buttons in all sorts of ways as it is so versatile. What I showed were just a few examples. Glad you found it helpful. I'll be showing them again in an upcoming video, but used in a slightly different way. Thanks for taking time to post a comment.
@@ResinChemTech I am trying the custom images, what size do you recommend saving the image as? Or can it be adjusted in the button?
By default, the area defined for the image size is fixed.. unless you want to redefine it using css (something I'm not very good at, but is described on the custom button Github page). However, for the best results using the default, make your image square... or as square as possible. Image size isn't really important (as long as it isn't too small)... it is the width vs. height that will impact the size more than the original image size. I think most of mine are in the 300 x 300 to 500 x 500 range.
@@ResinChemTech Thank you so much for the quick reply :)
Another great video. Thanks for posting!!!
Thanks! Hopefully it gives you some ideas on how to use the custom button card in your dashboards (or new ideas if you are already using it).
Thanks for taking the time to post a comment!
Love that card, thanks for the info!
You are welcome. It's amazing what all you can do with the custom button card... and I still discover new ways to implement it despite having used it for quite a while.
Thanks for the comment!
Hello, Very useful video and helped me improve my dashboard
At the end (11:55) you show a personal card, do you have a video on it to make it? for the moment I use a custom button to go to a page where this info is put separately
Haaa I found it in the custom cards Github xD
but hey I have a lot of errors with their return of icon >
Awesome video, thank you very much. There is one thing I had a question about. I saw that you have the gauge card on some of your buttons. I've managed to make a gauge card connected to my thermostat but I cannot figure out how to add it to a button. I tried custom-fields but it just puts the gauge in a small area in the lower right corner and makes the button huge. Would you mind sharing how you create the gauge buttons that look right please?
I'm not really sure what you are referring to. I think the only place I show any gauge cards are in the very beginning intro where there is a screen shot of one of my dashboards. The gauges shown there are just standard Home Assistant gauge cards and not custom button cards. None of the actual examples that I cover in the rest of the video are gauge cards.
I'm happy to try to help. If there is a particular part of the video you are referring to, please let me know the approximate time stamp and I'll try to provide a little more detail on that section if I can.
@@ResinChemTechOh ok sorry about that. It was one of them on your other dashboards. I assumed you had put the gauge on a button. Just a bad assumption on my part. Again thanks for this very helpful video. I set up a minimalist dashboard as my wife was getting frustrated with the default HA dashboard and want to use the buttons to get to the details if we want from the main page. So this video is coming in very helpful.
No problem! I get it about the wife! Despite having a couple of tablet kiosks setup, she rarely interacts with Home Assistant via the dashboards. She prefers to interact via voice, so I've put a lot of effort into voice-based automations that she can use. She occasionally uses a special mobile dashboard on her phone that I created just for her phone... and a couple of Zigbee buttons that I installed and configured in the master bedroom. But most of her interactions are via voice. Since we have multiple Google speakers throughout the house, she can ask for something just about anywhere and one of the speakers will hear her and launch the appropriate automation or routine in Home Assistant. Regardless, having a high WAF is important! Just let me know if you have any other questions or thoughts.
Thanks for this video, its very helpfull. I see that you made severel buttons for setting the brightness.
Can you tell me if you can also put a brightness slider in a button, and if so.. how.
Thanks allot
Well, I created the brightness buttons by creating 'virtual' switches in Home Assistant that can be turned on/off just like other switches. This is actually something I will be covering in a video coming out in a couple of weeks, so you might watch for that and I'll show exactly how I created those brightness switches.
I don't think you can actually put a slider into the custom button. But the new default control for lights in Home Assistant has a slider, so you could set the click property of the button to 'more info...' and that would then pop up a slider control for the light.
@@ResinChemTech thanks for the reply. Curious to see your video. I will subscribe..
Hi, great video..😊 the script.dummy that you use when defining the swich, is it just a empty script? Best regeras Toni
Exactly correct! Back when I did this, I needed to have a script for both the turn_on and turn_off functions. Since I didn't want any action taken when the turn_off was called, I just created an empty dummy script. I can use this anytime or anywhere that a function, automation or script might be required but I don't want any real action taken. I'm not sure it is necessary anymore... but it was back when I initially created my dashboards and automations.
Thanks for the kind words and posting a comment!
Thanks for this very usefull video. I created some buttons cards but they look bigger and I don't have the lovely colored layout with nice incon squares. How do you manage to get that ?
Thanks in advance :)
The size can be somewhat controlled via the aspect_ratio setting of the custom button card... and by putting the cards in a grid card on your dashboard. By default, a card will take the entire height/width on the dashboard unless 'contained' by another card, such as a grid or horizontal stack.
Colors are set (by icon or card) in the configuration of the card itself. And you can define different colors based on the state of the entity (e.g. a different color for "on" and "off"). This is all documented on the custom card site, which will tell you everything you need to know: github.com/custom-cards/button-card
In addition, I made my entire configuration for the dashboard you see in the video available in a gist file. You can look at how I made certain buttons do certain things, or show in a particular way, and then adapt that to your own cards: gist.github.com/Resinchem/2972719d32014dce644b9fff6b1b223c
My HA does not have the list across the top? Yours has Basement, DIRECTV, etc.... how do I set that up? Thanks for the great videos! Hopefully soon I will have a nice looking HA like you have!
Those are each just a different view or tab within a dashboard. You can easily add a view by editing the dashboard. Along the top border where the first default view is listed, you should see a plus sign (+). Just click that and give the new view a name, an optional icon, etc. This will create a new blank view or page where you can add cards. You can find full details here: www.home-assistant.io/dashboards/views/
@@ResinChemTech Thank you! Guess I was over thinking it 🤦♂ .. on the custom card I have this message: "No visual editor available for type 'custom:button-card'." Do I need to install a Visual Editor? As you can see I am a newbie to this HA
Yeah... you are going to see that with most custom add-ons. Since it is not a default, built-in card for Home Assistant, it can't give you the normal 'visual editor' to set it up. And there isn't any kind of add-on for this. It means you simply have to configure the card using the code editor (YAML) as I show in the video. In fact, for pretty much any card type (built-in or add-on) you can switch to the code editor view... and in some cases, certain features are only available in the YAML view. It's just that most add-ons can only be configured via the code editor.
Hang in there with Home Assistant! There is a bit of learning curve, but you'll quickly catch on. And there are plenty of folks out there, myself included, that are always happy to answer questions and try to help.
Interesting, but it seems to be abandoned ["maintained: no! (as of 2021)"]. The documentation is unusually good, though.
That's odd... because an update was just released a little over a week ago. I was prompted to upgrade in HACS... and you can see a new release was put out on Apr 2: github.com/custom-cards/button-card/releases/tag/v3.5.0
Now, it is true that no updates had been made for a while prior to this, but maybe that's because none were necessary for current functionality? So it does appear that the author is still maintaining the repo and making updates as needed. On the flip side, there are a lot of open issues that don't appear to have been addressed in quite a while either. But this is a risk you run with HACS components... if the author doesn't maintain them, there is a possibility that a future Home Assistant upgrade will break them. I dread the day if that ever happens to the custom button card as I will be forced to overhaul nearly all my dashboards!
@@ResinChemTech looks like the HACS documentation is just out of date. Thanks for the info/explanation.
I have installed the Button Card but really have no clue how to use it. Started
an empty Dashboard and did a Add card followed by selecting Custom Button-card, I got a one line script prompt.
What to do now? Expected to see options of icon to choose from. There is also a message saying there is no visual editor available. The TH-cam video’s do not show how a button card is made from scratch.
Appreciate any help!
What you are seeing is correct. As I stated in the video, there is no visual editor for the custom button card (since it is a HACS add-on) and the card must be configured by entering in the appropriate YAML. The video also shows multiple examples of this YAML and how you create those cards. Also as mentioned, if you look in the video description for this video, you will find a link to the full documentation for the custom button card that will tell you how to configure it , plus there is a link to a full copy of the YAML that I used to set up the custom button cards as shown in the video that you can follow as an example.
You didn't cover this that I caught, how can I make that garage door icon animated so that I can see opening and closing? I'm not looking for blinking and bouncing, but an actual opening and closing animation.
Well, first you'd need some sort of sensor that could report back the various states of the garage door... e.g. open 10%, open 20%, open 30% etc. Since the button can only represent a state of the entity, the entity would need to report different parts of the opening process. But if you actually had something like that, then you could change the icon state based on the percentage of the door opening. I do something very similar to this with battery percentage for many of my sensors.
But if the sensor only reports open/closed and since the button is reliant on the state of the entity, you first have to have/create an entity that shows the various opening stages of the door. Otherwise the only states you can key off of for the button are open and closed.
@@ResinChemTech I'm pretty sure the RatGDO (chamberlain garage door) does this if I'm not mistaken, since it reads/controls from the opener itself and not just a remote button.
My Tailwind garage door also has its own app icon with animation showing the door opening/closing. But I don't think it is possible to use those as part of the custom button card. There may be a way using templates or your own jpgs and the changing image background to duplicate something close to an opening garage door, but the standard material design icons generally don't include animations. You can check out the custom button documentation here: github.com/custom-cards/button-card
Hi, verry good video. But can you show, how to create a custom-button-card as a alarmcard width more tah one entity? For example: No alerts: Icon alert-bell color green. Alert Dishwasher salt empty: Icon change from alert-bell to dsihwasher-alert color change to red animation icon blink text change from nothing to ALERT!. Alert Coffeemaker beans empty: Icon change from alert-bell to coffeemaker-alert color change frpm green to red icon blink text change to ALERT! and so on... and all this together in one custom-button card. i hope you know what i mean. Thanks
I don't think the card can use more than one entity. You'd have to create a custom templated entity that returns the different values like dishwasher, coffeemaker, etc. as a single entity. The card could then use this custom templated entity's state value to change the icon, text and color of the card. But you'd have to create this custom templated entity via YAML and then base the custom button card's entity on that. You can search for Home Assistant template sensor to learn more about how to do that.
The other option is to create create conditional cards and individual custom buttons on each one. Which cards (and therefore custom button cards) are shown would depend on the states of the dishwasher, coffeemaker, etc. I do have a video on how to use conditional cards if that might be helpful.
Hi, what theme do you use for your dashboards?
I'm not really doing anything special. It is the default theme except I tweaked a few colors and specified an image background. Other than than (and a few custom cards/controls - like the custom button card), it's not anything that I create from scratch. Just a few mods of what was already there.
How do I make the cards a bit transparent so that you can see the background?
I'm really new at this, about 3 weeks or so.
So do I have to create a 2 supporting scripts also, 1 to dimm the lights to 50% and another to turn the switch on? (SHOWN AT 3:42) and is where is this created? a new yaml file?
EX: "script.turn_on" and "script.basement_light_50%"?
It really depends upon how you want your switches/buttons to work... and that is handled in how you create the script or automation. For example, when you switch the lights on, do you want them to always turn on at 100%... or do you want them to turn on at the last brightness level as when they were turned off (e.g. 50%). Similarly, you can have each of the brightness buttons also turn the lights off/of or you can use a separate button/switch for that.
You can certainly create the scripts via YAML... and unless you've setup a split configuration or Home Assistant packages, this would be done in your main configuration.yaml file. But if you are newer to Home Assistant or haven't worked much with YAML, I'd recommend creating your scripts via the UI editor and not mess around with the YAML at this point. You also don't have to worry about where the scripts are located when using the UI editor.
So, basically, decide what you want your lights to do when you click a particular button. Use the UI script editor to create those steps. You will give your script a name when you create it, and that's the name you will use with the custom button card. I hope that helps a bit.
Hi,
Is there anything to add to configuration.yaml in order to be able to modify yaml button card ? HA told me the different variables are not supported by the visual editor ?
No you don't need to add anything to your configruation.yaml. Like many custom components, you cannot use the dashboard visual editor to edit the component's atttributes. To use the custom button card, you have to use the code editor option in the dashboard design tool and enter in the card parameters in YAML. The message you are seeing "not supported by the visual editor" isn't an error message. It just means you can't edit the component in the visual editor and must use the code editor view instead.
Hope that helps.
Thanks, I think I understood 😊
What device do you use to host HA?
I host Home Assistant on Proxmox running on a standalone mini PC... and have been for around 3 years. I've been really happy with it. I just recently did a video on moving Home Assistant from a Raspberry Pi (or other platforms) here: th-cam.com/video/w6uCJlhXf60/w-d-xo.html
I want to animate and change color on my garage door and front entrance door. Can you show how to do it with cover.garage_door. I want it to flash red and change icon to open. and when is close greend and closed door.
I show the code for exactly that in the gist that is linked to in the video description. This is my garage door and it does just want you ask... changes color, icon and flashes when the garage door (cover) is opened. There are also a couple of example of normal doors as well.. where the icon changes, the color changes and flashes when open. Please see the examples there.. they should work identically for you, except you'll just need to change the entity names to match your doors.
@@ResinChemTech yes you did sorry I commented before looking at the read more