Fuzzy watchface

[dyamon]

This is a first attempt at creating a fuzzy watchface similar to the one present on the Pebble and requested in #653 .

Feedback on the code is highly appreciated since I'm more of a C person and I'm not familiar with the C++ coding style. The code needs at least to be cleaned from some personal notes.

Also feedback on the design itself is appreciated since I don't own a Pebble and I partially based the design on some videos online.

At the moment this is the result:

I kinda like the bottom left alignment but we can change this quite easily. Also the font has been resized after the shots to better accommodate longer text.

Finally I have a slightly different design in mind, but I want to upload a mockup before going back to coding.

---

Next steps are:

• Make the watchface actually fuzzy
• PR needs rebasing
• Adding german example (won't address the "Ein/Eins" issue, atm)
• Post some shots of a centered face
• Come up with a way to show the exact digital time
• Add icons to digital face (battery, steps, bluetooth, heartbeat, etc)

---

Closes #653

[schneidr]

I love it. I just started to work on exactly this watchface, but I didn't get very far yet.
One thing I have to criticize though, it seems your watchface shows every exact minute, which is not exactly "fuzzy". The original Pebble watchface (I've been using it for years) only showed 5 minute intervals.

[dyamon]

Oooh ok, didn't know that! This makes sense, and might make things easier for internationalisaion later on.

I guess it doesn't really matter whether you round up or down but, is this what's happening?

8:00-8:04 -> "eight o'clock"
8:05-8:09 -> "five past eight"
8:10-8:14 -> "ten past eight"
8:15-8:19 -> "quarter past eight"
8:20-8:24 -> "twenty past eight"
8:25-8:29 -> "twenty five past eight"
8:30-8:34 -> "half past eight"
8:35-8:39 -> "twenty five to nine"
8:40-8:44 -> "twenty to nine"
8:45-8:49 -> "quarter to nine
8:50-8:54 -> "ten to nine"
8:55-8:59 -> "five to nine"

Also what about hours? It sticks to 12H format right? Do 00:00 and 12:00 turn into "midnight" and "midday" respectively?

[adocampo]

Oooh ok, didn't know that! This makes sense, and might make things easier for internationalisaion later on.

I guess it doesn't really matter whether you round up or down but, is this what's happening?

8:00-8:04 -> "eight o'clock"
8:05-8:09 -> "five past eight"
8:10-8:14 -> "ten past eight"
8:15-8:19 -> "quarter past eight"
8:20-8:24 -> "twenty past eight"
8:25-8:29 -> "twenty five past eight"
8:30-8:34 -> "half past eight"
8:35-8:39 -> "twenty five to nine"
8:40-8:44 -> "twenty to nine"
8:45-8:49 -> "quarter to nine
8:50-8:54 -> "ten to nine"
8:55-8:59 -> "five to nine"

Also what about hours? It sticks to 12H format right? Do 00:00 and 12:00 turn into "midnight" and "midday" respectively?

I was typing this message when yours appeared on github, so I'm quoting it.

I love it! I would rather prefer a centered position, but I can get used to bottom left as well.
What I really would like to see is some kind of imprecision, so when the minutes are from 0 to 3 it rounds to 0 and when it's between minute 4 and 7 rounds to 5. So, for example:

8:02 -> "eight o'clock'
8:04 -> "five past eight"
8:09 -> "ten past eight"
8:14 -> "quarter past eight"
8:17 -> "quarter past eight"
8:18 -> "twenty  past eight"

Regarding 00h and 12h, I would see more normal to say "twelve o'clock" rather than "midnight" or "midday", that kind of imprecision would be even more fuzzy (00:01h-11:59 → morning, 12:00h → midday/afternoon, 12:01-17h → afternoon, 17:01-20h → evening, 20:01-23:59 → night, 00h → midnight) and I wouldn't include those terms on a wristwatch. (KDE Plasma's fuzzy clock has those levels - and even more - of fuzziness, but on a wristwatch, I would see more logical to have an imprecise fuzzy watch to say the time on 0 and 5 minutes, like your example but with my suggestion.

As sidenote, pebble fuzzy watchface was able to show the exact digital time during a few seconds by shaking the wrist, so if you need for some reason know the exact time, you were able to do it

[schneidr]

Oooh ok, didn't know that! This makes sense, and might make things easier for internationalisaion later on.

I guess it doesn't really matter whether you round up or down but, is this what's happening?

8:00-8:04 -> "eight o'clock"
8:05-8:09 -> "five past eight"
8:10-8:14 -> "ten past eight"
8:15-8:19 -> "quarter past eight"
8:20-8:24 -> "twenty past eight"
8:25-8:29 -> "twenty five past eight"
8:30-8:34 -> "half past eight"
8:35-8:39 -> "twenty five to nine"
8:40-8:44 -> "twenty to nine"
8:45-8:49 -> "quarter to nine
8:50-8:54 -> "ten to nine"
8:55-8:59 -> "five to nine"

Also what about hours? It sticks to 12H format right? Do 00:00 and 12:00 turn into "midnight" and "midday" respectively?

I always implemented it with +-2 minutes.
07:58 - 08:02 -> 8 o'clock
08:03 - 08:07 -> five after eight
This fits pretty nicely. And it stays with 12 hour format, yes, just like one would say it.

[dyamon]

Cool, thanks for the detailed feedback. I'll update the main post with some sort of todo list.

Also, this is what I also had in mind for an alternative design:

I'm still not completely happy, as I would like the text to "scroll" when the time changes. If you guys like the concept I will dive into the topic of animations in LVGL. Also note that the two designs are not mutually exclusive. If you make colors customisable (like for the pinetime style) one could always set the bg text to black and forget it even exists.

Finally I have another request (I'm making assumptions about the languages you speak :D ):

• @schneidr can you write down how you would write (fuzzy) time in German
• @adocampo can you do the same for Spanish (Castilian, Catalan? I always forget what people around the world consider to be Spanish)
  I speak Italian, so we should be able to make the code at least a bit less English-centric.

[Riksu9000]

The 42px font we currently have can fit 9.5 characters on a line. If it were 40px it would fit 10 and 36px can fit 11. Would it make sense to have just a 40px font for everything, at least for now?

Also, this is what I also had in mind for an alternative design:

I prefer the original design on first glance.

I'm still not completely happy, as I would like the text to "scroll" when the time changes.

In theory it might look good, but the screen refresh is actually quite slow. Scrolling large text probably ends up looking too choppy. The reason screen scrolling looks fine is because it uses hardware scrolling. Also it would be rare that we actually get to see this.

[dyamon]

The 42px font we currently have can fit 9.5 characters on a line. If it were 40px it would fit 10 and 36px can fit 11. Would it make sense to have just a 40px font for everything, at least for now?

So now that the clock will be fuzzy, the longest string we deal with is "five past" which is 9 chars and should perfectly fit with the 42px font and leave some space on the borders as well. Still the 42px font only contains digits atm so we need to add lowercase letters anyway.

Thanks for the info about animations!

[adocampo]

I like more those colors than on the first mockup, and because the text is more centerd, but I'd rather prefer a black background: it is more discrete and perhaps more battery saving (no idea about that).

I'm still not completely happy, as I would like the text to "scroll" when the time changes. If you guys like the concept I will dive into the topic of animations in LVGL. Also note that the two designs are not mutually exclusive. If you make colors customisable (like for the pinetime style) one could always set the bg text to black and forget it even exists.

I have my PT screen force to sleep after 5s, so I think I'd see an animation from time to time, but can be cool, sure.

Finally I have another request (I'm making assumptions about the languages you speak :D ):

* @schneidr can you write down how you would write (fuzzy) time in German

* @adocampo can you do the same for Spanish (Castilian, Catalan? I always forget what people around the world consider to be Spanish)
  I speak Italian, so we should be able to make the code at least a bit less English-centric.

Castillian is the name of the spanish language. Even every single person who has spanish as mother language knows its "real" name is castillian, but the name "spanish" has been popularized in the lasts decades. Besides, even they learn castillian at the school, most latam folks call at the language spanish. Now even in Spain many people call it "spanish" instead of castillian. So, summarizing, you can safely say people from Spain speaks Castillian and people from LATAM speaks Spanish, yet all of us really know the proper name is Castillian.
After all this diatribe, I can help with both castillian and catalan, yet catalan its a way more complex than spanish as it has 4 ways to say the time: watch time, bell time, traditional bell time, and international time, being the first more similar to english or any other romance language, international time is expressing the very exact time (like your first mockup), and bell time is the way we learn at school but almost nobody says on the real life, because you need to sum o substract quarter and minutes to say the time (video with captions in english here: https://www.youtube.com/watch?v=ecdd5eVRKu4)

Well, anyway, where do you want me to write down how do we say the time, right here?

[adocampo]

Spanish

Name of the numbers:
1 / 13-> una (1 has male (uno) and female (una), the time it's female)
2 /14-> dos
3 / 15-> tres
4 / 16-> cuatro
5 / 17 -> cinco
6 / 18 -> seis
7 / 19 -> siete
8 / 20 -> ocho
9 / 21 -> nueve
10 / 22 -> diez
11 / 23 -> once
12 / 24 -> doce

Examples
14:00 --> Las dos en punto (13:00 or 01:00 would be La una en punto as 1 is singular)
14:05 --> Las dos y cinco
14:10 --> Las dos y diez
14:15 --> Las dos y cuarto
14:20 --> Las dos y veinte
14:25 --> Las dos y veinticinco
14:30 --> Las dos y media
14:35 --> Las tres menos veinticinco (12:35 or 00:35 onwards would be La una menos veinticinco as 1 is singular)
14:40 --> Las tres menos veinte
14:45 --> Las tres menos cuarto
14:50 --> Las tres menos diez
14:55 --> Las tres menos cinco

Catalan

Name of the numbers:
1 / 13-> una (1 has male (un) and female (una), the time it's female)
2 /14-> dues (2 has male (dos) and female (dues), the time it's female)
3 / 15-> tres
4 / 16-> quatre
5 / 17 -> cinc
6 / 18 -> sis
7 / 19 -> set
8 / 20 -> vuit
9 / 21 -> nou
10 / 22 -> deu
11 / 23 -> onze
12 / 24 -> dotze

Examples (traditional bell system, this is quite more simple than formal bell system as we don't need to sum or subtract anything, besides, traditional bell system is in its own a "fuzzy" system, as it refers directly to when the bell tower's bell chimed (in the villages and little towns in Catalonia they chime each 15 minutes), so if they just chimed (2 or 4 minutes ago) then is "tocat", if they chimed between 5 and 7 minutes is "ben tocat" (ie: chimed a while ago . On the other hand, quarters can be halved to fine tune a bit the time, so 07-08 minutes is said as "mig quart" ("half quarter"), minutes 22 and 23 is expressed as "quart i mig" (quarter and a half), minutes 37-38 would be "dos quarts i mig" (two quarters and a half), and minutes 52-53 as "tres quarts i mig" (three quarters and a half). Lastly, as bells only chime on quarters and not in half quarter, we cannot say "tocat" (just chime) but we use "passat" (just pass) so instead "tocat" and "ben tocat", we use "passat" and "ben passat" ), leaving all this fuss as follows:
14:00 --> Les dues en punt (13:00 would be --> La una en punt as 1 is singular)
14:01-04 --> Les dues tocades (13:01-06 --> La una tocada (tocada is the singular form of tocades)
14:05-06 --> Les dues ben tocades
14:07-08--> Mig quart de tres (in catalan, we say the hour we are going to, not the hour we come from...)
14:09-11 --> Mig quart passat de tres (...if the next hour is "una" or "onze", we'll write d'una or d'onze...)
14:12-14 --> Mig quart ben passat de tres (...instead of "de una" or "de onze")
14:15-16 --> Un quart de tres (here we use "un", not "una", because "quarter" is male)
14:17-19 --> Un quart tocat de tres
14:20-21 --> Un quart ben tocat de tres
14:22-23 --> Un quart i mig de tres
14:24-26 --> Un quart i mig passat de tres
14:27-29 --> Un quart i mig ben passat de tres
14:30-31 --> Dos quarts de tres (here we use "dos", not "dues", because "quarter" is male)
14:32-34 --> Dos quarts tocats de tres
14:35-36 --> Dos quarts ben tocats de tres
14:37-38 --> Dos quarts i mig de tres
14:39-41 --> Dos quarts i mig passats de tres
14:42-44 --> Dos quarts i mig ben passats de tres
14:45-46 --> Tres quarts de tres
14:47-49 --> Tres quarts tocats de tres
14:50-51 --> Tres quarts ben tocats de tres
14:52-53 --> Tres quarts i mig de tres
14:54-56 --> Tres quarts i mig passats de tres
14:57-59 --> Tres quarts i mig ben passats de tres
Examples (clock system)
14:00 --> Les dues en punt (13:00 or 01:00 would be La una en punt as 1 is singular)
14:05 --> Les dues i cinc
14:10 --> Les dues i deu
14:15 --> Les dues i quart
14:20 --> Les dues i vint
14:25 --> Les dues i vint-i-cinc
14:30 --> Les dues i mitja
14:35 --> Les dues menys vint-i-cinc (12:35 or 00:35 onwards would be La una menys vint-i-cinc as 1 is singular)
14:40 --> Les dues menys vint
14:45 --> Les dues menys quart
14:50 --> Les dues menys deu
14:55 --> Les dues menys cinc

[dyamon]

Thanks for the very thorought explaination @adocampo

I'll get to work!

[schneidr]

Sorry for the delay, I was traveling and wasn't keen on writing this on the phone.

The numbers:

 1 -> Ein/Eins
 2 -> Zwei
 3 -> Drei
 4 -> Vier
 5 -> Fünf
 6 -> Sechs
 7 -> Sieben
 8 -> Acht
 9 -> Neun
10 -> Zehn
11 -> Elf
12 -> Zwölf

Additional words:

to -> vor
past -> nach
quarter -> Viertel
half -> halb

Examples:

13:58-14:02 -> Zwei Uhr
14:03-14:07 -> Fünf nach Zwei
14:08-14:12 -> Zehn nach Zwei
14:13-14:17 -> Viertel nach Zwei
14:18-14:22 -> Zwanzig nach Zwei
14:23-14:27 -> Fünf vor halb Drei
14:28-14:32 -> Halb Drei
14:33-14:37 -> Fünf nach halb Drei
14:38-14:42 -> Zwanzig vor Drei
14:43-14:47 -> Viertel vor Drei
14:48-14:52 -> Zehn vor Drei
14:53-14:57 -> Fünf vor Drei
14:58-15:02 -> Drei Uhr

Special cases:

• Ein/Eins is a little tricky:
  • Ein Uhr
  • ... nach/vor/halb Eins
• at midnight "Zwölf Uhr" could be replaced with "Mitternacht", but I don't think I would bother with it. And it would be only this one case, you wouldn't say "Fünf nach Mitternacht", you would still say "Fünf nach Zwölf".

I realize the umlauts are going to be a problem. The problem about such characters is known and I know it is being worked on, so for starters I think I would use the general replacements when the character is not available:

ä -> ae
ö -> oe
ü -> ue

This can be changed later, when the characters are available.

Final note: I'm sure some of my countrymen are going to interject, saying "no, X is said differently here". How the time is said casually differs by dialect and region in Germany and other German speaking countries. Implementing all dialects would most probably not fit into the memory space of the PineTime, so I think it is best to stay with standard German.

[ajack2001my]

Can this be put into v1.5.0?

[schneidr]

Can this be put into v1.5.0?

Doubtful that it is ready by then.

[dyamon]

I have been testing what could be considered a "complete first version" of the watchface. I'll push this asap.
The process of reviewing and merging is not up to me, tho, so I cannot make any promises on v1.5.

Still missing:

• While code is written to easily integrate internationalisation, this is not a feature offered by InfiniTime atm,
• "Shake to show exact time" is not implemented (but still very much interested in experimenting with that)

---

Hold on a bit more. I'm having trouble flashing the PineTime. Solved

[kieranc]

I like this watchface a lot - I think I preferred the blue/white colours to the grey/white but that can easily be changed or user selected. The larger font looked better IMO. It could also be interesting to show icons (ble, battery etc) on long press or similar.

[dyamon]

I think I preferred the blue/white colours to the grey/white but that can easily be changed or user selected.

The color has always been grey/white (poor quality picture look blueish). I opened an issue to solve the problem of personal preferences regarding colors (#684).

The larger font looked better IMO. It could also be interesting to show icons (ble, battery etc) on long press or similar.

Definitely agree with you on everything. For fonts I guess we will have freedom when we will have access to the flash memory.

[Itai-Nelken]

when we will have access to the flash memory.

I think there already is.

[dyamon]

Sure but afaik fonts are still embedded in the firmware right? At least that is what I'm doing here with the whole process of generating fonts and such. I think most of the restriction we have with fonts will go away when we will have access to fonts stored in there.

Will go back to the 42px font for now. As @Riksu9000 said before it is enough for 9.5 chars and everything should fit in there for now (in english).

[dyamon]

I forgot to go through the process of generating Jetbrains Mono 42 again 🙄 Going to do it tomorrow

[Riksu9000]

Looking really good!

Maybe you should update the font readme with instruction on generating the font as well. https://github.com/JF002/InfiniTime/blob/develop/src/displayapp/fonts/README.md

[dyamon]

Thanks.

What are you suggesting for the font README? Is something like

If you are changing Jetbrains Mono 42 include at least the following symbols: ...

enough?

[Riksu9000]

Thanks.

What are you suggesting for the font README? Is something like

If you are changing Jetbrains Mono 42 include at least the following symbols: ...

enough?

Currently there are no instructions on generating the 42px font, so to generate the font we have to guess the settings or figure them out from the source. I think it would be best to create separate sections for the 20px and 42px font which would have mostly the same format explaining each setting that we need to enter in the font converter.

Also the JetBrainsMono-Regular.ttf file should probably be added to the repo like the bold font used for the 20px font, so we don't need to go hunting for that separately as well. This would also make sure the version matches, because for example when you updated the font, numbers 2 and 3 changed as well, probably due to a newer version.

[dyamon]

I updated the README for the font generation, and reworked it a bit. Let me know what you think.

[dyamon]

Pictures of the current build.

Color is still gray (despite the photo being blueish)

[Riksu9000]

Just a few minor things I noticed. Other than that everything looks good to me.

[schneidr]

It could also be interesting to show icons (ble, battery etc)

Btw, my personal preference would be to hide icons by default and only show the Bluetooth icon when the watch is disconnected and the battery icon when the battery level is low.

[adocampo]

Too bad my PineTime isn't charging anymore :'( ... I had to buy a Pebble Time Steel on eBay to enjoy a fuzzy watch face.
Anyway, I hope this can see the light someday. :)

[dyamon]

@calhix
Hey here is a build (on top of master) including the fuzzy watchface. Flashed right now and everything seems to work. As a bonus it includes also the Infineat watchface #1024 recently merged (it has some visual bugs tho, I think it has to do with missing fonts).

pinetime-mcuboot-app-dfu-1.10.0.zip

Update the visual bugs are due to the fact that you need to load additional font/image files into the flash memory. AFAICT this is done with itd. If you are interested I can quickly explain how to do it.

@adocampo
sorry to hear that :( but you never know, Santa might bring you a PineTime this year since Pine64 is selling in the EU as well.

@JF002
Just saw that we can now load resources from memory. Adapting the code to this new feature would be enough to merge this PR?

Btw this also generalizes a bit the code introduced by the Infineat PR to make the watchface settings multipage.

[ajack2001my]

@dyamon the implementation of the fuzzy watchface is buggy, it randomly switches from fuzzy to digital... Hope you can fix this since this is only a test build and not official... :'(

[FintasticMan]

That isn't a bug, that is the feature that when you shake the watch it switches back to the digital watch face. I personally don't like the feature, but it is intended behaviour.

[dyamon]

@dyamon the implementation of the fuzzy watchface is buggy, it randomly switches from fuzzy to digital... Hope you can fix this since this is only a test build and not official... :'(

About this, what you probably want to do is to perform a shake calibration (settings (3rd page) > Shake Calib.) I think this is set to the minimum as a default, which leads to this "random" activation of the digital preview.

[ajack2001my]

Thanks for the update of the fuzzy watchface @FintasticMan @dyamon... Though I only notice it happen with that watchface and not the others. I will recalibrate as suggested, but is there a way to just turn that feature off? In any case, thanks again guys! Appreciate your time and efforts into this...

[dyamon]

The feature is indeed baked into this watchface.
I'm not a fan of making everything a setting (it's a type of feature creep. Also possibly relevant xkcd strip), but I can look into it. A lot of watchfaces seem to have contextual menu atm.

Temporary solution: if you are not using the shaking feature for anything else (e.g., shake to wake or similar) you could crank up the shake threshold so you won't ever trigger the digital clock.

[calhix]

That's what I ended up doing so I never see the digital face anymore, I do think a better solution would be to tap/double-tap the screen to temporarily show the steps and date on the fuzzy watchface itself.

[dyamon]

Personally I occasionally want to know the exact time, but maybe that's just me? I guess we can find a solution/compromise.

[adocampo]

Personally I occasionally want to know the exact time, but maybe that's just me? I guess we can find a solution/compromise.

I'm wiht you. It's interesting sometimes to know the exact time (i.e. when cooking, counting something, etc)

[calhix]

Just wanted to say you did a great job on this. Would be great if we could have this ported to 1.11 resources (like with digistyle in #1116) so that it could possibly be included in the next update.

[calhix]

Personally I occasionally want to know the exact time, but maybe that's just me? I guess we can find a solution/compromise.

Optimally to fit the style of this watch face would be to shake or do some gesture to have the exact time written out as well (like "seven after eleven" instead of "five after eleven." Would be a lot of work though.

[schneidr]

Just wanted to say you did a great job on this. Would be great if we could have this ported to 1.11 resources (like with digistyle in #1116) so that it could possibly be included in the next update.

I was thinking maybe it's even possible to store all language specific resources that way, making it possible to add additional language (with language specific fonts for characters now missing) without changing the watchface itself.

[dyamon]

Just wanted to say you did a great job on this. Would be great if we could have this ported to 1.11 resources (like with digistyle in #1116) so that it could possibly be included in the next update.

Thanks, I have been updating the PR every now and then when I update my PineTime.
When the main team decides to merge the feature I'll gladly port it to the next major release.

Optimally to fit the style of this watch face would be to shake or do some gesture to have the exact time written out as well (like "seven after eleven" instead of "five after eleven." Would be a lot of work though.

Incidentally, this was the initial behavior (see first screenshot) when I didn't really get what a fuzzy watch was :D

I was thinking maybe it's even possible to store all language specific resources that way, making it possible to add additional language (with language specific fonts for characters now missing) without changing the watchface itself.

I'd definitely go in that direction but wait to see if there is any work on internationalization at a more general level, otherwise we duplicate work for every app that wants to support multiple languages.

[Zandengoff]

@dyamon Do you know what failed in the checks? Seems like with a small tweak this could be merged.

[dyamon]

Hey @Zandengoff, I haven't being following the project lately but this is basically a rebase on the new changes.
Before diving into the rebase, tho, I'd like a confirmation that this is going to be merged, otherwise I'll keep running after changes.

Oh and the tests are failing for some formatting issues. That should be easily handled as well.

[kieranc]

I'd love to see this merged, I haven't looked at the rebased version yet but I will. Does it have the fonts stored externally?

Edit: wow I made so many typos

[kieranc]

So the font is still the internal 40px with additional ranges. You could use save some internal flash space and make it look nicer by putting the 42px font on ext flash. As far as the shake/digital switch, I'm not a big fan, but maybe an easy option would be to bind long press to display the digital time temporarily?
edit: I'm more than happy to help with the legwork of these changes if you like

[zyphlar]

Would love for this to be an option in the main distribution (I thought it was when I bought a PineTime lol)

[zyphlar]

I hacked together an adaptation of this suited for the current state of the code that adds the fuzzy language as an option to the digital watchface instead of making a whole new watchface (which I couldn't get to fit on the device lol) -- might serve as a basis for someone else to hack on since previous implementations are based on code that's changed substantially.

I wasn't able to change the font color inline in the latest codebase, apparently #ffffff foo# and lv_label_set_recolor works in lvgl 8 but not 9.

https://github.com/InfiniTimeOrg/InfiniTime/compare/main...zyphlar:InfiniTime:wb/fuzzy-norm?expand=1

cc #653