Closed bkr1969 closed 2 years ago
Include you config
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...
Looks like your answer is in #78
Not following you exactly. How would this apply to opacity and is there a work-around?
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 :)
I opened a PR that will hopefully fix (and clarify) the situation: https://github.com/iantrich/config-template-card/pull/80
FWIW...I solved the "grey circles" problem by making the icons config-template entities instead of just image elements of the picture-elements card.
I opened a PR that will hopefully fix (and clarify) the situation: #80
Any idea how long until this gets merged?
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.
.
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, 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.
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?
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.
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!
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!
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
I'm on an HA Blue (ODROID). Where do I find the file to do this?
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 thedist
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!
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%
@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!
I'll take a look at the PR this weekend
I found the way through Git Bash
@pmentis Do you know where i can find a guide/tutorial to do this? :)
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.
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 Thanks! very much appreciated. it works!
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
).
The performance is much better this way. Hopefully @iantrich will merge it this weekend.
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.
1.3.5 released with @smonesi fix applied
Very happy with HA2021.10.0 and 1.3.6 !
Checklist:
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.