Hi, so Iām interested in trying this as well (so I can move from input_select to hash). I canāt wrap my head around that code however. I need it to be color A by default and if the hash matches, it needs to be color B. But in your code I canāt seem to find a place where I could insert the color codes for either states. I figure I need to change null to my color I want it to be when matched right? But how can I set the color for when itās not matched?
Thanks! That part now works. Now I notice the button doesnāt update on action, only on reload of the page. I figure this is the case since I have no entity tied to it, so the card can update itself. Since itās now hash and not input_select anymore, I donāt have an entity to use to update the card.
I read the part about triggers_update on the docs, but I didnāt find a solution there myself. Do you know what I could tie it to so it updates on tap_action? The important part is so it only updates on the device that presses it (which is why I want to refrain from input_select).
That goes as an option inside button-card. He wrote the exact code. All you need to do is copy and paste it and change colors by chaning:
Change COLOR_ACTIVE to the color you want (eg 'rgb(255,0,0)' for matching hash and keep null or replace with another color for non-matching hash
I highly advise you to read the documents first, like I advised you in a different post. Without reading the documentations, you have no idea why and what you are doing. Coping and pasting code will only get you so far.
Thanks! Would it also be possible to have something like this that (instead of hash) looks at the url (before hash)? For a different project (that doesnāt rely on state-switch), I want to reflect button styles based on the page itself. So I can use templates instead of copying the card to every dashboard.
yes, thatās very easy, and looks like the hash template above window.location.pathname.split('/')[2] (btw, you know you can check that in the inspector?)
That is very thorough and detailed piece of code ! Thanks a lot, will check it all out and play with it.
When custom header was dropped a few months ago, I created my own version with button card inside a horizontal stack, using it at the bottom as a sticky and disbaling the original header. It works great, but I want to streamline the code, so itās easier to maintane and change if needed.
I agree, I need to do more RFM!
But in some cases it is not simple to read docs like these for a beginner!
And to the point examples are in some cases more use-full for beginners, because you can compare the code with the existing documentation!
I was a beginner as well I started using Home Assistant little over a year ago and have learned a lot in the first 3 months. Most I have learned by studying other codes (instead of copy/pasting) and reading all documentations and most importantly: making mistakes. I learned most by making mistakes, so I had to figure out what the issue was. Forcing me to understand the docs which allowed me to use and combine different cards in very creative ways, like this project I did for a media player card: Fully loaded media player card (picture-elements project) - Share your Projects! - Home Assistant Community (home-assistant.io)
There are also people who use copied codes and call it a day. It works on the short term, but they find the most issues down the road when updates to Home Assistant and custom cards happen. Then they have no idea what broke their interface and why (since they never bothered to understand what the card actually is about and ignore all changelogs).
The docs can be overwhelming, but it doesnāt mean you have to make it all work in one day. Start small using simple buttons and use that code for other projects. So it was just a friendly advise, since I was in your place as well a year ago
Hello.
Moving icon around the buttons is easy. you need to reconfigure grid of the button. In short you can create own grid of areas and define which one will display what, using specific names. For example grid area named āiā will handle an icon, ānā is for entity name, and āsā is for status
But what Iāve done is, that one button has even more 4 icons. To achieve that I embedded more button cards into parent button card.
It splits main button into 2x3 matrix. Then in first row has 2 areas: i for icon and custom called window. Second row is dedicated for entity name. Third row has again 2 custom areas: misc and temp
Here is complete code of my approach a published a few days ago in response of someone else.
I have tried to user your scripts and I wanted to ask you a few things. I have an error for example when I try to change the Fan speed/preset and I got this error : Failed to call service script/airpurifier_mode. Error rendering data template: UndefinedError: āNoneā has no attribute āindexā . āairpurifier_modeā is actually the alias Toggle AC fan speed script. I have no idea why is not working maybe you can guide me to fix the problem.
The rest of the buttons are working
Also I saw that you have custom icons used. Is it something that you can share?
Thank you
Hi @ovidiudr and welcome to the community. Please note that Home Assistant has changed the fan integration, so the script needs an update:
alias: Toggle AC fan speed
sequence:
- service: fan.set_preset_mode
data_template:
entity_id: '{{ entity_id }}'
preset_mode: >
{%- set current = state_attr(entity_id, 'preset_mode') %} {%- set modes
= state_attr(entity_id, 'preset_modes') %} {%- set index =
modes.index(current) %} {%- set next = 1 if current == modes[-1] else
index + 1 %} {{ modes[next] }}
mode: single
icon: 'philips:fan_speed_button'
fields:
entity_id:
description: Entity of fan
example: fan.air_ac2729
description: Set the speed mode of philips AC
Yes, I have created my own custom icons from the Philips icons. Iām not sure if it is ok to share the code here, as Philips holds the copyright to the design and I donāt have a license. However, I documented my approach here.
Lovelace button-card for home assistant (github.com)
! Thanks a lot, will check it all out and play with it.
