Icon colour based on state

Configuration Frontend
1

for my picture-elements I am creating custom images for the door sensors.
so the doors will match the floorplan perfectly, No I have an ugly item.

So I changed state-icon to image

  - type: image
    entity: binary_sensor.bijkeuken_door_opening
    # image: /local/images/floorplan/Door_Bijkeuken.png
    state_image:
      'on': /local/images/floorplan/Door_Bijkeuken_on.jpg
      'off': /local/images/floorplan/Door_Bijkeuken_off.jpg
    style:
      top: 1%
      left: 13%
      width: 8%

and that works,
but before uploading, I used some testimages from the internet,
and those test images automatically changed color up on state change, I didn’t have to upload them twice. but I do.
what do I need to do to automatically change the color and only use one image?

2

can you send the internet test images you used and the yaml you had for them?

3

I used this for testing

  - type: image
    entity: switch.lamp_garage_achter
    image: https://cdn.icon-icons.com/icons2/74/PNG/256/mario_bros_14603.png
    tap_action:
      action: toggle
    style:
      top: 45%
      left: 22%

I actually did nut upload, but used it directly.
you can see the image url.
on aff it is gray, and on state on it has full color.

4

ah, i see it.

use a transparent png.

lots of tools can help do this. on windows, mspaint is built in and can do it.
also online tools: Make a PNG Transparent – Online PNG Maker

just for fun and as an example, point your url to this or download it if you want it locally :):

5

I tried the last part and it’s cool.
but I found that it applies grayscaling the trasparent part stays transparent.
I my example image I just didn’t have enough color to notice.

6

sorry i don’t think i understand. are you saying the color differential isn’t good for what i did to your name/profile image? if so, i just grabbed it and threw together in literally 10 secs.

for you, if you want to do this method instead of having 2 images, you can muck around with your color intensity so it’s more like mario… is that what you’re asking about? or something else?

7

adding transparancy does not change the color based on the state.

you pointed me in the correct direction,
but what actually happens is that grayscale is applied in the off state

if you upload the image on the left you will see what it looks like in the off-state on the right.

8

yeah, true point. you’re right. to the extreme, you could have 1 pix or none… the key point is that the system grayscales out the png. . regardless of transparency… the transparency does let the system show through the back and such.

1 Like