Dynamic colour mask on picture element

[autostreak1]

Hi All,

Currently working on a EV charging/vehicle dashboard and i’m a bit stuck trying to create a visual that shows the amount of charge the car has remaining. Ideally I would like it similar to that of the native car app as it looks clean and does a good job of showing how much charge is left at a glance.

In a nutshell, the native app has a transparent image of the vehicle, then for each percentage of charge, it shades the car in with green. So for 10% charge left, 10 percent of the vehicle will be shaded in.

I’ve got a suitable image which i’ve added into a picture elements card but what would be the best approach to deal with the shading? I know I can apply hue rotation to the image but that makes the car all the same colour?

Initially I was thinking of adding a tinted background as an element then dynamically moving the width as a percentage in-line with the car charging percentage obtained from the vehicle sensor. However I cant get it to just shade in the car and not the whole card.

I’ve attached a photo of the car app to give a better understanding of what i’m trying to achieve.

Any help/suggestions would be much appreciated

[Ildar_Gabdullin]

Create one more image - same car but saturated.
Place this image on the same place BEFORE the normal one.

  - type: picture-elements
    card_mod:
      style: |
        ha-card {height: 250px !important}
    elements:
      - type: image
        image: /local/images/test/car_2_grey.png
        style:
          top: 0%
          left: 0%
          transform: translate(0,0)
      - type: image
        image: /local/images/test/car_2.png
        style:
          top: 0%
          left: 0%
          transform: translate(0,0)
        card_mod:
          style:
            hui-image $: |
              .container > img#image {
                {% set LEVEL = 100-states('input_number.test_level_1')|int -%}
                mask-image: linear-gradient(to left, transparent {{LEVEL}}%, white {{LEVEL|int+1}}%);
              }
    image: /local/images/test/white.jpg

Better to remove a shadow below a car, otherwise not looking perfect.

[FarleighRed]

Really like this idea and want to implement something similar. However I am struggling to understand what the /local/images/test/ehite.jpg refers to.

I get the other 2 images are different pictures of the same car but not sure about the 3rd.

[autostreak (Stewart)]

Hey @FarleighRed

The first image should be the car image you want to use. The second is the same car image duplicated but this time saved as a different colour. The 3rd image is what you want the vehicle to sit in front of. For me, I’ve just made an image that’s transparent.

[FarleighRed]

Hi @autostreak

Thanks for that. I got it to work and really like the idea and going to see what else I can do with my cars integration. Would be interested to see what other ideas you had when doing your vehicle dashboard.

[autostreak (Stewart)]

I need to spend more time on mine but here is what I have so far

[FarleighRed]

@autostreak @Ildar_Gabdullin Getting somewhere with it, but would love to know how I can make the 2 status badges the same size and also get rid of the annoying grey band down the right hand side of mine. I think it is something to do with image sizes but appreciate if you can give me any more tips.

[tszaniszlo (Tamás Szaniszló)]

Looks awesome, can you share the source please?