What card do you mean?
Hi lldar, continuing this conversation from the other thread. Iâm trying to color FordPass sensors icons and I started with your example. The sun entity changes, and two of my nest sensors (1 & 3) take the color but none of the FordPass sensors do. See the tire pressure example below that should be cyan. While inspecting, I can find no differences between the ford logic and the others.
Oh, last thing. Why do I need a card title for any of the logic to work? When I remove it, none have color.
Thanks so much for your help!
type: picture-glance
title: test
image: /local/Ford_Explorer3.gif
entities:
- entity: sensor.downstairs_temperature
- entity: sensor.fordpass_tirepressure
- entity: sensor.upstairs_humidity
- entity: sun.sun
card_mod:
style:
.box div:nth-child(2):
div:nth-child(1):
ha-icon-button ha-state-icon:
$: |
ha-svg-icon {
color: orange;
}
div:nth-child(2):
ha-icon-button ha-state-icon:
$: |
ha-svg-icon {
color: cyan;
}
div:nth-child(3):
ha-icon-button ha-state-icon:
$: |
ha-svg-icon {
color: yellow;
}
div:nth-child(4):
ha-icon-button ha-state-icon:
$: |
ha-svg-icon {
color: red;
}
I notice now that you created it with picture-elements
But we can convert that to card_mod
card:
type: picture-elements
elements:
- type: image
image: /local/images/panel/colorpanelvertical.png
style:
top: 18%
left: 11.8%
width: 20.4%
opacity: ${ vars[0] / 100 }
Do not just copy/paste a code from examples.
Same remark as above.
Different domains may have different structure in DOM.
Use Code Inspector to get exact path to elements which should be styled.
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.