weixin_39615257
weixin_39615257
2021-01-12 08:33

Call to test v5.1 features: faster anti-aliasing + new font system (including sparse font support)

Hi,

In dev-5.1 brach I pushed a lot of updates

4x faster anti-aliasing

The old "render everything in double size" is updated. Because anti-aliasing is required only on edges, now only the edges of lines and the corners of rectangles are anti-aliased. It lead to 4x faster anti-aliasing.

LV_FONT_ANTIALIAS is removed. instead you can specify a bpp (bit-per-pixel) value for each built in font (1, 2, 4 or 8 bpp are supported). It result better customization to save memory (high bpp for small fonts, low bpp for larger fonts) and in general gives better result with same font memory footprint.

The image handling is also updated. The old chrma keying (LV_COLOR_TRANSP pixels are transparent) is still available but there is a new feature too: you can assign an Alpha byte to every pixel to realize pixel level opacity.

Due to these changes the following API updates happened. - lv_line_set/get_upscale and lv_img_set/get_upscale become obsolete because no upscale anymore with anti-aliasing - lv_img_set_file is changed to lv_img_set_src to specify an image source which can be a file or a symbol like earlier or a variable directly. So lv_img_create_file become obsolete too.

To learn more see the tutorials: - Anti-aliasing: https://github.com/littlevgl/lv_examples/blob/dev-5.1/lv_tutorial/5_antialiasing/lv_tutorial_antialiasing.c - Images: https://github.com/littlevgl/lv_examples/blob/dev-5.1/lv_tutorial/6_images/lv_tutorial_images.c

Sparse font support

Sparse font were ask by a lot of people especially from Asia where characters are in a big range but only a few of the are required. To create sparse font use the online converter below. There you can specify which character you would like to include into your font. See the font tutorial for an example: https://github.com/littlevgl/lv_examples/blob/dev-5.1/lv_tutorial/7_fonts/lv_tutorial_fonts.c

Online font and image converters

Instead of the the old command line converters new simple and easy to use online converters are available: Image converter: https://littlevgl.com/image-to-c-array Font converter: https://littlevgl.com/ttf-font-to-c-array

Tutorial

The dev-5.1 branch lv_examples repository is updated to the changes above.

Test it please

These are very big updates and need deep testing. I ask you to test them and leave feedback here!

Note

You should update your lv_conf.h from lv_conf_templ.h

该提问来源于开源项目:lvgl/lvgl

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

53条回答

  • weixin_39615257 weixin_39615257 4月前

    Okay, it seems to v5.1 is ready to release. I will merge dev-5.1 branch to master until tomorrow.

    Thank you for your test results and feedback! You helped a lot!

    thank-you-you-nr8a6d

    点赞 评论 复制链接分享
  • weixin_39957934 weixin_39957934 4月前

    Do you mind sharing tweaked unscii font ? I was just looking for a way to get some small font working on low-res monochrome display and this looks promising. It would be greatly appreciated :). Thanks

    点赞 评论 复制链接分享
  • weixin_39615257 weixin_39615257 4月前

    If you send the unscii font, is it okay if I add it to the font converter webpage to download?

    点赞 评论 复制链接分享
  • weixin_39924584 weixin_39924584 4月前

    I have no problems sharing the fonts, I didn't make them 😄 you can do anything with them that falls within their respective licenses.

    Each font has a different set of available characters, so depending on what you need they might not have it. Unscii in particular has some unusual glyphs. For my purposes they have all the characters I need (ISO 8859-1 is all I need at the moment).

    Synchronizer I obtained from here, and it is cc-by-sa. This converts perfectly with lvgl font converter height set to 7. No modification required.

    unscii I found here. Specifically, I used unscii-8-thin. The fonts on that page are public domain except for unscii-16-full (as described in the second paragraph). I have attached the font as modified to convert well with lvgl (unscii-8-thin-fixed). You can compare the original to the modified version in FontForge to see how it was modified (basically just the em size and positioning).

    unscii-8-thin-fixed.zip

    I guess it would be nice to have symbols at these heights as well, I haven't dove into that though as of yet.

    点赞 评论 复制链接分享
  • weixin_39992957 weixin_39992957 4月前

    Are you going to make the lv_area_is_on change before merging to master? Seems like relatively straightforward change to make and would be a nice bug-fix to add to 5.1.

    PS, I've been running 5.1 for a week now and it's is both fast and stable.

    点赞 评论 复制链接分享
  • weixin_39957934 weixin_39957934 4月前

    I found small issue in new image converter. When i try to convert 1-bit .bmp to .c file it doesn't work - arrays are all zero. When I convert them to 24-bit bitmaps first it works well. Here are some test files and results: graphics.zip

    点赞 评论 复制链接分享
  • weixin_39615257 weixin_39615257 4月前

    Thank you for the fonts and the explanation. Yes, some symbols with pixel fonts would be great! If somebody have an artistic sens to create those fonts just open an issue for it!

    I fixed it now! Thank you for the feedback.

    Thank, I will examine it! Fortunately it is independent from the v5.1 release.

    点赞 评论 复制链接分享
  • weixin_39615257 weixin_39615257 4月前

    Today v5.1 is released! I hope you will like the new features.

    It's very good to see the community of LittlevGL are working together. Thank you very much!

    If you find bugs please open a new issue for them.

    点赞 评论 复制链接分享
  • weixin_39963341 weixin_39963341 4月前

    大哥,能上传一个中文示例嘛?新手一脸懵

    Translated with Google Translate: can you upload a Chinese example?

    点赞 评论 复制链接分享
  • weixin_39568659 weixin_39568659 4月前

    _ _20180303172600 The anti-aliasing function working great!

    点赞 评论 复制链接分享
  • weixin_39917046 weixin_39917046 4月前

    tested on my vocore2, in benchmark:

    5.1: all enable: 68-70ms, all disable: 19-20ms 5.0: all enable: 68-77ms, all disable: 22-34ms

    It is a little increased 💯

    点赞 评论 复制链接分享
  • weixin_39615257 weixin_39615257 4月前

    With or without anti-aliasing? And what is your screen's resolution?

    点赞 评论 复制链接分享
  • weixin_39917046 weixin_39917046 4月前

    480x800 runs at 580MHz. enable anti-aliasing: 5.1: all enable: 68-70ms, all disable: 19-20ms 5.0: all enable: 68-77ms, all disable: 22-34ms(font anti-aliasing only) 5.0: all enable: 202-224ms, all disable: 91-107ms(both anti-aliasing)

    disable anti-aliasing: 5.1: all enable: 67-70ms, all disable: 19-20ms 5.0: all enable: 75-86ms, all disable: 24-36ms

    I am wrong, it is greatly increased :)

    点赞 评论 复制链接分享
  • weixin_39615257 weixin_39615257 4月前

    Thanks!

    5.0: all enable: 91-107ms, all disable: 202-224ms(both anti-aliasing)

    I think you swapped the two values. All enabled should be slower.

    点赞 评论 复制链接分享
  • weixin_39615257 weixin_39615257 4月前

    If I'm correct then you can confirm: - v5.1 made anti-aliasing 3-4 times faster - in v5.1 basically no difference (in speed) between anti-aliasing and no anti-.aliasing - v5.1 become slightly faster in no anti-aliasing configuration

    点赞 评论 复制链接分享
  • weixin_39917046 weixin_39917046 4月前

    You are correct :)

    点赞 评论 复制链接分享
  • weixin_39615257 weixin_39615257 4月前

    Great! Thank you for the test! A speed up from a the useless 200 ms (5 FPS) to 70 ms (14 FPS) sound very good. And it's for the "all enabled" settings. I'm happy with these results :)

    点赞 评论 复制链接分享
  • weixin_39615257 weixin_39615257 4月前

    Here are two video with v5.0 and v5.1 running the stress test. There is nothing special on this GUI just create/delete objects, animate them and set their properties. No shadow, opacity and wallpaper.

    The hardware is: STM32F746 Discovery without GPU

    lvgl_stress_test.zip

    点赞 评论 复制链接分享
  • weixin_39908616 weixin_39908616 4月前

    Very cool!

    点赞 评论 复制链接分享
  • weixin_39924584 weixin_39924584 4月前

    I've managed to convert both the pixely fonts (synchronizer and unscii) with "perfect" output using the current converter (as of today, 3/5/18). I would say that is a success! The last tweak you made seemed to do it.

    I did have to tweak one of the fonts (unscii) in FontForge before it would work. Basically, I didn't change the font per se, just its grid size/position within that grid. It is a bit of trial and error, because even when the grid seems perfect for conversion it won't necessarily work - you might have to double it or shift it up/down. Eventually you can end up with an output that doesn't try to AA the font.

    Fair enough about the online resource converter - never thought about it driving traffic to the website.

    点赞 评论 复制链接分享
  • weixin_39924584 weixin_39924584 4月前

    Oh, but I think your converter is good at converting pixely fonts! But, whatever change you made between Feb 28 and March 1 seemed to break it. I would argue that change needs to be reverted. This is one downside to an online converter tool - no source, not easy to change, not easy to run locally (also relies on your website being online). An offline python script that can run on any computer and can easily be modified would be much more useful overall for lvgl (in my opinion).

    Let's take Synchronizer as an example of why your converter is (was) actually good for pixely fonts. Here is the output of your converter, for a few characters. They are all pixel perfect recreations of the input font. The AA effects don't come into play because the font was designed on an 8x8 grid, so setting the height to 8 gives the correct results:

    This was the output on Feb 28 image

    Compare that to the output now, after the change you made:

    This was the output on March 1 (Same font, same settings) image

    Clearly the output was much better (actually, perfect) before!

    点赞 评论 复制链接分享
  • weixin_39752828 weixin_39752828 4月前

    Glad to see the huge speed up! Anyone has a video running 2 boards (5.0 & 5.1 next to each other) running the benchmark test? Or is it just off screen rendering?

    点赞 评论 复制链接分享
  • weixin_39615257 weixin_39615257 4月前

    You are right, I still made a mistake. Because the buggy PHP function I need to calculate the size in "pt" myself (which fits to the height given in px). However I should take care to use a height in pt which results an integer height in px. Now the converter generates nice letters for 7px and 14 px height using the Synchronizer font (it is 7 px according to FontForge). However for 10px it's still wrong because this special font is designed for 7px height.

    There are two reasons why I've chosen the online converter: 1. Much user user-friendlier. Some guys (even good programmers) are don't like terminal. It's not so causal on Windows and OSX. 2. For marketing purpose. Maybe you hate me because of it but I need to think about how to get visitors and keep them. The online tools are a good ways to make people come back to the website which is a good point in the eyes of Google therefore it will give better search results. And it help to make LittlevGL more popular and easier to find.

    点赞 评论 复制链接分享
  • weixin_39615257 weixin_39615257 4月前

    Now the benchmark draws the same GUI 10 times to measure an average speed so we don't see anything. However I will make video on Monday with an animations to demonstrate the difference.

    点赞 评论 复制链接分享
  • weixin_39796152 weixin_39796152 4月前

    Hi, I tested 5.1 again today,i found there are many symbols can't be resolved, and the include path is right, I don't know what cause this,but 5.0 is ok,my IDE is eclipse tim 20180301190841

    点赞 评论 复制链接分享
  • weixin_39615257 weixin_39615257 4月前

    It works for me. Have you updated to the latest version of lvgl and lv_examples? Is it still working for others?

    点赞 评论 复制链接分享
  • weixin_39924584 weixin_39924584 4月前

    I concur that the font conversion seems to be closer now for that font, but still isn't what I would expect.

    BUT... For other fonts, the conversion is now much worse. See attached font, with the conversion output before (on Feb 28th) vs. the conversion output after (March 1). The output from before was a perfect recreation of the font. The new output is quite bad.

    synchronizer_nbp.zip

    点赞 评论 复制链接分享
  • weixin_39796152 weixin_39796152 4月前

    i solve the problem by clean the cache of IDE,I'll test more tomorrow

    点赞 评论 复制链接分享
  • weixin_39615257 weixin_39615257 4月前

    I examined it deeper. It seems the general font converters (not only mine) are not good to convert "pixel based" fonts. I tried the Synchronizer font with BMFont (the previous tool) and got wrong result as well. See sync_8_bmfont.png in the zip. The most important thing to notice is the edges of the glyphs are anti-aliased. So the result never will be so clear as we expect. Look for example the 'x' letter on (610;3) coordinate or '/' or '\'. The pixels on middle is almost black. In the zip file you will find a similar image drawn by LittlevGL's online font converter.
    It seems to me the font converter works well for "normal" fonts like Arial but not good for pixel based fonts. I see the importance of the pixel based fonts for monochrome displays so I suggest to add a 8x8 and a 16x16 font as built-in font. They need to be created only once (by hand) but the converted result could be a good starting point which just needs some fixes.

    Result images with BMFont and LittelvGL converter: sync_8_tests.zip

    点赞 评论 复制链接分享
  • weixin_39924584 weixin_39924584 4月前

    I'm having some trouble getting the font converter to do what I expect.

    See the attached font. It is a "pixel" style font that should convert 1:1.

    All characters fit in an 8x8 grid, which should be great for creating a small 8px, 1 Bpp font for small displays. The problem is that the font must be generated as 16px height in order for it to look correct. The result is that every character is 16px tall with the bottom 8px always empty (they are twice as tall as the max width). Any ideas? I tried to modify the font in FontForge in various ways to get the intended result but things only ended up worse.

    unscii_8_thin.zip

    点赞 评论 复制链接分享
  • weixin_39615257 weixin_39615257 4月前

    There is a bug in a PHP function which convert TTF to image. I solved it somehow but itt seems it's still not the best. I made an update. Could you test it?

    点赞 评论 复制链接分享
  • weixin_39796152 weixin_39796152 4月前

    background works tim 20180228151133

    点赞 评论 复制链接分享
  • weixin_39917046 weixin_39917046 4月前

    Yes, if use the img source file in example it will work, but if use img_conv.py generated file can not work. Maybe the file structure changed?

    点赞 评论 复制链接分享
  • weixin_39615257 weixin_39615257 4月前

    You should use the online image converter tool mention in the initial post: https://littlevgl.com/image-to-c-array

    点赞 评论 复制链接分享
  • weixin_39796152 weixin_39796152 4月前

    do not use img_conv.py,it is for 5.0,you should use this tools https://littlevgl.com/image-to-c-array for 5.1

    点赞 评论 复制链接分享
  • weixin_39917046 weixin_39917046 4月前

    Thank you :) It works If there is C based convertor that will be better, js is so slow :)

    点赞 评论 复制链接分享
  • weixin_39615257 weixin_39615257 4月前

    It's PHP :) I don't plan to maintain a "Desktop" converter too. I decided to switch to online because it's much more simple and user friendly.

    点赞 评论 复制链接分享
  • weixin_39917046 weixin_39917046 4月前

    After I refresh lv_conf.h the font and compile warning fixed :) But background is still not working(shows some randomly characters at background: image

    I change demo.c load background code like this:

    c
    #if DEMO_WALLPAPER
        lv_obj_t *wp = lv_img_create(lv_scr_act(), NULL);
        lv_img_set_src(wp, &img_bubble_pattern);
        lv_img_setupscale(wp, true);
        ....
    
    点赞 评论 复制链接分享
  • weixin_39615257 weixin_39615257 4月前

    I forget to say to update the lv_examples repo to the latest dev-5.1 too. I hope it will solve it.

    点赞 评论 复制链接分享
  • weixin_39924584 weixin_39924584 4月前

    AA does seem to be quite a bit faster now. I haven't done "extensive" testing but based on lvgl's resource monitor the CPU usage is not much different with or without AA. This is running on real hardware (STM32F746G-DISCO, plan on trying STM32F769I_DISCO later).

    Edit: I found some more easy to fix bugs.

    • The new group focus callback is not NULL by default (add group->focus_cb = NULL; to lv_group_create)
    • The new round_cb callback for rounding/adjusting area to be redrawn is called lv_refr_set_round_cd when it should be called lv_refr_set_round_cb
    • round_cb should be called right before drawing the invalid area, not for every area invalidation leading up to it (does this make sense? It is more efficient to round the final area to be redrawn, once).
    点赞 评论 复制链接分享
  • weixin_39917046 weixin_39917046 4月前

    Now I success compile it. When I run demo, I get these bugs:

    1. all fonts are bigger and no antialias effect.
    2. background become totally white, I am using new api to load the picture.

    image

    点赞 评论 复制链接分享
  • weixin_39615257 weixin_39615257 4月前

    I pushed a bugfix about image drawing. Please pull dev-5.1 branch. It should fix the white background.

    Please, refresh your lv_conf.h from lv_conf_templ.h . There the default font is already correct.

    To use anti-aliased fonts enable them (in lv_conf.h) 2, 4 or 8 (instead of 1). It determines the bit-per-pixel. Now LV_ANTIALIAS is irrelevant.

    LV_ANTIALIAS will enable the smoothing of lines and curves.

    点赞 评论 复制链接分享
  • weixin_39796152 weixin_39796152 4月前

    test like this???

    it seem no much different between enable and disable , something wrong I did?

    enable aa: aa

    disable aa: no aa

    点赞 评论 复制链接分享
  • weixin_39615257 weixin_39615257 4月前

    It's okay, I said that the anti-aliasing become faster :)

    Some tests on real hardware (not PC simulator) also would be great!

    点赞 评论 复制链接分享
  • weixin_39917046 weixin_39917046 4月前

    Thank you.

    Now I am trying to compile in my linux computer.

    1. clone pc_simulator, and update submodule
    2. go to folder pc_simulator/lvgl, then call git checkout dev-5.1
    3. go to folder pc_simulator/lv_examples, then call git checkout dev-5.1
    4. call make in pc_simulator

    I get a lot of warning USE_LV_FONT_xxxx is not defined, after that an error: no rule to make target 'dejavu_10.o' needed by default.

    I guess I must mess some steps or some makefile borken, old version 5.0 works well. After this work I will make a compare of 5.0 and 5.1 on my device.

    点赞 评论 复制链接分享
  • weixin_39615257 weixin_39615257 4月前

    It seems correct. Anti-aliasing really become faster. Now it has only a very small overhead.

    I read the text again on the example image you sent about fonts and noticed its political content. I need to ask you to change the text on the image and use a well-known test text like "Lorem ipsum..." or "the lazy dog jumps over the quick brown fox" etc. As this content may harm others I ask you to change it as soon as possible.

    点赞 评论 复制链接分享
  • weixin_39615257 weixin_39615257 4月前

    oops, I forget to update the Makefiles. I will do it today.

    点赞 评论 复制链接分享
  • weixin_39796152 weixin_39796152 4月前

    sorry,I have changed the picture

    点赞 评论 复制链接分享
  • weixin_39924584 weixin_39924584 4月前

    If you have LV_ANTIALIAS enabled and USE_LV_SHADOW disabled, build will fail. The problem is undefined references to px_fp. It appears that it should be defined if either LV_ANTIALIAS or USE_LV_SHADOW are enabled, if I understand correctly.

    There are some leftover debug printf statements in lv_draw_shadow_bottom that shouldn't be there 😜

    点赞 评论 复制链接分享
  • weixin_39615257 weixin_39615257 4月前

    Thank you, both fixed

    点赞 评论 复制链接分享
  • weixin_39796152 weixin_39796152 4月前

    Hi, I have tested Chinese fonts ,and it work well ! The AA of the Sparse font looks well! You can use this picture as an example. @

    tim 20180226192633 高中时我的一个哥们很喜欢一个女生,但是他十分腼腆,有她的电话都不敢打给她,毕业时我们寝室的哥几个怂恿他叫他表白,他打了一个电话给她,他结结巴巴的说出来自己好喜欢她,要唱首歌送给她,他很有感情的唱了这首歌,唱完后就哭了,问他为什么,他说她早就挂断了电话,原来他是对空气唱完这首歌的. -----网易云音乐热门评论

    点赞 评论 复制链接分享
  • weixin_39615257 weixin_39615257 4月前

    You should copy lv_ex_conf_templ.h as lv_ex_conf.h next to lv_conf.h and enable what you need. Don't forget to use the dev-5.1 branch of lv_examples repository.

    Thank you testing! Can you run the Benchmark application (benchmark_create()) and test the performance with and without anti-aliasing in different settings?

    点赞 评论 复制链接分享
  • weixin_39917046 weixin_39917046 4月前

    sorry, I am such a noob :) but how to compile tutorial, I can only compile demo. Could you update the tutorial instruction a little? Thank you.

    ====update==== I know now, need to modify source code main.c, change the include header and xxxxx_create function.

    点赞 评论 复制链接分享

相关推荐