「App:Library:LVGL:docs:Overview:Fonts」の版間の差分
7行目: | 7行目: | ||
|- | |- | ||
| | | | ||
− | In LVGL fonts are collections of bitmaps and other information required to render images of individual letters (glyph). A font is stored in a <code style="color: #bb0000;">lv_font_t</code> variable and can be set in a style's ''text_font'' field. For example: | + | In LVGL fonts are collections of bitmaps and other information required to render images of individual letters (glyph). |
+ | |||
+ | A font is stored in a <code style="color: #bb0000;">lv_font_t</code> variable and can be set in a style's ''text_font'' field. For example: | ||
<syntaxhighlight lang="C++" style="border:1px dashed gray;"> | <syntaxhighlight lang="C++" style="border:1px dashed gray;"> | ||
lv_style_set_text_font(&my_style, &lv_font_montserrat_28); /*Set a larger font*/ | lv_style_set_text_font(&my_style, &lv_font_montserrat_28); /*Set a larger font*/ | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | Fonts have a bpp (bits per pixel) property. It shows how many bits are used to describe a pixel in a font. The value stored for a pixel determines the pixel's opacity. This way, with higher ''bpp'', the edges of the letter can be smoother. The possible ''bpp'' values are 1, 2, 4 and 8 (higher values mean better quality). | + | Fonts have a bpp (bits per pixel) property. |
+ | |||
+ | It shows how many bits are used to describe a pixel in a font. The value stored for a pixel determines the pixel's opacity. | ||
+ | |||
+ | This way, with higher ''bpp'', the edges of the letter can be smoother. | ||
+ | |||
+ | |||
+ | The possible ''bpp'' values are 1, 2, 4 and 8 (higher values mean better quality). | ||
+ | |||
+ | The ''bpp'' property also affects the amount of memory needed to store a font. | ||
− | + | For example, ''bpp = 4'' makes a font nearly four times larger compared to ''bpp = 1''. | |
| | | | ||
|} | |} | ||
25行目: | 36行目: | ||
|- | |- | ||
| | | | ||
− | LVGL supports UTF-8 encoded Unicode characters. Your editor needs to be configured to save your code/text as UTF-8 (usually this the default) and be sure that, <code style="color: #bb0000;">LV_TXT_ENC</code> is set to <code style="color: #bb0000;">LV_TXT_ENC_UTF8</code> in ''lv_conf.h''. (This is the default value) | + | LVGL supports UTF-8 encoded Unicode characters. |
+ | |||
+ | Your editor needs to be configured to save your code/text as UTF-8 (usually this the default) and be sure that, <code style="color: #bb0000;">LV_TXT_ENC</code> is set to <code style="color: #bb0000;">LV_TXT_ENC_UTF8</code> in ''lv_conf.h''. (This is the default value) | ||
To test it try | To test it try | ||
94行目: | 107行目: | ||
* <code style="color: #bb0000;">LV_FONT_UNSCII_8</code> 8 px pixel perfect font with only ASCII characters | * <code style="color: #bb0000;">LV_FONT_UNSCII_8</code> 8 px pixel perfect font with only ASCII characters | ||
* <code style="color: #bb0000;">LV_FONT_UNSCII_16</code> 16 px pixel perfect font with only ASCII characters | * <code style="color: #bb0000;">LV_FONT_UNSCII_16</code> 16 px pixel perfect font with only ASCII characters | ||
+ | |||
The built-in fonts are global variables with names like <code style="color: #bb0000;">lv_font_montserrat_16</code> for a 16 px height font. To use them in a style, just add a pointer to a font variable like shown above. | The built-in fonts are global variables with names like <code style="color: #bb0000;">lv_font_montserrat_16</code> for a 16 px height font. To use them in a style, just add a pointer to a font variable like shown above. | ||
127行目: | 141行目: | ||
Most languages use a Left-to-Right (LTR for short) writing direction, however some languages (such as Hebrew, Persian or Arabic) use Right-to-Left (RTL for short) direction. | Most languages use a Left-to-Right (LTR for short) writing direction, however some languages (such as Hebrew, Persian or Arabic) use Right-to-Left (RTL for short) direction. | ||
− | LVGL not only supports RTL texts but supports mixed (a.k.a. bidirectional, BiDi) text rendering too. Some examples: | + | |
+ | LVGL not only supports RTL texts but supports mixed (a.k.a. bidirectional, BiDi) text rendering too. | ||
+ | |||
+ | Some examples: | ||
BiDi support is enabled by <code style="color: #bb0000;">LV_USE_BIDI</code> in ''lv_conf.h'' | BiDi support is enabled by <code style="color: #bb0000;">LV_USE_BIDI</code> in ''lv_conf.h'' | ||
− | All texts have a base direction (LTR or RTL) which determines some rendering rules and the default alignment of the text (Left or Right). However, in LVGL, the base direction is not only applied to labels. It's a general property which can be set for every object. If not set then it will be inherited from the parent. This means it's enough to set the base direction of a screen and every object will inherit it. | + | |
+ | All texts have a base direction (LTR or RTL) which determines some rendering rules and the default alignment of the text (Left or Right). | ||
+ | |||
+ | |||
+ | However, in LVGL, the base direction is not only applied to labels. | ||
+ | |||
+ | It's a general property which can be set for every object. | ||
+ | |||
+ | If not set then it will be inherited from the parent. | ||
+ | |||
+ | This means it's enough to set the base direction of a screen and every object will inherit it. | ||
The default base direction for screens can be set by <code style="color: #bb0000;">LV_BIDI_BASE_DIR_DEF</code> in ''lv_conf.h'' and other objects inherit the base direction from their parent. | The default base direction for screens can be set by <code style="color: #bb0000;">LV_BIDI_BASE_DIR_DEF</code> in ''lv_conf.h'' and other objects inherit the base direction from their parent. | ||
141行目: | 168行目: | ||
* <code style="color: #bb0000;">LV_BIDI_DIR_AUTO</code>: Auto detect base direction | * <code style="color: #bb0000;">LV_BIDI_DIR_AUTO</code>: Auto detect base direction | ||
* <code style="color: #bb0000;">LV_BIDI_DIR_INHERIT</code>: Inherit base direction from the parent (or a default value for non-screen objects) | * <code style="color: #bb0000;">LV_BIDI_DIR_INHERIT</code>: Inherit base direction from the parent (or a default value for non-screen objects) | ||
+ | |||
This list summarizes the effect of RTL base direction on objects: | This list summarizes the effect of RTL base direction on objects: | ||
− | |||
− | |||
* Create objects by default on the right | * Create objects by default on the right | ||
164行目: | 190行目: | ||
|- | |- | ||
| | | | ||
− | There are some special rules to display Arabic and Persian characters: the ''form'' of a character depends on its position in the text. A different form of the same letter needs to be used if is isolated, at start, middle or end positions. Besides these, some conjunction rules should also be taken into account. | + | There are some special rules to display Arabic and Persian characters: the ''form'' of a character depends on its position in the text. |
+ | |||
+ | A different form of the same letter needs to be used if is isolated, at start, middle or end positions. | ||
+ | |||
+ | Besides these, some conjunction rules should also be taken into account. | ||
LVGL supports these rules if <code style="color: #bb0000;">LV_USE_ARABIC_PERSIAN_CHARS</code> is enabled. | LVGL supports these rules if <code style="color: #bb0000;">LV_USE_ARABIC_PERSIAN_CHARS</code> is enabled. | ||
184行目: | 214行目: | ||
|- | |- | ||
| | | | ||
− | Subpixel rendering allows for tripling the horizontal resolution by rendering anti-aliased edges on Red, Green and Blue channels instead of at pixel level granularity. This takes advantage of the position of physical color channels of each pixel, resulting in higher quality letter anti-aliasing. Learn more here. | + | Subpixel rendering allows for tripling the horizontal resolution by rendering anti-aliased edges on Red, Green and Blue channels instead of at pixel level granularity. |
+ | |||
+ | This takes advantage of the position of physical color channels of each pixel, resulting in higher quality letter anti-aliasing. | ||
+ | |||
+ | Learn more here. | ||
For subpixel rendering, the fonts need to be generated with special settings: | For subpixel rendering, the fonts need to be generated with special settings: | ||
191行目: | 225行目: | ||
* In the command line tool use <code style="color: #bb0000;">--lcd</code> flag. Note that the generated font needs about three times more memory. | * In the command line tool use <code style="color: #bb0000;">--lcd</code> flag. Note that the generated font needs about three times more memory. | ||
− | Subpixel rendering works only if the color channels of the pixels have a horizontal layout. That is the R, G, B channels are next each other and not above each other. The order of color channels also needs to match with the library settings. By default, LVGL assumes <code style="color: #bb0000;">RGB</code> order, however this can be swapped by setting <code style="color: #bb0000;">LV_SUBPX_BGR 1</code> in ''lv_conf.h''. | + | |
+ | Subpixel rendering works only if the color channels of the pixels have a horizontal layout. | ||
+ | |||
+ | That is the R, G, B channels are next each other and not above each other. | ||
+ | |||
+ | |||
+ | The order of color channels also needs to match with the library settings. By default, LVGL assumes <code style="color: #bb0000;">RGB</code> order, however this can be swapped by setting <code style="color: #bb0000;">LV_SUBPX_BGR 1</code> in ''lv_conf.h''. | ||
| | | | ||
|} | |} | ||
208行目: | 248行目: | ||
* not passing the <code style="color: #bb0000;">--no-compress</code> flag to the offline converter (compression is applied by default) | * not passing the <code style="color: #bb0000;">--no-compress</code> flag to the offline converter (compression is applied by default) | ||
− | Compression is more effective with larger fonts and higher bpp. However, it's about 30% slower to render compressed fonts. Therefore it's recommended to compress only the largest fonts of a user interface, because | + | |
+ | Compression is more effective with larger fonts and higher bpp. | ||
+ | |||
+ | However, it's about 30% slower to render compressed fonts. | ||
+ | |||
+ | |||
+ | Therefore it's recommended to compress only the largest fonts of a user interface, because | ||
* they need the most memory | * they need the most memory | ||
252行目: | 298行目: | ||
# Convert the font and copy the generated source code to your project. Make sure to compile the .c file of your font. | # Convert the font and copy the generated source code to your project. Make sure to compile the .c file of your font. | ||
# Declare the font using <code style="color: #bb0000;">extern lv_font_t my_font_name;</code> or simply use <code style="color: #bb0000;">LV_FONT_DECLARE(my_font_name);</code>. | # Declare the font using <code style="color: #bb0000;">extern lv_font_t my_font_name;</code> or simply use <code style="color: #bb0000;">LV_FONT_DECLARE(my_font_name);</code>. | ||
+ | |||
Using the symbol | Using the symbol | ||
258行目: | 305行目: | ||
# Create a <code style="color: #bb0000;">define</code> string from the UTF8 values: <code style="color: #bb0000;">#define MY_USB_SYMBOL "\xEF\x8A\x87"</code> | # Create a <code style="color: #bb0000;">define</code> string from the UTF8 values: <code style="color: #bb0000;">#define MY_USB_SYMBOL "\xEF\x8A\x87"</code> | ||
# Create a label and set the text. Eg. <code style="color: #bb0000;">lv_label_set_text(label, MY_USB_SYMBOL)</code> | # Create a label and set the text. Eg. <code style="color: #bb0000;">lv_label_set_text(label, MY_USB_SYMBOL)</code> | ||
+ | |||
+ | |||
+ | Note - <code style="color: #bb0000;">lv_label_set_text(label, MY_USB_SYMBOL)</code> searches for this symbol in the font defined in <code style="color: #bb0000;">style.text.font</code> properties. To use the symbol you may need to change it. Eg <code style="color: #bb0000;">style.text.font = my_font_name</code> | ||
+ | |内蔵のシンボルは、FontAwesomeフォントから作成されています。 | ||
+ | |||
+ | # <nowiki>https://fontawesome.com</nowiki> でシンボルを検索してください。例えば、USBシンボル。そのユニコードID(この場合<code style="color: #bb0000;">0xf287</code> )をコピーします。 | ||
+ | # オンラインフォントコンバータを開きます。FontAwesome.woffを追加します。. . | ||
+ | # 名前、サイズ、BPPなどのパラメータを設定します。この名前を使って、コード内でフォントを宣言し、使用することになります。 | ||
+ | # 範囲フィールドにシンボルのユニコードIDを追加します。例:USBシンボルには<code style="color: #bb0000;">0xf287</code>。より多くのシンボルを "<code style="color: #bb0000;">,</code>"で列挙することができます。 | ||
+ | # フォントを変換し、生成されたソースコードをプロジェクトにコピーします。フォントの .c ファイルは必ずコンパイルしてください。 | ||
+ | # extern<code style="color: #bb0000;">extern lv_font_t my_font_name;</code>または単に <code style="color: #bb0000;">LV_FONT_DECLARE(my_font_name);</code> を使ってフォントを宣言してください。 | ||
+ | |||
+ | |||
+ | Using the symbol | ||
+ | |||
+ | # Convert the Unicode value to UTF8, for example on this site. For <code style="color: #bb0000;">0xf287</code> the ''Hex UTF-8 bytes'' are <code style="color: #bb0000;">EF 8A 87</code>. | ||
+ | # Create a <code style="color: #bb0000;">define</code> string from the UTF8 values: <code style="color: #bb0000;">#define MY_USB_SYMBOL "\xEF\x8A\x87"</code> | ||
+ | # Create a label and set the text. Eg. <code style="color: #bb0000;">lv_label_set_text(label, MY_USB_SYMBOL)</code> | ||
+ | |||
Note - <code style="color: #bb0000;">lv_label_set_text(label, MY_USB_SYMBOL)</code> searches for this symbol in the font defined in <code style="color: #bb0000;">style.text.font</code> properties. To use the symbol you may need to change it. Eg <code style="color: #bb0000;">style.text.font = my_font_name</code> | Note - <code style="color: #bb0000;">lv_label_set_text(label, MY_USB_SYMBOL)</code> searches for this symbol in the font defined in <code style="color: #bb0000;">style.text.font</code> properties. To use the symbol you may need to change it. Eg <code style="color: #bb0000;">style.text.font = my_font_name</code> | ||
− | |||
|} | |} | ||
:[[App:Library:LVGL:docs:Overview|戻る : Previous]] | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | ||
271行目: | 336行目: | ||
|- | |- | ||
| | | | ||
− | <code style="color: #bb0000;">lv_font_load</code> can be used to load a font from a file. The font needs to have a special binary format. (Not TTF or WOFF). Use lv_font_conv with the <code style="color: #bb0000;">--format bin</code> option to generate an LVGL compatible font file. | + | <code style="color: #bb0000;">lv_font_load</code> can be used to load a font from a file. |
+ | |||
+ | The font needs to have a special binary format. (Not TTF or WOFF). | ||
+ | |||
+ | Use lv_font_conv with the <code style="color: #bb0000;">--format bin</code> option to generate an LVGL compatible font file. | ||
Note that to load a font LVGL's filesystem needs to be enabled and a driver must be added. | Note that to load a font LVGL's filesystem needs to be enabled and a driver must be added. | ||
285行目: | 354行目: | ||
lv_font_free(my_font); | lv_font_free(my_font); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | | | + | |<code style="color: #bb0000;">lv_font_load</code>は、ファイルからフォントを読み込むために使用できます。 |
+ | |||
+ | フォントは、特別なバイナリ形式である必要があります。(TTFやWOFFではありません)。 | ||
+ | |||
+ | LVGL互換のフォントファイルを生成するには、 lv_font_conv に<code style="color: #bb0000;">--format bin</code> オプションをつけます。 | ||
+ | |||
+ | フォントをロードするには、LVGLのファイルシステムを有効にし、ドライバを追加する必要があることに注意してください。 | ||
+ | |||
+ | 使用例<syntaxhighlight lang="C++" style="border:1px dashed gray;"> | ||
+ | lv_font_t * my_font; | ||
+ | my_font = lv_font_load(X/path/to/my_font.bin); | ||
+ | |||
+ | /*Use the font*/ | ||
+ | |||
+ | /*Free the font if not required anymore*/ | ||
+ | lv_font_free(my_font); | ||
+ | </syntaxhighlight> | ||
|} | |} | ||
:[[App:Library:LVGL:docs:Overview|戻る : Previous]] | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | ||
296行目: | 381行目: | ||
|- | |- | ||
| | | | ||
− | LVGL's font interface is designed to be very flexible but, even so, you can add your own font engine in place of LVGL's internal one. For example, you can use FreeType to real-time render glyphs from TTF fonts or use an external flash to store the font's bitmap and read them when the library needs them. | + | LVGL's font interface is designed to be very flexible but, even so, you can add your own font engine in place of LVGL's internal one. |
+ | |||
+ | For example, you can use FreeType to real-time render glyphs from TTF fonts or use an external flash to store the font's bitmap and read them when the library needs them. | ||
A ready to use FreeType can be found in lv_freetype repository. | A ready to use FreeType can be found in lv_freetype repository. | ||
345行目: | 432行目: | ||
return bitmap; /*Or NULL if not found*/ | return bitmap; /*Or NULL if not found*/ | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | | | + | |LVGLのフォント・インターフェースは非常に柔軟に設計されていますが、それでも、LVGLの内部エンジンの代わりに、独自のフォント・エンジンを追加することができます。 |
+ | |||
+ | たとえば、FreeTypeを使ってTTFフォントからグリフをリアルタイムにレンダリングしたり、外部フラッシュを使ってフォントのビットマップを保存し、ライブラリが必要とするときにそれを読み込むことができます。 | ||
+ | |||
+ | すぐに使える FreeType は lv_freetype リポジトリで見つけることができます。 | ||
+ | |||
+ | これを行うには、カスタム <code style="color: #bb0000;">lv_font_t</code>変数を作成する必要があります。 | ||
+ | |||
+ | <syntaxhighlight lang="C++" style="border:1px dashed gray;"> | ||
+ | /*Describe the properties of a font*/ | ||
+ | lv_font_t my_font; | ||
+ | my_font.get_glyph_dsc = my_get_glyph_dsc_cb; /*Set a callback to get info about gylphs*/ | ||
+ | my_font.get_glyph_bitmap = my_get_glyph_bitmap_cb; /*Set a callback to get bitmap of a glyp*/ | ||
+ | my_font.line_height = height; /*The real line height where any text fits*/ | ||
+ | my_font.base_line = base_line; /*Base line measured from the top of line_height*/ | ||
+ | my_font.dsc = something_required; /*Store any implementation specific data here*/ | ||
+ | my_font.user_data = user_data; /*Optionally some extra user data*/ | ||
+ | |||
+ | ... | ||
+ | |||
+ | /* Get info about glyph of `unicode_letter` in `font` font. | ||
+ | * Store the result in `dsc_out`. | ||
+ | * The next letter (`unicode_letter_next`) might be used to calculate the width required by this glyph (kerning) | ||
+ | */ | ||
+ | bool my_get_glyph_dsc_cb(const lv_font_t * font, lv_font_glyph_dsc_t * dsc_out, uint32_t unicode_letter, uint32_t unicode_letter_next) | ||
+ | { | ||
+ | /*Your code here*/ | ||
+ | |||
+ | /* Store the result. | ||
+ | * For example ... | ||
+ | */ | ||
+ | dsc_out->adv_w = 12; /*Horizontal space required by the glyph in [px]*/ | ||
+ | dsc_out->box_h = 8; /*Height of the bitmap in [px]*/ | ||
+ | dsc_out->box_w = 6; /*Width of the bitmap in [px]*/ | ||
+ | dsc_out->ofs_x = 0; /*X offset of the bitmap in [pf]*/ | ||
+ | dsc_out->ofs_y = 3; /*Y offset of the bitmap measured from the as line*/ | ||
+ | dsc_out->bpp = 2; /*Bits per pixel: 1/2/4/8*/ | ||
+ | |||
+ | return true; /*true: glyph found; false: glyph was not found*/ | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Get the bitmap of `unicode_letter` from `font`. */ | ||
+ | const uint8_t * my_get_glyph_bitmap_cb(const lv_font_t * font, uint32_t unicode_letter) | ||
+ | { | ||
+ | /* Your code here */ | ||
+ | |||
+ | /* The bitmap should be a continuous bitstream where | ||
+ | * each pixel is represented by `bpp` bits */ | ||
+ | |||
+ | return bitmap; /*Or NULL if not found*/ | ||
+ | </syntaxhighlight> | ||
|} | |} | ||
355行目: | 493行目: | ||
|- | |- | ||
| | | | ||
− | You can specify <code style="color: #bb0000;">fallback</code> in <code style="color: #bb0000;">lv_font_t</code> to provide fallback to the font. When the font fails to find glyph to a letter, it will try to let font from <code style="color: #bb0000;">fallback</code> to handle. | + | You can specify <code style="color: #bb0000;">fallback</code> in <code style="color: #bb0000;">lv_font_t</code> to provide fallback to the font. |
+ | |||
+ | When the font fails to find glyph to a letter, it will try to let font from <code style="color: #bb0000;">fallback</code> to handle. | ||
+ | |||
368行目: | 509行目: | ||
roboto->fallback = droid_sans_fallback; | roboto->fallback = droid_sans_fallback; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | | | + | |<code style="color: #bb0000;">lv_font_t</code> で <code style="color: #bb0000;">fallback</code>を指定すると、フォントにフォールバックを提供することができます。 |
+ | |||
+ | フォントが文字に対するグリフを見つけられなかったとき、fallbackからフォントに処理をさせようとします。 | ||
+ | <code style="color: #bb0000;">fallback</code>can be chained, so it will try to solve until there is no <code style="color: #bb0000;">fallback</code>set.<syntaxhighlight lang="C++" style="border:1px dashed gray;"> | ||
+ | |||
+ | /* Roboto font doesn't have support for CJK glyphs */ | ||
+ | lv_font_t *roboto = my_font_load_function(); | ||
+ | /* Droid Sans Fallback has more glyphs but its typeface doesn't look good as Roboto */ | ||
+ | lv_font_t *droid_sans_fallback = my_font_load_function(); | ||
+ | /* So now we can display Roboto for supported characters while having wider characters set support */ | ||
+ | roboto->fallback = droid_sans_fallback; | ||
+ | </syntaxhighlight> | ||
|} | |} | ||
2022年7月1日 (金) 14:14時点における版
https://docs.lvgl.io/8.2/overview/font.html
Fonts
英文 | 自動翻訳 |
---|---|
In LVGL fonts are collections of bitmaps and other information required to render images of individual letters (glyph). A font is stored in a lv_style_set_text_font(&my_style, &lv_font_montserrat_28); /*Set a larger font*/
Fonts have a bpp (bits per pixel) property. It shows how many bits are used to describe a pixel in a font. The value stored for a pixel determines the pixel's opacity. This way, with higher bpp, the edges of the letter can be smoother.
The bpp property also affects the amount of memory needed to store a font. For example, bpp = 4 makes a font nearly four times larger compared to bpp = 1. |
Unicode support
英文 | 自動翻訳 |
---|---|
LVGL supports UTF-8 encoded Unicode characters. Your editor needs to be configured to save your code/text as UTF-8 (usually this the default) and be sure that, To test it try lv_obj_t * label1 = lv_label_create(lv_scr_act(), NULL);
lv_label_set_text(label1, LV_SYMBOL_OK);
If all works well, a ✓ character should be displayed. |
Built-in fonts
英文 | 自動翻訳 |
---|---|
There are several built-in fonts in different sizes, which can be enabled in |
Normal fonts
英文 | 自動翻訳 |
---|---|
Containing all the ASCII characters, the degree symbol (U+00B0), the bullet symbol (U+2022) and the built-in symbols (see below).
|
Special fonts
英文 | 自動翻訳 |
---|---|
The built-in fonts with bpp = 4 contain the ASCII characters and use the Montserrat font. In addition to the ASCII range, the following symbols are also added to the built-in fonts from the FontAwesome font. The symbols can be used singly as: lv_label_set_text(my_label, LV_SYMBOL_OK);
Or with together with strings (compile time string concatenation): lv_label_set_text(my_label, LV_SYMBOL_OK "Apply");
Or more symbols together: lv_label_set_text(my_label, LV_SYMBOL_OK LV_SYMBOL_WIFI LV_SYMBOL_PLAY);
|
Special features
Bidirectional support
英文 | 自動翻訳 |
---|---|
Most languages use a Left-to-Right (LTR for short) writing direction, however some languages (such as Hebrew, Persian or Arabic) use Right-to-Left (RTL for short) direction.
Some examples: BiDi support is enabled by
It's a general property which can be set for every object. If not set then it will be inherited from the parent. This means it's enough to set the base direction of a screen and every object will inherit it. The default base direction for screens can be set by To set an object's base direction use
|
Arabic and Persian support
英文 | 自動翻訳 |
---|---|
There are some special rules to display Arabic and Persian characters: the form of a character depends on its position in the text. A different form of the same letter needs to be used if is isolated, at start, middle or end positions. Besides these, some conjunction rules should also be taken into account. LVGL supports these rules if However, there some limitations:
|
Subpixel rendering
英文 | 自動翻訳 |
---|---|
Subpixel rendering allows for tripling the horizontal resolution by rendering anti-aliased edges on Red, Green and Blue channels instead of at pixel level granularity. This takes advantage of the position of physical color channels of each pixel, resulting in higher quality letter anti-aliasing. Learn more here. For subpixel rendering, the fonts need to be generated with special settings:
That is the R, G, B channels are next each other and not above each other.
|
Compressed fonts
英文 | 自動翻訳 |
---|---|
The bitmaps of fonts can be compressed by
However, it's about 30% slower to render compressed fonts.
|
Add a new font
英文 | 自動翻訳 |
---|---|
There are several ways to add a new font to your project:
To declare a font in a file, use To make fonts globally available (like the builtin fonts), add them to |
Add new symbols
英文 | 自動翻訳 |
---|---|
The built-in symbols are created from the FontAwesome font.
|
内蔵のシンボルは、FontAwesomeフォントから作成されています。
|
Load a font at run-time
英文 | 自動翻訳 |
---|---|
The font needs to have a special binary format. (Not TTF or WOFF). Use lv_font_conv with the Note that to load a font LVGL's filesystem needs to be enabled and a driver must be added. Example lv_font_t * my_font;
my_font = lv_font_load(X/path/to/my_font.bin);
/*Use the font*/
/*Free the font if not required anymore*/
lv_font_free(my_font);
|
lv_font_load は、ファイルからフォントを読み込むために使用できます。
フォントは、特別なバイナリ形式である必要があります。(TTFやWOFFではありません)。 LVGL互換のフォントファイルを生成するには、 lv_font_conv に フォントをロードするには、LVGLのファイルシステムを有効にし、ドライバを追加する必要があることに注意してください。 使用例 lv_font_t * my_font;
my_font = lv_font_load(X/path/to/my_font.bin);
/*Use the font*/
/*Free the font if not required anymore*/
lv_font_free(my_font);
|
Add a new font engine
英文 | 自動翻訳 |
---|---|
LVGL's font interface is designed to be very flexible but, even so, you can add your own font engine in place of LVGL's internal one. For example, you can use FreeType to real-time render glyphs from TTF fonts or use an external flash to store the font's bitmap and read them when the library needs them. A ready to use FreeType can be found in lv_freetype repository. To do this, a custom /*Describe the properties of a font*/
lv_font_t my_font;
my_font.get_glyph_dsc = my_get_glyph_dsc_cb; /*Set a callback to get info about gylphs*/
my_font.get_glyph_bitmap = my_get_glyph_bitmap_cb; /*Set a callback to get bitmap of a glyp*/
my_font.line_height = height; /*The real line height where any text fits*/
my_font.base_line = base_line; /*Base line measured from the top of line_height*/
my_font.dsc = something_required; /*Store any implementation specific data here*/
my_font.user_data = user_data; /*Optionally some extra user data*/
...
/* Get info about glyph of `unicode_letter` in `font` font.
* Store the result in `dsc_out`.
* The next letter (`unicode_letter_next`) might be used to calculate the width required by this glyph (kerning)
*/
bool my_get_glyph_dsc_cb(const lv_font_t * font, lv_font_glyph_dsc_t * dsc_out, uint32_t unicode_letter, uint32_t unicode_letter_next)
{
/*Your code here*/
/* Store the result.
* For example ...
*/
dsc_out->adv_w = 12; /*Horizontal space required by the glyph in [px]*/
dsc_out->box_h = 8; /*Height of the bitmap in [px]*/
dsc_out->box_w = 6; /*Width of the bitmap in [px]*/
dsc_out->ofs_x = 0; /*X offset of the bitmap in [pf]*/
dsc_out->ofs_y = 3; /*Y offset of the bitmap measured from the as line*/
dsc_out->bpp = 2; /*Bits per pixel: 1/2/4/8*/
return true; /*true: glyph found; false: glyph was not found*/
}
/* Get the bitmap of `unicode_letter` from `font`. */
const uint8_t * my_get_glyph_bitmap_cb(const lv_font_t * font, uint32_t unicode_letter)
{
/* Your code here */
/* The bitmap should be a continuous bitstream where
* each pixel is represented by `bpp` bits */
return bitmap; /*Or NULL if not found*/
|
LVGLのフォント・インターフェースは非常に柔軟に設計されていますが、それでも、LVGLの内部エンジンの代わりに、独自のフォント・エンジンを追加することができます。
たとえば、FreeTypeを使ってTTFフォントからグリフをリアルタイムにレンダリングしたり、外部フラッシュを使ってフォントのビットマップを保存し、ライブラリが必要とするときにそれを読み込むことができます。 すぐに使える FreeType は lv_freetype リポジトリで見つけることができます。 これを行うには、カスタム /*Describe the properties of a font*/
lv_font_t my_font;
my_font.get_glyph_dsc = my_get_glyph_dsc_cb; /*Set a callback to get info about gylphs*/
my_font.get_glyph_bitmap = my_get_glyph_bitmap_cb; /*Set a callback to get bitmap of a glyp*/
my_font.line_height = height; /*The real line height where any text fits*/
my_font.base_line = base_line; /*Base line measured from the top of line_height*/
my_font.dsc = something_required; /*Store any implementation specific data here*/
my_font.user_data = user_data; /*Optionally some extra user data*/
...
/* Get info about glyph of `unicode_letter` in `font` font.
* Store the result in `dsc_out`.
* The next letter (`unicode_letter_next`) might be used to calculate the width required by this glyph (kerning)
*/
bool my_get_glyph_dsc_cb(const lv_font_t * font, lv_font_glyph_dsc_t * dsc_out, uint32_t unicode_letter, uint32_t unicode_letter_next)
{
/*Your code here*/
/* Store the result.
* For example ...
*/
dsc_out->adv_w = 12; /*Horizontal space required by the glyph in [px]*/
dsc_out->box_h = 8; /*Height of the bitmap in [px]*/
dsc_out->box_w = 6; /*Width of the bitmap in [px]*/
dsc_out->ofs_x = 0; /*X offset of the bitmap in [pf]*/
dsc_out->ofs_y = 3; /*Y offset of the bitmap measured from the as line*/
dsc_out->bpp = 2; /*Bits per pixel: 1/2/4/8*/
return true; /*true: glyph found; false: glyph was not found*/
}
/* Get the bitmap of `unicode_letter` from `font`. */
const uint8_t * my_get_glyph_bitmap_cb(const lv_font_t * font, uint32_t unicode_letter)
{
/* Your code here */
/* The bitmap should be a continuous bitstream where
* each pixel is represented by `bpp` bits */
return bitmap; /*Or NULL if not found*/
|
Use font fallback
英文 | 自動翻訳 |
---|---|
You can specify When the font fails to find glyph to a letter, it will try to let font from
/* Roboto font doesn't have support for CJK glyphs */
lv_font_t *roboto = my_font_load_function();
/* Droid Sans Fallback has more glyphs but its typeface doesn't look good as Roboto */
lv_font_t *droid_sans_fallback = my_font_load_function();
/* So now we can display Roboto for supported characters while having wider characters set support */
roboto->fallback = droid_sans_fallback;
|
lv_font_t で fallback を指定すると、フォントにフォールバックを提供することができます。
フォントが文字に対するグリフを見つけられなかったとき、fallbackからフォントに処理をさせようとします。 fallback can be chained, so it will try to solve until there is no fallback set. /* Roboto font doesn't have support for CJK glyphs */
lv_font_t *roboto = my_font_load_function();
/* Droid Sans Fallback has more glyphs but its typeface doesn't look good as Roboto */
lv_font_t *droid_sans_fallback = my_font_load_function();
/* So now we can display Roboto for supported characters while having wider characters set support */
roboto->fallback = droid_sans_fallback;
|