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
New vector font #1721
Comments
Do you like to share what’s on you mind? |
The existing font generator (which I haven't actually published) leans on a bunch of stuff from another project and just mashes triangles together, so I can't just 'redo' the font. So either:
|
What about Hershey fonts you named in an earlier chat? See #1702 (comment) |
Hershey test code here: http://forum.espruino.com/conversations/321520/ I guess I could drop the vector font and use hershey fonts instead. My concern is really that I will get complaints if the font changes, but I guess it's not like the vector font is amazing at the moment anyway. Also, the dumb way of doing wider lines for hershey would be to just draw each line as a separate polygon - but that's going to be really slow so I guess we need to make something that'll output a polygon (with smooth edges) from a standard polyline. It'd be a neat thing to have, but it's easier said than done :) |
I totally agree, spend a few hours with line thickness and trying to draw some Hershey characters ..... |
Have you thought about using bezier curves for drawing chars? Any hints why g.fillPoly() is not filling this mirrored C as expected?
g.drawPoly(pp,true); g.fillPoly(pp,true); |
Ups I missed the warning:
this is the content of array pp: [ 20, 60, 20, 54, 21, 49, 22, 44, 24, 40, 26, 36, 28, 32, 31, 29, 34, 26, 38, 24, 43, 23, 47, 21, 52, 20, 58, 20, 60, 20, 60, 20, 66, 20, 71, 21, 76, 22, 80, 24, 84, 26, 88, 28, 91, 31, 94, 34, 96, 38, 98, 43, 99, 47, 100, 52, 100, 58, 100, 60, 100, 100, 100, 106, 99, 111, 98, 116, 96, 120, 94, 124, 92, 128, 89, 131, 86, 134, 82, 136, 78, 138, 73, 139, 68, 140, 62, 140, 60, 140, 60, 140, 54, 140, 49, 139, 44, 138, 40, 136, 36, 134, 32, 132, 29, 129, 26, 126, 24, 122, 23, 118, 21, 113, 20, 108, 20, 102, 20, 100, 40, 100, 40, 106, 42, 110, 44, 114, 47, 117, 51, 119, 56, 120, 60, 120, 60, 120, 66, 120, 70, 118, 74, 116, 77, 113, 79, 109, 80, 104, 80, 100, 80, 60, 80, 54, 78, 50, 76, 46, 73, 43, 69, 41, 64, 40, 60, 40, 60, 40, 54, 40, 50, 42, 46, 44, 43, 47, 41, 51, 40, 56, 40, 60 ] pp.length = 184 |
Personally I would. I'm not sure the difference in size between a properly simplified curve and the bezier will be that different, and the more points in the poly the slower it renders. That bezier function looks neat though - that might be something neat to add to Espruino? At the very least as a module. |
I personally like to add it to the Espruino firmware. Will try to send a pr in the next days. |
Thanks! Please can you do it with the SAVE_ON_FLASH ifdef on it though? |
Have you checked opentype.js for this job? Just checking the glyph-inspector. |
Thanks! That looks spot on - it'll make the job way easier. All that's needed it so shove in some of the code from https://github.com/gfwilliams/svgtoeagle and it should be reasonably easy to spit out the right data. The only gotcha right now is because we don't support polygons with holes, for some chars (like I'll take a look at this soon. |
first try.
first test result:
|
Looks good... I'd add
Just do what you're doing and use
There's jsvGetArrayItem (https://github.com/espruino/Espruino/blob/master/src/jsvar.h#L688) but your method is faster. It seems good. There are shortcuts for getting an array of bytes but getting ints is rare.
looks good to me :)
As above. Your method is fine :)
Looks good. All I'd suggest is doing:
To avoid the separate unlock call and variables floating around, but that's pretty minor |
Thanks for your hints - just created pr #1743 |
Try this branch: https://github.com/espruino/Espruino/tree/vector_font_roboto Not had a chance to test properly yet, but that's using a properly generated vector font using irregular polys. Currently it's only a tiny bit smaller than the original (regular poly) one so I'm not sure if it's worth the effort. I doubt it'll look substantially better |
Yes, using the light font might be better. Also, if you found a font that was less curvy it'd almost certainly compress down a lot better! Also, I'm not using quadraticBezier because for some reason it stopped the font from working when I tried it (might just be too many points again?) - so if you can get that working it'd probably really help the shape. |
What tricks did you used to get opentype.js working ?
running the create_vector_font.js gives me |
Just |
Ok , this is Mac Os X related ..... tried with and without -g, same result.
Ok that explains why there are some pixel outside of the chars. Will fiddle around with the numbers of points quadraticBezier creates to make sure that it does not exceed the limit of 64 vertices. |
We can always raise that limit, it's a bit artificial. The main thing is to ensure that we're not generating loads of extra points that aren't required for a good-looking font |
./create_vector_font.js now works on my side too. Roboto-Condensed.ttf with additional 4 bezier points Roboto-Light.ttf with additional 4 bezier points
/* pp54C3v2 = [35,7, var scale = (sx, sy, p) => p.map((v, i) => v * ((i & 1) ? sy : sx)); function grid(gx,gy){ |
Update: |
What about require a vector font like it is possible for bitmap fonts? |
Yes, that's definitely possible. You'd just need to make graphicsFillVectorChar and graphicsVectorCharWidth work with a pointer to the data. I guess you could make it work with iterators which would be more flexible (eg could draw from a string sitting in flash memory), but a bit slower (although the main delay right now will be in rendering, not getting the font vector data) |
That sounds cool. Is the firmware read for this and if yes how should that look like. |
Not sure I understand? Just look at what jswrap_graphics_drawString does for custom bitmap fonts right now - just using iterators again |
Sorry, but I have no clue how to get this done and even it seams that I am not able to formulate a wish for a snippet to work on. |
I think for testing you could do a 'native' compile for your OS with Custom vector fonts would be a nice addition but I think it's probably not that high up the priority list for now. I guess maybe one flexible option would be to just have a 'custom JS' font where you supply the JS function to work out char widths and to draw chars? Not as fast but it could he a great way to add hershey fonts. In that image, is that the exact same data, just drawn with drawPoly and fillPoly? If so it looks like maybe a bug in fillPoly? Might be worth extracting the exact data you supply to it and then filing a new bug for it? |
Font is HelveticaNarrow Used the script to create vector.h and compiled a BOARD=LINUX. So it’s comparing g.drawPoly() with g.setFontsize().drawString() using the same vertices. |
I totally agree. Will try to fix fillPoly() in the next days |
I'd like to look at this again - anything we can shave off the firmware size would be a huge bonus right now. For instance if we could use a 16px grid we could halve the size of this. I think realistically it might be better off starting more or less from scratch and making a custom font - maybe design it as an SVG and then export that to Espruino? |
Good idea, don't miss the fillPoly() issue. |
Fixed now |
g.fillPoly
now supports irregular polys, so there's no need for the regular polygons inside vector_font.hA new font with irregular polygons should be significantly smaller
The text was updated successfully, but these errors were encountered: