Tutorial: 7-segment flip watch

I was inspired by mechanical 7-segment digital watches, such as the example below:

7-seg mechanical

At first glance it seems doable, but once I got going, I encountered a few challenges:

  • At a certain point in time, a segment needs to “flip”, how to calculate that?
  • It also requires a tag that increases in small units, such as #Dsm#
  • And it requires this tag to start at 0 when the “flip” is to happen
  • There is no smooth increase of an hour tag. #DWFHS# only increase by 0.25, that is not good enough.

In the digital world, the 7-segments are defined from a to g. The following matrix shows when the segment should be on or off for the numbers 0-9, giving a number of conditions to work with:

So for simple watch face with 7-segments, without any movement or flip, those conditions can be defined as follows and can be used in the opacity field:

a:
$(#Ds#%10)=1||(#Ds#%10)=4?0:100$

b:
$(#Ds#%10)=5||(#Ds#%10)=6?0:100$

c:
$(#Ds#%10)=2?0:100$

d:
$(#Ds#%10)=0?100:$$(#Ds#%10)=1?0:$$(#Ds#%10)=2?100:$$(#Ds#%10)=3?100:$$(#Ds#%10)=4?0:$$(#Ds#%10)=5?100:$$(#Ds#%10)=6?100:$$(#Ds#%10)=7?0:$$(#Ds#%10)=8?100:$$(#Ds#%10)=9?100:$

e:
$(#Ds#%10)=0?100:$$(#Ds#%10)=1?0:$$(#Ds#%10)=2?100:$$(#Ds#%10)=3?0:$$(#Ds#%10)=4?0:$$(#Ds#%10)=5?0:$$(#Ds#%10)=6?100:$$(#Ds#%10)=7?0:$$(#Ds#%10)=8?100:$$(#Ds#%10)=9?0:$

f:
$(#Ds#%10)=0?100:$$(#Ds#%10)=1?0:$$(#Ds#%10)=2?0:$$(#Ds#%10)=3?0:$$(#Ds#%10)=4?100:$$(#Ds#%10)=5?100:$$(#Ds#%10)=6?100:$$(#Ds#%10)=7?0:$$(#Ds#%10)=8?100:$$(#Ds#%10)=9?100:$

g:
$(#Ds#%10)=0?0:$$(#Ds#%10)=1?0:$$(#Ds#%10)=2?100:$$(#Ds#%10)=3?100:$$(#Ds#%10)=4?100:$$(#Ds#%10)=5?100:$$(#Ds#%10)=6?100:$$(#Ds#%10)=7?0:$$(#Ds#%10)=8?100:$$(#Ds#%10)=9?100:$

Now to add movement or simulate the flip of a segment.

To simulate the movement/flip of a segment, I chose to change the width of the segment, depending on the conditions above. So to switch a segment “on”, that would be from width 0 to its maximum width. And “off”, the other way around. Through experimenting, I found a good value for the speed to change the width to be twice the width.

Example: For the watch face, further below, I used a segment which has the width 9. So the speed for changing the width is: (#DWFSS#/6)*18
(as some of you may know #Dsm#*18, will not work currently)
To limit the width change from 0 to 9, the clamp function can be used.

Since the time needs to start at 0 when changing the width, the calculation I use, for example last digit of the seconds, is:

"smooth value" - "exact value": (((#DWFSS#/6)%60)-#Ds#)*18

So the whole width increasing formula is:
(clamp(((((#DWFSS#/6)%60)-#Ds#)*18),0,9))

And decreasing is the same as above but starting at width 9:
(clamp((9-(((#DWFSS#/6)%60)-#Ds#)*18),0,9))

Next, it requires the exact time at which the width is to be changed. This is where the conditions come into play. Since these conditions are way to nested, I decided to split things up into 3 parts:

  1. Action to decrease the width
  2. Action to increase the width
  3. Time at which the segment is “on”. I noted that the flip takes a bit time, so only for the last digit of the seconds, I added a 0.5 delay.

Example, last digit of the seconds:

Segment a action off :
$(#Ds#%10)=1||(#Ds#%10)=4?(clamp((9-(((#DWFSS#/6)%60)-#Ds#)*18),0,9)):0$

Segment a action on:
$(#Ds#%10)=2?(clamp(((((#DWFSS#/6)%60)-#Ds#)*18),0,9)):$$(#Ds#%10)=5?(clamp(((((#DWFSS#/6)%60)-#Ds#)*18),0,9)):$

3x Segment a ON (width is 9 when):
$((#DWFSS#/6)%10)>=0&&((#DWFSS#/6)%10)<1?9:0$
$((#DWFSS#/6)%10)>2.5&&((#DWFSS#/6)%10)<4?9:0$
$((#DWFSS#/6)%10)>5.5?9:0$

These 3 parts are defined for each segment of each of digit of digital time format HH:MM:SS. You can imagine that this requires quite a number of elements.

These are the formulas//conditions for each digit when something is to happen:
Last digit of SS: #Ds#%10
1st digit of SS: #Ds#/10

Last digit of MM: (#DWFMS#/6)%10
1st digit of MM: (#DWFMS#/6)/10

Lsat digit of HH: #Db#%10
1st digit of HH: floor(Db#/10)

You may think why #Db#, that is not a smooth value. I mentioned earlier, that the smooth rotation to the hour is not good enough. I found the following formula to be useful for that, using 2 conditions when to change the width:

$floor(#Db#/10)=1&&#DWFMS#/6=0?(clamp((9-(((#DWFSS#/6)%60)-#Ds#)*18),0,9)):0$

Which means:
So when the 1st digit of the hour is “1” and the minute has turned to exactly “0”, then change the width.

What else?
To simulate the flip, each segment, depending where it sits, needs to have the correct alignment:

  • Segment a needs to be aligned top center
  • Segments b and c need to be aligned center right
  • Segment d needs to be aligned bottom center
  • Segment e and f need to be aligned middle left
  • Segment g need s to be aligned middle top (well up to you really…)

Example:

RESULT:

This result of putting all of the above together for each single segment.

12 Likes

Segments:
Segment3D_H

Segment3D_V

or just plain white:
Segment

Mask to place the segments:

Joints with frame:

Joints without frame:

3 Likes

Hell Fire you have taken the Biscuit there . I think you deserve a Medal . That is truly fantastic . The Apple Bobbers will be sick as a Parrott , Well done not falling into the #Dsm# trap . Having said that there was an update I will check my test on that . I only have one other thing to say . (((#DNOW#)/1000)%60) m or %360 . Hell whatever you want . I will warn you that timer runs out sometime in 2035.
I will put yours next to this in my Bits box if I may .
I you think this hijacks your Tutorial I will take it down .
I thought you said there were a lot of layers . I only counted 160 :::)))
.
.

2 Likes

Thanks for the nice words.
No hijacking at all, any comments or improvements always welcome…

2035? I think I may still be around then. I’ll see what happens…
Hopefully some person with a bit of cash will take my idea and build it for real and give me version #1 :sunglasses:

3 Likes

Have you seen Video of the Bugatti Watch with the Pistons in the Glass Engine Block . If they can do that they can do your watch . I put the price tag at £4 figures minimum . You have the look . I would take a copyright on it in principle . You can register the Design by sending a picture of it to yourself It would be Fantastic if it was an Automatic , No Batteries included .
Will you Publish it ? Or wait for Hublot to contact you .

1 Like

yeah, that Bugatti watch is pretty sick…

3 Likes

That’s a great thing you have done there Tom. I have gotten a lot of cool things from you over the while I have been here and I really appreciate it. Thanks!

By the way, I have a Bugatti watch if you want it… :joy:

2 Likes

@kirium0212 Did you Make that ?

No it’s just one of the millions is Wchmer files I have accumulated over the years. This one is a Mark Segraves special. The glass pistons actually move. Very crafty use of an animated .gif

1 Like

You know I am not really a Fan of Wchmer but it is worth a look . I will have to drag my login out again . Thanks for Sharing .
.
.
.
Any way Back to Flipping Seven Segment .
Will you Publish that soon Tom @tom.vannes

yes, soon, still need to work on the hour, test if #Db# actually works, and come up with a nice design, fit in battery level some how…

3 Likes

I’ll send you a video in WhatsApp

1 Like

Your Quintenary Battery Counter is prefect . Great invention .
I did not check all the Layers . So you are saying when the Hours are done . The face will have about 200 Layers . Wow .

2 Likes

Excellent Tutorial here @tom.vannes very well done my friend, genius level…

3 Likes

Amazing watchface and contribution to the community. Wonderful work :clap: :clap:

2 Likes

tom.vannes bravo! Original and very interesting!
:clap: :clap: :clap:

1

3 Likes

Fantastic Tutorial there @tom.vannes !!! You are on fire! I’ve gotta delve into this…

Standing Ovation GIF - Standing Ovation - Discover & Share GIFs

3 Likes

If you would like the 7-Segment font, I created it, and you can download it at Fontstruct:

7-Segment Classic

3 Likes

Thank you Tom that is very kind of you . So we get a Take away as well . Amazing . Thank You Very Much Indeed .

1 Like

Tom, thank you. You inspired me, so I made a 9-segment font (to surpass it, just kidding), little less classic, a bit more rounded.

3 Likes