# Sunrise/Sunset icon on chapter ring - Example

I wanted to have a sunrise and a sunset icon on my dial which would track along the periphery of the dial. The sunrise icon has an upward pointing arrow and the sunrise icon has a downward pointing arrow. So their orientation needs to be maintained upright as they swing around the dial.

The locations use sunrise/sunset hour and sunrise/sunset minutes to determine the degrees (which are converted to radians for the sin and cos operations) and then multiplied for length and given 160 offsets, etc.

I created image elements with the following properties:

Sunrise Icon - â€śSunriseIcon.pngâ€ť (40x40)
X Position: ((sin((rad(((#WRh#+(#WRm#/60))*30))))*150)+160)
Y: Position (160-(cos(rad(((#WRh#+(#WRm#/60))*30)))*150))
Width: 20
Height: 20
Rotation: 0
Opacity: \$(#VAR_2#%2)==0?100:0\$

Sunset Icon - â€śSunsetIcon.pngâ€ť (40x40)
X Position: ((sin((rad(((#WSh#+(#WSm#/60))*30))))*150)+160)
Y: Position (160-(cos(rad(((#WSh#+(#WSm#/60))*30)))*150))
Width: 20
Height: 20
Rotation: 0
Opacity: \$(#VAR_2#%2)==0?100:0\$

The opacity is optional (you can just use 0), but I turn the display of these icons on/off by toggling #VAR_2#.

The math is based on center point rotation (160,160) and then to move them in a bit, I use 150 (not 160) when I multiply the degree/radian values into pixels (lengths).

I struggled all day with this, hopefully by posting it this will be easy-peasy for someone else!

1 Like

Hi Mark Your basic maths is okish needs bit of tweaking but you can do that once you fix the main problem You must have a Timer that actually moves the WHr and WHm just give you a set figure that stays the same all day you would need to add something like this

((sin((rad((((#Dh#-#WRh#)+((#Dm#-#WRm#)/60))*30))))*150)+160)

so that it has somewhere to move to and from this is not the correct code but just an example ok

Thanks - however, I only need the values updated once a day so perhaps itâ€™s OK as it.

Do you have to be at a level other than basic to be able to add this to a watch face? New to this. I am trying to design my own face so I can have exactly what I want, but I havenâ€™t figured out how to do this part. Thank you.

You can add this in on a basic account. Pressing the rocket icon lets you input things in the position, rotation and opacity fields.
EDIT: just noticed the op used VAR - not available on the basic account. My first face has a sunrise and sunset, a sun and a moon icons- on a basic account so it is definately possible.

1 Like