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

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:

- Action to decrease the width
- Action to increase the width
- 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.