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?

[FarleighRed]

Now looking to adapt the card but cannot get the background around the car to be transparent can someone help

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

[lcanod (Luis)]

Hey there,

seems not to be too much movement on this thread, but it is exactly what I’m looking for to it is worth it to try. Hope someone can help.

First, I’m not very familiar with CSS nor code developing, so my only chance is to copy and reverse engineer the code, trying to undertand to adapt myself. Unfortunatelly, didn’t work so here I am asking for help

My code:

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

where:

• sensor.lsjwhxxxxxxxxxxxx is the sensor with the % of battery charge
• mg4-top-white.png: Image to show fully discharged
• mg4-top-green.png: Image to show fully charget
• magenta.png: Plane background image.

But no matter what value the sensor has, I always get the full green_image (no degradation, no masking, no charging value )

Any would be really appreciate.

Thanks

[krskrab]

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

[lcanod (Luis)]

[SOLVED] Replying myself. It worked. Actually, it was working from the begining. The problem was the browser.

Chrome doen’t show the mask properly. Firefox and Safari (Iphone) do.

Thanks krskab also for your tests, I really thoght I had something wrong.

[Namxx]

I have implemented the same for my car:
(on the tablet, it looks better)

I also want to add the remaining charging time but ONLY visible, when remaining charging time > 0 (which means, that the car is plugged in and charging).

Any possibility to have this condition in the picture elements card?