Opacity does not work with 2021.9.x

[bkr1969]

Checklist:

• [x ] I updated to the latest version available
• [x ] I cleared the cache of my browser

Release with the issue: 2021.9.x

Last working release (if known): 2021.8.x

Browser and Operating System: All

Description of problem:

Javascript errors shown in the web inspector (if applicable):

Additional information: Also, the grey circle/oval does not disappear when clicking toggle icon unless you click elsewhere on the screen.

image: /local/floorplan/darkpanel.png
style: |
  ha-card:first-child {
    background: rgba(42, 46, 48, 1)
  }
elements:
  - type: custom:config-template-card
    variables:
      - states['sensor.sunlight_opacity'].state
    entities:
      - sun.sun
      - sensor.sunlight_opacity
    element:
      type: image
      entity: sun.sun
      image: /local/floorplan/transp.png
      action: none
      state_image:
        above_horizon: /local/floorplan/lightpanel.png
        below_horizon: /local/floorplan/transp.png
      style:
        left: 50%
        mix-blend-mode: lighten
        opacity: ${ states['sensor.sunlight_opacity'].state }
    style:
      height: 100%
      left: 50%
      mix-blend-mode: lighten
      opacity: 10%
      top: 50%
      width: 100%
    tap_action:
      action: none
    hold_action:
      action: none
  - type: custom:config-template-card
    variables:
      COUCHB: states['light.couch_light'].attributes.brightness
    entities:
      - light.couch_light
    element:
      type: image
      entity: light.couch_light
      image: /local/floorplan/transp.png
      state_image:
        'on': /local/floorplan/transcouch.png
      tap_action:
        action: none
      style:
        left: 50%
    style:
      mix-blend-mode: lighten
      opacity: ${ states['light.couch_light'].attributes.brightness / 255 }
      width: 100%
      top: 50%
      left: 50%
  - type: custom:config-template-card
    entities:
      - light.table_light
    element:
      type: image
      entity: light.table_light
      image: /local/floorplan/transp.png
      state_image:
        'on': /local/floorplan/transtablamp.png
      tap_action:
        action: none
      style:
        left: 50%
    style:
      mix-blend-mode: lighten
      opacity: >-
        ${states['light.table_light'].state === 'on' ?
        (states['light.table_light'].attributes.brightness / 255) :'0'}
      top: 50%
      width: 100%
      left: 50%

[iantrich]

Include you config

[smonesi]

I think the issue is not with opacity itself, it's just about how style configuration work (or doesn't) when applied to a config-template-card inside a picture-elements.

I think the style defined outside the element is applied but it cannot be templated (hence the "opacity does not work"), while the style inside the element is completely ignored (but it would be templated, eventually).

type: picture-elements
image: http://whatever...
elements:
  - type: 'custom:config-template-card'
    entities:
      - light.some_light
    element:
      type: icon
      icon: "mdi:home"
    style:
      top: 47%  <-- works but no template
      left: 75%

type: picture-elements
image: http://whatever...
elements:
  - type: 'custom:config-template-card'
    entities:
      - light.some_light
    element:
      type: icon
      icon: "mdi:home"
      style:
        top: 47%  <-- doesn't work (but template would eventually be applied)
        left: 75%

I also found this: https://github.com/iantrich/config-template-card/issues/49#issuecomment-723664424 and after I applied this code I was able to define the style inside the element, have it properly templated and applied to the card... but then I discovered that not all styles worked as expected because some specific CSS attributed is better applied to the inner element (eg. border-radius) while others only work on the outside card (eg. top, left).

Maybe it would be possible to write a couple of lines of code that choose which CSS attribute to apply to the outside card and which to the inner element (not sure how to choose which)... but it sounds a bit of a hack.

I hope this makes sense...

[iantrich]

Looks like your answer is in #78

[bkr1969]

Not following you exactly. How would this apply to opacity and is there a work-around?

[JunghaJungha]

To me, opacity does work, but only if you put a direct number to it:

So having

opacity: 20%

works, but

opacity: "${states['light.computerlamp'].state === 'on' ? (states['light.computerlamp'].attributes.brightness / 255) : '0'}"

does not work.

(I still have to figure out how to paste this decent :)

[smonesi]

I opened a PR that will hopefully fix (and clarify) the situation: https://github.com/iantrich/config-template-card/pull/80

[bkr1969]

FWIW...I solved the "grey circles" problem by making the icons config-template entities instead of just image elements of the picture-elements card.

[bkr1969]

I opened a PR that will hopefully fix (and clarify) the situation: #80

Any idea how long until this gets merged?

[re-1st]

Any idea how long until this gets merged?

without any intention to be pushy, or unthankful, but do we have any idea 'IF' this will be merged? My complete dashboard, is based on this functionality ';D so if it's not, I should be searching for other solutions.

.

[bkr1969]

It seems pretty simple...the config-template-card is simply not pulling states for styles. My hope is that @iantrich has just been busy. He's been pretty on top of this from the start. There are likely many waiting for this. @smonesi, have you heard anything?

[smonesi]

@smonesi, have you heard anything?

Nope...

I tried to use my fork from HACS but it doesn't work, so in order to use it in my own system I simply installed the original config-template-card using HACS, then I built my fork (https://github.com/smonesi/config-template-card) and copied the dist/config-template-card.js file over the one installed by HACS. I think this can only be done if you have a Home Assistant Core installation type.

[bkr1969]

OK...I'll just wait for @iantrich to merge. In your opinion, does it make any difference whether the opacity is applied to the card or element?

[smonesi]

From my experiments, it looks like most of the style attributes (for sure top and left, but also mix-blend-mode, opacity and filter) work only if applied to the whole card.

The only reason I needed to use a style on the element was when I had an image that I wanted to be displayed in a round box and the border-radius: 100% style only worked on the element.

[pmentis]

d to use my fork from HACS but it doesn't work, so in order to use it in my own system I simply installed the original config-template-card using HACS, then I built my fork (https://github.com/smonesi/config-template-card) and copied the dist/config-template-card.js file over the one installed by HACS. I think this can only be done if you have a Home Assistant Core installation type.

I was trying to install your fork through HACS but no luck to add the repo through custom repositories. Now I saw you replay, so about the installation you describe... I guess that I have to create somehow the dist/config-template-card.js file, from your fork, through a a virtual instalation(?). I know where to paste the file but i cant understand how to create it. If it is simple enough and I m just missing it please give me a tip, if it is complicated, then dont bother, you made enough work already, i ll just wait for the merge. Thank you!

[smonesi]

It's actually pretty easy:

git clone https://github.com/smonesi/config-template-card
cd config-template-card
npm install
npm run build

If everything goes fine, you will find the config-template-card.js file in the dist directory.

Hope this helps!

[gcorgnet]

Thanks. Got this working by building config-template-card.js from @smonesi 's branch. Anyone else getting a flickering of the room on the floor plan when changing opacity of the light? It seems to flicker to black and then go to the appropriate opacity. Trying to see if it's just me or anyone else have that issue? Thanks

[bkr1969]

I'm on an HA Blue (ODROID). Where do I find the file to do this?

[pmentis]

It's actually pretty easy:

git clone https://github.com/smonesi/config-template-card
cd config-template-card
npm install
npm run build

If everything goes fine, you will find the config-template-card.js file in the dist directory.

Hope this helps!

Indeed, it's easy when you know where you run it... :) (windows user here). I found the way through Git Bash but didn't manage to make opacity work.

I'll do some test with a simplier code to find my fault! Thank you for the instractions!

[smonesi]

Just a note on doing this "hack" of copying the config-template-card.js file: you need to ensure that the browser is not using the original version, so either clean the cache or, at least in Chrome, open Developer tools->Network(tab)->Disable cache and refresh the page.

You can easily tell the original version from the patched one using an element with no style (add the style only to the whole card), the original version will show a No style defined for element error, eg.:

type: picture-elements
image: http://hs.sbcounty.gov/CN/Photo%20Gallery/_t/Sample%20Picture%20-%20Koala_jpg.jpg?Mobile=0
elements:
  - type: 'custom:config-template-card'
    variables:
      - states['light.bed_light'].state
    entities:
      - light.bed_light
    element:
      type: icon
      icon: "${vars[0] === 'on' ? 'mdi:home' : 'mdi:circle'}"
    style:
      top: 47%
      left: 75%

[pmentis]

@smonesi you rock! Just made it!

I was ok with the version (already had cleared the cache and your example worked just fine)

What i was doing wrong was that i used the same tamplate that i was using before: ${states['light.philips1_level_light_color_on_off'].state === 'on' ? (states['light.philips1_level_light_color_on_off'].attributes.brightness / 255) : '0'}

Seeing your example i tried to list the variables under variables: and to use vars[x] to call them.

So this worked for me:

type: picture-elements
image: >-
  http://hs.sbcounty.gov/CN/Photo%20Gallery/_t/Sample%20Picture%20-%20Koala_jpg.jpg?Mobile=0
elements:
  - type: custom:config-template-card
    variables:
      - states['light.philips1_level_light_color_on_off'].state
      - states['light.philips1_level_light_color_on_off'].attributes.brightness
    entities:
      - light.philips1_level_light_color_on_off
    element:
      type: icon
      icon: mdi:home
    style:
      opacity: '${vars[0] === ''on'' ? (vars[1] / 255) : ''0''}'
      top: 47%
      left: 75%

Thank you for all your help!

[iantrich]

I'll take a look at the PR this weekend

[re-1st]

I found the way through Git Bash

@pmentis Do you know where i can find a guide/tutorial to do this? :)

[pmentis]

I found the way through Git Bash

@pmentis Do you know where i can find a guide/tutorial to do this? :)

@read1st I think that it's easy enough to guide you from here.

1. Search in google for "git for windows".
2. The first result must be the site you are looking for. There is a download link for the program. Download and install it.
3. After the installation the Git Bash must be in your programs. Double click to run it and a terminal window will open.
4. Follow the instructions that smonesi gave me:

   git clone https://github.com/smonesi/config-template-card
   cd config-template-card
   npm install
   npm run build

   (type each single line, press enter, and wait after each line the procedure to be complete before you type the next line. There are four deferent lines with commands there, don’t paste them all together).

You are done!

I found the folder under C:\Users\(your windows user)\config-template-card and i followed again the instructions of smonesi in order to replace the file on my HA build.

Hope that it helps! Maybe there is an easier way to do it through windows that i m not aware of but i can tell that it worked.

[re-1st]

@pmentis Thanks! very much appreciated. it works!

[smonesi]

Meanwhile, my simple fix on Home Assistant frontend has been merged (https://github.com/home-assistant/frontend/commit/ff2bf1f3c1230d60348dbd4170e0f6383d80bdcb) so everything should be working as in HA 2021.8 (hopefully starting from 2021.10).

I still hope my PR on config-template-card (https://github.com/iantrich/config-template-card/pull/80) will be discussed/merged because after I started using config-template-card in picture-elements' elements (rather than the opposite, picture-elements inside a single config-template-card) the overall performance of the dashboard seems improved (since a change in the state of a single entity will no longer force an update of the whole picture-elements).

[bkr1969]

The performance is much better this way. Hopefully @iantrich will merge it this weekend.

[JunghaJungha]

I also managed to test the adaption of @smonesi by installing the upgrade of config-template-card and rewriting my floorplan as mentioned before.

It is really good now.

So thank you very much @smonesi for the work you did, also on the avoiding of spinning circles to be released in the next version.

And I hope @iantrich will release this soon, so all can benefit from it.

[iantrich]

1.3.5 released with @smonesi fix applied

[JunghaJungha]

Very happy with HA2021.10.0 and 1.3.6 !