InfiniTime icon indicating copy to clipboard operation
InfiniTime copied to clipboard

Fuzzy watchface

Open dyamon opened this issue 4 years ago • 80 comments

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:

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

Closes #653

dyamon avatar Sep 10 '21 23:09 dyamon

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.

schneidr avatar Sep 11 '21 04:09 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?

dyamon avatar Sep 11 '21 06:09 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?

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

adocampo avatar Sep 11 '21 07:09 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 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.

schneidr avatar Sep 11 '21 07:09 schneidr

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:

fuzzy-alt

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.

dyamon avatar Sep 11 '21 09:09 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!

dyamon avatar Sep 11 '21 10:09 dyamon

fuzzy-alt

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 avatar Sep 11 '21 11:09 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

adocampo avatar Sep 11 '21 12:09 adocampo

Thanks for the very thorought explaination @adocampo

I'll get to work!

dyamon avatar Sep 12 '21 09:09 dyamon

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.

schneidr avatar Sep 12 '21 14:09 schneidr

Can this be put into v1.5.0?

ajack2001my avatar Sep 21 '21 05:09 ajack2001my

Can this be put into v1.5.0?

Doubtful that it is ready by then.

schneidr avatar Sep 21 '21 05:09 schneidr

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

dyamon avatar Sep 21 '21 07:09 dyamon

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.

kieranc avatar Sep 22 '21 07:09 kieranc

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.

dyamon avatar Sep 22 '21 07:09 dyamon

when we will have access to the flash memory.

I think there already is.

Itai-Nelken avatar Sep 22 '21 15:09 Itai-Nelken

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 avatar Sep 22 '21 15:09 dyamon

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

dyamon avatar Sep 22 '21 21:09 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?

dyamon avatar Sep 23 '21 12:09 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?

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.

Riksu9000 avatar Sep 23 '21 12:09 Riksu9000

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

dyamon avatar Sep 23 '21 15:09 dyamon

Pictures of the current build.

fuzzy2

Color is still gray (despite the photo being blueish)

dyamon avatar Sep 23 '21 16:09 dyamon

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.

schneidr avatar Sep 25 '21 06:09 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.

I would rather do as pebble did, fuzzy watchface is just that, without bloating it with anything else. What it did, is when shaking the wrist, it showed for a few seconds another simple watchface with the time and date in digital format for those moments one needs to know the exact time with seconds. I think BT and battery information would fit there perfectly, and even step counter if you want.

OTOH, if https://github.com/JF002/InfiniTime/issues/659 and https://github.com/JF002/InfiniTime/issues/597 are both solved with showing a temporary watchface indicating BT connection is lost or battery is running out, there would be no need to bloat this fuzzy watchface, in my opinion.

adocampo avatar Sep 25 '21 08:09 adocampo

I'm doing some experiments with wrist shaking atm. This would be compatible with what @adocampo is describing.

dyamon avatar Sep 25 '21 09:09 dyamon

@dyamon I just merged it and they looks awesome! Thanks I just noticed that when Gadgetbridge updates the time (after reboot I had 0:00) then the text did not update itself, I had to go to menu and back. But at least digital watchface updates instantly.

hubmartin avatar Sep 27 '21 16:09 hubmartin

Thanks! That would be because the refresh time is set to 60s. The watchface is created before GB has time to sync the clock and you need to wait for 60s for the change to take place (or indeed "recreate" the watchface by going to a menu and back after GB synced the time). That said, this shouldn't be that noticeable anymore since:

  • with the latest 1.5 we have clock persistence;
  • I'm implementing "digital view on shake" and that needs an higher refresh rate anyway.

dyamon avatar Sep 27 '21 17:09 dyamon

So this is a personal attempt at implementing a "show digital clock on shake" functionality. I'm getting a pretty consistent shake detection (even when my arm is not parallel to the ground) and haven't noticed false positives so far.

While this is working fine for me, feedback is very much appreciated. I'm also aware of #691 which implement a similar functionality, but apparently any sudden acceleration is considered a shake. We'll see what's the best solution to adopt.

~~I can't really turn this PR into a draft anymore but it should be.~~

dyamon avatar Sep 28 '21 20:09 dyamon

So this is a personal attempt at implementing a "show digital clock on shake" functionality. I'm getting a pretty consistent shake detection (even when my arm is not parallel to the ground) and haven't noticed false positives so far.

While this is working fine for me, feedback is very much appreciated. I'm also aware of #691 which implement a similar functionality, but apparently any sudden acceleration is considered a shake. We'll see what's the best solution to adopt.

I can't really turn this PR into a draft anymore but it should be.

Yay multiple attempts to figure out what works best for us :D I think the major difference is you only use the Y axis, where I am using all 3 in some fashion. That said I am still heavily tweaking...I will locally give this a shot and see how it feels :) I also add some averaging in which allows the shake momentum to build up over time, Still not sure if this is a good or bad idea yet. I personally like how it feels but my tastes may not be everyone! Keep up the awesome work :D

geekbozu avatar Sep 29 '21 13:09 geekbozu

Out of curiosity is there anyway to use the existing digital watch face instead of rolling your own?

geekbozu avatar Oct 05 '21 17:10 geekbozu