Latest Chronograph

Show Your Style!
1

As some of you probably know by now, I like chronograph style watches.
This is my latest creation. It has moving objects, all the information needed, but you can also hide it, rotating gears, and a glow mode - inspired by @kvansant (hope its ok to take that idea…)

  • Tap TX logo for color schemes and the gears
  • Tap the Speedline logo for the glow mode
  • Tap the buttons at the bottom to hide/display digital data
  • Tap the bottom clock for 24h/GMT/GPT time

Still testing, making sure all is correct before publishing

11 Likes
2

Like the hide/show animation of data very much. Excellent implementation and great glow!

4 Likes
3

those in/out animations are great! Help yourself to the glow mode concept. I’m sure I didn’t invent it :slight_smile:

4 Likes
4

This is in your true creative style! Absolute wizardry! 10/10 my friend!

4 Likes
5

Nice watch face… (That’s the reason you’re one of my favorite authors)

3 Likes
6

Thanks all!
Appreciate your feedbacks!

3 Likes
7

Hi all
Wanted to share this WIP. Just finalising it…

The specialty on this one is that in addition to moving into position, 2 parts rotate by 90° as well. Key was the timing when the parts should rotate. I used the interpAccel function for movement as well as rotation.

Tap on “MODE” to see it in action.

5 Likes
8

Even better as the last one :smile:

4 Likes
9

Explanation and Code:

I use a toggle variable to initiate the movement, the rotation, and to display the data.

The left dial cover details are (the right side is similar):
X Position:
$#VAR_5#=0?(90-(interpAccel((#DNOW#-#VAR_5_T#),0,1000,1)*99)):(-9+(interpAccel((#DNOW#-#VAR_5_T#),0,1000,1)*99))$

The formula is made up of 2 parts separated by “:”
The left side moves the part, when the condition of VAR_5=0 from position 90 to left by 99 to position -9 ( so off the screen). The right side is the opposite. The interpAccel does a smooth transition using the timestamp DNOW and the VAR_5_T, point when the “button” was pressed. The transition is between 0 and 1000, incrementing by 1, and since this is in miliseconds, the whole things takes only 1 second. Multiplying by 99, gives a position shift by 99 steps.

But with that alone it is not done. Opacity also needs to be set, but also via transition, otherwise the part would disappear before it moves.

Opacity:
$#VAR_5#=1?100:(100+(interpAccel((#DNOW#-#VAR_5_T#),1000,1001,1)*-100))$

It basically does the same as above, but transitions between opacity 0 and100.

Rotation:
$#VAR_5#=0?(0+(interpAccel((#DNOW#-#VAR_5_T#),0,100,1)*90)):(90-(interpAccel((-900+#DNOW#-#VAR_5_T#),0,100,1)*90))$

Again, as before the rotation formula is made up of 2 parts, rotating between 0 and 90°.
However, the rotation should happen as soon as the part is to be moved off the screen and only after, or nearly after it has reached its position on the screen.

I used 0-100 as transition values, so 10x faster as the movement. So when the movement off the screen starts, the part rotates quickly (left side of formula).

When moving onto the screen, the rotation needs to happen later, when the part is almost in position. So the right side of the formula has “-900” in it. This means I prolong the timer by that value.

Displaying text and values on the part:
Opacity:
$#VAR_5#=1?((interpAccel((#DNOW#-#VAR_5_T#),1000,1001,1)*100)):0$

This formula displays the values and text after the 1 second, so transition is between 1000 and 1001.
When moving the parts off the screen, the second part of the formula is “0”, so just “switching off”.

5 Likes
10

Help he did it again…Tom Vannes the Maser of code :smile:

3 Likes
11

Genius Work . Bookmarked Tutorial . Thank you .

2 Likes