Right, that’s why I mentioned that the layout of the paths in the inspector looked exactly the same. I’m not sure how to change the child index to find my path.
1.The code should be posted by using a proper formatting - otherwise there could be 100500 possible reasons of “why it does not work”. Place whole code into triple “`”. (better to edit your post instead of posting a new one)
2.There are 3 possible ways to do a dynamic opacity:
- “config-template-card” (CTC);
- card-mod with variable;
- card-mod with direct access to the element: goto 1st post in this thread → link at the bottom → styles for picture-elements.
3.You are using “picture-elements” inside CTC. If it is only to get a dynamic opacity (i.e. dependently on some value) - then CTC is not needed since card-mod may use jinjia templates. Also, never ever place “picture-elements” inside CTC - you will get glitches. Place into CTC only an element which you want to change dynamically.
Also, a template for opacity could be wrong, use “parseFloat()”.
This is an off-topic & will NOT be discussed here, better discuss it in the dedicated CTC thread.
1 Like
They are different for sun.sun & sensor.
Thanks lldar–I assumed that was my problem too, so I used the sensor for temperature and that works. Would two sensor paths be different? Sorry for all of the questions and I appreciate your help so much. Here’s a screenshot of the code inspector with the working sensor.downstairs_temperature and sensor.fordpass_tirepressure that does not.
ha-state-icon the right Way to follow is
Three ways of dynamic Picture elements:
code
type: vertical-stack
cards:
- type: entities
entities:
- input_number.test_level_1
- type: horizontal-stack
cards:
- type: picture-elements
title: static opacity
image: /local/images/test/blue.jpg
elements:
- type: image
image: /local/images/test/orange.jpg
style:
top: 50%
left: 50%
width: 50%
opacity: 0.7
- type: picture-elements
title: dyn. opacity (CTC)
image: /local/images/test/blue.jpg
elements:
- type: custom:config-template-card
entities:
- input_number.test_level_1
element:
type: image
image: /local/images/test/orange.jpg
style:
top: 50%
left: 50%
width: 50%
opacity: ${parseFloat(states["input_number.test_level_1"].state)/100}
- type: horizontal-stack
cards:
- type: picture-elements
title: 'dyn. opacity (card-mod #1)'
image: /local/images/test/blue.jpg
elements:
- type: image
image: /local/images/test/orange.jpg
card_mod:
style: |
:host {
--my-opacity: {{(states('input_number.test_level_1')|int)/100}};
}
style:
top: 50%
left: 50%
width: 50%
opacity: var(--my-opacity)
- type: picture-elements
title: 'dyn. opacity (card-mod #2)'
image: /local/images/test/blue.jpg
elements:
- type: image
image: /local/images/test/orange.jpg
card_mod:
style: |
hui-image {
opacity: {{(states('input_number.test_level_1')|int)/100}};
}
style:
top: 50%
left: 50%
width: 50%
1 Like
Thank you very much for your help, now I understand what you meant even if I had done a search and didn’t quite understand it. Thank you
OFT the card you are working on looks really nice. I keep my fingers crossed for you and look for easier way to install it and translation to english 
type: horizontal-stack
cards:
- type: picture-elements
image: /local/images/panel/sfondo.png
elements:
- type: image
image: /local/images/panel/colorpanelvertical.png
card_mod:
style: |
:host {
--my-opacity: {{(states('sensor.optimizer_voltage_1_1_1')|int)/100}};
}
style:
top: 18%
left: 11.8%
width: 20.4%
opacity: var(--my-opacity)
- type: image
image: /local/images/panel/colorpanelvertical.png
card_mod:
style: |
:host {
--my-opacity: {{(states('sensor.optimizer_voltage_1_1_2')|int)/100}};
}
style:
top: 18%
left: 88.8%
width: 20.4%
opacity: var(--my-opacity)
- type: image
image: /local/images/panel/colorpanelorizontal.png
card_mod:
style: |
:host {
--my-opacity: {{(states('sensor.optimizer_voltage_1_1_3')|int)/100}};
}
style:
top: 56%
left: 16.8%
width: 33%
opacity: var(--my-opacity)
- type: image
image: /local/images/panel/colorpanelorizontal.png
card_mod:
style: |
:host {
--my-opacity: {{(states('sensor.optimizer_voltage_1_1_4')|int)/100}};
}
style:
top: 56%
left: 50%
width: 33%
opacity: var(--my-opacity)
- type: image
image: /local/images/panel/colorpanelorizontal.png
card_mod:
style: |
:host {
--my-opacity: {{(states('sensor.optimizer_voltage_1_1_5')|int)/100}};
}
style:
top: 56%
left: 83%
width: 33%
opacity: var(--my-opacity)
- type: image
image: /local/images/panel/colorpanelorizontal.png
card_mod:
style: |
:host {
--my-opacity: {{(states('sensor.optimizer_voltage_1_1_6')|int)/100}};
}
style:
top: 81%
left: 16.8%
width: 33%
opacity: var(--my-opacity)
- type: image
image: /local/images/panel/colorpanelorizontal.png
card_mod:
style: |
:host {
--my-opacity: {{(states('sensor.optimizer_voltage_1_1_7')|int)/100}};
}
style:
top: 81%
left: 50%
width: 33%
opacity: var(--my-opacity)
- type: image
image: /local/images/panel/colorpanelorizontal.png
card_mod:
style: |
:host {
--my-opacity: {{(states('sensor.optimizer_voltage_1_1_8')|int)/100}};
}
style:
top: 81%
left: 83%
width: 33%
opacity: var(--my-opacity)
- type: image
image: /local/images/panel/panelsolar.png
style:
width: 100%
top: 1%
left: 0%
transform: translate(0,0)
- type: state-label
entity: sensor.power_1_1_1
style:
top: 18%
left: 12%
font-size: 135%
- type: state-label
entity: sensor.power_1_1_2
style:
top: 18%
left: 89%
font-size: 135%
- type: state-label
entity: sensor.power_1_1_3
style:
top: 53%
left: 84%
font-size: 150%
- type: state-label
entity: sensor.power_1_1_4
style:
top: 53%
left: 50%
font-size: 150%
- type: state-label
entity: sensor.power_1_1_5
style:
top: 53%
left: 17%
font-size: 150%
- type: state-label
entity: sensor.power_1_1_6
style:
top: 79%
left: 17%
font-size: 150%
- type: state-label
entity: sensor.power_1_1_7
style:
top: 79%
left: 50%
font-size: 150%
- type: state-label
entity: sensor.power_1_1_8
style:
top: 79%
left: 84%
font-size: 150%
- type: state-label
entity: sensor.panel_1_oggi
style:
top: 28%
left: 12%
- type: state-label
entity: sensor.panel_2_oggi
style:
top: 28%
left: 89%
- type: state-label
entity: sensor.panel_3_oggi
style:
top: 60%
left: 84%
- type: state-label
entity: sensor.panel_4_oggi
style:
top: 60%
left: 50%
- type: state-label
entity: sensor.panel_5_oggi
style:
top: 60%
left: 18%
- type: state-label
entity: sensor.panel_6_oggi
style:
top: 86%
left: 18%
- type: state-label
entity: sensor.panel_7_oggi
style:
top: 86%
left: 50%
- type: state-label
entity: sensor.panel_8_oggi
style:
top: 86%
left: 84%
Yes, this is correct.
Thanks, but I’m still not satisfied with the result. It’s not about your code.
I need to figure out what correct value to insert. Thank you
I have another question, would it be possible to change the color of my image? with #3091F2 or fetch the color from a link?
if the image couldn’t change color how could i make a box that auto color from the link? Thank you
o
https://monitoring.solaredge.com/solaredge-apigw/api/sites/xxxxxxxxx/layout/logical
I tried this, I transformed my image into SVG and in the code I put fill: red but it doesn’t work, it doesn’t turn red. For what reason?
- type: image
image: /local/images/panel/colorpanelvertical.svg
style:
top: 18%
left: 11.8%
width: 20.4%
fill: red
I do not understand what is “colored image” ))).
An image may be saturated, inversed, with changed brightness / contrast.
Try playing with this.
Was this in response to my issue? Was there more info you meant to add? Thx lldar!
In your post there was a screenshot from Code Inspector.
And I concluded that you were looking at a wrong element.
So - check “ha-state-icon” branch, it is different for different domains.
Awesome, I see now, I had to use ha-icon at the end of the path. My last question is why a card title is required for the card-mod code to run. When I remove the title, the colors revert to default.
Thank you!! I will donate lldar–much appreciate your help on this.
Could you elaborate?
Oh, thanks a lot))
Post a SHORT code with one formatted element - whose element is lost with a title.
Update: it happens because a title is places inside a “div” element:
So if you DO need a title - just correct indexes (like “(2) → (3)”).