Tigo Energy - Solar Panel Optimization

[reptar]

I pushed a good amount of changes that clean up the results from the script.

[chicagoandy (Andrew Metcalfe)]

@chicagoandy

I’m curious if anyone has gotten any nice dashboards configured to show the Tigo data. I’m trying to imagine how I could recreate the Tigo System View page.

Following up to myself here, I’ll offer up how I recreated the System View, for anyone who has access to their Tigo data.

I use the Picture Elements card to show an outline of the rooftop. Then I use an Element of type Image to show each panel. I then use card-mod and style-sheets to set the background based on the current power for each panel.

Here’s the code, for anyone interested:

type: picture-elements
image: https://mySite/local/RoofOutline-Photoroom.png
card_mod:
  style: |
    ha-card {
     --a1_alpha: rgba(0,255,0,{{(states('sensor.panel_a1_power')|int/320)|round(2)}});
     --a2_alpha: rgba(0,255,0,{{(states('sensor.panel_a2_power')|int/320)|round(2)}});
     --a3_alpha: rgba(0,255,0,{{(states('sensor.panel_a3_power')|int/320)|round(2)}});
     --a4_alpha: rgba(0,255,0,{{(states('sensor.panel_a4_power')|int/320)|round(2)}});
     --b1_alpha: rgba(0,255,0,{{(states('sensor.panel_b1_power')|int/320)|round(2)}});
     --b2_alpha: rgba(0,255,0,{{(states('sensor.panel_b2_power')|int/320)|round(2)}});
     --b3_alpha: rgba(0,255,0,{{(states('sensor.panel_b3_power')|int/320)|round(2)}});
     --b4_alpha: rgba(0,255,0,{{(states('sensor.panel_b4_power')|int/320)|round(2)}});
     --c1_alpha: rgba(0,255,0,{{(states('sensor.panel_c1_power')|int/320)|round(2)}});
     --c2_alpha: rgba(0,255,0,{{(states('sensor.panel_c2_power')|int/320)|round(2)}});
     --c3_alpha: rgba(0,255,0,{{(states('sensor.panel_c3_power')|int/320)|round(2)}});
     --c4_alpha: rgba(0,255,0,{{(states('sensor.panel_c4_power')|int/320)|round(2)}});
     --c5_alpha: rgba(0,255,0,{{(states('sensor.panel_c5_power')|int/320)|round(2)}});
     --c6_alpha: rgba(0,255,0,{{(states('sensor.panel_c6_power')|int/320)|round(2)}});
     --c7_alpha: rgba(0,255,0,{{(states('sensor.panel_c7_power')|int/320)|round(2)}});
     --d1_alpha: rgba(0,255,0,{{(states('sensor.panel_d1_power')|int/320)|round(2)}});
     --d2_alpha: rgba(0,255,0,{{(states('sensor.panel_d2_power')|int/320)|round(2)}});
     --d3_alpha: rgba(0,255,0,{{(states('sensor.panel_d3_power')|int/320)|round(2)}});
     --d4_alpha: rgba(0,255,0,{{(states('sensor.panel_d4_power')|int/320)|round(2)}});
     --d5_alpha: rgba(0,255,0,{{(states('sensor.panel_d5_power')|int/320)|round(2)}});
     --d6_alpha: rgba(0,255,0,{{(states('sensor.panel_d6_power')|int/320)|round(2)}});
     --d7_alpha: rgba(0,255,0,{{(states('sensor.panel_d7_power')|int/320)|round(2)}});
     --e1_alpha: rgba(0,255,0,{{(states('sensor.panel_e1_power')|int/320)|round(2)}});
     --e2_alpha: rgba(0,255,0,{{(states('sensor.panel_e2_power')|int/320)|round(2)}});
     --e3_alpha: rgba(0,255,0,{{(states('sensor.panel_e3_power')|int/320)|round(2)}});
     --e4_alpha: rgba(0,255,0,{{(states('sensor.panel_e4_power')|int/320)|round(2)}});     

    }  
elements:
  - type: image
    entity: sensor.panel_a1_power
    image: https://mysite/local/panel.png
    style:
      top: 21%
      left: 44%
      width: 6%
      background: var(--a1_alpha)
  - type: image
    entity: sensor.panel_a2_power
    image: https://mysite/local/panel.png
    style:
      top: 29%
      left: 44%
      width: 6%
      background: var(--a2_alpha)
  - type: image
    entity: sensor.panel_a3_power
    image: https://mysite/local/panel.png
    style:
      top: 37%
      left: 44%
      width: 6%
      background: var(--a3_alpha)
  - type: image
    entity: sensor.panel_a4_power
    image: https://mysite/local/panel.png
    style:
      top: 45%
      left: 44%
      width: 6%
      background: var(--a4_alpha)
  - type: image
    entity: sensor.panel_b1_power
    image: https://mysite/local/panel.png
    style:
      top: 53%
      left: 44%
      width: 6%
      background: var(--b1_alpha)
  - type: image
    entity: sensor.panel_b2_power
    image: https://mysite/local/panel.png
    style:
      top: 45%
      left: 38%
      width: 6%
      background: var(--b2_alpha)
  - type: image
    entity: sensor.panel_b3_power
    image: https://mysite/local/panel.png
    style:
      top: 53%
      left: 38%
      width: 6%
      background: var(--b3_alpha)
  - type: image
    entity: sensor.panel_b4_power
    image: https://mysite/local/panel.png
    style:
      top: 61%
      left: 38%
      width: 6%
      background: var(--b4_alpha)
  - type: image
    entity: sensor.panel_c1_power
    image: https://mysite/local/panel-v.png
    style:
      top: 74.0%
      left: 51.3%
      width: 4.2%
      background: var(--c1_alpha)
  - type: image
    entity: sensor.panel_c2_power
    image: https://mysite/local/panel-v.png
    style:
      top: 74.0%
      left: 55.5%
      width: 4.2%
      background: var(--c2_alpha)
  - type: image
    entity: sensor.panel_c3_power
    image: https://mysite/local/panel-v.png
    style:
      top: 84.5%
      left: 45%
      width: 4.2%
      background: var(--c3_alpha)
  - type: image
    entity: sensor.panel_c4_power
    image: https://mysite/local/panel-v.png
    style:
      top: 84.5%
      left: 49%
      width: 4.2%
      background: var(--c4_alpha)
  - type: image
    entity: sensor.panel_c5_power
    image: https://mysite/local/panel-v.png
    style:
      top: 84.5%
      left: 53%
      width: 4.2%
      background: var(--c5_alpha)
  - type: image
    entity: sensor.panel_c6_power
    image: https://mysite/local/panel-v.png
    style:
      top: 84.5%
      left: 57%
      width: 4.2%
      background: var(--c6_alpha)
  - type: image
    entity: sensor.panel_c7_power
    image: https://mysite/local/panel-v.png
    style:
      top: 84.5%
      left: 61%
      width: 4.2%
      background: var(--c7_alpha)
  - type: image
    entity: sensor.panel_d1_power
    image: https://mysite/local/panel-v.png
    style:
      top: 24.5%
      left: 70%
      width: 4.2%
      background: var(--d1_alpha)
  - type: image
    entity: sensor.panel_d2_power
    image: https://mysite/local/panel-v.png
    style:
      top: 24.5%
      left: 74%
      width: 4.2%
      background: var(--d2_alpha)
  - type: image
    entity: sensor.panel_d3_power
    image: https://mysite/local/panel-v.png
    style:
      top: 24.5%
      left: 78%
      width: 4.2%
      background: var(--d3_alpha)
  - type: image
    entity: sensor.panel_d4_power
    image: https://mysite/local/panel-v.png
    style:
      top: 35.0%
      left: 74%
      width: 4.2%
      background: var(--d4_alpha)
  - type: image
    entity: sensor.panel_d5_power
    image: https://mysite/local/panel-v.png
    style:
      top: 35.0%
      left: 78%
      width: 4.2%
      background: var(--d5_alpha)
  - type: image
    entity: sensor.panel_d6_power
    image: https://mysite/local/panel-v.png
    style:
      top: 62.5%
      left: 74%
      width: 4.2%
      background: var(--d6_alpha)
  - type: image
    entity: sensor.panel_d7_power
    image: https://mysite/local/panel-v.png
    style:
      top: 62.5%
      left: 78%
      width: 4.2%
      background: var(--d7_alpha)
  - type: image
    entity: sensor.panel_e1_power
    image: https://mysite/local/panel-v.png
    style:
      top: 82.5%
      left: 14.8%
      width: 4.2%
      background: var(--e1_alpha)
  - type: image
    entity: sensor.panel_e2_power
    image: https://mysite/local/panel-v.png
    style:
      top: 82.5%
      left: 19%
      width: 4.2%
      background: var(--e2_alpha)
  - type: image
    entity: sensor.panel_e3_power
    image: https://mysite/local/panel-v.png
    style:
      top: 82.5%
      left: 23.2%
      width: 4.2%
      background: var(--e3_alpha)
  - type: image
    entity: sensor.panel_e4_power
    image: https://mysite/local/panel-v.png
    style:
      top: 82.5%
      left: 27.4%
      width: 4.2%
      background: var(--e4_alpha)

[savethemanual]

taptap works like a charm. I wanted to get the data into Prometheus so I can visualise it in Grafana. I asked ChatGPT to do it for me as I’m not a dev. Feel free to give it a try…
savethemanual/taptap2prometheus: Python script used to parse the JSON output from taptap, and export the data as Prometheus metrics

[litinoveweedle]

Just published my addon

Tigo optimizer local monitoring - without cloud now possible!

Hello, base on the taptap project which reverse engineered protocol between Tigo TAP and CCA components I was able to create mqtt bridge and package it as a Home Assistant addon TapTap. So now we can detailed information from the Tigo photovoltaic optimizer modules locally - without Tigo cloud and with refresh time of 10s. Implementation requires: Modbus RS485 to Ethernet convertor (like for example WaveShare models MQTT broker (like mosquitto addon) MQTT integration As Addon uses H…

[savethemanual]

Nice! Thanks

[Koky]

New integration allow data collection local network without fee or any additional HW:

[Custom Integration] Tigo Optimizers – Cloud & Local Support

Hello everyone! @@@ TIGOSOLAR @@@ I’ve developed two custom Home Assistant integrations for those using Tigo optimizers, without the need for taptap or RS485. Both integrations follow the same structure: Each panel has 4 dedicated sensors: Power (W) Voltage In (V) Current In (A) Signal Strength (RSSI) Tigo Cloud Integration Uses the official Tigo API (requires a €20/year subscription). Pros: Works remotely — even outside …

[ThunderingPaws]

Thank you sharing this it was super helpful.

I’ve started using the Tigo integration from this post: Tigo Energy - Solar Panel Optimization - #47 by Koky and then used your template to make it work for me.

I switched to using a photo of actual panels with a label for power.

For the solar panel I found an photo online of my actual panel and then coloured it bright green solar-green-v.jpg (235x403) then created a horizonal version solar-green-h.jpg (403x235). I then uploaded it to config/www (/local) in homeassistant.

Adjusting the width, top and left is a real pain in the arse. Be very careful with the card_mod configuration as I found it very easy to break, you also have to install the card_mod integration.

Hopefully this helps the next person.

type: picture-elements
image: /local/roof.jpg
card_mod:
  style: |
    ha-card {
      --a1-brightness: {{ (states('sensor.tigo_a1_power') | float / 385) | round(2) }};
      --a2-brightness: {{ (states('sensor.tigo_a2_power') | float / 385) | round(2) }};
      --a3-brightness: {{ (states('sensor.tigo_a3_power') | float / 385) | round(2) }};
      --a4-brightness: {{ (states('sensor.tigo_a4_power') | float / 385) | round(2) }};
      --a5-brightness: {{ (states('sensor.tigo_a5_power') | float / 385) | round(2) }};
      --a6-brightness: {{ (states('sensor.tigo_a6_power') | float / 385) | round(2) }};
      --a7-brightness: {{ (states('sensor.tigo_a7_power') | float / 385) | round(2) }};
      --a8-brightness: {{ (states('sensor.tigo_a8_power') | float / 385) | round(2) }};
      --a9-brightness: {{ (states('sensor.tigo_a9_power') | float / 385) | round(2) }};
      --a10-brightness: {{ (states('sensor.tigo_a10_power') | float / 385) | round(2) }};
      --b1-brightness: {{ (states('sensor.tigo_b1_power') | float / 385) | round(2) }};
      --b2-brightness: {{ (states('sensor.tigo_b2_power') | float / 385) | round(2) }};
      --b3-brightness: {{ (states('sensor.tigo_b3_power') | float / 385) | round(2) }};
      --b4-brightness: {{ (states('sensor.tigo_b4_power') | float / 385) | round(2) }};
      --b5-brightness: {{ (states('sensor.tigo_b5_power') | float / 385) | round(2) }};
      --b6-brightness: {{ (states('sensor.tigo_b6_power') | float / 385) | round(2) }};
      --b7-brightness: {{ (states('sensor.tigo_b7_power') | float / 385) | round(2) }};
      --b8-brightness: {{ (states('sensor.tigo_b8_power') | float / 385) | round(2) }};
      --b9-brightness: {{ (states('sensor.tigo_b9_power') | float / 385) | round(2) }};
      --b10-brightness: {{ (states('sensor.tigo_b10_power') | float / 385) | round(2) }};
      --b11-brightness: {{ (states('sensor.tigo_b11_power') | float / 385) | round(2) }};
    }
elements:
  - type: image
    entity: sensor.tigo_b11_power
    image: /local/solar-green-v.jpg
    style:
      top: 33%
      left: 47.4%
      width: 4.2%
      filter: brightness(var(--b11-brightness))
  - type: state-label
    entity: sensor.tigo_b11_power
    style:
      top: 33%
      left: 47.4%
      color: white
      font-size: 10px
      filter: opacity(var(--b11-brightness))
  - type: image
    entity: sensor.tigo_b10_power
    image: /local/solar-green-v.jpg
    style:
      top: 33%
      left: 52%
      width: 4.2%
      filter: brightness(var(--b10-brightness))
  - type: state-label
    entity: sensor.tigo_b10_power
    style:
      top: 33%
      left: 52%
      color: white
      font-size: 10px
      filter: opacity(var(--b10-brightness)
  - type: image
    entity: sensor.tigo_b9_power
    image: /local/solar-green-v.jpg
    style:
      top: 33%
      left: 56.6%
      width: 4.2%
      filter: brightness(var(--b9-brightness))
  - type: state-label
    entity: sensor.tigo_b9_power
    style:
      top: 33%
      left: 56.6%
      color: white
      font-size: 10px
      filter: opacity(var(--b9-brightness)
  - type: image
    entity: sensor.tigo_b8_power
    image: /local/solar-green-v.jpg
    style:
      top: 33%
      left: 61.2%
      width: 4.2%
      filter: brightness(var(--b8-brightness))
  - type: state-label
    entity: sensor.tigo_b8_power
    style:
      top: 33%
      left: 61.2%
      color: white
      font-size: 10px
      filter: opacity(var(--b8-brightness)
  - type: image
    entity: sensor.tigo_b7_power
    image: /local/solar-green-v.jpg
    style:
      top: 33%
      left: 65.8%
      width: 4.2%
      filter: brightness(var(--b7-brightness))
  - type: state-label
    entity: sensor.tigo_b7_power
    style:
      top: 33%
      left: 65.8%
      color: white
      font-size: 10px
      filter: opacity(var(--b7-brightness)
  - type: image
    entity: sensor.tigo_b6_power
    image: /local/solar-green-v.jpg
    style:
      top: 33%
      left: 70.4%
      width: 4.2%
      filter: brightness(var(--b6-brightness))
  - type: state-label
    entity: sensor.tigo_b6_power
    style:
      top: 33%
      left: 70.4%
      color: white
      font-size: 10px
      filter: opacity(var(--b6-brightness)
  - type: image
    entity: sensor.tigo_b5_power
    image: /local/solar-green-v.jpg
    style:
      top: 33%
      left: 75%
      width: 4.2%
      filter: brightness(var(--b5-brightness))
  - type: state-label
    entity: sensor.tigo_b5_power
    style:
      top: 33%
      left: 75%
      color: white
      font-size: 10px
      filter: opacity(var(--b5-brightness)
  - type: image
    entity: sensor.tigo_a1_power
    image: /local/solar-green-v.jpg
    style:
      top: 46%
      left: 43%
      width: 4.2%
      filter: brightness(var(--a1-brightness))
  - type: state-label
    entity: sensor.tigo_a1_power
    style:
      top: 46%
      left: 43%
      color: white
      font-size: 10px
      filter: opacity(var(--a1-brightness)
  - type: image
    entity: sensor.tigo_a2_power
    image: /local/solar-green-v.jpg
    style:
      top: 46%
      left: 47.6%
      width: 4.2%
      filter: brightness(var(--a2-brightness))
  - type: state-label
    entity: sensor.tigo_a2_power
    style:
      top: 46%
      left: 47.6%
      color: white
      font-size: 10px
      filter: opacity(var(--a2-brightness)
  - type: image
    entity: sensor.tigo_a3_power
    image: /local/solar-green-v.jpg
    style:
      top: 46%
      left: 52.2%
      width: 4.2%
      filter: brightness(var(--a3-brightness))
  - type: state-label
    entity: sensor.tigo_a3_power
    style:
      top: 46%
      left: 52.2%
      color: white
      font-size: 10px
      filter: opacity(var(--a3-brightness)
  - type: image
    entity: sensor.tigo_a4_power
    image: /local/solar-green-v.jpg
    style:
      top: 46%
      left: 56.8%
      width: 4.2%
      filter: brightness(var(--a4-brightness))
  - type: state-label
    entity: sensor.tigo_a4_power
    style:
      top: 46%
      left: 56.8%
      color: white
      font-size: 10px
      filter: opacity(var(--a4-brightness)
  - type: image
    entity: sensor.tigo_a7_power
    image: /local/solar-green-v.jpg
    style:
      top: 58%
      left: 43%
      width: 4.2%
      filter: brightness(var(--a7-brightness))
  - type: state-label
    entity: sensor.tigo_a7_power
    style:
      top: 58%
      left: 43%
      color: white
      font-size: 10px
      filter: opacity(var(--a7-brightness)
  - type: image
    entity: sensor.tigo_a8_power
    image: /local/solar-green-v.jpg
    style:
      top: 58%
      left: 47.6%
      width: 4.2%
      filter: brightness(var(--a8-brightness))
  - type: state-label
    entity: sensor.tigo_a8_power
    style:
      top: 58%
      left: 47.6%
      color: white
      font-size: 10px
      filter: opacity(var(--a8-brightness)
  - type: image
    entity: sensor.tigo_a5_power
    image: /local/solar-green-v.jpg
    style:
      top: 46%
      left: 75.8%
      width: 4.2%
      filter: brightness(var(--a5-brightness))
  - type: state-label
    entity: sensor.tigo_a5_power
    style:
      top: 46%
      left: 75.8%
      color: white
      font-size: 10px
      filter: opacity(var(--a5-brightness)
  - type: image
    entity: sensor.tigo_a6_power
    image: /local/solar-green-v.jpg
    style:
      top: 46%
      left: 80.4%
      width: 4.2%
      filter: brightness(var(--a6-brightness))
  - type: state-label
    entity: sensor.tigo_a6_power
    style:
      top: 46%
      left: 80.4%
      color: white
      font-size: 10px
      filter: opacity(var(--a6-brightness)
  - type: image
    entity: sensor.tigo_b2_power
    image: /local/solar-green-h.jpg
    style:
      top: 67%
      left: 55%
      width: 7%
      filter: brightness(var(--b2-brightness))
  - type: state-label
    entity: sensor.tigo_b2_power
    style:
      top: 67%
      left: 55%
      color: white
      font-size: 10px
      filter: opacity(var(--b2-brightness)
  - type: image
    entity: sensor.tigo_b3_power
    image: /local/solar-green-h.jpg
    style:
      top: 74%
      left: 55%
      width: 7%
      filter: brightness(var(--b3-brightness))
  - type: state-label
    entity: sensor.tigo_b3_power
    style:
      top: 74%
      left: 55%
      color: white
      font-size: 10px
      filter: opacity(var(--b3-brightness)
  - type: image
    entity: sensor.tigo_b4_power
    image: /local/solar-green-h.jpg
    style:
      top: 81%
      left: 55%
      width: 7%
      filter: brightness(var(--b4-brightness))
  - type: state-label
    entity: sensor.tigo_b4_power
    style:
      top: 81%
      left: 55%
      color: white
      font-size: 10px
      filter: opacity(var(--b4-brightness)
  - type: image
    entity: sensor.tigo_a10_power
    image: /local/solar-green-h.jpg
    style:
      top: 67%
      left: 62.1%
      width: 7%
      filter: brightness(var(--a10-brightness))
  - type: state-label
    entity: sensor.tigo_a10_power
    style:
      top: 67%
      left: 62.1%
      color: white
      font-size: 10px
      filter: opacity(var(--a10-brightness)
  - type: image
    entity: sensor.tigo_a9_power
    image: /local/solar-green-h.jpg
    style:
      top: 74%
      left: 62.1%
      width: 7%
      filter: brightness(var(--a9-brightness))
  - type: state-label
    entity: sensor.tigo_a9_power
    style:
      top: 74%
      left: 62.1%
      color: white
      font-size: 10px
      filter: opacity(var(--a9-brightness)
  - type: image
    entity: sensor.tigo_b1_power
    image: /local/solar-green-h.jpg
    style:
      top: 81%
      left: 62.1%
      width: 7%
      filter: brightness(var(--b1-brightness))
  - type: state-label
    entity: sensor.tigo_b1_power
    style:
      top: 81%
      left: 62.1%
      color: white
      font-size: 10px
      filter: opacity(var(--b1-brightness)
grid_options:
  columns: 24
  rows: 10

[ThunderingPaws]

Updated version with a few useful improvements.

• Change the alignment of the text for vertical panels
• Display a different roof image for day and night
• If the power is 0w or Unknown the label and panel will not be shown
• Display the total generation (you will need to create a template sensor)

If you are wanting to get this working I suggest you start with 1 panel to get it working. Editing the YAML is so complicated.

type: picture-elements
image: /local/roof.jpg
card_mod:
  style: |
    ha-card {
      --a1-brightness: {{ (states('sensor.tigo_a1_power') | float(0) / 385) | round(2) }};
      --a2-brightness: {{ (states('sensor.tigo_a2_power') | float(0) / 385) | round(2) }};
      --a3-brightness: {{ (states('sensor.tigo_a3_power') | float(0) / 385) | round(2) }};
      --a4-brightness: {{ (states('sensor.tigo_a4_power') | float(0) / 385) | round(2) }};
      --a5-brightness: {{ (states('sensor.tigo_a5_power') | float(0) / 385) | round(2) }};
      --a6-brightness: {{ (states('sensor.tigo_a6_power') | float(0) / 385) | round(2) }};
      --a7-brightness: {{ (states('sensor.tigo_a7_power') | float(0) / 385) | round(2) }};
      --a8-brightness: {{ (states('sensor.tigo_a8_power') | float(0) / 385) | round(2) }};
      --a9-brightness: {{ (states('sensor.tigo_a9_power') | float(0) / 385) | round(2) }};
      --a10-brightness: {{ (states('sensor.tigo_a10_power') | float(0) / 385) | round(2) }};
      --b1-brightness: {{ (states('sensor.tigo_b1_power') | float(0) / 385) | round(2) }};
      --b2-brightness: {{ (states('sensor.tigo_b2_power') | float(0) / 385) | round(2) }};
      --b3-brightness: {{ (states('sensor.tigo_b3_power') | float(0) / 385) | round(2) }};
      --b4-brightness: {{ (states('sensor.tigo_b4_power') | float(0) / 385) | round(2) }};
      --b5-brightness: {{ (states('sensor.tigo_b5_power') | float(0) / 385) | round(2) }};
      --b6-brightness: {{ (states('sensor.tigo_b6_power') | float(0) / 385) | round(2) }};
      --b7-brightness: {{ (states('sensor.tigo_b7_power') | float(0) / 385) | round(2) }};
      --b8-brightness: {{ (states('sensor.tigo_b8_power') | float(0) / 385) | round(2) }};
      --b9-brightness: {{ (states('sensor.tigo_b9_power') | float(0) / 385) | round(2) }};
      --b10-brightness: {{ (states('sensor.tigo_b10_power') | float(0) / 385) | round(2) }};
      --b11-brightness: {{ (states('sensor.tigo_b11_power') | float(0) / 385) | round(2) }};
    }}
elements:
  - type: image
    entity: sun.sun
    image: /local/roof-dark.jpg
    state_filter:
      above_horizon: opacity(0)
      below_horizon: opacity(1)
    style:
      top: 50%
      left: 50%
      width: 102%
  - type: image
    entity: sun.sun
    image: /local/roof.jpg
    state_filter:
      above_horizon: opacity(1)
      below_horizon: opacity(0)
    style:
      top: 50%
      left: 50%
      width: 100%
  - type: conditional
    conditions:
      - entity: sensor.tigo_power
        state_not: "0"
    elements:
      - type: state-label
        entity: sensor.tigo_power
        style:
          top: 10%
          left: 10%
          color: white
          font-size: 20px
  - type: conditional
    conditions:
      - entity: sun.sun
        state: below_horizon
    elements:
      - type: state-icon
        entity: sun.sun
        icon: mdi:moon-waxing-crescent
        style:
          top: 10%
          left: 95%
          color: white
          font-size: 10px
  - type: conditional
    conditions:
      - entity: sensor.tigo_b11_power
        state_not: "0"
      - entity: sensor.tigo_b11_power
        state_not: unknown
    elements:
      - type: image
        entity: sensor.tigo_b11_power
        image: /local/solar-green-v.jpg
        style:
          top: 33%
          left: 47.4%
          width: 4.2%
          filter: brightness(var(--b11-brightness))
      - type: state-label
        entity: sensor.tigo_b11_power
        style:
          top: 33%
          left: 47.4%
          color: white
          font-size: 8px
          writing-mode: vertical-rl
  - type: conditional
    conditions:
      - entity: sensor.tigo_b10_power
        state_not: "0"
      - entity: sensor.tigo_b10_power
        state_not: unknown
    elements:
      - type: image
        entity: sensor.tigo_b10_power
        image: /local/solar-green-v.jpg
        style:
          top: 33%
          left: 52%
          width: 4.2%
          filter: brightness(var(--b10-brightness))
      - type: state-label
        entity: sensor.tigo_b10_power
        style:
          top: 33%
          left: 52%
          color: white
          font-size: 8px
          writing-mode: vertical-rl
          filter: brightness(var(--b10-label-opacity))
  - type: conditional
    conditions:
      - entity: sensor.tigo_b9_power
        state_not: "0"
      - entity: sensor.tigo_b9_power
        state_not: unknown
    elements:
      - type: image
        entity: sensor.tigo_b9_power
        image: /local/solar-green-v.jpg
        style:
          top: 33%
          left: 56.6%
          width: 4.2%
          filter: brightness(var(--b9-brightness))
      - type: state-label
        entity: sensor.tigo_b9_power
        style:
          top: 33%
          left: 56.6%
          color: white
          font-size: 8px
          writing-mode: vertical-rl
  - type: conditional
    conditions:
      - entity: sensor.tigo_b8_power
        state_not: "0"
      - entity: sensor.tigo_b8_power
        state_not: unknown
    elements:
      - type: image
        entity: sensor.tigo_b8_power
        image: /local/solar-green-v.jpg
        style:
          top: 33%
          left: 61.2%
          width: 4.2%
          filter: brightness(var(--b8-brightness))
      - type: state-label
        entity: sensor.tigo_b8_power
        style:
          top: 33%
          left: 61.2%
          color: white
          font-size: 8px
          writing-mode: vertical-rl
  - type: conditional
    conditions:
      - entity: sensor.tigo_b7_power
        state_not: "0"
      - entity: sensor.tigo_b7_power
        state_not: unknown
    elements:
      - type: image
        entity: sensor.tigo_b7_power
        image: /local/solar-green-v.jpg
        style:
          top: 33%
          left: 65.8%
          width: 4.2%
          filter: brightness(var(--b7-brightness))
      - type: state-label
        entity: sensor.tigo_b7_power
        style:
          top: 33%
          left: 65.8%
          color: white
          font-size: 8px
          writing-mode: vertical-rl
  - type: conditional
    conditions:
      - entity: sensor.tigo_b6_power
        state_not: "0"
      - entity: sensor.tigo_b6_power
        state_not: unknown
    elements:
      - type: image
        entity: sensor.tigo_b6_power
        image: /local/solar-green-v.jpg
        style:
          top: 33%
          left: 70.4%
          width: 4.2%
          filter: brightness(var(--b6-brightness))
      - type: state-label
        entity: sensor.tigo_b6_power
        style:
          top: 33%
          left: 70.4%
          color: white
          font-size: 8px
          writing-mode: vertical-rl
  - type: conditional
    conditions:
      - entity: sensor.tigo_b5_power
        state_not: "0"
      - entity: sensor.tigo_b5_power
        state_not: unknown
    elements:
      - type: image
        entity: sensor.tigo_b5_power
        image: /local/solar-green-v.jpg
        style:
          top: 33%
          left: 75%
          width: 4.2%
          filter: brightness(var(--b5-brightness))
      - type: state-label
        entity: sensor.tigo_b5_power
        style:
          top: 33%
          left: 75%
          color: white
          font-size: 8px
          writing-mode: vertical-rl
  - type: conditional
    conditions:
      - entity: sensor.tigo_a1_power
        state_not: "0"
      - entity: sensor.tigo_a1_power
        state_not: unknown
    elements:
      - type: image
        entity: sensor.tigo_a1_power
        image: /local/solar-green-v.jpg
        style:
          top: 46%
          left: 43%
          width: 4.2%
          filter: brightness(var(--a1-brightness))
      - type: state-label
        entity: sensor.tigo_a1_power
        style:
          top: 46%
          left: 43%
          color: white
          font-size: 8px
          writing-mode: vertical-rl
          filter: brightness(var(--a1-label-opacity))
  - type: conditional
    conditions:
      - entity: sensor.tigo_a2_power
        state_not: "0"
      - entity: sensor.tigo_a2_power
        state_not: unknown
    elements:
      - type: image
        entity: sensor.tigo_a2_power
        image: /local/solar-green-v.jpg
        style:
          top: 46%
          left: 47.6%
          width: 4.2%
          filter: brightness(var(--a2-brightness))
      - type: state-label
        entity: sensor.tigo_a2_power
        style:
          top: 46%
          left: 47.6%
          color: white
          font-size: 8px
          writing-mode: vertical-rl
  - type: conditional
    conditions:
      - entity: sensor.tigo_a3_power
        state_not: "0"
      - entity: sensor.tigo_a3_power
        state_not: unknown
    elements:
      - type: image
        entity: sensor.tigo_a3_power
        image: /local/solar-green-v.jpg
        style:
          top: 46%
          left: 52.2%
          width: 4.2%
          filter: brightness(var(--a3-brightness))
      - type: state-label
        entity: sensor.tigo_a3_power
        style:
          top: 46%
          left: 52.2%
          color: white
          font-size: 8px
          writing-mode: vertical-rl
  - type: conditional
    conditions:
      - entity: sensor.tigo_a4_power
        state_not: "0"
      - entity: sensor.tigo_a4_power
        state_not: unknown
    elements:
      - type: image
        entity: sensor.tigo_a4_power
        image: /local/solar-green-v.jpg
        style:
          top: 46%
          left: 56.8%
          width: 4.2%
          filter: brightness(var(--a4-brightness))
      - type: state-label
        entity: sensor.tigo_a4_power
        style:
          top: 46%
          left: 56.8%
          color: white
          font-size: 8px
          writing-mode: vertical-rl
  - type: conditional
    conditions:
      - entity: sensor.tigo_a7_power
        state_not: "0"
      - entity: sensor.tigo_a7_power
        state_not: unknown
    elements:
      - type: image
        entity: sensor.tigo_a7_power
        image: /local/solar-green-v.jpg
        style:
          top: 58%
          left: 43%
          width: 4.2%
          filter: brightness(var(--a7-brightness))
      - type: state-label
        entity: sensor.tigo_a7_power
        style:
          top: 58%
          left: 43%
          color: white
          font-size: 8px
          writing-mode: vertical-rl
  - type: conditional
    conditions:
      - entity: sensor.tigo_a8_power
        state_not: "0"
      - entity: sensor.tigo_a8_power
        state_not: unknown
    elements:
      - type: image
        entity: sensor.tigo_a8_power
        image: /local/solar-green-v.jpg
        style:
          top: 58%
          left: 47.6%
          width: 4.2%
          filter: brightness(var(--a8-brightness))
      - type: state-label
        entity: sensor.tigo_a8_power
        style:
          top: 58%
          left: 47.6%
          color: white
          font-size: 8px
          writing-mode: vertical-rl
  - type: conditional
    conditions:
      - entity: sensor.tigo_a5_power
        state_not: "0"
      - entity: sensor.tigo_a5_power
        state_not: unknown
    elements:
      - type: image
        entity: sensor.tigo_a5_power
        image: /local/solar-green-v.jpg
        style:
          top: 46%
          left: 75.8%
          width: 4.2%
          filter: brightness(var(--a5-brightness))
      - type: state-label
        entity: sensor.tigo_a5_power
        style:
          top: 46%
          left: 75.8%
          color: white
          font-size: 8px
          writing-mode: vertical-rl
  - type: conditional
    conditions:
      - entity: sensor.tigo_a6_power
        state_not: "0"
      - entity: sensor.tigo_a6_power
        state_not: unknown
    elements:
      - type: image
        entity: sensor.tigo_a6_power
        image: /local/solar-green-v.jpg
        style:
          top: 46%
          left: 80.4%
          width: 4.2%
          filter: brightness(var(--a6-brightness))
      - type: state-label
        entity: sensor.tigo_a6_power
        style:
          top: 46%
          left: 80.4%
          color: white
          font-size: 8px
          writing-mode: vertical-rl
  - type: conditional
    conditions:
      - entity: sensor.tigo_b2_power
        state_not: "0"
      - entity: sensor.tigo_b2_power
        state_not: unknown
    elements:
      - type: image
        entity: sensor.tigo_b2_power
        image: /local/solar-green-h.jpg
        style:
          top: 67%
          left: 55%
          width: 7%
          filter: brightness(var(--b2-brightness))
      - type: state-label
        entity: sensor.tigo_b2_power
        style:
          top: 67%
          left: 55%
          color: white
          font-size: 8px
  - type: conditional
    conditions:
      - entity: sensor.tigo_b3_power
        state_not: "0"
      - entity: sensor.tigo_b3_power
        state_not: unknown
    elements:
      - type: image
        entity: sensor.tigo_b3_power
        image: /local/solar-green-h.jpg
        style:
          top: 74%
          left: 55%
          width: 7%
          filter: brightness(var(--b3-brightness))
      - type: state-label
        entity: sensor.tigo_b3_power
        style:
          top: 74%
          left: 55%
          color: white
          font-size: 8px
  - type: conditional
    conditions:
      - entity: sensor.tigo_b4_power
        state_not: "0"
      - entity: sensor.tigo_b4_power
        state_not: unknown
    elements:
      - type: image
        entity: sensor.tigo_b4_power
        image: /local/solar-green-h.jpg
        style:
          top: 81%
          left: 55%
          width: 7%
          filter: brightness(var(--b4-brightness))
      - type: state-label
        entity: sensor.tigo_b4_power
        style:
          top: 81%
          left: 55%
          color: white
          font-size: 8px
  - type: conditional
    conditions:
      - entity: sensor.tigo_b1_power
        state_not: "0"
      - entity: sensor.tigo_b1_power
        state_not: unknown
    elements:
      - type: image
        entity: sensor.tigo_b1_power
        image: /local/solar-green-h.jpg
        style:
          top: 67%
          left: 62.1%
          width: 7%
          filter: brightness(var(--b1-brightness))
      - type: state-label
        entity: sensor.tigo_b1_power
        style:
          top: 67%
          left: 62.1%
          color: white
          font-size: 8px
  - type: conditional
    conditions:
      - entity: sensor.tigo_a9_power
        state_not: "0"
      - entity: sensor.tigo_a9_power
        state_not: unknown
    elements:
      - type: image
        entity: sensor.tigo_a9_power
        image: /local/solar-green-h.jpg
        style:
          top: 74%
          left: 62.1%
          width: 7%
          filter: brightness(var(--a9-brightness))
      - type: state-label
        entity: sensor.tigo_a9_power
        style:
          top: 74%
          left: 62.1%
          color: white
          font-size: 8px
  - type: conditional
    conditions:
      - entity: sensor.tigo_a9_power
        state_not: "0"
      - entity: sensor.tigo_a9_power
        state_not: unknown
    elements:
      - type: image
        entity: sensor.tigo_a10_power
        image: /local/solar-green-h.jpg
        style:
          top: 81%
          left: 62.1%
          width: 7%
          filter: brightness(var(--a10-brightness))
      - type: state-label
        entity: sensor.tigo_a10_power
        style:
          top: 81%
          left: 62.1%
          color: white
          font-size: 8px
grid_options:
  rows: 8
  columns: 21

[ThunderingPaws]

Example image for night time

[chicagoandy (Andrew Metcalfe)]

Very nice improvement to my wireframe above.

[ChristianD]

There is a ESPhome Custom component.

GitHub - N30dG/esphome-components

[MRobi (Mike)]

@ChristianD

There is a ESPhome Custom component.

Do you need to run 5v to the box with the tigo or does the esp32 draw power through the RS485 to TTL?

[tbrasser (Thomas Brasser)]

Afaik the tigo bus is 24v, so you don’t connect that and power the esp from usb (I use the usb port on the cca for this)

[MRobi (Mike)]

Thanks! I didn’t even notice the USB port on the side! LOL