Percentage of solar energy production #305

stepsolar · 2022-12-24T09:25:38Z

stepsolar
Dec 24, 2022

Greetings,
congratulations for your project, thanks to it I would like to create a visualization of the production of each single solar panel (with optimisers) to understand through the visual aspect which panel is producing the most.
As shown in the attached image, I created a card with 8 svg panels and I would like the blue color to change opacity based on the percentage production.
Could you help me I'm not a coding expert. Thank you

Sensor
sensor.percentuale_produzione_panel_1_oggi
sensor.percentuale_produzione_panel_2_oggi
sensor.percentuale_produzione_panel_3_oggi
sensor.percentuale_produzione_panel_4_oggi
sensor.percentuale_produzione_panel_5_oggi
sensor.percentuale_produzione_panel_6_oggi
sensor.percentuale_produzione_panel_7_oggi
sensor.percentuale_produzione_panel_8_oggi

Answered by stepsolar

Dec 24, 2022

this way works but still not a good result, thanks for helping me

            - name: panel1
              element: colorblu1
              entity: sensor.percentuale_produzione_panel_1_oggi
              state_action:
                action: call-service
                service: floorplan.style_set
                service_data:
                  style: |
                    >
                    return `
                      fill-opacity:${parseFloat((entity.state)/100)};
                    `;

View full answer

exetico · 2022-12-24T10:49:06Z

exetico
Dec 24, 2022
Maintainer

You can adjust fill-opacity with our style_set function.

Divide pct with 100 (12.18/100) and use that value as the fill-opacity.

Check our other discussions, and let us know if another push in the right direction is needed. There's other topics related to this.

You could also check this, but It's not 100% related to it.
https://youtu.be/f_3KAPc53hQ?t=15:00

12 replies

exetico Dec 24, 2022
Maintainer

Get out of here 🤪🎄!

stepsolar Dec 24, 2022
Author

Start by sharing the code, and format it correctly ☺️. Instead of screenshotting it.

But I mean what I shared previously.

The last part should look like:
fillopacity ? `fill-opacity:${fillopacity/100}`: '';
Maybe you need to parse fillopacity as a long.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat

Wrap fillopacity in parseLong like:
fillopacity ? `fill-opacity:${parseFloat(fillopacity)/100}`: '';

here is my code

views:
  - title: SunPower
    theme: Google Light and Dark Theme
    path: floorplan
    panel: true
    type: panel
    cards:
      - config:
          image: /local/floorplan/solar/panelsunpower.svg
          rules:
            - name: panel1
              element: colorblu1
              entity: sensor.percentuale_produzione_panel_1_oggi_oggi
              state_action:
                action: call-service
                service: floorplan.style_set
                service_data:
                  style: >
                    > var fillopacity = entity && entity.state && entity.state ?
                    entity.state : false; return  fillopacity ?
                    `fill-opacity:${fillopacity/100}`: '';
            - name: panel2
              element: colorblu2
              entity: sensor.percentuale_produzione_panel_2_oggi
              state_action:
                action: call-service
                service: floorplan.style_set
                service_data:
                  style: >
                    > var fillopacity = entity && entity.state && entity.state ?
                    entity.state : false; return  fillopacity ?
                    `fill-opacity:${fillopacity/100}`: '';
            - name: panel3
              element: colorblu3
              entity: light.lampade_cucina
              state_action:
                action: call-service
                service: floorplan.style_set
                service_data:
                  style: >
                    > var fillopacity = entity && entity.state && entity.state ?
                    entity.state : false; return  fillopacity ?
                    `fill-opacity:${fillopacity/100}`: '';
            - name: panel4
              element: colorblu4
              entity: light.lampade_cucina
              state_action:
                action: call-service
                service: floorplan.style_set
                service_data:
                  style: >
                    > var fillopacity = entity && entity.state && entity.state ?
                    entity.state : false; return  fillopacity ?
                    `fill-opacity:${fillopacity/100}`: '';
            - name: panel5
              element: colorblu5
              entity: light.lampade_cucina
              state_action:
                action: call-service
                service: floorplan.style_set
                service_data:
                  style: >
                    > var fillopacity = entity && entity.state && entity.state ?
                    entity.state : false; return  fillopacity ?
                    `fill-opacity:${fillopacity/100}`: '';
            - name: panel6
              element: colorblu6
              entity: light.lampade_cucina
              state_action:
                action: call-service
                service: floorplan.style_set
                service_data:
                  style: >
                    > var fillopacity = entity && entity.state && entity.state ?
                    entity.state : false; return  fillopacity ?
                    `fill-opacity:${fillopacity/100}`: '';
            - name: panel7
              element: colorblu7
              entity: light.lampade_cucina
              state_action:
                action: call-service
                service: floorplan.style_set
                service_data:
                  style: >
                    > var fillopacity = entity && entity.state && entity.state ?
                    entity.state : false; return  fillopacity ?
                    `fill-opacity:${fillopacity/100}`: '';
            - name: panel8
              element: colorblu8
              entity: light.lampade_cucina
              state_action:
                action: call-service
                service: floorplan.style_set
                service_data:
                  style: >
                    > var fillopacity = entity && entity.state && entity.state ?
                    entity.state : false; return  fillopacity ?
                    `fill-opacity:${fillopacity/100}`: '';
          stylesheet: /local/floorplan/solar/panelsunpower.css
        full_height: true
        type: custom:floorplan-card

stepsolar Dec 24, 2022
Author

I'll chime in if I may. Have a look at this example to see how to use style_set https://experiencelovelace.github.io/ha-floorplan/docs/example-home/ You will see you need to return valid CSS that will be applied to the SVG element.

Personally I would just apply some math as Tobias mentioned above. What you have to know however is what is the maximum value you expect those sensors to get to. In your post above you seem to indicate the maximum value will be 12% (but I see in one screenshot values above 13?). Assuming the max is 12 then try this:
service_data:
  style: |
    >
    return `
      fill-opacity: (${parseFloat(entity.state) / 12});
    `;  
So whatever the maximum value actually is then substitute that in for the 12 in the code above. Also I am not sure how you have constructed your SVG images. So you might need to use the CSS variable of fill-opacity as shown above or you might need to use opacity (if they were embedded PNG images for example)

@OzGav thanks for your help, i did as you suggested but nothing changed(at least i think) here is the code

views:
  - title: SunPower
    theme: Google Light and Dark Theme
    path: floorplan
    panel: true
    type: panel
    cards:
      - config:
          image: /local/floorplan/solar/panelsunpower.svg
          rules:
            - name: panel1
              element: colorblu1
              entity: sensor.percentuale_produzione_panel_1_oggi_oggi
              state_action:
                action: call-service
                service: floorplan.style_set
                service_data:
                  style: |
                    >
                    return `
                      fill-opacity: (${parseFloat(entity.state) / 13});
                    `;

OzGav Dec 24, 2022

How have you created your SVG? Are those solar panel images embedded PNG or did you draw them all (in Inkscape?) and group them together as one object?

stepsolar Dec 24, 2022
Author

Come hai creato il tuo SVG? Quelle immagini del pannello solare sono PNG incorporate o le hai disegnate tutte (in Inkscape?) E le hai raggruppate insieme come un unico oggetto?

and an SVG file drawn with adobe illustrator

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   viewBox="0 0 564.14 454.42"
   version="1.1"
   id="svg1195"
   sodipodi:docname="panelsunpower.svg"
   inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs1199" />
  <sodipodi:namedview
     id="namedview1197"
     pagecolor="#ffffff"
     bordercolor="#000000"
     borderopacity="0.25"
     inkscape:showpageshadow="2"
     inkscape:pageopacity="0.0"
     inkscape:pagecheckerboard="0"
     inkscape:deskcolor="#d1d1d1"
     showgrid="false"
     inkscape:zoom="1.1927292"
     inkscape:cx="276.67638"
     inkscape:cy="227.21"
     inkscape:window-width="1366"
     inkscape:window-height="745"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     inkscape:current-layer="svg1195" />
  <title
     id="title929">panelsunpower</title>
  <g
     id="sfondogrigio">
    <rect
       width="564.14"
       height="454.42"
       style="fill: #272931"
       id="rect931" />
  </g>
  <g
     id="colorbluorizontal">
    <rect
       id="colorblu5"
       x="29.45"
       y="220.94"
       width="166.01"
       height="69.32"
       style="fill:#055cdd;stroke:#231f20;stroke-miterlimit:10;stroke-width:0.75px;fill-opacity:1" />
    <rect
       id="colorblu4"
       x="199.58"
       y="221.04"
       width="166.01"
       height="69.32"
       style="fill:#055cdd;stroke:#231f20;stroke-miterlimit:10;stroke-width:0.75px;fill-opacity:1" />
    <rect
       id="colorblu3"
       x="369.42"
       y="220.94"
       width="166.01"
       height="69.32"
       style="fill:#055cdd;stroke:#231f20;stroke-miterlimit:10;stroke-width:0.75px;fill-opacity:1" />
    <rect
       id="colorblu6"
       x="29.49"
       y="326.59"
       width="166.01"
       height="69.32"
       style="fill:#055cdd;stroke:#231f20;stroke-miterlimit:10;stroke-width:0.75px;fill-opacity:1" />
    <rect
       id="colorblu7"
       x="199.58"
       y="326.39"
       width="166.01"
       height="69.32"
       style="fill:#055cdd;stroke:#231f20;stroke-miterlimit:10;stroke-width:0.75px;fill-opacity:1" />
    <rect
       id="colorblu8"
       x="369.85001"
       y="326.62"
       width="166.00999"
       height="69.32"
       style="display:inline;fill:#055cdd;stroke:#231f20;stroke-width:0.75px;stroke-miterlimit:10;opacity:1;fill-opacity:1" />
  </g>
  <g
     id="colorbluvertical">
    <rect
       id="colorblu1"
       x="34.99"
       y="33.26"
       width="104.7"
       height="136.52"
       style="fill:#055cdd;stroke:#231f20;stroke-miterlimit:10;stroke-width:0.75px;fill-opacity:1"
       inkscape:label="colorblu1" />
    <rect
       id="colorblu2"
       x="427.07999"
       y="33.43"
       width="104.7"
       height="136.52"
       style="display:inline;fill:#055cdd;stroke:#231f20;stroke-width:0.75px;stroke-miterlimit:10;fill-opacity:1"
       inkscape:label="colorblu2" />

stepsolar · 2022-12-24T14:37:41Z

stepsolar
Dec 24, 2022
Author

this way works but still not a good result, thanks for helping me

            - name: panel1
              element: colorblu1
              entity: sensor.percentuale_produzione_panel_1_oggi
              state_action:
                action: call-service
                service: floorplan.style_set
                service_data:
                  style: |
                    >
                    return `
                      fill-opacity:${parseFloat((entity.state)/100)};
                    `;

14 replies

stepsolar Dec 25, 2022
Author

You have to write it in JavaScript so just grabbing code from the web often won’t work.

You want something like

              ```
              service: floorplan.style_set
              service_data:
                style: | 
                  >
                  var temp = parseFloat(entity.state); 
                  if (temp <= 50) return "fill: #E1E1E1"; 
                  else if (temp <= 100) return "fill: #ADFF2F"; 
                  else if (temp <= 150) return "fill: #FFFF00"; 
                  else return "fill: #FF0000";

I tried your code but it doesn't work, what am I doing wrong?

stepsolar Dec 25, 2022
Author

Now it works, thanks the problem was >

exetico Dec 26, 2022
Maintainer

Great work 😃 . Please share the final and working code as a comment - for people finding this thread by Googling/searching.

stepsolar Dec 26, 2022
Author

Of course, I will share the code and the whole project thanks to your help. But first I have to complete it, there are still some details missing. Thank you

stepsolar Dec 26, 2022
Author

            - name: panel1
              element: colorblu1
              entity: sensor.power_1_1_1
              state_action:
                action: call-service
                service: floorplan.style_set
                service_data:
                  style: >
                    > var temp = parseFloat(entity.state);  if (temp <= 50)
                    return "fill: #02070C";  else if (temp <= 70) return "fill:
                    #071626"; else if (temp <= 100) return "fill: #0C263F"; else
                    if (temp <= 150) return "fill: #194C7F"; else if (temp <=
                    170) return "fill: #1E5B99"; else if (temp <= 200) return
                    "fill: #2163A5"; else if (temp <= 250) return "fill:
                    #2672BF"; else return "fill: #2D89E5";

stepsolar · 2022-12-26T11:23:43Z

stepsolar
Dec 26, 2022
Author

1 reply

exetico Dec 26, 2022
Maintainer

Cool 😄 (Remember to use the right comment field - it's hart to spot the difference - but this is a new "thread"))

Just to clear our any misunderstandings:
I'd love to see the final result! But my comment was to your very specific request 😄 (not the whole project).

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Percentage of solar energy production #305

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 27 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Percentage of solar energy production #305

stepsolar Dec 24, 2022

Replies: 3 comments · 27 replies

exetico Dec 24, 2022 Maintainer

exetico Dec 24, 2022 Maintainer

stepsolar Dec 24, 2022 Author

stepsolar Dec 24, 2022 Author

OzGav Dec 24, 2022

stepsolar Dec 24, 2022 Author

stepsolar Dec 24, 2022 Author

stepsolar Dec 25, 2022 Author

stepsolar Dec 25, 2022 Author

exetico Dec 26, 2022 Maintainer

stepsolar Dec 26, 2022 Author

stepsolar Dec 26, 2022 Author

stepsolar Dec 26, 2022 Author

exetico Dec 26, 2022 Maintainer

stepsolar
Dec 24, 2022

Replies: 3 comments 27 replies

exetico
Dec 24, 2022
Maintainer

exetico Dec 24, 2022
Maintainer

stepsolar Dec 24, 2022
Author

stepsolar Dec 24, 2022
Author

stepsolar Dec 24, 2022
Author

stepsolar
Dec 24, 2022
Author

stepsolar Dec 25, 2022
Author

stepsolar Dec 25, 2022
Author

exetico Dec 26, 2022
Maintainer

stepsolar Dec 26, 2022
Author

stepsolar Dec 26, 2022
Author

stepsolar
Dec 26, 2022
Author

exetico Dec 26, 2022
Maintainer