[Tutorial] Digital Time: Separate images for each number (no font)

At @Nerioalberto’s recommendation, here is my separate number images tutorial. There may be occasions where your face design requires a number style that is not available in any font you can find. Or maybe you want each digit to be some sort of elaborate creation. In these cases you can still display the digital time without the use of a font by displaying an image for each number instead.

Illustrations:

Cartoon-ish:

Most interestingly for me is when you want the number to be a see-thru window in which you can see what’s underneath. In this case, the “font” is just a bunch of PNG images with holes in the shape of each number. This is especially cool if the layer underneath has motion.

Some up-front notes:

  1. The instructions below are for 12-hour time in which all of the numbers are separated. I did not work with 24-hour time, but the idea is the same.
  2. My work below assumes all numbers are separate - four groups of numbers: tens-hours, ones-hours, tens-minutes, ones-minutes. For this case, you’ll need an image for the numerals 0 thru 9. But you could also combine the hours and just have three groups of numbers. For the hours, you would just build images for 01 to 12 for that case.
  3. Lastly, my example below is monospaced - every number image, even 1 and 8 are the same width and height. This makes layout very easy, but you could experiment with images that are different sizes. I did not do that here.

With all separated numerals, you only have to make 10 images: the numbers 0 thru 9. But of course you’ll have to load these 10 images multiple times.

Group 1 layers: tens-hours
For tens-hours you only need to load your 0 and 1 image in the Creator - that’s 2 layers.

Group 2 layers: ones-hours
For ones-hours you’ll have to cover all hours so load all 10 number images 0 thru 9 - that’s another 10 layers.

Group 3 layers: tens-minutes
For tens-minutes you only need to cover an hour’s time so load number images 0 thru 5 - that’s another 6 layers.

Group 4 layers: ones-minutes
Again, for ones-minutes you’ll have to cover all so load all 10 number images again 0 thru 9 - that’s another 10 layers.

In all, 28 layers make up all of the number images needed to display all time possibilities. I renamed the layers as well in Creator to keep track of this craziness. Tens-Hours-0, Tens-Hours-1, etc. Just stack all of your number images in their proper positions in the Creator. For 24-hour time just add another 2-image in the tens-hours stack and change the hours formulas.

Next: WHEN to display stuff (for 12-hour time)…

Group 1 layers: tens-hours
Group 1 is easy, there’s a tag for the tens-hours digit. Just set the transparency when the value comes up.
For the 0 layer - $#DhZA#=0?100:0$
For the 1 layer - $#DhZA#=1?100:0$

Group 2 layers: ones-hours
Also easy, there’s also a tag for the ones-hours digit. Same deal:
For 0 - $#DhZB#=0?100:0$
For 1 - $#DhZB#=1?100:0$ and so on for 2,3,4,5,6,7,8,9 layers as well.

Group 3 layers: tens-minutes
A little harder as there is no tag. But we can peel the 10’s value from the #Dm# minutes:
For 0 - $(floor(#Dm#/10))=0?100:0$
For 1 - $(floor(#Dm#/10))=1?100:0$ and the same for 2,3,4,5 layers.

Group 4 layers: ones-minutes
And a little harder as there is also no tag. But we can split the 1’s value from the #Dm# minutes as well:
For 0 - $(#Dm#-((floor(#Dm#/10))*10))=0?100:0$
For 1 - $(#Dm#-((floor(#Dm#/10))*10))=1?100:0$ and the same for 2 thru 9 layers.

Some examples (Inspection mode is on):

My Rusty Meter face uses a separate Nixie Tube image for each numeral 0 - 9

My runners Edge face uses 1 to 12 images for just the hour, but this is an example of using an image as a “hole” to see what’s underneath.

Well that’s it. If you have any questions please let me know.

Thanks :sunglasses: :+1:
-john

21 Likes

WOW! Excellent Tutorial and great “inverse method” for easy texture changing :+1:

3 Likes

Dang. I have a Medium article waiting for final publishing with a similar topic. Good work though.

Great!
How about tens for hour in 24h format?
Thx in advance!

[edit]
I figure it out:for an first digit
$(floor(#Db#/10))=1?100:0$ for tens of hour

but for sencond digit
$(ceil(#Db#/10))=1?100:0$ does not work…

[edit2]
I made a test: #Db/10# gives me 1.8 from 18 hour
But I I make ceil(1.8)=8 then it does not work…
So ceil(#Db#/10) is not working also…

I have a few watch faces where I use a similar technique for the individual digits of time. But recently I was asked by a user to provide a 24 hour clock version. I shrugged off the request thinking that I don’t want separate 12 and 24 hour versions of the same clock. But the idea kept nagging at me. Really, the only digit that needs to change is the 1s hour digit. So I worked out an expression to change the Hours 1s digit appropriately depending on the user’s clock version.
Here is what I came up with for it:

$#DTIMEFORMAT#=12&&#DhZB#==a?170:$$#DTIMEFORMAT#=24&&(#Db#-(10*floor(#Db#/10)))==a?170:2000$

Basically, it checks if the user clock format is 12 hour mode and the 1s digit is ‘a’, then set the x coordinate value to 170, or if the user clock format is 24 hour mode and the 1s digit is ‘a’ then set the x coordinate value to 170, otherwise set it to 2000. This should also work with the transparency values of 100&0 for static images per the examples noted by @jmorga106 above. However in my case I was working with animated sequences so I needed to use a coordinate substitution method. The Hours 10s digits and the minutes digits are all the same as above.

One thing to note however, is you will have to add an image for digit #2 in the hours 10s layer.

Also, the preview on the web browser and the android app doesn’t show it correctly. But it does work fine on my Samsung watch.

2 Likes

@jmorga106. Sorry to come so late to the party. Thanks so much for the Tutorial. You guys are amazing it. Would have taken me the rest of my life to work that out. Thanks to @bradtc for outlining the 24 Hour option.

1 Like

any possibility of showing the editor page? it’d certainly clarify a few things puzzling me.

1 Like

I do not know if this will help. May be add confusion. If you can ignore the acceleratorRaw stuff it will work like a normal digital 12 hour.
Not mastered the 24 Hour Mode yet.
Address me if you have questions about this.
All the best : )
Ps I note this does not simulate here. Track it down on one of the apps. I find it simulates best on my Phone but some of the graphics gets meddled with.

1 Like

cheers for that, I just wasn’t sure how you grouped the H M S, I can follow that.

thanks again.

1 Like

somethings happened since the last update with my galaxy watch 4, the hour image doesn’t change to the next hour, so if I set it, and it’s 4:00, when the hour comes around, instead of changing to 5:00, it will remain at 4, until I reload the watch face… :grimacing:

1 Like

Hello, everyone,
Hours and minutes work great!
Now I wanted to add the sec, but how do I do that?
I managed to get the 1st digit of the seconds with $#Ds#=5?100:0$. Runs great!

Correction: Sometimes it works, sometimes not…!!!

But the 10 digit causes me difficulties.
Does somebody has any idea???
Thanks in advance…

1 Like

Sorry I missd that. Get back if you still need help.

Yeah. The 10s are a problem. So you want to do 0 to 60 seconds as Images. I am not on my laptop. But the clue is in the Minutes formulas. You will just have to substitute the minute Tag for the Seconds tag.
Replace Dm with Ds
You should post a link here to your Draft Inspectable. Then any one can have a look.

I use these for seconds:

Tens of seconds: $(floor(#Ds#/10))==1?100:0$

Single digits:$(#Ds#-((floor(#Ds#/10))*10))==1?100:0$

For individual seconds (00-59): $#Ds#==59?100:0$

1 Like

Thank you for the tips.
Sometimes you just can’t come up with the simplest thing.
So far everything works!
Only the “colon” between hours and minutes does not work properly.
It consists of 2 images (on and off) and they should actually go on and off every second.
At the moment the image “Off” appears at the full seconds (00,10,20,30…) and at 01,11,21,31… the image “On” appears.
I used the formula $(#Ds#-((floor(#Ds#/10))*10))=0?100:0$ for this.

1 Like

switch your Colin Background tube on Permanantly . Opacity 100 put this in The Upper tube .

$#Ds#%2=1?100:0$

Do not copy the ’ ’

i have make this watch face … i need to add 24 hr . i have add # 2 image in first digital layer ur coding not working ?

your code is $#DTIMEFORMAT#=12&&#DhZB#==a?170:$$#DTIMEFORMAT#=24&&(#Db#-(10*floor(#Db#/10)))==a?170:2000$
that mean we add 1 to (a) foe image #1 ? and 2 (a) for image # 2 ??

1 Like

what about 24 hr ?

amazing :star_struck:

Love this! Thank you!