Dear all,
I am trying position dynamically the sun on the image setting the top: and left: calculating them out of the azimuth and elevation.
But I am stuck with how to use a template for entering the top,left position.
I’ve tried few things but nothing worked
left: "{{ states('some_entity') | int }}"
left: "{{ '50%' }}"
left: {% '50%' %}
...
Any ideas on how it can be done?
I’m also curious if this is possible but equally curious if you have come across the sun card?
AitorDB/home-assistant-sun-card: Home assistant sun card based on Google weather design (github.com)
Is this what you were looking to achieve?
Thank you @jcallaghan for the tip.
No its not what I want to implement. It was mostly by curiosity, since the sun entity already contains the Alt and Azm of the sun position, with a bit of spherical trigonometry i can position it on the top-view of the house and draw the sun on a virtual celestial sphere as well the sunlight direction in the house,
something like:
which later can be compared with the solar energy contribution and the light detection sensors to calculate more fancy quantities…
Hi!
These attributes are not templatable out of the box. What you can do is to use card_mod, as all values are templatable there. I use it with state-icons but it should work similar with picture-elements:
type: state-icon
entity: some_entity
#style:
# left: {{ states('some_entity') | int }}
card_mod:
style: |
:host {
left: {{ states('some_entity') | int }};
}
Many thanks @tobi-bo it worked!
I’ve created a template sensor
- sensor:
- name: 'Sun Top'
state: "{{ (50-45*cos((state_attr('sun.sun', 'azimuth')-32.7)*3.14/180)*cos(state_attr('sun.sun','elevation')*3.14/180))|int }}"
- name: 'Sun Left'
state: "{{ (50+45*sin((state_attr('sun.sun', 'azimuth')-32.7)*3.14/180)*cos(state_attr('sun.sun','elevation')*3.14/180))|int }}"
(32.7deg is the rotation of the house plan vs true north)
and then I added in the picture_element
- type: image
entity: sun.sun
image: /local/sun.png
style:
width: 5%
card_mod:
style: |
:host {
top: {{ states('sensor.sun_top') }}%;
left: {{ states('sensor.sun_left') }}%;
}
So now I have visually the sun position drawn on top of my house plan!
Sounds really cool, thinking about how to use this in my floorplan right now 
Great!! thanks for the idea!
Looks great! The card_mod style wouldn’t override the position in my case, for whatever reason, so I took a slightly different approach to get it working:
type: picture-elements
card_mod:
style: |
ha-card {
--sun-top: {{ states('sensor.sun_top') }}%;
--sun-left: {{ states('sensor.sun_left') }}%;
}
elements:
{... shortened for brevity ...}
- type: conditional
conditions:
- entity: sun.sun
state: above_horizon
elements:
- type: image
entity: sun.sun
image: /local/images/Sun480.png
style:
width: 20%
top: var(--sun-top)
left: var(--sun-left)
image: /local/images/roof-3.png
I may toy around with the formulae to define an ellipse that puts the sun closer to the edge of my card.
(Some of my panels are covered with snow at the moment, and my grid sensor right now cannot measure power direction, which is currently outbound.)
Update:
I ended up simplifying my formula to only use the azimuth and not the elevation, as follows:
- name: "Sun Top"
state: "{{ (50-45*cos(state_attr('sun.sun', 'azimuth')*3.14/180))|int }}"
- name: "Sun Left"
state: "{{ (50+45*sin(state_attr('sun.sun', 'azimuth')*3.14/180))|int }}"
I would like to understand what you are doing in this formular.
It feels from the first impression like plotting a curve in this case a curve like a circle and there fore the upper half and a lower half.
But what does the 50 mean ?
A kind of offset to keep the sun and its shadow circling within the picture ?
I would prefer a different trajectory like a usual circle for half of the day from 6 to 6 and then when the sun by average has gone down a very flat curve back cause that part the suns position is irrelevant, it could be hidden.
Thanks for the idea and support.
The formula is the conversion from spherical coordinates to a projection on the house plan
The result is in % of the image dimensions, so the 50 refers to 50% of the image = center of image
The 45% is my arbitrary definition of what I liked to have as maximum radius on the horizon, when elevation=0deg (again in %)
The 45*cos(‘sun’,‘elevation’) will return the projected radial distance of the sun for the elevation
and multiplied by:
The 32.7deg is an additional correction since on the scanned plan of my house the north direction was rotated by 32.7% from the vertical orientation.