Change icon color based on state(on/off)

Configuration
#1

Hello,

I am really frustrated learning how to use HA and creating a button card I have a card on my dashboard. I would like to turn on/off my speakers in my office, but everything I try based on forums and other topic boards to get the icon to change colors, which does not work. Can someone PLEASE, help me? I apologize to the forum and community, if I am not asking my question properly with acceptable/property information or format. This is what I have:

type: button
tap_action:
  action: call-service
  service: switch.toggle
  service_data: {}
  target:
    entity_id:
      - switch.office_guest_bed_rm_speakers_switch_4
      - switch.office_guest_bed_rm_speakers_switch_3
entity: ''
show_state: true
icon: mdi:volume-high
name: Office Speakers
hold_action:
  action: toggle
show_state: true
state_color:
state:
  - value: 'on'
    color: lawngreen
  - value: 'off'
    color: grey
#2

Dude, we had a start here: One button with two actions

And you’re still don’t use the code tags nor have you read the instructions for template or custom button card.

#3

He probably has no idea what you mean by code tags.
I’ve realized it’s usually necessary to do a little screenshot to show new users what to do.

3 Likes
#4

Sorry Homie - I have read through the instructions and templates and reading through the information is like reading the periodic table to me. There are so many “Names” for “Main Options” of “Configurations,” “Actions,” “Confirmation,” “Lock Objects.” “State,” “Available Operator,” etc. Therefore, it’s so confusing to me what I use, where I use it, and when to use it.

I feel that this maybe my last step in creating my button, and I hope as I keep trying to use HA I will eventually pick this up and learn how to use the program. If not, I’m going to delete the program and forget about my endeavor of creating a smart home to simplify actions for my family on our smart devices.

I apologize if I am coming off curt, but I’m really frustrated with the roadblocks that I’ve encounter trying to learn HA, which I have been trying to do for over three weeks now with small progress progressing on my endeavor.

#5

Thank you! I did not have any idea, but your screenshot helped tremendously!

2 Likes
#6

There is definitely still a bit of a learning curve with HA, especially if you don’t have much tech experience. Don’t try to do too much at once but if you’re stuck on one thing you can always work on something else. Whenever you’re getting too frustrated take a deep breath, walk away and come back with a fresh mindset in a day or two.

Read this. Many of the people on here spend hours and hours of their own time helping people. The least you could do is make it as easy as possible for them to help you!

I’m sure the problem you are working on will be easily solvable if you provide the right information.

2 Likes
#7

Thank you - Jason! As a matter of fact, I do not have any experience in tech what-so-ever. I guess you can call me an “Old-Timer” trying to keep up with technology in our exponential time of technological advancements. This is my first time trying to program, code, etc.

Now, I understand how I should format/code my question. Thanks again for the screenshot!

#8

OK so I definitely see why you’re having issues with your button. You need to review the documentation for the button card carefully.

A couple of things I notice right away. state_color: has no value. It requires a boolean (true/false). When set to true, the icon color will change with the state of the entity specified in the entity: parameter which you have left blank.

The colors the icon changes to (active icon/ inactive icon) are set by your theme. You cannot set these colors from within the card itself. If you want to do that you will have to use a custom button card or card_mod. I don’t think you’re ready for those yet!

I have no idea where you got state: and value:/color: from. That is not a valid parameter for the button card. The valid parameters and the values they required are listed on the doc page.

Are you perhaps mixing up the custom button card and the built in button card? If you are just copying code from different examples in the forums that is probably the case.

So quick and dirty solution to get this going for right now:

Try this, it should do what you want. Forget about your custom colors right now.

type: button
name: Office Speakers
icon: mdi:volume-high
entity: switch.office_guest_bed_rm_speakers_switch_3
show_state: true
state_color: true
tap_action:
  action: call-service
  service: switch.toggle
  service_data:
    entity_id:
      - switch.office_guest_bed_rm_speakers_switch_4
      - switch.office_guest_bed_rm_speakers_switch_3

These two switches, are they both always in sync? Meaning if one is on the other is also? If so, you should put these switches into a switch group and use that group as the entity for the button card. If you’d like to to that I can walk you through it.

3 Likes
#9

Jason - You Rock! Thank you so much!

I think looking at the Documentation for the button card will be very helpful moving forward.

I was watching youtube videos, and that’s where I got the state: and value:/color: from. Additionally, I was also using examples in the github custom button page. I was mainly using the custom button card, from this example I saw on youtube.

Yes, the two switches I am using, should always be in sync; because one is left speaker, and the other is the right speaker. I would be so appreciative if you could walk me through creating a switch group, to use as an entity for the button card (I have 24 switches that I would need to create 12 groups for).

Thank you so much for assisting me and walking me through learning how to format, write, code, and respond correctly in the forum, so I can provide the information accurately and correctly.

#10

You’re very welcome.

Some general advice for you.

  • Stick to built in cards for now unless there is something you need that you just cant do with a built in card. Once you understand how cards work and the difference between the built in cards and custom cards you can expand your horizons.

  • Keep it simple, get it working right a piece at a time, and then worry about making it pretty.

  • Reading the docs carefully will save you a lot of headaches!

So back to groups. Here is the docs for groups.
Give that a quick review so you understand how the groups work.

Then you can click the ADD INTEGRATION button near the top of the page. It will open a page asking if you want to open the page in your home assistant instant. Click yes. Click yes on the Add Group dialogue. It should open a window listing the different group types. Click switch.

Name your switch something sensible like “Office Speakers”. Add the entities for this switch group. If you don’t ever need to see the original switches because you will now have a master switch you can hide them from the UI.

You will end up with a new switch entity with an id of something like switch.office_speakers.

This is now the simplified code for your button.

type: button
name: Office Speakers
icon: mdi:volume-high
entity: switch.office_speakers
show_state: true
state_color: true
tap_action:
  action: toggle

BTW you can add also all your new “group” switches into a group switch themselves so you can have a “master” switch that controls them all.

1 Like
#11

Jason,

Thank you so much for your time today, and all of your help! You have been so helpful and have made my learning curve of the HA program a lot easier to understand, how to code the information properly, Additionally, I really appreciate the word of advice to use the “Button” card, and the other built-in cards, rather than trying to create buttons, which is more complicated. It really helps when someone like you breaks it down to where I need to go, and how the code should be written for HA to work, all with examples and links.

Again, I really appreciate all of your help!

Thank you!

2 Likes