need a little push in the right direction, I want a picture element entity to | Home Assistant | Page 1

vast ledge Oct 8, 2024, 5:54 PM

#

After help to make a picture entity element (image) blink based on another entities state

sudden yoke Oct 9, 2024, 3:50 AM

#

So create a GIF of the image you want to "blink". I use https://ezgif.com/maker. (If you want the image to blink a certain colour, you can use: https://manytools.org/image/colorize-filter/)

Then try this yaml out. This is what I use. It's based on my AC unit entity for dirty filter alert I receive to clean it. When the alert is not present, my blue image is shown, and when the alert is present, it shows a red blinking image. And the clear image is just a placeholder that's needed.

type: picture-elements
elements:
  - type: image
    image: null
    entity: binary_sensor.151732605112572_full_dust
    name: Bedroom AC
    style:
      left: 45%
      top: 60%
      width: 90%
    state_image:
      "on": /local/images/aircon-alert-bedroom.gif
      "off": /local/images/aircon-blue-bedroom.png
image: /local/images/aircon-clear.png
dark_mode_image: /local/images/aircon-clear.png
card_mod:
  style: |
    ha-card {
      background: transparent;
    }

Animated GIF Maker

Online GIF maker where you can create animated GIFs, banners, slideshows from sequence of images. Upload frames and make a GIF or merge and edit existing GIFs

vast ledge Oct 9, 2024, 6:09 AM

#

Thanks for the response, I can make a jpg or png blink fine, I just want it to blink based on a different entity 🙂

sudden yoke Oct 9, 2024, 6:11 AM

#

So then the yaml I provided you should work.

vast ledge Oct 9, 2024, 6:13 AM

#

no I mean my entity for the image, is battery, I want to make the images blink when I another entities states change.

sudden yoke Oct 9, 2024, 6:15 AM

#

Can you post your yaml that you have for your picture elements - battery? And what other type of entity are you wanting to base this on?

vast ledge Oct 9, 2024, 6:15 AM

#

    entity: sensor.ioniq5_battery
    tap_action:
      action: more-info
    image: /local/ioniqb/ioniq-battery/bg.png
    state_image:
      "10": /local/ioniqb/ioniq-battery/10.png
      "20": /local/ioniqb/ioniq-battery/20.png
      "30": /local/ioniqb/ioniq-battery/30.png
      "40": /local/ioniqb/ioniq-battery/40.png
      "50": /local/ioniqb/ioniq-battery/50.png
      "60": /local/ioniqb/ioniq-battery/60.png
      "70": /local/ioniqb/ioniq-battery/70.png
      "80": /local/ioniqb/ioniq-battery/80.png
      "90": /local/ioniqb/ioniq-battery/90.png
      "100": /local/ioniqb/ioniq-battery/100.png
    style:
      left: 80%
      top: 51%
      width: 8%
      heigth: 9%
      style: |
        ha-card {
          box-shadow: none;
        }```

#

then I want animate the images based on another entities on/off state

#

I had it before on a icon way back, but swapped that device and forgot the code! doh

sudden yoke Oct 9, 2024, 6:18 AM

#

So currently it displays a different image based on the percentage of the battery, and you want the image to flash based on an entity that has on/off state, like a lightbulb?

vast ledge Oct 9, 2024, 6:19 AM

#

yes thats correct

#

i tried card_mod: style: | ha-card { box-shadow: none; animation: {% if states('binary_sensor.ioniq_5_ev_battery_charge') == 'on' -%} blink 1.5s linear infinite; {% else -%} none {% endif %} } @keyframes blink { from {opacity: 100;} to {opacity: 0;} from {opacity: 0;} to {opacity: 100;} }

#

but it did not work

sudden yoke Oct 9, 2024, 6:23 AM

#

So add this to your yaml:

        animation: >
          [[[
            if (states['light.your_light_entity'].state === 'on') return 'flash 1s infinite';
            return 'none';
          ]]]

#

- type: picture-elements
  image: /local/ioniqb/ioniq-battery/bg.png
  elements:
    - type: image
      entity: sensor.ioniq5_battery
      state_image:
        "10": /local/ioniqb/ioniq-battery/10.png
        "20": /local/ioniqb/ioniq-battery/20.png
        "30": /local/ioniqb/ioniq-battery/30.png
        "40": /local/ioniqb/ioniq-battery/40.png
        "50": /local/ioniqb/ioniq-battery/50.png
        "60": /local/ioniqb/ioniq-battery/60.png
        "70": /local/ioniqb/ioniq-battery/70.png
        "80": /local/ioniqb/ioniq-battery/80.png
        "90": /local/ioniqb/ioniq-battery/90.png
        "100": /local/ioniqb/ioniq-battery/100.png
      style:
        left: 80%
        top: 51%
        width: 8%
        height: 9%
        animation: >
          [[[
            if (states['light.your_light_entity'].state === 'on') return 'flash 1s infinite';
            return 'none';
          ]]]
      @keyframes flash {
        0% { opacity: 1; }
        50% { opacity: 0; }
        100% { opacity: 1; }
      }
      tap_action:
        action: more-info

vast ledge Oct 9, 2024, 6:43 AM

#

that codcxe does not work, I tried doing this

#

sudden yoke Oct 9, 2024, 6:57 AM

#

your keyframes section I believe should be in line with the word "style" if I am not mistaken

vast ledge Oct 9, 2024, 6:59 AM

#

it invalidates it,

#

sudden yoke Oct 9, 2024, 5:08 PM

#

I got it to work.

Do this...

Put the following in your config file. It defines the percentage to a 10 basis point. In other words, if the battery level is at 88%, it defines it as 80% for the purpose of showing which image to display in your dashboard:

  - platform: template
    sensors:
      battery_image:
        value_template: >
          {% if states('sensor.ioniq5_battery')|int <= 9 %}
            0
          {% elif states('sensor.ioniq5_battery')|int <= 19 %}
            10
          {% elif states('sensor.ioniq5_battery')|int <= 29 %}
            20
          {% elif states('sensor.ioniq5_battery')|int <= 39 %}
            30
          {% elif states('sensor.ioniq5_battery')|int <= 49 %}
            40
          {% elif states('sensor.ioniq5_battery')|int <= 59 %}
            50
          {% elif states('sensor.ioniq5_battery')|int <= 69 %}
            60
          {% elif states('sensor.ioniq5_battery')|int <= 79 %}
            70
          {% elif states('sensor.ioniq5_battery')|int <= 89 %}
            80
          {% elif states('sensor.ioniq5_battery')|int <= 99 %}
            90
          {% else %}
            100
          {% endif %}

#

Then here's the yaml for your dashboard. Be sure to create a blank image (shown below as "clear-bg.png" and to change the light.entity to your own entity you are wanting to use:

type: picture-elements
image: /local/ioniqb/ioniq-battery/clear-bg.png
elements:
  - type: image
    entity: sensor.battery_image
    state_image:
      "10": /local/ioniqb/ioniq-battery/10.png
      "20": /local/ioniqb/ioniq-battery/20.png
      "30": /local/ioniqb/ioniq-battery/30.png
      "40": /local/ioniqb/ioniq-battery/40.png
      "50": /local/ioniqb/ioniq-battery/50.png
      "60": /local/ioniqb/ioniq-battery/60.png
      "70": /local/ioniqb/ioniq-battery/70.png
      "80": /local/ioniqb/ioniq-battery/80.png
      "90": /local/ioniqb/ioniq-battery/90.png
      "100": /local/ioniqb/ioniq-battery/100.png
    style:
      left: 50%
      top: 50%
      width: 50%
      height: 50%
    tap_action:
      action: more-info
card_mod:
  style: |
    ha-card {
      box-shadow: none;
      animation:
        {% if states('light.entity') == 'on' -%} 
          blink 1.25s linear infinite;
        {% else -%} none
        {% endif %}
    }
    @keyframes blink {
      from {opacity: 100;}
      to {opacity: 0;}
      from {opacity: 0;}
      to {opacity: 100;}
    }

#

quick carbon Oct 9, 2024, 5:56 PM

#

sudden yoke I got it to work. Do this... Put the following in your config file. It defines...

{{ (states('sensor.ioniq5_battery')|int // 10) * 10}} works too to round down to nearest 10% for the icon valuetemplate

sudden yoke Oct 9, 2024, 5:58 PM

#

quick carbon `{{ (states('sensor.ioniq5_battery')|int // 10) * 10}}` works too to round down ...

Oh thanks! Still a noob here, learning new stuff every day! 🙂

vast ledge Oct 9, 2024, 6:24 PM

#

sudden yoke Oh thanks! Still a noob here, learning new stuff every day! 🙂

I can make it flash the whole card, but I just want it to flash the one eliment, not the whole card

sudden yoke Oct 9, 2024, 6:50 PM

#

but if your background is transparent, what difference does it make?

vast ledge Oct 10, 2024, 6:36 AM

#

the part of the whole image I am trying to animate based on another entities state is the squares on right hand (white ones) nothing else, I am trying to make it flash when car is charging.

sudden yoke Oct 10, 2024, 6:54 AM

#

And do you want a 4 colour scale based on 1st square = 25% (red flashing), 2 squares = 50% (orange flashing), 3 squares = 75% (yellow flashing), 4 squares = 100% (green - assuming solid colour not flashing)?

vast ledge Oct 10, 2024, 7:00 AM

#

I want it based on what image is showing, this is next to the car port and flashes depending on charge

#

there all white too

sudden yoke Oct 10, 2024, 7:00 AM

#

I don't know what that means. Sorry.

vast ledge Oct 10, 2024, 7:01 AM

#

I want them to stay white as the png is (sorry I am terrible at explaining sometimes) and its probably why I leave elax to do all the code on custom brand icons..

#

but basically the car has these lights (all white) by charge port and they flash when charging at what ever percentage the battery is at.

sudden yoke Oct 10, 2024, 7:03 AM

#

well you've got 4 rows on the car. I'm assuming that's broken down into 25%, 50%, 75% and 100%. Does each row illumate based on the level of the charge, and flash all white for the represented rows?

vast ledge Oct 10, 2024, 7:04 AM

#

flash all white for the represented rows

sudden yoke Oct 10, 2024, 7:05 AM

#

Okay, so if the car was 75% charged, the bottom 3 rows, all the icons for those rows flash white. the top row is not flashing. Right?

vast ledge Oct 10, 2024, 7:05 AM

#

yes

sudden yoke Oct 10, 2024, 7:05 AM

#

Okay. Can you upload or email me the base PNG for the car? You can DM me.

vast ledge Oct 10, 2024, 7:07 AM

#

sudden yoke Oct 10, 2024, 7:07 AM

#

Thanks! That one is slightly different than the sample you posted earlier

vast ledge Oct 10, 2024, 7:08 AM

#

its the same just missing some of the other image and button elements

sudden yoke Oct 10, 2024, 7:09 AM

#

k

vast ledge Oct 10, 2024, 7:10 AM

#

do you want me to upload the reworked png files too for square

#

25/50/75 and 100 instead of going up in 10s

#

sudden yoke Oct 10, 2024, 8:41 AM

#

Okay, got it!

#

Add this to your config:

  - platform: template
    sensors:
      ioniq_battery_percentage_state:
        value_template: >
          {% if states('sensor.ioniq5_battery')|int <= 25 %}
            1
          {% elif states('sensor.ioniq5_battery')|int <= 50 %}
            2
          {% elif states('sensor.ioniq5_battery')|int <= 75 %}
            3
          {% elif states('sensor.ioniq5_battery')|int <= 99 %}
            4
          {% else %}
            5
          {% endif %}

Upload these files to your images folder:

https://imgur.com/a/aQEXchK

Then here's the yaml for your dashboard - making sure to change your folder path for the images:

type: picture-elements
elements:
  - type: image
    entity: sensor.ioniq_battery_percentage_state
    state_image:
      "1": /local/images/test/state-1.gif
      "2": /local/images/test/state-2.gif
      "3": /local/images/test/state-3.gif
      "4": /local/images/test/state-4.gif
      "5": /local/images/test/ioniq-state-fully-charged.png
    style:
      left: 56%
      top: 50%
      width: 80%
image: /local/images/test/ioniq-base-image.png
card_mod:
  style: |
    ha-card {
      background: transparent;
    }

Imgur

Untitled Album

#

vast ledge Oct 10, 2024, 11:11 AM

#

this is perfect, but it still should only be showing if another entity is on as well so only showing if a different entity is on.

#

now worries, found it out

#

nope thats for the whole card, not just this entity lol

#

(not for this one image set)

vast ledge Oct 10, 2024, 11:36 AM

#

so for example like you have but blank and no white showing, but they start flashing the moment you plug in the charger

#

or it only shows when charger plugged in

sudden yoke Oct 10, 2024, 12:17 PM

#

Oh, right! I meant to go back and add that.... so easy to add..

  - platform: template
    sensors:
      ioniq_battery_percentage_state:
        value_template: >
          {% if states('sensor.ioniq5_battery')|int <= 25 %}
            1
          {% elif states('sensor.ioniq5_battery')|int <= 50 %}
            2
          {% elif states('sensor.ioniq5_battery')|int <= 75 %}
            3
          {% elif states('sensor.ioniq5_battery')|int <= 99 %}
            4
          {% elif states('sensor.ioniq5_battery')|int = 100 %}
            5
          {% else %}
            0
          {% endif %}

#

#

There is an image there to download ▲▲

vast ledge Oct 10, 2024, 6:13 PM

#

I am confused how is this going to only show flashing if a different entity is on?

#

this works perfectly, but I only want it to be blank if the other sensor is off and only show if other sensor is on.

sudden yoke Oct 10, 2024, 7:18 PM

#

You need to be more specific. When your battery is not charging, the squares are empty and do not blink. When you plug your car in, depending on the level of battery it has, let's say it is 27% left, it will make the bottom 2 rows of squares white and they will blink until the battery reaches 51%, at which time, the 3rd row turns white and blinks along side the bottom 2 rows. Then when it reaches 76% the top row joins in with them being white and blinking. Once the battery is 100% charged, all squares are white and it does not blink. This indicates the battery is full. Once you unplug the charger, the squares go back to not being white and not blinking until you plug in the charger again and it repeats all over again.

What am I missing? If you though you can have more than one entity as the trigger, I suppose it's possible, but how will you know which entity triggered the blinking if they both are triggers to initiate it? So you need to spell it out for me what it is that you want. Specifically!

vast ledge Oct 11, 2024, 9:12 AM

#

What you have is making it blink all the time depending on battery state, I only want it to blink when a separate entity is on, so do what it does but only on condition the other entity is on. Just controlling the dots

#

So code above is fine, but I only want it to show when another different entity is on.

sudden yoke Oct 11, 2024, 2:03 PM

#

what other entity? you're still not making sense. Also, the code I just gave you doesn't blink all the time. Did you update your config and yaml with the code I just gave you?

#1293270274296385656 message

vast ledge Oct 12, 2024, 6:23 AM

#

puting that code in shows this

#

and how will it know its on charge anyway, without other entity.

#

    image: /local/images/test/ioniq-base-image.png
    entity: sensor.ioniq_battery_percentage_state
    state_image:
      "0": /local/chargeport/ioniq-state-clear.png
      "1": /local/chargeport/state-1.gif
      "2": /local/chargeport/state-2.gif
      "3": /local/chargeport/state-3.gif
      "4": /local/chargeport/state-4.gif
      "5": /local/chargeport/ioniq-state
    style:
      left: 56%
      top: 50%
      width: 80%
    tap_action:
      action: more-info
    hold_action:
      action: none```

#

I tried changing code to this but still no joy

#

get this with your new template

#

Invalid config for 'template' from integration 'sensor' at configuration.yaml, line 575: invalid template (TemplateSyntaxError: expected token 'end of statement block', got '=') for dictionary value 'sensors->ioniq_battery_percentage_state->value_template', got "{% if states('sensor.ioniq5_battery')|int <= 25 %}\n  1\n{% elif states('sensor.ioniq5_battery')|int <= 50 %}\n  2\n{% elif states('sensor.ioniq5_battery')|int <= 75 %}\n  3\n{% elif states('sensor.ioniq5_battery')|int <= 99 %}\n  4\n{% elif states('sensor.ioniq5_battery')|int = 100 %}\n  5\n{% else %}\n  0\n{% endif %}\n"```

#

    sensors:
      ioniq_battery_percentage_state:
        value_template: >
          {% if states('sensor.ioniq5_battery')|int <= 25 %}
            1
          {% elif states('sensor.ioniq5_battery')|int <= 50 %}
            2
          {% elif states('sensor.ioniq5_battery')|int <= 75 %}
            3
          {% elif states('sensor.ioniq5_battery')|int <= 99 %}
            4
          {% elif states('sensor.ioniq5_battery')|int = 100 %}
            5
          {% else %}
            0
          {% endif %}```

#

that throws up that error

#

(btw I appreciate the help here just so you know)

sudden yoke Oct 12, 2024, 1:46 PM

#

Okay, I have come up with this, hoping it will be okay, or what you're after...

So I have it setup so that it checks to see if the car is charging or not. If it is, it will display the various rows of white squares flashing, based on the level of charge it has. If it is not charging, it displays the various rows of white squares NOT flashing, based on the level of charge the battery has.

I am hoping your ioniq5 battery has a state called "charging". You can check by going to developer tools and click on States. Then filter your states with "sensor.ioniq5_battery_state" without the quotes. It should tell you on the right hand side what options are available. As long as you can see "charging", you can move on to the following...

#

Delete the entry you put in your config already, replacing it with this:

  - platform: template
    sensors:
      sensor.ioniq5_battery_percentage_state:
        value_template: >
          {% set charging = is_state('sensor.ioniq5_battery_state', 'charging') %}
          {% set battery_level = states('sensor.ioniq5_battery_level') | int %}
          {% if charging %}
            {% if battery_level == 0 %}
              0
            {% elif battery_level <= 25 %}
              1
            {% elif battery_level <= 50 %}
              2
            {% elif battery_level <= 99 %}
              3
            {% elif battery_level == 100 %}
              4
            {% else %}
              0
            {% endif %}
          {% else %}
            {% if battery_level == 0 %}
              6
            {% elif battery_level <= 25 %}
              7
            {% elif battery_level <= 50 %}
              8
            {% elif battery_level <= 99 %}
              9
            {% elif battery_level == 100 %}
              10
            {% else %}
              6
            {% endif %}
          {% endif %}

Then, replace your dashboard card yaml with this:

type: picture-elements
elements:
  - type: image
    entity: sensor.ioniq5_battery_percentage_state
    state_image:
      "0": /local/chargeport/state-0.gif
      "1": /local/chargeport/state-1.gif
      "2": /local/chargeport/state-2.gif
      "3": /local/chargeport/state-3.gif
      "4": /local/chargeport/ioniq-state-fully-charged.png
      "6": /local/chargeport/state-6.png
      "7": /local/chargeport/state-7.png
      "8": /local/chargeport/state-8.png
      "9": /local/chargeport/state-9.png
      "10": /local/chargeport/state-10.png
    style:
      left: 56%
      top: 50%
      width: 80%
image: /local/chargeport/ioniq-base-image.png
card_mod:
  style: |
    ha-card {
      background: transparent;
    }

#

Delete all your images and replace them with these:

https://imgur.com/a/V3gsrmN

Imgur

Untitled Album

vast ledge Oct 13, 2024, 8:08 AM

#

the battery reports no charging state, what does is binary_sensor.ioniq_5_ev_battery_charge and the only states that shows in dev tools is on and off, but home assitant reports it has charging and not charging (but its 100% on and off in dev tools). also this was still throwing a error anyway but I spotted why... its a template sensors so.

#

    sensors:
      sensor.ioniq5_battery_percentage_state:
        value_template: >```

#

should of been

#

    sensors:
      ioniq5_battery_percentage_state:
        value_template: >```

#

it is showing now 1 to 10 depending on battery state, but obviously as the sensor that provides the charging state is binary_sensor.ioniq_5_ev_battery_charge it wont show the charging images correctly (all static ones are showing though.

sudden yoke Oct 13, 2024, 7:25 PM

#

sorry about the "sensor" part missing. That's me swapping out my sensors for yours to make it easier for you. As for the last part, I have no idea why it's only showing static. I will post my yaml for both config and dashboard which works, flashing and not flashing. You can then go change the sensors to yours, and it should work just the same.

#

Here's both Dashboard and Config yamls: https://pastebin.com/K5BMJAE0

Pastebin

## ***** CONFIG ***** - platform: template sensors: ga...

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

#

Can you paste yours please? Thank you!

#

Not knowing what your battery level sensor is, this is just a guess, but your config should look something like this:

  - platform: template
    sensors:
      sensor.ioniq5_battery_percentage_state:
        value_template: >
          {% set charging = is_state('binary_sensor.ioniq_5_ev_battery_charge', 'on') %}
          {% set battery_level = states('binary_sensor.ioniq_5_ev_battery_level') | int %}

You need to check you battery level sensor to see if I guessed right: "binary_sensor.ioniq_5_ev_battery_level". And for the charging, because your sensor state shows On/Off, you use that state in the "set charging" line:
{% set charging = is_state('binary_sensor.ioniq_5_ev_battery_charge', 'on') %}

vast ledge Oct 14, 2024, 7:13 AM

#

can you zip the image file up into a file and upload here as the imagur files dont have the names and its guess work, I just want to eliminate any other possible errors

#

fixed but yes images messed up, probably because I renamed wrong

vast ledge Oct 14, 2024, 12:11 PM

#

https://pastebin.com/LNEwZiya this was code that got it working

Pastebin

#ioniq 5 charging port graphic - platform: template sensors: ...

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

#

just meed to fix the images now

sudden yoke Oct 14, 2024, 1:55 PM

#

Here are the files zipped up:

https://drive.google.com/file/d/1PUvn76bRBcm2fJY1tomg7AGbHIs8qutk/view?usp=sharing

Google Docs

ioniq-images.zip

vast ledge Oct 14, 2024, 6:20 PM

#

Thank you so much for helping with this, now I have something else to add to my wheel house,

#

are there any specific icons you would like me to add to next update of custom brand icons?

#need a little push in the right direction, I want a picture element entity to