-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Better Bangle.js fonts #3109
Comments
ExamplesYes, I like the sound of this, currently I have Plan/pointsI think
I'd also like to add, for existing apps that would use this API / an initial implementation, I think it would be nice if we could let the user configure a single font for widgets, as mentioned at the start of my post Initial approachUser config
Test appsPerhaps we use And yes, +1 for initial implementation in JS, then performance checks |
Thanks!
I'm not sure I understand about enable/disable? Surely you just disable by uninstalling the font app?
Maybe While we can definitely add some settings to the font library (eg minimum font size, lock widget font, etc) I'm expecting that as long as we give enough info to I'm thinking at first maybe we have one lightweight font app that mirrors the existing behaviour (with built in fonts) which is the default that gets auto-installed, and then a second app using the Pebble fonts mentioned above. And when we're happy with the Pebble font one I think we just swap over. |
Good point - yes the enable/disable is unnecessary
Excellent idea, yes I think that'll work nicely for the font settings app being able to present the user with these use-types.
I'm interested in what font apps will do, are they effectively the setup for the builtin code that will sit behind |
Right now I'm thinking they'll provide a |
The Renaissance font looks good. To what extent will a raster font be speedier to draw than a vector font, especially at high resolutions? |
You'd have to do some testing but as a guess I'd say any font is faster as a raster unless it's over 40px high. Also for smaller fonts the final rendering is much better. Basically any normal font that's not filling the screen is better as raster |
Some work towards this now in 591c1f8 |
It appears to work! https://forum.espruino.com/conversations/394649/?offset=25#comment17323914 Just checked and you can even send messages from (the latest) Gadgetbridge too |
The ț character (U+021B) still doesn't appear in notifications on iOS, will test later today. I am using the extended fonts |
So does I see it in 'all fonts' at least, and in extended fonts we do up to char code 1103 so 0x21B should be in there |
Great stuff! I'm quite keen on having consistent fonts across a few widgets I have, I'm quite short on time over the next few weeks but looking forward to incorporating this |
Great! I should add that while there are now these font libraries available, the So ideally, before we start using the font all over the place we should probably implement Also thanks for your time recently @bobrippling - I know you've been busy :) |
Did a simple test with the run app and just swapped the two existing fonts with the same size. The dithered text is almost unreadable and the other font is too broad for dist and time. The latter could be solved by specifying a max width. But I think an other option would be to further categories fonts like width-height, boldness and maybe if it is a fixed width font or not. Then we could request a font according to these characteristics and get the most matching one with the result looking better. Edit: I checked the code. Height and width (if it is fixed) are already stored. Should also be no problem to calculate the maximum/average width from the widths array for non fixed fonts. |
The bangle js 2 menu uses one main fixed font. With a second smaller font as fallback for the items if the text doesn't fit in one line. And then cut them if it still doesn't fit. To mimic the current behaviour an approach with requesting a font in a specified height would work. With an additional option for the item to use a smaller size or more condensed font if needed and additional cutting if needed. A more advanced solution would be a min font size like it is used in the message app. But this would require more changes like adjusting the surrounding rect hight to the font height. Then make it a global setting and use it for settings, menu, the launcher and every app that wants to respect it. |
Next I integrated the best fitting pebble renaissance font sizes into the run app. On the left the original. On the right the pebble fonts: I replaced 6x8:2 with renaissance_18_bold.pbf and 6x15:2 with renaissance_28.pbf. It looks ok even though 6x8 is fixed width and renaissance_18 isn't. But both pebble fonts look smaller. The reason ist that there is a lot of spacing above the glyphs. See for example "G". It has a spacing of 7 above: https://github.com/pebble-dev/renaissance/blob/66df6992283adf97ba4689004dde7c51b5d03225/files/renaissance_18_bold.pbff#L485 https://github.com/pebble-dev/renaissance/wiki/PBFF-Format-description/ I am not sure. But this makes the fonts much less useful for us or what do you think? Also one question: What is the reason the pbf format was included in espruino instead of converting the pbf fonts to the espruino format? |
Thanks for that testing... apart from alignment, the 18_bold font looks good. In terms of how we ask for the fonts, it seems like something like:
could work? The font lib could always check what the current app is and provide tweaks if needed.
The Espruino format assumes that all characters are in one range (eg 32..255), but PBF allows us to have Unicode characters to support different languages, and we can have for instance Korean, but with ASCII too, and not have to have all the characters inbetween. The height thing is annoying, but actually that could be changed by modifying the font files - we can just adjust the reported height and maybe crop down/reposition the few chars that go out of range. |
I just saw your forum posts as well: https://forum.espruino.com/conversations/383349/#comment17446938 Continuing on here... I had assumed that for 36px we might just pixel-double the 18px for now as Bangle.js can just do that internally - but there are algorithms for pixel doubling so perhaps one could be built into the font converter tool: https://github.com/espruino/EspruinoWebTools/blob/master/fontconverter.js |
Yes, I like the look of the run app with the pebble fonts.
Yes, I think it will work. I would give it a try with the run app and the menu: Depending on the systemwide configured fonts always the best one is chosen by getFont(). Then I try it with the current default fonts and compare it to only the pebble fonts and see how it works and looks. But a bold option for getFont() is neccesary otherwise the labels of the run app won't work.
Yes, it should be possible to automate this.
The pebble fonts look nice because they are adjusted for each size. I attached the glyph "q" as an example in 18px and 28p. We won't get the nice rounding of the 28px when doubling the 18px. |
This code globally maps many of the system fonts to my version of the pebble fonts: https://gist.github.com/Chriz76/75de579af0a844d126df94b1b303657b This enables testing it in the existing apps without modifying them. The fonts are adjusted to have less top offset and I also added a 36px version with nice rounded edges for the ascii glyphs: This is how the regular mapping looks: And this uses an increased size mapping for better readability: The fonts would still need some tweaking but if this looks promising to you, then I could make the fonts and the global replacement an app so everyone can try it. |
This is really cool - and it looks like a massive improvement! I like the hack of just changing I'm off this coming week so I wouldn't be able to look at any big changes, but if you wanted you make this available in the app loader for testing I think that'd be great - and then maybe we could move towards also providing a |
Created the app and made it available on my fork. It is highly experimental so I don't know if I should create a PR for it or if testers want to try it on my fork? https://chriz76.github.io/BangleApps/?c=&q=scale https://github.com/Chriz76/BangleApps/tree/master/apps/scalefonts Next I will take a look at getFont. Got some nice insperation from the conversation here and also took a look how other wear OS solve it. |
I installed it on my watch and it really gives a boost to the visual presentation! Some notes:
|
Thank you @thyttan for testing and your feedback!
That's great news.
I am not sure if it will go away when it is build in the firmware. setFont doesn't do much so it is maybe the rendering of the pbf font that slows thing down, but this is already implemented in c code.
I am using "14" as smallest of the pebble fonts and then fallback to the defined font. The reason is, that the pebble fonts are much smaller in reality than their name suggests. The letter "A" in size 14 is only 9 pixels high resulting in size 11 with one pixel at the bottom and one at the top. That is a bit frustrating and we might have to create more larger sizes. So even my self created largest font size 36 is in reality much smaller. Here are the real sizes (already including space at the top and bottom) to compare it to the existing fonts:
|
I developed a method like discussed before to achive this and would also enable a global font size setting and make apps scale to it.
https://gist.github.com/Chriz76/5e69de3e56c8399b59a6364e15713209 |
There have been discussions about this in the past (I'm afraid I can't find any good links at the moment - they're probably on the forum). But vaguely related issues are #1145 and #1311
Problem
Where we are
So what's the issue?
It'd be nice if we had a global way of changing fonts (eg by installing an app/library via the App Loader) - to either change the look and feel, size of fonts, or to add native support for more character sets.
While we could have a library/function that handled simple font selection, eg
require("font").getFont("big"/"medium"/"small")
I don't think that's really useful enough.I think we need something that'll choose a font based on some text and how much space there is. For example:
Any thoughts on this? I think the main things it needs to be able to handle are:
...
) text as well as the font just to save on computing things twiceI guess it might be good to think about existing apps that would benefit from this (
messagegui
,launcher
,run
,E.showMenu
,E.showPrompt
, etc) and what kind of features they would need?Also, I guess this may need to be something that runs quite fast - so do we actually want a built-in function that just looks at a list of available fonts? Or maybe we get it working in JS first, then if it's slow we look at moving it inside the firmware.
The text was updated successfully, but these errors were encountered: