「App:Library:LVGL:docs:Overview:Fonts」の版間の差分

提供: robot-jp wiki
ナビゲーションに移動検索に移動
 
(同じ利用者による、間の6版が非表示)
1行目: 1行目:
https://docs.lvgl.io/8.2/overview/style.html
+
https://docs.lvgl.io/8.2/overview/font.html
 
__NOTOC__
 
__NOTOC__
 +
= Fonts =
 
{| class="wikitable"
 
{| class="wikitable"
 
!英文
 
!英文
6行目: 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:
 +
<syntaxhighlight lang="C++" style="border:1px dashed gray;">
 +
lv_style_set_text_font(&my_style, &lv_font_montserrat_28);  /*Set a larger font*/
 +
</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).
 +
 
 +
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''.
 +
|LVGLでは、フォントは個々の文字(グリフ)の画像を描画するために必要なビットマップやその他の情報の集合体です。
  
 +
フォントは、<code style="color: #bb0000;">lv_font_t</code>変数に格納され、スタイルのtext_fontフィールドに設定することができます。
  
= Fonts =
+
例えば<syntaxhighlight lang="C++" style="border:1px dashed gray;">
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>lv_font_t</code> variable and can be set in a style's ''text_font'' field. For example:
 
 
  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*/
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).
+
</syntaxhighlight>
 +
フォントには、bpp(bits per pixel)プロパティがあります。
 +
 
 +
これは、フォント内のピクセルを記述するために、何ビットが使用されるかを示しています。ピクセルに格納されている値によって、そのピクセルの不透明度が決まります。
 +
 
 +
このように、bppを高くすると、文字のエッジをより滑らかにすることができます。
 +
 
 +
使用可能なbpp値は、1、2、4、8です(値が高いほど品質が高いことを意味します)。
 +
 
 +
bppプロパティは、フォントを保存するために必要なメモリ量にも影響します。
 +
 
 +
たとえば、bpp = 4は、bpp = 1に比べて、フォントのサイズが約4倍になります。
 +
|}
 +
:[[App:Library:LVGL:docs:Overview#Fonts|戻る : Previous]]
  
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 ==
 
== 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, <code>LV_TXT_ENC</code> is set to <code>LV_TXT_ENC_UTF8</code> in ''lv_conf.h''. (This is the default value)
+
{| class="wikitable"
 +
!英文
 +
!自動翻訳
 +
|-
 +
|
 +
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 <code style="color: #bb0000;">''lv_conf.h''</code>. (This is the default value)
  
 
To test it try
 
To test it try
 +
<syntaxhighlight lang="C++" style="border:1px dashed gray;">
 
  lv_obj_t * label1 = lv_label_create(lv_scr_act(), NULL);
 
  lv_obj_t * label1 = lv_label_create(lv_scr_act(), NULL);
 
  lv_label_set_text(label1, LV_SYMBOL_OK);
 
  lv_label_set_text(label1, LV_SYMBOL_OK);
 +
</syntaxhighlight>
 
If all works well, a ✓ character should be displayed.
 
If all works well, a ✓ character should be displayed.
 +
|LVGLはUTF-8でエンコードされたユニコード文字をサポートしています。
 +
 +
また、<code style="color: #bb0000;">LV_TXT_ENC</code>が<code style="color: #bb0000;">lv_conf.h</code>で<code style="color: #bb0000;">LV_TXT_ENC_UTF8</code>に設定されていることを確認してください(これはデフォルトの値です)。
 +
 +
テストするために、以下を試してみてください。<syntaxhighlight lang="C++" style="border:1px dashed gray;">
 +
lv_obj_t * label1 = lv_label_create(lv_scr_act(), NULL);
 +
lv_label_set_text(label1, LV_SYMBOL_OK);
 +
</syntaxhighlight>
 +
うまくいけば、✓が表示されるはずです。
 +
|}
 +
:[[App:Library:LVGL:docs:Overview#Fonts|戻る : Previous]]
 +
  
 
== Built-in fonts ==
 
== Built-in fonts ==
There are several built-in fonts in different sizes, which can be enabled in <code>lv_conf.h</code> with ''LV_FONT_...'' defines.
+
{| class="wikitable"
 +
!英文
 +
!自動翻訳
 +
|-
 +
|
 +
There are several built-in fonts in different sizes, which can be enabled in <code style="color: #bb0000;">lv_conf.h</code> with ''LV_FONT_...'' defines.
 +
|サイズの異なるいくつかの組み込みフォントがあり、<code style="color: #bb0000;">lv_conf.h</code> の LV_FONT_... の定義で有効にすることができます。
 +
|}
 +
:[[App:Library:LVGL:docs:Overview#Fonts|戻る : Previous]]
 +
 
  
 
=== Normal fonts ===
 
=== Normal fonts ===
 +
{| class="wikitable"
 +
!英文
 +
!自動翻訳
 +
|-
 +
|
 
Containing all the ASCII characters, the degree symbol (U+00B0), the bullet symbol (U+2022) and the built-in symbols (see below).
 
Containing all the ASCII characters, the degree symbol (U+00B0), the bullet symbol (U+2022) and the built-in symbols (see below).
  
* <code>LV_FONT_MONTSERRAT_12</code> 12 px font
+
* <code style="color: #bb0000;">LV_FONT_MONTSERRAT_12</code> 12 px font
* <code>LV_FONT_MONTSERRAT_14</code> 14 px font
+
* <code style="color: #bb0000;">LV_FONT_MONTSERRAT_14</code> 14 px font
* <code>LV_FONT_MONTSERRAT_16</code> 16 px font
+
* <code style="color: #bb0000;">LV_FONT_MONTSERRAT_16</code> 16 px font
* <code>LV_FONT_MONTSERRAT_18</code> 18 px font
+
* <code style="color: #bb0000;">LV_FONT_MONTSERRAT_18</code> 18 px font
* <code>LV_FONT_MONTSERRAT_20</code> 20 px font
+
* <code style="color: #bb0000;">LV_FONT_MONTSERRAT_20</code> 20 px font
* <code>LV_FONT_MONTSERRAT_22</code> 22 px font
+
* <code style="color: #bb0000;">LV_FONT_MONTSERRAT_22</code> 22 px font
* <code>LV_FONT_MONTSERRAT_24</code> 24 px font
+
* <code style="color: #bb0000;">LV_FONT_MONTSERRAT_24</code> 24 px font
* <code>LV_FONT_MONTSERRAT_26</code> 26 px font
+
* <code style="color: #bb0000;">LV_FONT_MONTSERRAT_26</code> 26 px font
* <code>LV_FONT_MONTSERRAT_28</code> 28 px font
+
* <code style="color: #bb0000;">LV_FONT_MONTSERRAT_28</code> 28 px font
* <code>LV_FONT_MONTSERRAT_30</code> 30 px font
+
* <code style="color: #bb0000;">LV_FONT_MONTSERRAT_30</code> 30 px font
* <code>LV_FONT_MONTSERRAT_32</code> 32 px font
+
* <code style="color: #bb0000;">LV_FONT_MONTSERRAT_32</code> 32 px font
* <code>LV_FONT_MONTSERRAT_34</code> 34 px font
+
* <code style="color: #bb0000;">LV_FONT_MONTSERRAT_34</code> 34 px font
* <code>LV_FONT_MONTSERRAT_36</code> 36 px font
+
* <code style="color: #bb0000;">LV_FONT_MONTSERRAT_36</code> 36 px font
* <code>LV_FONT_MONTSERRAT_38</code> 38 px font
+
* <code style="color: #bb0000;">LV_FONT_MONTSERRAT_38</code> 38 px font
* <code>LV_FONT_MONTSERRAT_40</code> 40 px font
+
* <code style="color: #bb0000;">LV_FONT_MONTSERRAT_40</code> 40 px font
* <code>LV_FONT_MONTSERRAT_42</code> 42 px font
+
* <code style="color: #bb0000;">LV_FONT_MONTSERRAT_42</code> 42 px font
* <code>LV_FONT_MONTSERRAT_44</code> 44 px font
+
* <code style="color: #bb0000;">LV_FONT_MONTSERRAT_44</code> 44 px font
* <code>LV_FONT_MONTSERRAT_46</code> 46 px font
+
* <code style="color: #bb0000;">LV_FONT_MONTSERRAT_46</code> 46 px font
* <code>LV_FONT_MONTSERRAT_48</code> 48 px font
+
* <code style="color: #bb0000;">LV_FONT_MONTSERRAT_48</code> 48 px font
 +
|すべての ASCII 文字,学位記号(U+00B0),ビュレット記号(U+2022)および組み込み記号(下記参照)を 含む。
 +
 
 +
*<code style="color: #bb0000;">LV_FONT_MONTSERRAT_12</code> 12 px font
 +
*<code style="color: #bb0000;">LV_FONT_MONTSERRAT_14</code> 14 px font
 +
*<code style="color: #bb0000;">LV_FONT_MONTSERRAT_16</code> 16 px font
 +
*<code style="color: #bb0000;">LV_FONT_MONTSERRAT_18</code> 18 px font
 +
*<code style="color: #bb0000;">LV_FONT_MONTSERRAT_20</code> 20 px font
 +
*<code style="color: #bb0000;">LV_FONT_MONTSERRAT_22</code> 22 px font
 +
*<code style="color: #bb0000;">LV_FONT_MONTSERRAT_24</code> 24 px font
 +
*<code style="color: #bb0000;">LV_FONT_MONTSERRAT_26</code> 26 px font
 +
*<code style="color: #bb0000;">LV_FONT_MONTSERRAT_28</code> 28 px font
 +
*<code style="color: #bb0000;">LV_FONT_MONTSERRAT_30</code> 30 px font
 +
*<code style="color: #bb0000;">LV_FONT_MONTSERRAT_32</code> 32 px font
 +
*<code style="color: #bb0000;">LV_FONT_MONTSERRAT_34</code> 34 px font
 +
*<code style="color: #bb0000;">LV_FONT_MONTSERRAT_36</code> 36 px font
 +
*<code style="color: #bb0000;">LV_FONT_MONTSERRAT_38</code> 38 px font
 +
*<code style="color: #bb0000;">LV_FONT_MONTSERRAT_40</code> 40 px font
 +
*<code style="color: #bb0000;">LV_FONT_MONTSERRAT_42</code> 42 px font
 +
*<code style="color: #bb0000;">LV_FONT_MONTSERRAT_44</code> 44 px font
 +
*<code style="color: #bb0000;">LV_FONT_MONTSERRAT_46</code> 46 px font
 +
*<code style="color: #bb0000;">LV_FONT_MONTSERRAT_48</code> 48 px font
 +
|}
 +
:[[App:Library:LVGL:docs:Overview#Fonts|戻る : Previous]]
 +
 
  
 
=== Special fonts ===
 
=== Special fonts ===
 +
{| class="wikitable"
 +
!英文
 +
!自動翻訳
 +
|-
 +
|
 +
* <code style="color: #bb0000;">LV_FONT_MONTSERRAT_12_SUBPX</code> Same as normal 12 px font but with subpixel rendering
 +
* <code style="color: #bb0000;">LV_FONT_MONTSERRAT_28_COMPRESSED</code> Same as normal 28 px font but stored as a compressed font with 3 bpp
 +
* <code style="color: #bb0000;">LV_FONT_DEJAVU_16_PERSIAN_HEBREW</code> 16 px font with normal range + Hebrew, Arabic, Persian letters and all their forms
 +
* <code style="color: #bb0000;">LV_FONT_SIMSUN_16_CJK</code>16 px font with normal range plus 1000 of the most common CJK radicals
 +
* <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>LV_FONT_MONTSERRAT_12_SUBPX</code> Same as normal 12 px font but with subpixel rendering
 
* <code>LV_FONT_MONTSERRAT_28_COMPRESSED</code> Same as normal 28 px font but stored as a compressed font with 3 bpp
 
* <code>LV_FONT_DEJAVU_16_PERSIAN_HEBREW</code> 16 px font with normal range + Hebrew, Arabic, Persian letters and all their forms
 
* <code>LV_FONT_SIMSUN_16_CJK</code>16 px font with normal range plus 1000 of the most common CJK radicals
 
* <code>LV_FONT_UNSCII_8</code> 8 px pixel perfect font with only ASCII characters
 
* <code>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>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.
  
 
The built-in fonts with ''bpp = 4'' contain the ASCII characters and use the Montserrat font.
 
The built-in fonts with ''bpp = 4'' contain the ASCII characters and use the Montserrat font.
68行目: 165行目:
  
 
The symbols can be used singly as:
 
The symbols can be used singly as:
 +
<syntaxhighlight lang="C++" style="border:1px dashed gray;">
 
  lv_label_set_text(my_label, LV_SYMBOL_OK);
 
  lv_label_set_text(my_label, LV_SYMBOL_OK);
 +
</syntaxhighlight>
 
Or with together with strings (compile time string concatenation):
 
Or with together with strings (compile time string concatenation):
 +
<syntaxhighlight lang="C++" style="border:1px dashed gray;">
 
  lv_label_set_text(my_label, LV_SYMBOL_OK "Apply");
 
  lv_label_set_text(my_label, LV_SYMBOL_OK "Apply");
 +
</syntaxhighlight>
 
Or more symbols together:
 
Or more symbols together:
 +
<syntaxhighlight lang="C++" style="border:1px dashed gray;">
 
  lv_label_set_text(my_label, LV_SYMBOL_OK LV_SYMBOL_WIFI LV_SYMBOL_PLAY);
 
  lv_label_set_text(my_label, LV_SYMBOL_OK LV_SYMBOL_WIFI LV_SYMBOL_PLAY);
 +
</syntaxhighlight>
 +
|
 +
*<code style="color: #bb0000;">LV_FONT_MONTSERRAT_12_SUBPX</code> 通常の 12 px フォントと同じだが、サブピクセルレンダリングを行う。
 +
*<code style="color: #bb0000;">LV_FONT_MONTSERRAT_28_COMPRESSED</code> 通常の 28 px フォントと同じですが、3 bpp の圧縮フォントとして保存されます。
 +
*<code style="color: #bb0000;">LV_FONT_DEJAVU_16_PERSIAN_HEBREW</code> 16 px フォントの通常の範囲にヘブライ語、アラビア語、ペルシャ語の文字とそのすべての形式を追加したもの。
 +
*<code style="color: #bb0000;">LV_FONT_SIMSUN_16_CJK</code>16 px フォント (通常範囲) + 最も一般的な日中韓のラジカル 1000 個
 +
*<code style="color: #bb0000;">LV_FONT_UNSCII_8</code> 8 px のピクセルパーフェクトフォント、ASCII 文字のみ
 +
*<code style="color: #bb0000;">LV_FONT_UNSCII_16</code> 16 px ピクセル パーフェクト フォント、ASCII キャラクタのみ
 +
 +
 +
The symbols can be used singly as:
 +
 +
組み込みフォントはグローバル変数で、高さ16pxのフォントは<code style="color: #bb0000;">lv_font_montserrat_16</code>のような名前になっています。
 +
 +
スタイルでこれらを使用するには、上記のようにフォント変数へのポインタを追加するだけです。
 +
 +
bpp = 4 の組み込みフォントは ASCII 文字を含み、Montserrat フォントを使用します。
 +
 +
ASCIIの範囲に加えて、FontAwesomeフォントから以下の記号がビルトインフォントに追加されています。
 +
 +
これらの記号は、単独で次のように使用することができます。<syntaxhighlight lang="C++" style="border:1px dashed gray;">
 +
lv_label_set_text(my_label, LV_SYMBOL_OK);
 +
</syntaxhighlight>
 +
または、文字列と一緒にwith(コンパイル時の文字列連結)。
 +
<syntaxhighlight lang="C++" style="border:1px dashed gray;">
 +
lv_label_set_text(my_label, LV_SYMBOL_OK "Apply");
 +
</syntaxhighlight>
 +
あるいはもっと多くのシンボルを一緒に。
 +
<syntaxhighlight lang="C++" style="border:1px dashed gray;">
 +
lv_label_set_text(my_label, LV_SYMBOL_OK LV_SYMBOL_WIFI LV_SYMBOL_PLAY);
 +
</syntaxhighlight>
 +
|}
 +
:[[App:Library:LVGL:docs:Overview#Fonts|戻る : Previous]]
 +
  
 
== Special features ==
 
== Special features ==
 
 
=== Bidirectional support ===
 
=== Bidirectional support ===
 +
{| class="wikitable"
 +
!英文
 +
!自動翻訳
 +
|-
 +
|
 
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:
 
  
BiDi support is enabled by <code>LV_USE_BIDI</code> in ''lv_conf.h''
+
LVGL not only supports RTL texts but supports mixed (a.k.a. bidirectional, BiDi) text rendering too.  
  
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.
+
Some examples:
  
The default base direction for screens can be set by <code>LV_BIDI_BASE_DIR_DEF</code> in ''lv_conf.h'' and other objects inherit the base direction from their parent.
+
BiDi support is enabled by <code style="color: #bb0000;">LV_USE_BIDI</code> in ''lv_conf.h''
  
To set an object's base direction use <code>lv_obj_set_base_dir(obj, base_dir)</code>. The possible base directions are:
 
  
* <code>LV_BIDI_DIR_LTR</code>: Left to Right base direction
+
All texts have a base direction (LTR or RTL) which determines some rendering rules and the default alignment of the text (Left or Right).
* <code>LV_BIDI_DIR_RTL</code>: Right to Left base direction
+
 
* <code>LV_BIDI_DIR_AUTO</code>: Auto detect base direction
+
 
* <code>LV_BIDI_DIR_INHERIT</code>: Inherit base direction from the parent (or a default value for non-screen objects)
+
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.
 +
 
 +
To set an object's base direction use <code style="color: #bb0000;">lv_obj_set_base_dir(obj, base_dir)</code>. The possible base directions are:
 +
 
 +
* <code style="color: #bb0000;">LV_BIDI_DIR_LTR</code>: Left to Right base direction
 +
* <code style="color: #bb0000;">LV_BIDI_DIR_RTL</code>: Right to Left 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)
 +
 
  
 
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
 +
* <code style="color: #bb0000;">lv_tabview</code>: Displays tabs from right to left
 +
* <code style="color: #bb0000;">lv_checkbox</code>: Shows the box on the right
 +
* <code style="color: #bb0000;">lv_btnmatrix</code>: Shows buttons from right to left
 +
* <code style="color: #bb0000;">lv_list</code>: Shows icons on the right
 +
* <code style="color: #bb0000;">lv_dropdown</code>: Aligns options to the right
 +
* The texts in <code style="color: #bb0000;">lv_table</code>, <code style="color: #bb0000;">lv_btnmatrix</code>, <code style="color: #bb0000;">lv_keyboard</code>, <code style="color: #bb0000;">lv_tabview</code>, <code style="color: #bb0000;">lv_dropdown</code>, <code style="color: #bb0000;">lv_roller</code> are "BiDi processed" to be displayed correctly
 +
|多くの言語は左から右へ(LTR)書く方向ですが、いくつかの言語(ヘブライ語、ペルシャ語、アラビア語など)は右から左へ(RTL)書く方向を使用します。
 +
 +
LVGLは、RTLテキストだけでなく、混合テキスト(bidirectional, BiDi)のレンダリングもサポートします。
 +
 +
いくつかの例を挙げます。
 +
 +
BiDiのサポートは、lv_conf.hの<code style="color: #bb0000;">LV_USE_BIDI</code> によって有効化されます。
  
  
 +
すべてのテキストには基本方向(LTRまたはRTL)があり、これによりいくつかのレンダリング規則とテキストのデフォルトの配置(左または右)が決定されます。
 +
 +
 +
しかし、LVGLでは、基本方向はラベルにだけ適用されるわけではありません。
 +
 +
これは一般的なプロパティであり、すべてのオブジェクトに設定することができます。
 +
 +
もし設定されていなければ、それは親から継承されます。
 +
 +
つまり、画面の基本方向を設定するだけで、すべてのオブジェクトにそれが継承されるのです。
 +
 +
 +
スクリーンのデフォルトのベース方向は lv_conf.h の <code style="color: #bb0000;">LV_BIDI_BASE_DIR_DEF</code> で設定でき、他のオブジェクトはその親からベース方向を継承します。
 +
 +
オブジェクトのベース方向を設定するには、 <code style="color: #bb0000;">lv_obj_set_base_dir(obj, base_dir)</code>を使用します。設定可能な基底方向は以下の通りです。
 +
 +
*<code style="color: #bb0000;">LV_BIDI_DIR_LTR</code>: 左から右へのベース方向
 +
*<code style="color: #bb0000;">LV_BIDI_DIR_RTL</code>: 右から左へのベース方向
 +
*<code style="color: #bb0000;">LV_BIDI_DIR_AUTO</code>: ベースの向きを自動検出する
 +
*<code style="color: #bb0000;">LV_BIDI_DIR_INHERIT</code>: 親からベース方向を継承する (スクリーンオブジェクトでない場合はデフォルト値)
 +
 +
 +
このリストは、RTLのベース方向がオブジェクトに与える影響をまとめたものです。
 +
 +
* 右側にデフォルトでオブジェクトを作成する
 +
*<code style="color: #bb0000;">lv_tabview</code>: 右から左へタブを表示する
 +
*<code style="color: #bb0000;">lv_checkbox</code>: 右側にボックスを表示します
 +
*<code style="color: #bb0000;">lv_btnmatrix</code>: 右から左へボタンを表示します
 +
*<code style="color: #bb0000;">lv_list</code>: 右側にアイコンを表示します
 +
*<code style="color: #bb0000;">lv_dropdown</code>: オプションを右に並べて表示します
 +
*<code style="color: #bb0000;">lv_table</code>, <code style="color: #bb0000;">lv_btnmatrix</code>, <code style="color: #bb0000;">lv_keyboard</code>, <code style="color: #bb0000;">lv_tabview</code>, <code style="color: #bb0000;">lv_dropdown</code>, <code style="color: #bb0000;">lv_roller</code> のテキストは "BiDi 処理されているため、正しく表示されるようになります。
 +
|}
 +
:[[App:Library:LVGL:docs:Overview#Fonts|戻る : Previous]]
  
* Create objects by default on the right
 
* <code>lv_tabview</code>: Displays tabs from right to left
 
* <code>lv_checkbox</code>: Shows the box on the right
 
* <code>lv_btnmatrix</code>: Shows buttons from right to left
 
* <code>lv_list</code>: Shows icons on the right
 
* <code>lv_dropdown</code>: Aligns options to the right
 
* The texts in <code>lv_table</code>, <code>lv_btnmatrix</code>, <code>lv_keyboard</code>, <code>lv_tabview</code>, <code>lv_dropdown</code>, <code>lv_roller</code> are "BiDi processed" to be displayed correctly
 
  
 
=== Arabic and Persian support ===
 
=== 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.
+
{| class="wikitable"
 +
!英文
 +
!自動翻訳
 +
|-
 +
|
 +
There are some special rules to display Arabic and Persian characters: the ''form'' of a character depends on its position in the text.
  
LVGL supports these rules if <code>LV_USE_ARABIC_PERSIAN_CHARS</code> is enabled.
+
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.
  
 
However, there some limitations:
 
However, there some limitations:
  
 
* Only displaying text is supported (e.g. on labels), text inputs (e.g. text area) don't support this feature.
 
* Only displaying text is supported (e.g. on labels), text inputs (e.g. text area) don't support this feature.
* Static text (i.e. const) is not processed. E.g. texts set by <code>lv_label_set_text()</code> will be "Arabic processed" but <code>lv_lable_set_text_static()</code> won't.
+
* Static text (i.e. const) is not processed. E.g. texts set by <code style="color: #bb0000;">lv_label_set_text()</code> will be "Arabic processed" but <code style="color: #bb0000;">lv_lable_set_text_static()</code> won't.
* Text get functions (e.g. <code>lv_label_get_text()</code>) will return the processed text.
+
* Text get functions (e.g. <code style="color: #bb0000;">lv_label_get_text()</code>) will return the processed text.
 +
|アラビア語やペルシャ語の文字を表示するには、いくつかの特別なルールがあります。
 +
 
 +
同じ文字でも、開始位置、中間位置、終了位置で孤立している場合は、別の形式を使用する必要があります。
 +
 
 +
これらに加えて、いくつかの接続規則も考慮する必要があります。
 +
 
 +
LVGLは<code style="color: #bb0000;">LV_USE_ARABIC_PERSIAN_CHARS</code> が有効であれば、これらの規則をサポートします。
 +
 
 +
しかし、いくつかの制限があります。
 +
* テキスト表示のみ対応(例:ラベル)、テキスト入力(例:テキストエリア)には対応していません。
 +
* 静的なテキスト(つまり const)は処理されません。例えば、 <code style="color: #bb0000;">lv_label_set_text()</code> で設定したテキストは「アラビア語処理」されるが、 <code style="color: #bb0000;">lv_lable_set_text_static()</code> は処理されない。
 +
* テキスト取得関数(例:<code style="color: #bb0000;">lv_label_get_text()</code>) は、処理後のテキストを返します。
 +
|}
 +
:[[App:Library:LVGL:docs:Overview#Fonts|戻る : Previous]]
 +
 
  
 
=== Subpixel rendering ===
 
=== 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.
+
{| class="wikitable"
 +
!英文
 +
!自動翻訳
 +
|-
 +
|
 +
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:
  
* In the online converter tick the <code>Subpixel</code> box
+
* In the online converter tick the <code style="color: #bb0000;">Subpixel</code> box
* In the command line tool use <code>--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''.
 +
|サブピクセルレンダリングは、アンチエイリアスのかかったエッジをピクセルレベルの粒度ではなく、赤、緑、青のチャンネルでレンダリングすることにより、水平方向の解像度を3倍にすることができます。
 +
 
 +
これは、各ピクセルの物理的なカラーチャンネルの位置を利用し、より高品質の文字アンチエイリアスを実現します。
 +
 
 +
詳しくはこちらをご覧ください。
 +
 
 +
サブピクセルレンダリングでは、フォントを特別な設定で生成する必要があります。
 +
* オンラインコンバーターで <code style="color: #bb0000;">Subpixel</code> boxにチェックを入れます。
 +
* コマンドラインツールでは、 <code style="color: #bb0000;">--lcd</code> フラグを使用します。生成されるフォントは、約3倍のメモリを必要とすることに注意してください。
 +
 
 +
 
 +
サブピクセルレンダリングは、ピクセルのカラーチャンネルが水平にレイアウトされている場合にのみ機能します。
 +
 
 +
つまり、R、G、Bの各チャンネルが隣り合っていて、互いの上にない状態です。
 +
 
  
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>RGB</code> order, however this can be swapped by setting <code>LV_SUBPX_BGR  1</code> in ''lv_conf.h''.
+
色チャンネルの順序もライブラリの設定と一致させる必要があります。
  
 +
デフォルトでは、LVGLは<code style="color: #bb0000;">RGB</code> オーダーを想定していますが、lv_conf.hで <code style="color: #bb0000;">LV_SUBPX_BGR  1</code> を設定することで入れ替えが可能です。
 +
|}
 +
:[[App:Library:LVGL:docs:Overview#Fonts|戻る : Previous]]
  
  
 
=== Compressed fonts ===
 
=== Compressed fonts ===
 +
{| class="wikitable"
 +
!英文
 +
!自動翻訳
 +
|-
 +
|
 
The bitmaps of fonts can be compressed by
 
The bitmaps of fonts can be compressed by
  
* ticking the <code>Compressed</code> check box in the online converter
+
* ticking the <code style="color: #bb0000;">Compressed</code> check box in the online converter
* not passing the <code>--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
 
* they can be compressed better
 
* they can be compressed better
 
* and probably they are used less frequently then the medium-sized fonts, so the performance cost is smaller.
 
* and probably they are used less frequently then the medium-sized fonts, so the performance cost is smaller.
 +
|フォントのビットマップは、次の方法で圧縮することができます。
  
 +
* オンライン・コンバータで <code style="color: #bb0000;">Compressed</code> チェックボックスにチェックを入れる。
 +
* オフラインコンバータに <code style="color: #bb0000;">--no-compress</code> フラグを渡さない (デフォルトで圧縮が適用されます)
 +
 +
 +
圧縮は、フォントが大きく、bppが高いほど効果的です。
 +
 +
ただし、圧縮されたフォントのレンダリングは約30%遅くなります。
 +
 +
 +
そのため、ユーザーインターフェースの最も大きなフォントのみを圧縮することをお勧めします。
 +
 +
* 最も多くのメモリを必要とする
 +
* よりよく圧縮することができます。
 +
* また、中型のフォントよりも使用頻度が低いため、パフォーマンスコストも小さくなります。
 +
|}
 +
:[[App:Library:LVGL:docs:Overview#Fonts|戻る : Previous]]
  
  
 
== Add a new font ==
 
== Add a new font ==
 +
{| class="wikitable"
 +
!英文
 +
!自動翻訳
 +
|-
 +
|
 
There are several ways to add a new font to your project:
 
There are several ways to add a new font to your project:
  
 
# The simplest method is to use the Online font converter. Just set the parameters, click the ''Convert'' button, copy the font to your project and use it. Be sure to carefully read the steps provided on that site or you will get an error while converting.
 
# The simplest method is to use the Online font converter. Just set the parameters, click the ''Convert'' button, copy the font to your project and use it. Be sure to carefully read the steps provided on that site or you will get an error while converting.
 
# Use the Offline font converter. (Requires Node.js to be installed)
 
# Use the Offline font converter. (Requires Node.js to be installed)
# If you want to create something like the built-in fonts (Montserrat font and symbols) but in a different size and/or ranges, you can use the <code>built_in_font_gen.py</code> script in <code>lvgl/scripts/built_in_font</code> folder. (This requires Python and <code>lv_font_conv</code> to be installed)
+
# If you want to create something like the built-in fonts (Montserrat font and symbols) but in a different size and/or ranges, you can use the <code style="color: #bb0000;">built_in_font_gen.py</code> script in <code style="color: #bb0000;">lvgl/scripts/built_in_font</code> folder. (This requires Python and <code style="color: #bb0000;">lv_font_conv</code> to be installed)
  
To declare a font in a file, use <code>LV_FONT_DECLARE(my_font_name)</code>.
 
  
To make fonts globally available (like the builtin fonts), add them to <code>LV_FONT_CUSTOM_DECLARE</code> in ''lv_conf.h''.
+
To declare a font in a file, use <code style="color: #bb0000;">LV_FONT_DECLARE(my_font_name)</code>.
 +
 
 +
To make fonts globally available (like the builtin fonts), add them to <code style="color: #bb0000;">LV_FONT_CUSTOM_DECLARE</code> in ''lv_conf.h''.
 +
|プロジェクトに新しいフォントを追加するには、いくつかの方法があります。
 +
 
 +
# 最もシンプルな方法は、オンラインフォントコンバータを使用することです。最も簡単な方法は、オンラインフォントコンバータを使用することです。パラメータを設定し、変換ボタンをクリックし、フォントをプロジェクトにコピーして使用するだけです。このサイトで提供されている手順を注意深く読んでください。
 +
# オフラインフォントコンバータを使用します。(Node.jsのインストールが必要です)
 +
# もし、内蔵フォント(Montserratフォントとシンボル)のようなものを、異なるサイズや範囲で作成したい場合は、 <code style="color: #bb0000;">lvgl/scripts/built_in_font</code> フォルダにある<code style="color: #bb0000;">built_in_font_gen.py</code> スクリプトを使用することができます。 (このためには、Pythonと<code style="color: #bb0000;">lv_font_conv</code> がインストールされている必要があります)
 +
 
 +
 
 +
ファイル内でフォントを宣言するには、<code style="color: #bb0000;">LV_FONT_DECLARE(my_font_name)</code>を使用します。
 +
 
 +
フォントをグローバルに利用できるようにするには(組み込みフォントのように)、lv_conf.h の  <code style="color: #bb0000;">LV_FONT_CUSTOM_DECLARE</code> に追加してください。
 +
|}
 +
:[[App:Library:LVGL:docs:Overview#Fonts|戻る : Previous]]
 +
 
  
 
== Add new symbols ==
 
== Add new symbols ==
 +
{| class="wikitable"
 +
!英文
 +
!自動翻訳
 +
|-
 +
|
 
The built-in symbols are created from the FontAwesome font.
 
The built-in symbols are created from the FontAwesome font.
  
# Search for a symbol on <nowiki>https://fontawesome.com</nowiki>. For example the USB symbol. Copy its Unicode ID which is <code>0xf287</code> in this case.
+
# Search for a symbol on <nowiki>https://fontawesome.com</nowiki>. For example the USB symbol. Copy its Unicode ID which is <code style="color: #bb0000;">0xf287</code> in this case.
 
# Open the Online font converter. Add FontAwesome.woff. .
 
# Open the Online font converter. Add FontAwesome.woff. .
 
# Set the parameters such as Name, Size, BPP. You'll use this name to declare and use the font in your code.
 
# Set the parameters such as Name, Size, BPP. You'll use this name to declare and use the font in your code.
# Add the Unicode ID of the symbol to the range field. E.g. <code>0xf287</code> for the USB symbol. More symbols can be enumerated with <code>,</code>.
+
# Add the Unicode ID of the symbol to the range field. E.g. <code style="color: #bb0000;">0xf287</code> for the USB symbol. More symbols can be enumerated with <code style="color: #bb0000;">,</code>.
 
# 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>extern lv_font_t my_font_name;</code> or simply use <code>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
  
# Convert the Unicode value to UTF8, for example on this site. For <code>0xf287</code> the ''Hex UTF-8 bytes'' are <code>EF 8A 87</code>.
+
# 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>define</code> string from the UTF8 values: <code>#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>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>
 +
|}
 +
:[[App:Library:LVGL:docs:Overview#Fonts|戻る : Previous]]
  
Note - <code>lv_label_set_text(label, MY_USB_SYMBOL)</code> searches for this symbol in the font defined in <code>style.text.font</code> properties. To use the symbol you may need to change it. Eg <code>style.text.font = my_font_name</code>
 
  
 
== Load a font at run-time ==
 
== Load a font at run-time ==
<code>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>--format bin</code> option to generate an LVGL compatible font file.
+
{| class="wikitable"
 +
!英文
 +
!自動翻訳
 +
|-
 +
|
 +
<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.
  
 
Example
 
Example
 +
<syntaxhighlight lang="C++" style="border:1px dashed gray;">
 
  lv_font_t * my_font;
 
  lv_font_t * my_font;
 
  my_font = lv_font_load(X/path/to/my_font.bin);
 
  my_font = lv_font_load(X/path/to/my_font.bin);
185行目: 527行目:
 
  /*Free the font if not required anymore*/
 
  /*Free the font if not required anymore*/
 
  lv_font_free(my_font);
 
  lv_font_free(my_font);
 +
</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#Fonts|戻る : Previous]]
 +
  
 
== Add a new font engine ==
 
== 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.
+
{| class="wikitable"
 +
!英文
 +
!自動翻訳
 +
|-
 +
|
 +
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.
  
To do this, a custom <code>lv_font_t</code> variable needs to be created:
+
To do this, a custom <code style="color: #bb0000;">lv_font_t</code> variable needs to be created:
 +
<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>
 +
|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*/
 
  /*Describe the properties of a font*/
 
  lv_font_t my_font;
 
  lv_font_t my_font;
234行目: 657行目:
 
   
 
   
 
     return bitmap;    /*Or NULL if not found*/
 
     return bitmap;    /*Or NULL if not found*/
 +
</syntaxhighlight>
 +
|}
 +
  
 
== Use font fallback ==
 
== Use font fallback ==
You can specify <code>fallback</code> in <code>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>fallback</code> to handle.
+
{| class="wikitable"
 +
!英文
 +
!自動翻訳
 +
|-
 +
|
 +
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.
 +
 
  
  
fallback can be chained, so it will try to solve until there is no fallback set.
+
<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 */
 
  /* Roboto font doesn't have support for CJK glyphs */
247行目: 682行目:
 
  /* So now we can display Roboto for supported characters while having wider characters set support */
 
  /* So now we can display Roboto for supported characters while having wider characters set support */
 
  roboto->fallback = droid_sans_fallback;
 
  roboto->fallback = droid_sans_fallback;
 +
</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>
 +
|}
  
  
  
:[[App:Library:LVGL#Overview|戻る : Previous]]
+
[[App:Library:LVGL#Overview|戻る : Previous]]

2022年7月2日 (土) 10:20時点における最新版

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_font_t variable and can be set in a style's text_font field.

For example:

 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 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.

LVGLでは、フォントは個々の文字(グリフ)の画像を描画するために必要なビットマップやその他の情報の集合体です。

フォントは、lv_font_t変数に格納され、スタイルのtext_fontフィールドに設定することができます。

例えば
 lv_style_set_text_font(&my_style, &lv_font_montserrat_28);  /*Set a larger font*/

フォントには、bpp(bits per pixel)プロパティがあります。

これは、フォント内のピクセルを記述するために、何ビットが使用されるかを示しています。ピクセルに格納されている値によって、そのピクセルの不透明度が決まります。

このように、bppを高くすると、文字のエッジをより滑らかにすることができます。

使用可能なbpp値は、1、2、4、8です(値が高いほど品質が高いことを意味します)。

bppプロパティは、フォントを保存するために必要なメモリ量にも影響します。

たとえば、bpp = 4は、bpp = 1に比べて、フォントのサイズが約4倍になります。

戻る : Previous


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, LV_TXT_ENC is set to LV_TXT_ENC_UTF8 in lv_conf.h. (This is the default value)

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.

LVGLはUTF-8でエンコードされたユニコード文字をサポートしています。

また、LV_TXT_ENClv_conf.hLV_TXT_ENC_UTF8に設定されていることを確認してください(これはデフォルトの値です)。

テストするために、以下を試してみてください。
 lv_obj_t * label1 = lv_label_create(lv_scr_act(), NULL);
 lv_label_set_text(label1, LV_SYMBOL_OK);

うまくいけば、✓が表示されるはずです。

戻る : Previous


Built-in fonts

英文 自動翻訳

There are several built-in fonts in different sizes, which can be enabled in lv_conf.h with LV_FONT_... defines.

サイズの異なるいくつかの組み込みフォントがあり、lv_conf.h の LV_FONT_... の定義で有効にすることができます。
戻る : Previous


Normal fonts

英文 自動翻訳

Containing all the ASCII characters, the degree symbol (U+00B0), the bullet symbol (U+2022) and the built-in symbols (see below).

  • LV_FONT_MONTSERRAT_12 12 px font
  • LV_FONT_MONTSERRAT_14 14 px font
  • LV_FONT_MONTSERRAT_16 16 px font
  • LV_FONT_MONTSERRAT_18 18 px font
  • LV_FONT_MONTSERRAT_20 20 px font
  • LV_FONT_MONTSERRAT_22 22 px font
  • LV_FONT_MONTSERRAT_24 24 px font
  • LV_FONT_MONTSERRAT_26 26 px font
  • LV_FONT_MONTSERRAT_28 28 px font
  • LV_FONT_MONTSERRAT_30 30 px font
  • LV_FONT_MONTSERRAT_32 32 px font
  • LV_FONT_MONTSERRAT_34 34 px font
  • LV_FONT_MONTSERRAT_36 36 px font
  • LV_FONT_MONTSERRAT_38 38 px font
  • LV_FONT_MONTSERRAT_40 40 px font
  • LV_FONT_MONTSERRAT_42 42 px font
  • LV_FONT_MONTSERRAT_44 44 px font
  • LV_FONT_MONTSERRAT_46 46 px font
  • LV_FONT_MONTSERRAT_48 48 px font
すべての ASCII 文字,学位記号(U+00B0),ビュレット記号(U+2022)および組み込み記号(下記参照)を 含む。
  • LV_FONT_MONTSERRAT_12 12 px font
  • LV_FONT_MONTSERRAT_14 14 px font
  • LV_FONT_MONTSERRAT_16 16 px font
  • LV_FONT_MONTSERRAT_18 18 px font
  • LV_FONT_MONTSERRAT_20 20 px font
  • LV_FONT_MONTSERRAT_22 22 px font
  • LV_FONT_MONTSERRAT_24 24 px font
  • LV_FONT_MONTSERRAT_26 26 px font
  • LV_FONT_MONTSERRAT_28 28 px font
  • LV_FONT_MONTSERRAT_30 30 px font
  • LV_FONT_MONTSERRAT_32 32 px font
  • LV_FONT_MONTSERRAT_34 34 px font
  • LV_FONT_MONTSERRAT_36 36 px font
  • LV_FONT_MONTSERRAT_38 38 px font
  • LV_FONT_MONTSERRAT_40 40 px font
  • LV_FONT_MONTSERRAT_42 42 px font
  • LV_FONT_MONTSERRAT_44 44 px font
  • LV_FONT_MONTSERRAT_46 46 px font
  • LV_FONT_MONTSERRAT_48 48 px font
戻る : Previous


Special fonts

英文 自動翻訳
  • LV_FONT_MONTSERRAT_12_SUBPX Same as normal 12 px font but with subpixel rendering
  • LV_FONT_MONTSERRAT_28_COMPRESSED Same as normal 28 px font but stored as a compressed font with 3 bpp
  • LV_FONT_DEJAVU_16_PERSIAN_HEBREW 16 px font with normal range + Hebrew, Arabic, Persian letters and all their forms
  • LV_FONT_SIMSUN_16_CJK16 px font with normal range plus 1000 of the most common CJK radicals
  • LV_FONT_UNSCII_8 8 px pixel perfect font with only ASCII characters
  • LV_FONT_UNSCII_16 16 px pixel perfect font with only ASCII characters


The built-in fonts are global variables with names like lv_font_montserrat_16 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 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);
  • LV_FONT_MONTSERRAT_12_SUBPX 通常の 12 px フォントと同じだが、サブピクセルレンダリングを行う。
  • LV_FONT_MONTSERRAT_28_COMPRESSED 通常の 28 px フォントと同じですが、3 bpp の圧縮フォントとして保存されます。
  • LV_FONT_DEJAVU_16_PERSIAN_HEBREW 16 px フォントの通常の範囲にヘブライ語、アラビア語、ペルシャ語の文字とそのすべての形式を追加したもの。
  • LV_FONT_SIMSUN_16_CJK16 px フォント (通常範囲) + 最も一般的な日中韓のラジカル 1000 個
  • LV_FONT_UNSCII_8 8 px のピクセルパーフェクトフォント、ASCII 文字のみ
  • LV_FONT_UNSCII_16 16 px ピクセル パーフェクト フォント、ASCII キャラクタのみ


The symbols can be used singly as:

組み込みフォントはグローバル変数で、高さ16pxのフォントはlv_font_montserrat_16のような名前になっています。

スタイルでこれらを使用するには、上記のようにフォント変数へのポインタを追加するだけです。

bpp = 4 の組み込みフォントは ASCII 文字を含み、Montserrat フォントを使用します。

ASCIIの範囲に加えて、FontAwesomeフォントから以下の記号がビルトインフォントに追加されています。

これらの記号は、単独で次のように使用することができます。
 lv_label_set_text(my_label, LV_SYMBOL_OK);

または、文字列と一緒にwith(コンパイル時の文字列連結)。

 lv_label_set_text(my_label, LV_SYMBOL_OK "Apply");

あるいはもっと多くのシンボルを一緒に。

 lv_label_set_text(my_label, LV_SYMBOL_OK LV_SYMBOL_WIFI LV_SYMBOL_PLAY);
戻る : Previous


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.


LVGL not only supports RTL texts but supports mixed (a.k.a. bidirectional, BiDi) text rendering too.

Some examples:

BiDi support is enabled by LV_USE_BIDI 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.

The default base direction for screens can be set by LV_BIDI_BASE_DIR_DEF in lv_conf.h and other objects inherit the base direction from their parent.

To set an object's base direction use lv_obj_set_base_dir(obj, base_dir). The possible base directions are:

  • LV_BIDI_DIR_LTR: Left to Right base direction
  • LV_BIDI_DIR_RTL: Right to Left base direction
  • LV_BIDI_DIR_AUTO: Auto detect base direction
  • LV_BIDI_DIR_INHERIT: 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:

  • Create objects by default on the right
  • lv_tabview: Displays tabs from right to left
  • lv_checkbox: Shows the box on the right
  • lv_btnmatrix: Shows buttons from right to left
  • lv_list: Shows icons on the right
  • lv_dropdown: Aligns options to the right
  • The texts in lv_table, lv_btnmatrix, lv_keyboard, lv_tabview, lv_dropdown, lv_roller are "BiDi processed" to be displayed correctly
多くの言語は左から右へ(LTR)書く方向ですが、いくつかの言語(ヘブライ語、ペルシャ語、アラビア語など)は右から左へ(RTL)書く方向を使用します。

LVGLは、RTLテキストだけでなく、混合テキスト(bidirectional, BiDi)のレンダリングもサポートします。

いくつかの例を挙げます。

BiDiのサポートは、lv_conf.hのLV_USE_BIDI によって有効化されます。


すべてのテキストには基本方向(LTRまたはRTL)があり、これによりいくつかのレンダリング規則とテキストのデフォルトの配置(左または右)が決定されます。


しかし、LVGLでは、基本方向はラベルにだけ適用されるわけではありません。

これは一般的なプロパティであり、すべてのオブジェクトに設定することができます。

もし設定されていなければ、それは親から継承されます。

つまり、画面の基本方向を設定するだけで、すべてのオブジェクトにそれが継承されるのです。


スクリーンのデフォルトのベース方向は lv_conf.h の LV_BIDI_BASE_DIR_DEF で設定でき、他のオブジェクトはその親からベース方向を継承します。

オブジェクトのベース方向を設定するには、 lv_obj_set_base_dir(obj, base_dir)を使用します。設定可能な基底方向は以下の通りです。

  • LV_BIDI_DIR_LTR: 左から右へのベース方向
  • LV_BIDI_DIR_RTL: 右から左へのベース方向
  • LV_BIDI_DIR_AUTO: ベースの向きを自動検出する
  • LV_BIDI_DIR_INHERIT: 親からベース方向を継承する (スクリーンオブジェクトでない場合はデフォルト値)


このリストは、RTLのベース方向がオブジェクトに与える影響をまとめたものです。

  • 右側にデフォルトでオブジェクトを作成する
  • lv_tabview: 右から左へタブを表示する
  • lv_checkbox: 右側にボックスを表示します
  • lv_btnmatrix: 右から左へボタンを表示します
  • lv_list: 右側にアイコンを表示します
  • lv_dropdown: オプションを右に並べて表示します
  • lv_table, lv_btnmatrix, lv_keyboard, lv_tabview, lv_dropdown, lv_roller のテキストは "BiDi 処理されているため、正しく表示されるようになります。
戻る : Previous


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 LV_USE_ARABIC_PERSIAN_CHARS is enabled.

However, there some limitations:

  • Only displaying text is supported (e.g. on labels), text inputs (e.g. text area) don't support this feature.
  • Static text (i.e. const) is not processed. E.g. texts set by lv_label_set_text() will be "Arabic processed" but lv_lable_set_text_static() won't.
  • Text get functions (e.g. lv_label_get_text()) will return the processed text.
アラビア語やペルシャ語の文字を表示するには、いくつかの特別なルールがあります。

同じ文字でも、開始位置、中間位置、終了位置で孤立している場合は、別の形式を使用する必要があります。

これらに加えて、いくつかの接続規則も考慮する必要があります。

LVGLはLV_USE_ARABIC_PERSIAN_CHARS が有効であれば、これらの規則をサポートします。

しかし、いくつかの制限があります。

  • テキスト表示のみ対応(例:ラベル)、テキスト入力(例:テキストエリア)には対応していません。
  • 静的なテキスト(つまり const)は処理されません。例えば、 lv_label_set_text() で設定したテキストは「アラビア語処理」されるが、 lv_lable_set_text_static() は処理されない。
  • テキスト取得関数(例:lv_label_get_text()) は、処理後のテキストを返します。
戻る : Previous


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:

  • In the online converter tick the Subpixel box
  • In the command line tool use --lcd 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 RGB order, however this can be swapped by setting LV_SUBPX_BGR  1 in lv_conf.h.

サブピクセルレンダリングは、アンチエイリアスのかかったエッジをピクセルレベルの粒度ではなく、赤、緑、青のチャンネルでレンダリングすることにより、水平方向の解像度を3倍にすることができます。

これは、各ピクセルの物理的なカラーチャンネルの位置を利用し、より高品質の文字アンチエイリアスを実現します。

詳しくはこちらをご覧ください。

サブピクセルレンダリングでは、フォントを特別な設定で生成する必要があります。

  • オンラインコンバーターで Subpixel boxにチェックを入れます。
  • コマンドラインツールでは、 --lcd フラグを使用します。生成されるフォントは、約3倍のメモリを必要とすることに注意してください。


サブピクセルレンダリングは、ピクセルのカラーチャンネルが水平にレイアウトされている場合にのみ機能します。

つまり、R、G、Bの各チャンネルが隣り合っていて、互いの上にない状態です。


色チャンネルの順序もライブラリの設定と一致させる必要があります。

デフォルトでは、LVGLはRGB オーダーを想定していますが、lv_conf.hで LV_SUBPX_BGR  1 を設定することで入れ替えが可能です。

戻る : Previous


Compressed fonts

英文 自動翻訳

The bitmaps of fonts can be compressed by

  • ticking the Compressed check box in the online converter
  • not passing the --no-compress 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

  • they need the most memory
  • they can be compressed better
  • and probably they are used less frequently then the medium-sized fonts, so the performance cost is smaller.
フォントのビットマップは、次の方法で圧縮することができます。
  • オンライン・コンバータで Compressed チェックボックスにチェックを入れる。
  • オフラインコンバータに --no-compress フラグを渡さない (デフォルトで圧縮が適用されます)


圧縮は、フォントが大きく、bppが高いほど効果的です。

ただし、圧縮されたフォントのレンダリングは約30%遅くなります。


そのため、ユーザーインターフェースの最も大きなフォントのみを圧縮することをお勧めします。

  • 最も多くのメモリを必要とする
  • よりよく圧縮することができます。
  • また、中型のフォントよりも使用頻度が低いため、パフォーマンスコストも小さくなります。
戻る : Previous


Add a new font

英文 自動翻訳

There are several ways to add a new font to your project:

  1. The simplest method is to use the Online font converter. Just set the parameters, click the Convert button, copy the font to your project and use it. Be sure to carefully read the steps provided on that site or you will get an error while converting.
  2. Use the Offline font converter. (Requires Node.js to be installed)
  3. If you want to create something like the built-in fonts (Montserrat font and symbols) but in a different size and/or ranges, you can use the built_in_font_gen.py script in lvgl/scripts/built_in_font folder. (This requires Python and lv_font_conv to be installed)


To declare a font in a file, use LV_FONT_DECLARE(my_font_name).

To make fonts globally available (like the builtin fonts), add them to LV_FONT_CUSTOM_DECLARE in lv_conf.h.

プロジェクトに新しいフォントを追加するには、いくつかの方法があります。
  1. 最もシンプルな方法は、オンラインフォントコンバータを使用することです。最も簡単な方法は、オンラインフォントコンバータを使用することです。パラメータを設定し、変換ボタンをクリックし、フォントをプロジェクトにコピーして使用するだけです。このサイトで提供されている手順を注意深く読んでください。
  2. オフラインフォントコンバータを使用します。(Node.jsのインストールが必要です)
  3. もし、内蔵フォント(Montserratフォントとシンボル)のようなものを、異なるサイズや範囲で作成したい場合は、 lvgl/scripts/built_in_font フォルダにあるbuilt_in_font_gen.py スクリプトを使用することができます。 (このためには、Pythonとlv_font_conv がインストールされている必要があります)


ファイル内でフォントを宣言するには、LV_FONT_DECLARE(my_font_name)を使用します。

フォントをグローバルに利用できるようにするには(組み込みフォントのように)、lv_conf.h の LV_FONT_CUSTOM_DECLARE に追加してください。

戻る : Previous


Add new symbols

英文 自動翻訳

The built-in symbols are created from the FontAwesome font.

  1. Search for a symbol on https://fontawesome.com. For example the USB symbol. Copy its Unicode ID which is 0xf287 in this case.
  2. Open the Online font converter. Add FontAwesome.woff. .
  3. Set the parameters such as Name, Size, BPP. You'll use this name to declare and use the font in your code.
  4. Add the Unicode ID of the symbol to the range field. E.g. 0xf287 for the USB symbol. More symbols can be enumerated with ,.
  5. Convert the font and copy the generated source code to your project. Make sure to compile the .c file of your font.
  6. Declare the font using extern lv_font_t my_font_name; or simply use LV_FONT_DECLARE(my_font_name);.


Using the symbol

  1. Convert the Unicode value to UTF8, for example on this site. For 0xf287 the Hex UTF-8 bytes are EF 8A 87.
  2. Create a define string from the UTF8 values: #define MY_USB_SYMBOL "\xEF\x8A\x87"
  3. Create a label and set the text. Eg. lv_label_set_text(label, MY_USB_SYMBOL)


Note - lv_label_set_text(label, MY_USB_SYMBOL) searches for this symbol in the font defined in style.text.font properties. To use the symbol you may need to change it. Eg style.text.font = my_font_name

内蔵のシンボルは、FontAwesomeフォントから作成されています。
  1. https://fontawesome.com でシンボルを検索してください。例えば、USBシンボル。そのユニコードID(この場合0xf287 )をコピーします。
  2. オンラインフォントコンバータを開きます。FontAwesome.woffを追加します。. .
  3. 名前、サイズ、BPPなどのパラメータを設定します。この名前を使って、コード内でフォントを宣言し、使用することになります。
  4. 範囲フィールドにシンボルのユニコードIDを追加します。例:USBシンボルには0xf287。より多くのシンボルを ","で列挙することができます。
  5. フォントを変換し、生成されたソースコードをプロジェクトにコピーします。フォントの .c ファイルは必ずコンパイルしてください。
  6. externextern lv_font_t my_font_name;または単に LV_FONT_DECLARE(my_font_name); を使ってフォントを宣言してください。


Using the symbol

  1. Convert the Unicode value to UTF8, for example on this site. For 0xf287 the Hex UTF-8 bytes are EF 8A 87.
  2. Create a define string from the UTF8 values: #define MY_USB_SYMBOL "\xEF\x8A\x87"
  3. Create a label and set the text. Eg. lv_label_set_text(label, MY_USB_SYMBOL)


Note - lv_label_set_text(label, MY_USB_SYMBOL) searches for this symbol in the font defined in style.text.font properties. To use the symbol you may need to change it. Eg style.text.font = my_font_name

戻る : Previous


Load a font at run-time

英文 自動翻訳

lv_font_load 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 --format bin 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.

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 に--format bin オプションをつけます。

フォントをロードするには、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);
戻る : Previous


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 lv_font_t variable needs to be created:

 /*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 リポジトリで見つけることができます。

これを行うには、カスタム lv_font_t変数を作成する必要があります。

 /*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 fallback in lv_font_t to provide fallback to the font.

When the font fails to find glyph to a letter, it will try to let font from fallback to handle.


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;
lv_font_tfallbackを指定すると、フォントにフォールバックを提供することができます。

フォントが文字に対するグリフを見つけられなかったとき、fallbackからフォントに処理をさせようとします。

fallbackcan be chained, so it will try to solve until there is no fallbackset.
 /* 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;


戻る : Previous