I pushed a good amount of changes that clean up the results from the script.
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)
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
Just published my addon
Nice! Thanks
New integration allow data collection local network without fee or any additional HW:
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