Picture element card - how to visualize the current position of the sun on a sat image (for a PV system)?

Goal is to show the current position of the sun in a satellite image for example by a

  • a sun ray / beam or
  • 15 objects for every usual daylight position

First would require most likely to exchange the background picture based on the time for example from 5:30 am to 8:30 pm or to add a “beam” object and hide that once the current hour is over

2nd would require objects I could turn on like a yellow bulb and then would need to hide that so only visible if time of that first object for example is 6:00 am +/- 30 minutes, otherwise it must be hidden.

here is an example picture with both options

UPDATE: I have read the documentation and therefore the first option seems to be open again based on what kind of image I could overlay like a png with just the beam or yellow circle. Not sure how that could work out or if a fake entity I could colour would fit better my needs and is less work cause I would need 15 overlay picture for 15 hours at least

The nicest option would be an entity showing the current time as value on the lowerst part of the picture. And every hour later I would hide that and turn the next one on.

1 Like

Maybe this conversation can help:
Picture-elements: dynamic positioning - Configuration / Frontend - Home Assistant Community (home-assistant.io)

1 Like

I have checked it only for a first impression but that looks quite similiar and should lead to a solution sooner or later therefore I call it solved.

BUT: have you searched for that solution or did you have that in your mind and could remember the nice picture here

I’m using the calculation for my own image, showing where the sun is relative to my solar panels.

TBH, I did not remember the picture until I saw it on the thread again :face_with_open_eyes_and_hand_over_mouth:

1 Like

ah,
you have done something similiar and remembered that post as the root / idea.

But maybe you can tell me more cause is that sun moving in a circle ?
And where is the center point - in the middle of the background pictures ?

Correct.

Also correct:
The sun moves in a circle and I change the image after sunset with this code:

type: picture-elements
image: /local/solar_panel_setup_empty.jpg
elements:
  - type: image
    entity: sun.sun
    image: /local/sun.png
    state_image:
      below_horizon: /local/sun_down.png
    style:
      width: 5%
    card_mod:
      style: |
        :host {
          top: {{ states('sensor.sun_top') }}%;
          left: {{ states('sensor.sun_left') }}%;
        }  

Here’s what it looks like:

Don’t check too closely on the values, though.
Some of them come from the Tesla gateway and some of them come from the Enphase gateway - and I’d put this thing together before I realized that Tesla is overreporting (no, not really a surprise, is it? :stuck_out_tongue_winking_eye: ) by somewhere between 7% and 8% on the daily production. The Enphase reporting matches close to 100% with what I see from the power company.

Ah,
now I see assuming the screenshot happened during daylight cause the sun is still there while our sun is now about 30°.

Here is the Growatt system and my string view. In central europe string inverters are king so we have some or rather 6 with 13 strings each string about 2,5 kWp in case of 500 Wp panels and about 2,7 kWp for the 545 Wp panels.
I have 4 of these dashboards for the current power
Watt in that String
Watt per kWp in that String

and the energy production
Wh in that String
Wh per kWp in that String

But these are figures for roughly latitude of Berlin or the tesla model y gigafactory.

We do not drive a tesla, my brother has one and is quite happy more or less after switching evs every year or so which means e-GOLF, Skoda Enyaq (which is a more or less VW ID by their sub brand SKODA) and another one before he got his Tesla model 3 - after 1 year having a BMW 7series and then 20 years with Mercedes sedans.

For sure not the best car he had owned but the ev quality and the range calculation is for him quite accurate and reliable which means that he will get the range he sees in the odometer in the morning based on the current out side temperature and a flat street profile (we live in northern germany and we call a hill of 100m mountain cause the dykes are roughly 8 m and if you look from the top of the dyke everything over 100 m must be a mountain cause we live on top of such point called mountain even tough just 105 m.

Therefore I am wondering that the tesla roof is overreporting cause the car figures are here called quite reliable if people know what they are talking about (same temperature, wind, rain, …) which too many do not know even after years of driving evs. Tesla has gotten a grown community and many of these new tesla owners had driven before the german stupidness of EVs which are mostly crap except maybe the Porsche Taycan but only the new model year.
All others were stupid like hell and Mercedes the most stupid which I can judget having worked there for over 2 decades incl. the crazy Chrysler Daimler Marriage in heaven aka the merger of equals. Why ?
Daimler had saved Tesla in 2009 and bought a stake of 10% of Tesla.
Guess how much worth Daimler would be with those 10% of Tesla shares?
10 times more than today cause what has happened ?

The Daimler Merger King and CEO Zetsche had sold in 2013 all tesla shares with a famous joke which fire back big times years later.
He had said back then that he was the only guy who had ever made a profit out of TESLA.
And now he would be fired for that joke - and they had messed the opportunity to get deeper into the key points cause they had had access to Tesla knowledge as 10% Stakeholder back in the early year of 2010 decade. What did they get ?
They said to Tesla: develope an electric Smart !
Which they did but Mercdes did not learn anything from that.

Therefore for me Tesla figures were serious and reliable from those drivers who know what they are talking about and not the range based on epa or whatsoever consumption standard.

Quite astonishing that solar powerroofs underperform.
Growatt is really accurate: We have energy meter from the utility provider and the deviation is not worth to mention . Why ? We have a full feeder out of 2 inverters and this is the easiest way to compare. The energy is 100% fed into the grid for 13 cent while the surplus feeder bring just 7,7 Cent per kWh.
But the full feeder shows a deviation of 0,6 % after 10.000 kWh produced in this summer which means smartmeter gateway counter versus the official counter.

And then you have to take into accoint that based on german law such utiility meter can have a deviation of +1,5 to -1,5 %. Therefore Growatt is for us quite accurate and the most affordable inverter brand without the need of active cooling and full support of 48V diy LFP batteries.

thanks for sharing - I will try it out tomorrow
just one question: your second sundown image is an empty png of 1x1 pixel or what have you chosen ?

I’m not driving a Tesla either, but I have a Tesla Powerwall 2 for storage, so the gateway is - kind of - correctly reporting on what is going into and coming out of the battery, but as it overreports on the solar production (at the time of the screenshot by approx. 300W), it also overreports on the home consumption by the same amount.
Took me a while to figure out that there was nothing actually sucking up these 300W in my house because they weren’t really produced in the first place :frowning:

These are the two images I’m using for
Sun is down:
sun_down

Sun is up:
sun

And: yes, you are correct.
The sun is still up here in sunny Arizona :smiley:

1 Like

Arizona - can be really nice and warm or just hot. Had been to Flagstaff in the 90s coming from Vegas and visiting relatives - which means my grandmothers 2 uncles and a sister emigrated from 1870s on after having served their military duty otherwise you would have spent years in prison as deserter where only 1 guy had huge luck: Friedrich Trump

Prussia - which was the biggest kingdom and the home of the emperor - never let any deserter or those who did not serve their 2 years of military duty go. They were court martialed or emigrated without permission and never came back out of fear to spend 4 years in prison, 1 months not served meant 2 months in prison.

But I had only been in the northern part of Arizona, not Tuscon, only Flagstaff, Phoenix and Albuquerque which could belong to new mexico I guess.

Berlin is roughly 450 km north of Seattle so we are far more north and have already shorter days and hence the 25 kWp solar array and 15 kWh diy LFP battery cause tesla batteries are here unaffordable due to all the fees and waht not.
THey wanted from us roughly 12000€ or 13500$ .
We have paid now 2200€ or 2500$.
They also do not sell teslas tile based solar modules / panels here due to patent issues with domestic tile manufacturers I guess. But here we usually have no tile based solar power installations due to the high investment cost and different roof architecture. We do not have roofs out of wood with a layer of rain protection cause we usually have concrete tiles each one half the size of a tesla solar power tile.
Those are fixed to the beams one by one and usually last about 80 years or so.
And therefore close to everyone who is no building a new house is using big panels and string inverters.

New houses are required to have solar power otherwise you can not get a permission.

We had made a huge leap from 25-50% renewable up to over 50% in 2024 within 2 years. Each year just the new build solar power production equals here 8 new nuclear power plants which we have all shut down due to the issues of the old nuclear waste no one wants to have in his backyard or even 1000 m deep in the ground. And of cause off shore wind farms are growing with the same speed just to get rid of gas and oil imports. But will take more time and of cause higher sanctions like additional CO2 emission for ice cars and so on which are increasing year by year 5 Cent per Liter or 20 Cent per gallon. Just a matter of time till most people will think twice if EVs are so bad or if they shouldn’t try it.
Same for heatpumps. We have used Oil for 40 years in a central oil value heating system with 100% effficiency and then went on by adding split AC for heating and maybe 5 days a year for AC. And now all oil / gas / wood burning will be forbidden from 2045 on and if your heater breaks down then you have to buy a heatpump solution no matter what.

Our relatives usually can not believe the amount of regulations but they recognice also why so many things are here so different and why close to no one is driving a Ford F150 and for sure not the big block. High prices for things that are not wanted (like cigarette and alcohol taxes) are pushing the demand in efficient cars, heating systems and of cause modern plants. Same for trucks and busses which are now getting electrified no matter what. If you wanna fast charge your truck no longer a big deal: 500 kW charger along the Autobahne every 100 km
Tax free while a usual 40 to truck costs about 10.000€ or 11000$ truck taxes alone.

My HA has rebooted but is not quite happy with the pictures I have used.
I used the Wikipedia Sun.png and stored it here in / homeassistant/www/jpg/ which is the usual picture folder of HA at least here running HAOS.

image

I have adressed the picture with this

  - type: image
    entity: sun.sun
    image: https://192.168.178.2:8123/local/jpg/sun_1_up.png
    state_image:
      below_horizon: /local/jpg/local/jpg/sun_2_down.png
    style:
      width: 5%
    card_mod:
      style: |
        :host {
          top: {{ states('sensor.sun_top') }}%;
          left: {{ states('sensor.sun_left') }}%;
        }

But first there was no picture till I realised that it was hidden behind another entity and that I have to put those lines at the end to have that png always in the front .

Unfortunatelly it is not the right picture, rather an access error or so.

For the background image I have been using this for over a year

image: https://192.168.178.2:8123/local/jpg/PV_STRINGS.jpg

but that did not work here for the sun I wanted to use

local/jpg/sun_2_down.png

nor this

/local/jpg/sun_2_down.png

nor

https://192.168.178.2:8123/local/jpg/sun_2_down.png

Always the grey crushed picture.
But at least it is moving to the north or has already passed the deepest point.

Any ideas what is wrong ? regarding the sun icons which are these png
image

Thanks a lot - I will add the roof I had missed to add before now

missing rooftop / solarpower system screenshot for string analysis 3 days ago in the noon - power production per kWp

And here the same for energy production per kWp installed per string which have different sizes of 4 or 5 panels and 500 or 535 Wp power.

FINALLY: ERROR FOUND !

Sun is there or rather the shadow of the sun is here in grey

I had renamed my first naming idea from 1 = up and 2 = down after adding the code lines and therefore adressed always sun_2_down.png

But when I had uploaded these 2 files to the HA directory I instantly thought that sun down of cause deserves a sun_0_down.png and therefore renamed the file while missing to change the code the same time too.

And then I changed all the paths and could not believe it till I found the 2 in the code reference for the sun_0_down.png file.

And now I have to change the turning point or the central axis somehow or dampen it that the sun turns in a curve only through daylight and returns during night in a flatter trajectory if that is possible. from east to west using the lower half of the big picture would be fine, but not a simple circle .

1 Like

For all those following it is very usefull to start differently.

Upload a small red circle which will be used as the middlepoint of the circle the sun will follow.
Be aware that this solution is adressing the position on an ellipse , flatted circle cause the radius is based on the % used to position any object on the background image. Where is the centerpoint of the circle ?

Upper left corner on an entity card is adressed as
top: 0%
left: 0%
And the center is just 50% instead of 0%

To get the circle as fix point use this

  - type: image
    entity: sun.sun
    style:
      top: 50%
      left: 50%
      width: 6%
    image: https://192.168.178.2:8123/local/jpg/sun_red_circle.png
    card_mod:
      style: |
        :host {
          top: {{ states('sensor.sun_top') }}%;
          left: {{ states('sensor.sun_left') }}%;
        }

It helps you a lot to know where the base point is the sun is turning around. Be aware that the senors are using the % as radius.
Based on the total height and width of 100% you can use as a radius only any value below 50% cause otherwise your sun would turn around the center outside the visible area.

Lets have a look at the sensors formulars (which here is the easier one that is not using the altitude component).

  - sensor:
      - name: 'Sun Top'
        state: "{{ (50-45*cos((state_attr('sun.sun', 'azimuth')-19.0)*3.14/180))|int }}"
  - sensor:
      - name: 'Sun Left'
        state: "{{ (50+45*sin((state_attr('sun.sun', 'azimuth')-19.0)*3.14/180))|int }}"

NOTE: be aware that the -19.0 is the offset of the house not perfect south facing roof (equals 180° azimuth) which is acutally 199° which equals south south west.
If you then take a satellite image and realign that to the screen like seen above you have to take this change into account by subtracting the 19° by -19.0 cause I had turned the house by -19° to make the house’s southern wall perfectly aligned to the screen.

And now have a look at the formular where you can see the 50 in each sensor.
That is the description of the maximum radius of 50% and the 45 following is describing the distance to the border of that turning object. With 50% and 45 you define that the circle radius is about 45% and you have a gap to the border of 5%.

If you lower the 45 * cos to 30 * cos then the circles radius will be much smaller or just 2 / 3 of what it has been before.

But to get behind that it needs that circle center point the sun is turning around.

Final remark: the term circle is misleading
The formular is using a relative term and not pixels or centimeters.
50% radius means that the horizontal and vertical distances are different.
1920 x 1080 pixels.
50% on the horizontal axis means 960 pixels while the vertical part is just 540

Therefore the “circle” is a big ellipse.