config-template-card: Opacity does not work with 2021.9.x

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%

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 29 (11 by maintainers)

Most upvoted comments

I’ll take a look at the PR this weekend

iantrich on Sep 24, 2021

1.3.5 released with @smonesi fix applied

iantrich on Oct 4, 2021

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?

bkr1969 on Sep 22, 2021

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

smonesi on Sep 16, 2021

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).

smonesi on Sep 30, 2021

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.

Search in google for “git for windows”.
The first result must be the site you are looking for. There is a download link for the program. Download and install it.
After the installation the Git Bash must be in your programs. Double click to run it and a terminal window will open.
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.

pmentis on Sep 29, 2021

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.

smonesi on Sep 22, 2021

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.

re-1st on Sep 22, 2021

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

bkr1969 on Sep 30, 2021

@pmentis Thanks! very much appreciated. it works!

re-1st on Sep 30, 2021

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!

smonesi on Sep 23, 2021

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

Any idea how long until this gets merged?

bkr1969 on Sep 20, 2021