🔹 Card-mod - Add css styles to any lovelace card

stepsolar · December 20, 2022, 4:08pm

Solar Panel

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'

Ildar_Gabdullin · December 20, 2022, 4:58pm

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.

stepsolar · December 20, 2022, 5:12pm

Sorry, in short I ask if it was possible to opacify an image by taking the percentage values of a sensor. Thank you

Ildar_Gabdullin · December 20, 2022, 5:33pm

What card do you mean?

tknice · December 20, 2022, 5:37pm

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;
                    }

stepsolar · December 20, 2022, 5:46pm

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 }

Ildar_Gabdullin · December 20, 2022, 7:50pm

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.

tknice · December 20, 2022, 9:13pm

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.

Ildar_Gabdullin · December 20, 2022, 9:17pm

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.

Update: check this.

Ildar_Gabdullin · December 20, 2022, 9:25pm

They are different for sun.sun & sensor.

tknice · December 20, 2022, 10:05pm

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.

Ildar_Gabdullin · December 21, 2022, 6:24am

ha-state-icon the right Way to follow is

Ildar_Gabdullin · December 21, 2022, 6:43am

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%

stepsolar · December 21, 2022, 7:04am

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

majkers · December 21, 2022, 9:25am

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

stepsolar · December 21, 2022, 10:34am

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%

Ildar_Gabdullin · December 21, 2022, 10:43am

stepsolar:

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

Yes, this is correct.

stepsolar · December 21, 2022, 10:47am

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

stepsolar · December 21, 2022, 11:04am

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

https://monitoringpublic.solaredge.com/solaredge-web/p/publicSystemData?reporterId=xxxxxxxxx&type=panel&activeTab=0&fieldId=xxxxxxx&isPublic=true&locale=it_IT

o

https://monitoring.solaredge.com/solaredge-apigw/api/sites/xxxxxxxxx/layout/logical

Screenshot 2022-12-21 at 12-06-06 https __monitoring.solaredge.com

stepsolar · December 21, 2022, 11:29am

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