[TOMAJA Tutorial] Sunset & Sunrise | How to Manage Night and Day

[Tomas]

You want to have sun at your watch face during the day, or you want, that the watch face is showing only the sunrise time during the night and the sunset time at the day? Or do you want to switch a night & day picture in the classic style?

If this is your point, you are right here

I created this simple tutorial due to the discussion between @hayden @Mellin & @tara.goisisi about the same topic.

Visible at Day / Night

I the case you wish to have some elements visible at the day (after sunrise and before sunset), the easiest way is to use tag #DISDAYTIME# as @tara.goisisi mentioned.

Transparency:

$#DISDAYTIME#=1?100:0$

(For elements visible at the night use “0” (false) instead of “1” (true) in the condition)

and you are done!

Day & Night Rotation Picture

For this purposes I created a simple Picture:

I wanted that this picture is starting to rotate one hour before sunset/ sunrise and than just stays at the correct position during the day/ night. So they are four phases only.

1 - Sun at the top
2 - Moon at the top
3 - Moon rotating into the sun
4 - Sun rotating into the night

For the first two phases, it would not be an advantage to use the simple #DISDAYTIME# because there is not possible to calculate (e.g. one hour before) with it.

So, the whole day was transformed into hours (according to the @Mellin 's suggestion). There would be possible to use also minutes or another units.

1 - Sun at the Top

Super easy to set this picture condition due to zero rotation. The visibility should cover the yellow range (at the time axis) only.

Starting at the sunrise time and and one hour before sunset. Therefore the transparency is

$(#DH#+(#Dm#/60))>(#WRH#+(#WRm#/60))&&(#DH#+(#Dm#/60))<((#WSH#+(#WSm#/60))-1)?100:0$

2 - Moon at the Top

For the night time, the picture should be visible during the blue range (at the time axis) & rotated by 180 degree.

Therefore

Rotation: 180

and the transparency cover the both blue areas:

$(#DH#+(#Dm#/60))<((#WRH#+(#WRm#/60))-1)||(#DH#+(#Dm#/60))>((#WSH#+(#WSm#/60)))?100:0$

3 - Moon rotating into the sun

For this movement one hour slowly rotation should be optimal.

Sure the rotation starts with 180 degree due to the opposite sun/ moon position:

Rotation:

(180+(((#WRH#+(#WRm#/60))-1)-(#DH#+(#Dm#/60)))*-180)))

Transparency cover the time, one hour before sunrise until sunrise:

$(#DH#+(#Dm#/60))>=((#WRH#+(#WRm#/60))-1)&&(#DH#+(#Dm#/60))<=((#WRH#+(#WRm#/60))+0.5)?100:0$

4 - Sun rotating into the night

Finally a very similar fourth phase should be optimized.

This time rotation is zero at the beginning and ends exactly at sunset time.

((((#WSH#+(#WSm#/60))-1)-(#DH#+(#Dm#/60)))*-180)

One hour visibility at transparency:

$(#DH#+(#Dm#/60))>=((#WSH#+(#WSm#/60))-1)&&(#DH#+(#Dm#/60))<=(#WSH#+(#WSm#/60))?100:0$

And you are ready to see the result in your smart watch soon .

[hayden]

@Tomas: one word BRILLIANT (said with three syllables), your tutorials are very good, thank you, so useful

[Tomas]

Thanks @hayden! could you remember what were your issues as you started to create watch faces? I am thinking about tutorial for real beginners in the future…

[hayden]

@Tomas, I think working out how to make dials/hands rotate correctly. Understanding how to make them and deploying so that they rotate around their centre axis etc; this was covered in this thread in which @jimmycheung did a good job of explaining how he does it, see here:

Watch Hands - Need help rotating from the center

It is the way I use. when I make my own hand image I will crop the size of the image like the left one , so the hand will rotate at the center hole of the hand. [image]

[hayden]

@Tomas: In the same vein as the hands tutorial another good one would be a tutorial explaining how to make hands/dials rotate within specific parameters like the power hands on this face for instance:

Watch power hands dials are always tricky, getting the angles right and understand the start and finish points.

[Tomas]

Thanks you @hayden! Really a good point - I will try to do something easy to understand… even if there will be nothing new probably

[randallkhs]

Thank you so much for sharing useful tutorials… I have been looking everywhere for Facer Designer tutorials but is very hard to find if any. We appreciate it a lot for your contributions, Tomas… Keep making more tutorials if you can…

[tcorneliusart]

I’m experiencing issues where the daytime check is not working. Has anyone else had problems?

[hdoussaint60]

bonjour Tomaja et merci le soleil el la lune ne correspondent qu a une seule image? c est a dore il faut telecharger une image du soleil ey metrte les formules et pareil pour la lune?
peut on appliquet la formule pour chque phase lunaire et ausdi chaque icon du temps merci. Hugues

[tom.vannes]

First of all, thanks to @Tomas for this tutorial.

I have created a watch face with 2 sets of 4 images with the respective formulas, 4 for the watch in normal mode, and 4 grey scale ones for the DIM mode.

This turned out to be CPU intensive, hence the battery drained fairly quickly. To reduce this, I used the opacity conditions in the rotation formulas as well. So that gives you the formulas:

Night 2 Day rotation:
$(#DH#+(#Dm#/60))>=((#WRH#+(#WRm#/60))-1)&&(#DH#+(#Dm#/60))<=((#WRH#+(#WRm#/60))+0.5)?(180+(((#WRH#+(#WRm#/60))-1)-(#DH#+(#Dm#/60)))*-180):0$

and

Day 2 Night rotation:
$(#DH#+(#Dm#/60))>=((#WSH#+(#WSm#/60))-1)&&(#DH#+(#Dm#/60))<=(#WSH#+(#WSm#/60))?((((#WSH#+(#WSm#/60))-1)-(#DH#+(#Dm#/60)))*-180):0$

And here additional pictures:

Mask (above picture at X:160, Y:110, Size: W,H:120):

Brightness mask (I use opacity 15%):

Watch Face:

[rob.fisk]

Amazing to the point of, almost making me want to stray from the Simple Simon (ok, gubbins but I have to flex), but someone has to fulfil the niche.

I could very much use this though, with the simple image font mask I use on a flip but now rotating. Time would need to be side justified though.

Must play.

Cheers.