The stack-cards don’t have a ha-card-element. So you can only style them (and any other card without ha-card element) with putting the cards into other cards with such an element. E.g. either with custom:mod-card or with HACS hui-element.
Hi, I’m not an expert so I’m asking for your help with a card.
I created a card to visualize the solar panels with solardge optimizers (link GitHub - stepsolar/hassio-package-panel-solar: Package Panel Solar Optimizer Solaredge Home Assistant) the blue color of the panels must change in density based on the energy broduction during the day as per solardge dashboard. What I’ve done for now is to use the transparency of the blue panel using the voltage value of the optimizer. But not only satisfied because I don’t think SolarEdge does this in its dashboard, now I’ve also created percentage sensors of the panels based on their instantaneous production, but I can’t enter this value for the transparency of the blue panel, yes because the opacity and between 0 and 1 not as a percentage. Is there a way to transform the opacity value between 0 and 1 into a percentage between 0% and 100%? Thank you
I attach some photos
code
type: custom:config-template-card
variables:
- states['sensor.optimizer_voltage_1_1_1'].state
- states['sensor.optimizer_voltage_1_1_2'].state
- states['sensor.optimizer_voltage_1_1_3'].state
- states['sensor.optimizer_voltage_1_1_4'].state
- states['sensor.optimizer_voltage_1_1_5'].state
- states['sensor.optimizer_voltage_1_1_6'].state
- states['sensor.optimizer_voltage_1_1_7'].state
- states['sensor.optimizer_voltage_1_1_8'].state
entities:
- sensor.optimizer_voltage_1_1_1
- sensor.optimizer_voltage_1_1_2
- sensor.optimizer_voltage_1_1_3
- sensor.optimizer_voltage_1_1_4
- sensor.optimizer_voltage_1_1_5
- sensor.optimizer_voltage_1_1_6
- sensor.optimizer_voltage_1_1_7
- sensor.optimizer_voltage_1_1_8
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 }
- type: image
image: /local/images/panel/colorpanelvertical.png
style:
top: 18%
left: 88.8%
width: 20.4%
opacity: ${ vars[1] / 100 }
- type: image
image: /local/images/panel/colorpanelorizontal.png
style:
top: 56%
left: 16.8%
width: 33%
opacity: ${ vars[2] / 100 }
- type: image
image: /local/images/panel/colorpanelorizontal.png
style:
top: 56%
left: 50%
width: 33%
opacity: ${ vars[3] / 100 }
- type: image
image: /local/images/panel/colorpanelorizontal.png
style:
top: 56%
left: 83%
width: 33%
opacity: ${ vars[4] / 100 }
- type: image
image: /local/images/panel/colorpanelorizontal.png
style:
top: 81%
left: 16.8%
width: 33%
opacity: ${ vars[5] / 100 }
- type: image
image: /local/images/panel/colorpanelorizontal.png
style:
top: 81%
left: 50%
width: 33%
opacity: ${ vars[6] / 100 }
- type: image
image: /local/images/panel/colorpanelorizontal.png
style:
top: 81%
left: 83%
width: 33%
opacity: ${ vars[7] / 100 }
- 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%
image: /local/images/panel/sfondo.png
pkg_panelsolar.yaml
homeassistant:
customize:
package.node_anchors:
customize: &customize
Package: 'Contatore Pannelli Solari'
Version: '0.1.5'
Author: 'Stefano Marchese'
icon: 'mdi:counter'
#entity_picture: https://avatars.githubusercontent.com/u/84263865?s=400&v=4
reference: 'stepsolar - github chat'
expose: &expose
<<: *customize
haaska_hidden: false
homebridge_hidden: false
sensor.produzione_giornaliero_panel_1_f1:
<<: *customize
sensor.produzione_giornaliero_panel_2_f1:
<<: *customize
sensor.produzione_giornaliero_panel_3_f1:
<<: *customize
sensor.produzione_giornaliero_panel_4_f1:
<<: *customize
sensor.produzione_giornaliero_panel_5_f1:
<<: *customize
sensor.produzione_giornaliero_panel_6_f1:
<<: *customize
sensor.produzione_giornaliero_panel_7_f1:
<<: *customize
sensor.produzione_giornaliero_panel_8_f1:
<<: *customize
customize_glob:
sensor.produzione_giornaliero_panel_1_f1:
<<: *customize
sensor.produzione_giornaliero_panel_2_f1:
<<: *customize
sensor.produzione_giornaliero_panel_3_f1:
<<: *customize
sensor.produzione_giornaliero_panel_4_f1:
<<: *customize
sensor.produzione_giornaliero_panel_5_f1:
<<: *customize
sensor.produzione_giornaliero_panel_6_f1:
<<: *customize
sensor.produzione_giornaliero_panel_7_f1:
<<: *customize
sensor.produzione_giornaliero_panel_8_f1:
<<: *customize
#downloader:
#download_dir: packages
utility_meter:
produzione_giornaliero_panel_1:
source: !secret Pannello1
cycle: daily
tariffs:
- f1
produzione_giornaliero_panel_2:
source: !secret Pannello2
cycle: daily
tariffs:
- f1
produzione_giornaliero_panel_3:
source: !secret Pannello3
cycle: daily
tariffs:
- f1
produzione_giornaliero_panel_4:
source: !secret Pannello4
cycle: daily
tariffs:
- f1
produzione_giornaliero_panel_5:
source: !secret Pannello5
cycle: daily
tariffs:
- f1
produzione_giornaliero_panel_6:
source: !secret Pannello6
cycle: daily
tariffs:
- f1
produzione_giornaliero_panel_7:
source: !secret Pannello7
cycle: daily
tariffs:
- f1
produzione_giornaliero_panel_8:
source: !secret Pannello8
cycle: daily
tariffs:
- f1
sensor:
- platform: rest
resource: https://raw.githubusercontent.com/stepsolar/hassio-package-panel-solar/master/versione.json
name: Versione pk panel solar
value_template: '{{ value_json.versione }}'
- platform: rest
resource: https://raw.githubusercontent.com/stepsolar/hassio-package-panel-solar/master/versione.json
name: tipo aggiornamento pk panel solar
value_template: '{{ value_json.cosa_aggiornare }}'
- platform: template
sensors:
panel_1_oggi:
friendly_name_template: " Panel 1 Energy "
unique_id: panel_1_energy
icon_template: mdi:counter
value_template: "{{ states.sensor.produzione_giornaliero_panel_1_f1.state | float * 1000 }}"
unit_of_measurement: 'Wh'
panel_2_oggi:
friendly_name_template: " Panel 2 Energy "
unique_id: panel_2_energy
icon_template: mdi:counter
value_template: "{{ states.sensor.produzione_giornaliero_panel_2_f1.state | float * 1000 }}"
unit_of_measurement: 'Wh'
panel_3_oggi:
friendly_name_template: " Panel 3 Energy "
unique_id: panel_3_energy
icon_template: mdi:counter
value_template: "{{ states.sensor.produzione_giornaliero_panel_3_f1.state | float * 1000 }}"
unit_of_measurement: 'Wh'
panel_4_oggi:
friendly_name_template: " Panel 4 Energy "
unique_id: panel_4_energy
icon_template: mdi:counter
value_template: "{{ states.sensor.produzione_giornaliero_panel_4_f1.state | float * 1000 }}"
unit_of_measurement: 'Wh'
panel_5_oggi:
friendly_name_template: " Panel 5 Energy "
unique_id: panel_5_energy
icon_template: mdi:counter
value_template: "{{ states.sensor.produzione_giornaliero_panel_5_f1.state | float * 1000 }}"
unit_of_measurement: 'Wh'
panel_6_oggi:
friendly_name_template: " Panel 6 Energy "
unique_id: panel_6_energy
icon_template: mdi:counter
value_template: "{{ states.sensor.produzione_giornaliero_panel_6_f1.state | float * 1000 }}"
unit_of_measurement: 'Wh'
panel_7_oggi:
friendly_name_template: " Panel 7 Energy "
unique_id: panel_7_energy
icon_template: mdi:counter
value_template: "{{ states.sensor.produzione_giornaliero_panel_7_f1.state | float * 1000 }}"
unit_of_measurement: 'Wh'
panel_8_oggi:
friendly_name_template: " Panel 8 Energy "
unique_id: panel_8_energy
icon_template: mdi:counter
value_template: "{{ states.sensor.produzione_giornaliero_panel_8_f1.state | float * 1000 }}"
unit_of_measurement: 'Wh'
################ PRODUZIONE TOTALE PANNELLI ################################################
produzione_panel_totale_oggi:
friendly_name_template: " Produzione Panel Totale Oggi "
unique_id: produzione_panel_totale_energy
icon_template: mdi:counter
value_template: "{{((states.sensor.panel_1_oggi.state | float(0)) + (states.sensor.panel_2_oggi.state | float(0)) + (states.sensor.panel_3_oggi.state | float(0)) + (states.sensor.panel_4_oggi.state | float(0)) + (states.sensor.panel_5_oggi.state | float(0)) + (states.sensor.panel_6_oggi.state | float(0)) + (states.sensor.panel_7_oggi.state | float(0)) + (states.sensor.panel_8_oggi.state | float(0))) | round(3) }}"
unit_of_measurement: 'Wh'
################ PERCENTUALE DI PRODUZIONE DEI PANNELLI ####################################
percentuale_produzione_panel_1_oggi:
friendly_name_template: " Percentuale Produzione Panel 1 Oggi "
unique_id: percentuale_produzione_panel_1_energy
icon_template: mdi:counter
value_template: "{{((states.sensor.panel_1_oggi.state | float(0)) / (states.sensor.produzione_panel_totale_oggi.state | float(0))) * 100 | round(2) }}"
unit_of_measurement: '%'
percentuale_produzione_panel_2_oggi:
friendly_name_template: " Percentuale Produzione Panel 2 Oggi "
unique_id: percentuale_produzione_panel_2_energy
icon_template: mdi:counter
value_template: "{{((states.sensor.panel_2_oggi.state | float(0)) / (states.sensor.produzione_panel_totale_oggi.state | float(0))) * 100 | round(2) }}"
unit_of_measurement: '%'
percentuale_produzione_panel_3_oggi:
friendly_name_template: " Percentuale Produzione Panel 3 Oggi "
unique_id: percentuale_produzione_panel_3_energy
icon_template: mdi:counter
value_template: "{{((states.sensor.panel_3_oggi.state | float(0)) / (states.sensor.produzione_panel_totale_oggi.state | float(0))) * 100 | round(2) }}"
unit_of_measurement: '%'
percentuale_produzione_panel_4_oggi:
friendly_name_template: " Percentuale Produzione Panel 4 Oggi "
unique_id: percentuale_produzione_panel_4_energy
icon_template: mdi:counter
value_template: "{{((states.sensor.panel_4_oggi.state | float(0)) / (states.sensor.produzione_panel_totale_oggi.state | float(0))) * 100 | round(2) }}"
unit_of_measurement: '%'
percentuale_produzione_panel_5_oggi:
friendly_name_template: " Percentuale Produzione Panel 5 Oggi "
unique_id: percentuale_produzione_panel_5_energy
icon_template: mdi:counter
value_template: "{{((states.sensor.panel_5_oggi.state | float(0)) / (states.sensor.produzione_panel_totale_oggi.state | float(0))) * 100 | round(2) }}"
unit_of_measurement: '%'
percentuale_produzione_panel_6_oggi:
friendly_name_template: " Percentuale Produzione Panel 6 Oggi "
unique_id: percentuale_produzione_panel_6_energy
icon_template: mdi:counter
value_template: "{{((states.sensor.panel_6_oggi.state | float(0)) / (states.sensor.produzione_panel_totale_oggi.state | float(0))) * 100 | round(2) }}"
unit_of_measurement: '%'
percentuale_produzione_panel_7_oggi:
friendly_name_template: " Percentuale Produzione Panel 7 Oggi "
unique_id: percentuale_produzione_panel_7_energy
icon_template: mdi:counter
value_template: "{{((states.sensor.panel_7_oggi.state | float(0)) / (states.sensor.produzione_panel_totale_oggi.state | float(0))) * 100 | round(2) }}"
unit_of_measurement: '%'
percentuale_produzione_panel_8_oggi:
friendly_name_template: " Percentuale Produzione Panel 8 Oggi "
unique_id: percentuale_produzione_panel_8_energy
icon_template: mdi:counter
value_template: "{{((states.sensor.panel_8_oggi.state | float(0)) / (states.sensor.produzione_panel_totale_oggi.state | float(0))) * 100 | round(2) }}"
unit_of_measurement: '%'
#------------------calcoli ieri-----------------------------------------##
panel_1_ieri:
friendly_name_template: " Panel 1 Energy Ieri "
unique_id: panel_1_energy_ieri
icon_template: mdi:counter
value_template: "{{ states.sensor.produzione_giornaliero_panel_1_f1.attributes.last_period | float * 1000 }}"
unit_of_measurement: 'Wh'
panel_2_ieri:
friendly_name_template: " Panel 2 Energy Ieri"
unique_id: panel_2_energy_ieri
icon_template: mdi:counter
value_template: "{{ states.sensor.produzione_giornaliero_panel_2_f1.attributes.last_period | float * 1000 }}"
unit_of_measurement: 'Wh'
panel_3_ieri:
friendly_name_template: " Panel 3 Energy Ieri"
unique_id: panel_3_energy_ieri
icon_template: mdi:counter
value_template: "{{ states.sensor.produzione_giornaliero_panel_3_f1.attributes.last_period | float * 1000 }}"
unit_of_measurement: 'Wh'
panel_4_ieri:
friendly_name_template: " Panel 4 Energy Ieri"
unique_id: panel_4_energy_ieri
icon_template: mdi:counter
value_template: "{{ states.sensor.produzione_giornaliero_panel_4_f1.attributes.last_period | float * 1000 }}"
unit_of_measurement: 'Wh'
panel_5_ieri:
friendly_name_template: " Panel 5 Energy Ieri"
unique_id: panel_5_energy_ieri
icon_template: mdi:counter
value_template: "{{ states.sensor.produzione_giornaliero_panel_5_f1.attributes.last_period | float * 1000 }}"
unit_of_measurement: 'Wh'
panel_6_ieri:
friendly_name_template: " Panel 6 Energy Ieri"
unique_id: panel_6_energy_ieri
icon_template: mdi:counter
value_template: "{{ states.sensor.produzione_giornaliero_panel_6_f1.attributes.last_period | float * 1000 }}"
unit_of_measurement: 'Wh'
panel_7_ieri:
friendly_name_template: " Panel 7 Energy Ieri"
unique_id: panel_7_energy_ieri
icon_template: mdi:counter
value_template: "{{ states.sensor.produzione_giornaliero_panel_7_f1.attributes.last_period | float * 1000 }}"
unit_of_measurement: 'Wh'
panel_8_ieri:
friendly_name_template: " Panel 8 Energy Ieri"
unique_id: panel_8_energy_ieri
icon_template: mdi:counter
value_template: "{{ states.sensor.produzione_giornaliero_panel_8_f1.attributes.last_period | float * 1000 }}"
unit_of_measurement: 'Wh'
##--------------------AUTOMAZIONI---------------------##
automation:
#####################controllo aggiornamenti############################
- alias: controllo versione pkpanelsolar
trigger:
- platform: time
at: '18:00'
- event: start
platform: homeassistant
condition:
- condition: template
value_template: "{{ states('sensor.versione_pk_panel_solar') > (state_attr('input_number.costo_f1', 'Version')) }}"
action:
- service: input_boolean.turn_on
data:
entity_id: input_boolean.versione_pkpanelsolar
- alias: controllo versione reset pkpanelsolar
trigger:
- platform: time
at: '18:05'
- event: start
platform: homeassistant
condition:
- condition: template
value_template: "{{ states('sensor.versione_pk_panel_solar') == (state_attr('input_number.costo_f1', 'Version')) }}"
action:
- service: input_boolean.turn_off
data:
entity_id: input_boolean.versione_pkpanelsolar
#invio messaggio storico
#################################
#input_select:
# numero_di_fasce:
# name: Numero di Fasce
# options:
# - 1
# - 2
# - 3
# initial: !secret NumeroTariffe
input_boolean:
versione_pkpanelsolar:
script:
scarica_pkpanelsolar:
sequence:
- service: notify.persistent_notification
data:
message: 'Aggiorno il pacchetto... attendere'
- service: downloader.download_file
data:
url: 'https://raw.githubusercontent.com/stepsolar/hassio-package-panel-solar/master/pkg_panelsolar.yaml'
overwrite: true
- delay: 5
- service: downloader.download_file
data:
url: 'https://raw.githubusercontent.com/stepsolar/hassio-package-panel-solar/master/lovelace-dash-light.txt'
overwrite: true
- delay: 5
#- service: homeassistant.restart
- delay: 5
- service: notify.persistent_notification
data:
message: 'Package Panel Solar Aggiornato. Ricarico i servizi'
- delay: 1
# - service: homeassistant.restart
- service: automation.reload
- service: input_boolean.reload
- service: input_select.reload
- service: input_number.reload
- service: input_datetime.reload
- service: template.reload
- service: notify.persistent_notification
data:
message: 'Servizi Ricaricati. ricarico in ultimo gli script'
- service: script.reload
- service: notify.notify
data:
message: 'Aggiornamento Pk Panel Solar Fatto, se vuoi puoi offrire un caffe al creatore del pacchetto a questo link https://www.buymeacoffee.com/stepsolar'
Too much info))
If you post a short simplified example demonstrating the issue - people will have more chances to understand, you - to get an answer.
This is a card-mod thread, it is about styling a card & it’s elements. Automations, sensors etc - are out of the scope.
Sorry, in short I ask if it was possible to opacify an image by taking the percentage values of a sensor. Thank you
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
