「App:Library:LVGL:docs:Overview:Drawing」の版間の差分
(同じ利用者による、間の2版が非表示) | |||
57行目: | 57行目: | ||
主な違いは、LVGLでは、2つのフレームバッファ(これは通常、外部RAMを必要とします)を保存する必要がなく、内部RAMに簡単に収まる小さな描画バッファ(複数可)だけでよいということです。 | 主な違いは、LVGLでは、2つのフレームバッファ(これは通常、外部RAMを必要とします)を保存する必要がなく、内部RAMに簡単に収まる小さな描画バッファ(複数可)だけでよいということです。 | ||
|} | |} | ||
− | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | + | :[[App:Library:LVGL:docs:Overview#Drawing|戻る : Previous]] |
83行目: | 83行目: | ||
#* Repeat the same with remaining joined areas. | #* Repeat the same with remaining joined areas. | ||
− | When an area is redrawn the library searches the top-most object which covers that area and starts drawing from that object. For example, if a button's label has changed, the library will see that it's enough to draw the button under the text and it's not necessary to redraw the display under the rest of the button too. | + | |
+ | When an area is redrawn the library searches the top-most object which covers that area and starts drawing from that object. | ||
+ | |||
+ | For example, if a button's label has changed, the library will see that it's enough to draw the button under the text and it's not necessary to redraw the display under the rest of the button too. | ||
The difference between buffering modes regarding the drawing mechanism is the following: | The difference between buffering modes regarding the drawing mechanism is the following: | ||
99行目: | 102行目: | ||
#* 親から部分的にはみ出した領域は、親の領域に合わせて切り取られます。 | #* 親から部分的にはみ出した領域は、親の領域に合わせて切り取られます。 | ||
#* 他の画面上のオブジェクトは追加されません。 | #* 他の画面上のオブジェクトは追加されません。 | ||
− | # | + | #<code style="color: #bb0000;">LV_DISP_DEF_REFR_PERIOD</code> (<code style="color: #bb0000;">lv_conf.h</code>で設定)ごとに、次のようなことが起こります。 |
− | #* | + | #* LVGLは無効な領域をチェックし、隣接または交差しているものを結合します。 |
− | #* | + | #* 最初に結合された領域を取り、それがドローバッファより小さければ、その領域の内容をドローバッファに単純にレンダリングします。領域がバッファに収まらない場合は、ドローバッファにできるだけ多くの線を描画します。 |
− | #* | + | #* 領域が描画されたら、ディスプレイドライバから <code style="color: #bb0000;">flush_cb</code> を呼び出して表示を更新する。 |
− | #* | + | #* もし、領域がバッファより大きかったら、残りの部分もレンダリングする。 |
− | #* | + | #* 残りの結合された領域も同様に繰り返す。 |
+ | |||
− | + | ある領域が再描画されると、ライブラリはその領域をカバーする最上位のオブジェクトを検索し、そのオブジェクトから描画を開始します。 | |
− | + | 例えば、ボタンのラベルが変更された場合、ライブラリは、テキストの下にボタンを描画すれば十分であり、ボタンの残りの部分の表示も再描画する必要はないと判断します。 | |
− | # | + | 描画の仕組みに関するバッファリングモードの違いは、以下の通りです。 |
− | # | + | # 1つのバッファ-<code style="color: #bb0000;">lv_disp_flush_ready()</code>(<code style="color: #bb0000;">flush_cb</code>から呼び出される) まで待機してから、次のパートの再描画を開始する必要があります。 |
− | # | + | # 2つのバッファー-フラッシュはDMA (または同様のハードウェア) によってバックグラウンドで実行されるため、最初のバッファーが<code style="color: #bb0000;">flush_cb</code> に送信されると、LVGLはすぐに2番目のバッファーに描画できます。 |
+ | # ダブルバッファリング-<code style="color: #bb0000;">flush_cb</code> はフレームバッファのアドレスのみをスワップすべきです。 | ||
|} | |} | ||
− | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | + | :[[App:Library:LVGL:docs:Overview#Drawing|戻る : Previous]] |
136行目: | 141行目: | ||
# Calculate all the added mask It composites opacity values into a ''mask buffer'' with the "shape" of the created masks. E.g. in case of a "line mask" according to the parameters of the mask, keep one side of the buffer as it is (255 by default) and set the rest to 0 to indicate that this side should be removed. | # Calculate all the added mask It composites opacity values into a ''mask buffer'' with the "shape" of the created masks. E.g. in case of a "line mask" according to the parameters of the mask, keep one side of the buffer as it is (255 by default) and set the rest to 0 to indicate that this side should be removed. | ||
# Blend a color or image During blending, masking (make some pixels transparent or opaque), blending modes (additive, subtractive, etc.) and color/image opacity are handled. | # Blend a color or image During blending, masking (make some pixels transparent or opaque), blending modes (additive, subtractive, etc.) and color/image opacity are handled. | ||
+ | |||
LVGL has the following built-in mask types which can be calculated and applied real-time: | LVGL has the following built-in mask types which can be calculated and applied real-time: | ||
144行目: | 150行目: | ||
* <code style="color: #bb0000;">LV_DRAW_MASK_TYPE_FADE</code> Create a vertical fade (change opacity) | * <code style="color: #bb0000;">LV_DRAW_MASK_TYPE_FADE</code> Create a vertical fade (change opacity) | ||
* <code style="color: #bb0000;">LV_DRAW_MASK_TYPE_MAP</code> The mask is stored in a bitmap array and the necessary parts are applied | * <code style="color: #bb0000;">LV_DRAW_MASK_TYPE_MAP</code> The mask is stored in a bitmap array and the necessary parts are applied | ||
+ | |||
Masks are used to create almost every basic primitive: | Masks are used to create almost every basic primitive: | ||
154行目: | 161行目: | ||
* arc drawing A circular border is drawn but an arc mask is applied too. | * arc drawing A circular border is drawn but an arc mask is applied too. | ||
* ARGB images The alpha channel is separated into a mask and the image is drawn as a normal RGB image. | * ARGB images The alpha channel is separated into a mask and the image is drawn as a normal RGB image. | ||
− | | | + | |マスキングは、LVGLの描画エンジンの基本概念です。 |
+ | LVGLを使用するには、ここで説明したメカニズムについて知る必要はありませんが、内部での描画のしくみを知ることは興味深いことです。マスキングに関する知識は、図面をカスタマイズする場合に役立ちます。 | ||
+ | |||
+ | |||
+ | マスクについて学習するには、まず描画の手順を見てみましょう。 | ||
+ | |||
+ | LVGLは、次の手順を実行してシェイプ、イメージ、またはテキストをレンダリングします。これは、描画パイプラインと見なすことができます。 | ||
+ | # 描画記述子を準備するオブジェクトのスタイル(例:<code style="color: #bb0000;">lv_draw_rect_dsc_t</code>)から描画記述子を作成します。色、幅、不透明度、フォント、半径など、描画のためのパラメータが表示されます。 | ||
+ | # 描画関数の呼び出し 描画記述子といくつかのパラメータを指定して、描画関数を呼び出します(例:<code style="color: #bb0000;">lv_draw_rect()</code>)。この関数は,プリミティブな形状を現在のドローバッファにレンダリングします. | ||
+ | # マスクの作成 形状が非常に単純で、マスクを必要としない場合は、#5 に進みます。そうでない場合は、draw 関数で必要なマスクを作成します。(例: 丸みを帯びた矩形マスク) | ||
+ | # 追加されたすべてのマスクを計算する 作成されたマスクの「形状」を持つマスクバッファに、It composites opacity 値を格納する。例:マスクのパラメータに従った「ラインマスク」の場合、バッファの一辺をそのまま(デフォルトで255)、残りを0にして、この一辺を削除することを示す。 | ||
+ | # 色や画像のブレンド ブレンド中、マスキング(一部のピクセルを透明または不透明にする)、ブレンドモード(加算、減算など)、色や画像の不透明度が処理されます。 | ||
+ | |||
+ | |||
+ | LVGLには以下のようなマスクが内蔵されており、リアルタイムに計算し適用することができます。 | ||
+ | |||
+ | *<code style="color: #bb0000;">LV_DRAW_MASK_TYPE_LINE</code> 線から辺を削除します (上下左右)。 <code style="color: #bb0000;">lv_draw_line</code> は、4つのインスタンスを使用します。基本的に、すべての(斜めの)線は、矩形を形成する4つのラインマスクで囲まれています。 | ||
+ | *<code style="color: #bb0000;">LV_DRAW_MASK_TYPE_RADIUS</code> 矩形の内角または外角を放射状に変化させて削除します。また、半径を大きな値に設定することで円を作成する場合にも使用されます(<code style="color: #bb0000;">LV_RADIUS_CIRCLE</code>) | ||
+ | *<code style="color: #bb0000;">LV_DRAW_MASK_TYPE_ANGLE</code> 円形セクタを削除します。<code style="color: #bb0000;">lv_draw_arc</code>で使用され、"空の "セクタを削除します。 | ||
+ | *<code style="color: #bb0000;">LV_DRAW_MASK_TYPE_FADE</code> 垂直方向のフェードを作成します(不透明度を変更します)。 | ||
+ | *<code style="color: #bb0000;">LV_DRAW_MASK_TYPE_MAP</code>マスクをビットマップ配列に格納し、必要な部分を適用します。 | ||
+ | |||
+ | |||
+ | マスクは、ほとんどすべての基本的なプリミティブを作成するために使用されます。 | ||
+ | |||
+ | * 文字 文字からマスクを作成し、マスクを使用して文字の色で長方形を描画します。 | ||
+ | * 線 4つの「ラインマスク」から作成し、線の左、右、上、下の部分をマスクして、完全に垂直な外周を得ることができます。 | ||
+ | * 丸みを帯びた矩形 角に半径をつけるためのマスクをリアルタイムに作成します。 | ||
+ | * clip corner 丸みを帯びたコーナーにはみ出したコンテンツ(通常は子供)をクリップするために、丸みを帯びた長方形のマスクも適用されます。 | ||
+ | * rectangle border 丸みを帯びた矩形と同じだが,内側もマスキングされる。 | ||
+ | * 円弧描画 円形の枠が描かれるが、円弧マスクも適用される。 | ||
+ | * ARGB画像 アルファチャンネルをマスクに分離し、通常のRGB画像として描画します。 | ||
|} | |} | ||
− | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | + | :[[App:Library:LVGL:docs:Overview#Drawing|戻る : Previous]] |
180行目: | 218行目: | ||
# Remove the mask from the draw engine with <code style="color: #bb0000;">lv_draw_mask_remove_id(mask_id)</code> or <code style="color: #bb0000;">lv_draw_mask_remove_custom(ptr)</code>. | # Remove the mask from the draw engine with <code style="color: #bb0000;">lv_draw_mask_remove_id(mask_id)</code> or <code style="color: #bb0000;">lv_draw_mask_remove_custom(ptr)</code>. | ||
# Free the parameter with <code style="color: #bb0000;">lv_draw_mask_free_param(¶m)</code>. | # Free the parameter with <code style="color: #bb0000;">lv_draw_mask_free_param(¶m)</code>. | ||
+ | |||
A parameter can be added and removed any number of times, but it needs to be freed when not required anymore. | A parameter can be added and removed any number of times, but it needs to be freed when not required anymore. | ||
<code style="color: #bb0000;">lv_draw_mask_add</code> saves only the pointer of the mask so the parameter needs to be valid while in use. | <code style="color: #bb0000;">lv_draw_mask_add</code> saves only the pointer of the mask so the parameter needs to be valid while in use. | ||
− | | | + | |すべてのマスクタイプは、マスクのデータを記述するための関連するパラメータ構造を持っています。 |
+ | 以下のパラメータタイプが存在する。 | ||
+ | *<code style="color: #bb0000;">lv_draw_mask_line_param_t</code> | ||
+ | *<code style="color: #bb0000;">lv_draw_mask_radius_param_t</code> | ||
+ | *<code style="color: #bb0000;">lv_draw_mask_angle_param_t</code> | ||
+ | *<code style="color: #bb0000;">lv_draw_mask_fade_param_t</code> | ||
+ | *<code style="color: #bb0000;">lv_draw_mask_map_param_t</code> | ||
+ | |||
+ | #<code style="color: #bb0000;">lv_draw_mask_<type>_init</code>でマスクパラメータを初期化する。API全体は <code style="color: #bb0000;">lv_draw_mask.h</code> を参照。 | ||
+ | #<code style="color: #bb0000;">int16_t mask_id = lv_draw_mask_add(¶m, ptr)</code>.でマスクパラメータを描画エンジンに追加します。<code style="color: #bb0000;">ptr</code>はマスクを識別する任意のポインタです(未使用時は <code style="color: #bb0000;">NULL</code>). | ||
+ | # 描画関数を呼び出す | ||
+ | #<code style="color: #bb0000;">lv_draw_mask_remove_id(mask_id)</code> または <code style="color: #bb0000;">lv_draw_mask_remove_custom(ptr)</code>でマスクを描画エンジンから削除します。 | ||
+ | #<code style="color: #bb0000;">lv_draw_mask_free_param(¶m)</code>でパラメータを解放します。 | ||
+ | |||
+ | パラメータは何度でも追加・削除できますが、不要になったら解放する必要があります。 | ||
+ | |||
+ | <code style="color: #bb0000;">lv_draw_mask_add</code> はマスクのポインタだけを保存するので、パラメータが使用されている間は有効である必要があります。 | ||
|} | |} | ||
− | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | + | :[[App:Library:LVGL:docs:Overview#Drawing|戻る : Previous]] |
195行目: | 250行目: | ||
|- | |- | ||
| | | | ||
− | Although widgets can be easily customized by styles there might be cases when something more custom is required. | + | Although widgets can be easily customized by styles there might be cases when something more custom is required. |
− | To ensure a great level of flexibility LVGL sends a lot of events during drawing with parameters that tell what LVGL is about to draw. | + | To ensure a great level of flexibility LVGL sends a lot of events during drawing with parameters that tell what LVGL is about to draw. |
Some fields of these parameters can be modified to draw something else or any custom drawing operations can be added manually. | Some fields of these parameters can be modified to draw something else or any custom drawing operations can be added manually. | ||
− | A good use case for this is the Button matrix widget. | + | A good use case for this is the Button matrix widget. |
− | By default, its buttons can be styled in different states, but you can't style the buttons one by one. | + | By default, its buttons can be styled in different states, but you can't style the buttons one by one. |
However, an event is sent for every button and you can, for example, tell LVGL to use different colors on a specific button or to manually draw an image on some buttons. | However, an event is sent for every button and you can, for example, tell LVGL to use different colors on a specific button or to manually draw an image on some buttons. | ||
Each of these events is described in detail below. | Each of these events is described in detail below. | ||
− | | | + | |ウィジェットはスタイルによって簡単にカスタマイズできますが、よりカスタムなものが必要な場合があります。 |
+ | |||
+ | |||
+ | 柔軟性を確保するために、LVGLは描画中に多くのイベントを送り、LVGLが何を描こうとしているかを示すパラメータを送ります。 | ||
+ | |||
+ | |||
+ | これらのパラメータのいくつかのフィールドは、他のものを描画するために変更することができ、任意のカスタム描画操作を手動で追加することができます。 | ||
+ | |||
+ | |||
+ | このための良い使用例として、ボタン行列ウィジェットがあります。 | ||
+ | |||
+ | |||
+ | デフォルトでは、そのボタンは異なる状態でスタイルを設定することができますが、ボタンを1つずつスタイル設定することはできません。 | ||
+ | |||
+ | |||
+ | しかし、各ボタンに対してイベントが送られ、例えば、LVGLに特定のボタンに異なる色を使うように指示したり、いくつかのボタンに手動で画像を描画したりすることができます。 | ||
+ | |||
+ | |||
+ | それぞれのイベントについては、以下で詳しく説明します。 | ||
|} | |} | ||
− | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | + | :[[App:Library:LVGL:docs:Overview#Drawing|戻る : Previous]] |
227行目: | 300行目: | ||
The clip area is required in draw functions to make them draw only on a limited area. | The clip area is required in draw functions to make them draw only on a limited area. | ||
− | | | + | |これらのイベントは、実際のオブジェクトの描画に関連するものである。 |
+ | 例えば、ボタンやテキストなどの描画はここで行われます。 | ||
+ | |||
+ | <code style="color: #bb0000;">lv_event_get_clip_area(event)</code> は、現在のクリップ領域を取得するために使用することができます。 | ||
+ | |||
+ | クリップ領域は、描画関数が限られた領域にしか描画しないようにするために必要です。 | ||
|} | |} | ||
− | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | + | :[[App:Library:LVGL:docs:Overview#Drawing|戻る : Previous]] |
243行目: | 321行目: | ||
E.g. add a line mask that "removes" the right side of an object. | E.g. add a line mask that "removes" the right side of an object. | ||
− | | | + | |オブジェクトの描画を開始する前に送信されます。 |
+ | ここは、マスクを手動で追加するのに適した場所です。 | ||
+ | |||
+ | 例えば、オブジェクトの右側を「削除」するラインマスクを追加します。 | ||
|} | |} | ||
− | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | + | :[[App:Library:LVGL:docs:Overview#Drawing|戻る : Previous]] |
259行目: | 340行目: | ||
First, the widgets' internal events are called to perform drawing and after that you can draw anything on top of them. For example you can add a custom text or an image. | First, the widgets' internal events are called to perform drawing and after that you can draw anything on top of them. For example you can add a custom text or an image. | ||
− | | | + | |オブジェクトの実際の描画は、このイベントで行われます。 |
+ | 例えば、ボタン用の矩形はここで描画されます。 | ||
+ | |||
+ | まず、ウィジェットの内部イベントが呼び出されて描画が行われ、その後、ウィジェットの上に何かを描画することができます。例えば、カスタムテキストや画像を追加することができます。 | ||
|} | |} | ||
− | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | + | :[[App:Library:LVGL:docs:Overview#Drawing|戻る : Previous]] |
273行目: | 357行目: | ||
You can draw anything here as well and it's also a good place to remove any masks created in <code style="color: #bb0000;">LV_EVENT_DRAW_MAIN_BEGIN</code>. | You can draw anything here as well and it's also a good place to remove any masks created in <code style="color: #bb0000;">LV_EVENT_DRAW_MAIN_BEGIN</code>. | ||
− | | | + | |メイン描画が終了したときに呼び出される。 |
+ | ここでも何でも描画でき、<code style="color: #bb0000;">LV_EVENT_DRAW_MAIN_BEGIN</code>で作成されたマスクを削除するのにも良い場所である。 | ||
|} | |} | ||
− | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | + | :[[App:Library:LVGL:docs:Overview#Drawing|戻る : Previous]] |
289行目: | 374行目: | ||
<code style="color: #bb0000;">lv_event_get_clip_area(event)</code> can be used to get the current clip area. | <code style="color: #bb0000;">lv_event_get_clip_area(event)</code> can be used to get the current clip area. | ||
− | | | + | |ポストドローイングイベントは、オブジェクトの子オブジェクトがすべて描画されたときに呼び出される。 |
+ | 例えば、LVGLはスクロールバーを描画するためにポストドローイングフェーズを使用します。 | ||
+ | |||
+ | <code style="color: #bb0000;">lv_event_get_clip_area(event)</code> は、現在のクリップ領域を取得するために使用されます。 | ||
|} | |} | ||
− | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | + | :[[App:Library:LVGL:docs:Overview#Drawing|戻る : Previous]] |
303行目: | 391行目: | ||
Masks can be added here too to mask out the post drawn content. | Masks can be added here too to mask out the post drawn content. | ||
− | | | + | |ポストドローイングフェーズを開始する前に送信される。 |
+ | 描画後の内容をマスクするために、ここでもマスクを追加することができる。 | ||
|} | |} | ||
− | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | + | :[[App:Library:LVGL:docs:Overview#Drawing|戻る : Previous]] |
315行目: | 404行目: | ||
| | | | ||
The actual drawing should happen here. | The actual drawing should happen here. | ||
− | | | + | |実際の描画はここで行う必要があります。 |
|} | |} | ||
− | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | + | :[[App:Library:LVGL:docs:Overview#Drawing|戻る : Previous]] |
329行目: | 418行目: | ||
If masks were not removed in <code style="color: #bb0000;">LV_EVENT_DRAW_MAIN_END</code> they should be removed here. | If masks were not removed in <code style="color: #bb0000;">LV_EVENT_DRAW_MAIN_END</code> they should be removed here. | ||
− | | | + | |後描画が終了したときに呼び出される。 |
+ | |||
+ | <code style="color: #bb0000;">LV_EVENT_DRAW_MAIN_END</code> でマスクが削除されていない場合は、ここで削除する必要があります。 | ||
|} | |} | ||
− | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | + | :[[App:Library:LVGL:docs:Overview#Drawing|戻る : Previous]] |
353行目: | 444行目: | ||
<code style="color: #bb0000;">lv_obj_draw_part_t</code> has the following fields: | <code style="color: #bb0000;">lv_obj_draw_part_t</code> has the following fields: | ||
+ | <syntaxhighlight lang="C++" style="border:1px dashed gray;"> | ||
// Always set | // Always set | ||
const lv_area_t * clip_area; // The current clip area, required if you need to draw something in the event | const lv_area_t * clip_area; // The current clip area, required if you need to draw something in the event | ||
373行目: | 465行目: | ||
int32_t value; // A value calculated during drawing. E.g. Chart's tick line value. | int32_t value; // A value calculated during drawing. E.g. Chart's tick line value. | ||
const void * sub_part_ptr; // A pointer the identifies something in the part. E.g. chart series. | const void * sub_part_ptr; // A pointer the identifies something in the part. E.g. chart series. | ||
+ | </syntaxhighlight> | ||
<code style="color: #bb0000;">lv_event_get_draw_part_dsc(event)</code> can be used to get a pointer to <code style="color: #bb0000;">lv_obj_draw_part_t</code>. | <code style="color: #bb0000;">lv_event_get_draw_part_dsc(event)</code> can be used to get a pointer to <code style="color: #bb0000;">lv_obj_draw_part_t</code>. | ||
− | | | + | |LVGLがオブジェクトの一部分(例えば、スライダーのインジケータ、テーブルのセル、ボタンマトリックスのボタン)を描画するとき、描画のいくつかのコンテキストでその部分の描画の前後にイベントを送信します。 |
+ | |||
+ | |||
+ | |||
+ | |||
+ | これにより、マスク、追加描画、LVGLが描画に使おうとしているパラメータの変更など、非常に低いレベルで部品を変更することができます。 | ||
+ | |||
+ | これらのイベントでは、 <code style="color: #bb0000;">lv_obj_draw_part_t</code>構造体が、描画のコンテキストを記述するために使用される。 | ||
+ | |||
+ | すべてのフィールドが、すべての部品とウィジェットに設定されているわけではない事に注意して下さい。 | ||
+ | |||
+ | |||
+ | |||
+ | ウィジェットに設定されているフィールドを確認するには、ウィジェットのドキュメントを参照してください。 | ||
+ | |||
+ | <code style="color: #bb0000;">lv_obj_draw_part_t</code> には、以下のフィールドがあります。 | ||
+ | <syntaxhighlight lang="C++" style="border:1px dashed gray;"> | ||
+ | // Always set | ||
+ | const lv_area_t * clip_area; // The current clip area, required if you need to draw something in the event | ||
+ | uint32_t part; // The current part for which the event is sent | ||
+ | uint32_t id; // The index of the part. E.g. a button's index on button matrix or table cell index. | ||
+ | |||
+ | // Draw desciptors, set only if related | ||
+ | lv_draw_rect_dsc_t * rect_dsc; // A draw descriptor that can be modified to changed what LVGL will draw. Set only for rectangle-like parts | ||
+ | lv_draw_label_dsc_t * label_dsc; // A draw descriptor that can be modified to changed what LVGL will draw. Set only for text-like parts | ||
+ | lv_draw_line_dsc_t * line_dsc; // A draw descriptor that can be modified to changed what LVGL will draw. Set only for line-like parts | ||
+ | lv_draw_img_dsc_t * img_dsc; // A draw descriptor that can be modified to changed what LVGL will draw. Set only for image-like parts | ||
+ | lv_draw_arc_dsc_t * arc_dsc; // A draw descriptor that can be modified to changed what LVGL will draw. Set only for arc-like parts | ||
+ | |||
+ | // Other parameters | ||
+ | lv_area_t * draw_area; // The area of the part being drawn | ||
+ | const lv_point_t * p1; // A point calculated during drawing. E.g. a point of a chart or the center of an arc. | ||
+ | const lv_point_t * p2; // A point calculated during drawing. E.g. a point of a chart. | ||
+ | char text[16]; // A text calculated during drawing. Can be modified. E.g. tick labels on a chart axis. | ||
+ | lv_coord_t radius; // E.g. the radius of an arc (not the corner radius). | ||
+ | int32_t value; // A value calculated during drawing. E.g. Chart's tick line value. | ||
+ | const void * sub_part_ptr; // A pointer the identifies something in the part. E.g. chart series. | ||
+ | </syntaxhighlight> | ||
+ | <code style="color: #bb0000;">lv_event_get_draw_part_dsc(event)</code> は、 <code style="color: #bb0000;">lv_obj_draw_part_t</code> へのポインタを取得するために使用することができます。 | ||
|} | |} | ||
− | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | + | :[[App:Library:LVGL:docs:Overview#Drawing|戻る : Previous]] |
386行目: | 517行目: | ||
| | | | ||
Start the drawing of a part. This is a good place to modify the draw descriptors (e.g. <code style="color: #bb0000;">rect_dsc</code>), or add masks. | Start the drawing of a part. This is a good place to modify the draw descriptors (e.g. <code style="color: #bb0000;">rect_dsc</code>), or add masks. | ||
− | | | + | |部品の描画を開始します。ここで描画記述子(例:<code style="color: #bb0000;">rect_dsc</code>など)を変更したり、マスクを追加したりします。 |
|} | |} | ||
− | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | + | :[[App:Library:LVGL:docs:Overview#Drawing|戻る : Previous]] |
398行目: | 529行目: | ||
| | | | ||
Finish the drawing of a part. This is a good place to draw extra content on the part or remove masks added in <code style="color: #bb0000;">LV_EVENT_DRAW_PART_BEGIN</code>. | Finish the drawing of a part. This is a good place to draw extra content on the part or remove masks added in <code style="color: #bb0000;">LV_EVENT_DRAW_PART_BEGIN</code>. | ||
− | | | + | |パーツの描画を終了する。部品に追加コンテンツを描画したり、<code style="color: #bb0000;">LV_EVENT_DRAW_PART_BEGIN</code>で追加したマスクを削除するのに適した場所です。 |
|} | |} | ||
− | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | + | :[[App:Library:LVGL:docs:Overview#Drawing|戻る : Previous]] |
417行目: | 548行目: | ||
* <code style="color: #bb0000;">LV_COVER_RES_NOT_COVER</code> the area is not covered by the object | * <code style="color: #bb0000;">LV_COVER_RES_NOT_COVER</code> the area is not covered by the object | ||
* <code style="color: #bb0000;">LV_COVER_RES_MASKED</code> there is a mask on the object, so it does not fully cover the area | * <code style="color: #bb0000;">LV_COVER_RES_MASKED</code> there is a mask on the object, so it does not fully cover the area | ||
+ | |||
Here are some reasons why an object would be unable to fully cover an area: | Here are some reasons why an object would be unable to fully cover an area: | ||
427行目: | 559行目: | ||
* In this case LVGL needs to know the colors under the object to apply blending properly | * In this case LVGL needs to know the colors under the object to apply blending properly | ||
* It's a text, etc | * It's a text, etc | ||
+ | |||
In short if for any reason the area below an object is visible than the object doesn't cover that area. | In short if for any reason the area below an object is visible than the object doesn't cover that area. | ||
437行目: | 570行目: | ||
You need to check only the drawing you have added. | You need to check only the drawing you have added. | ||
− | The existing properties known by a widget are handled in its internal events. | + | The existing properties known by a widget are handled in its internal events. |
E.g. if a widget has > 0 radius it might not cover an area, but you need to handle <code style="color: #bb0000;">radius</code> only if you will modify it and the widget won't know about it. | E.g. if a widget has > 0 radius it might not cover an area, but you need to handle <code style="color: #bb0000;">radius</code> only if you will modify it and the widget won't know about it. | ||
− | | | + | |このイベントは、オブジェクトがある領域を完全に覆っているかどうかをチェックするために使用されます。 |
+ | |||
+ | <code style="color: #bb0000;">lv_event_get_cover_area(event)</code>はチェックする領域へのポインタを返し、<code style="color: #bb0000;">lv_event_set_cover_res(event, res)</code>はこれらの結果のいずれかを設定するために使用されます。 | ||
+ | |||
+ | *<code style="color: #bb0000;">LV_COVER_RES_COVER</code> 領域はオブジェクトによって完全にカバーされている. | ||
+ | *<code style="color: #bb0000;">LV_COVER_RES_NOT_COVER</code> 領域はオブジェクトによって覆われていない. | ||
+ | *<code style="color: #bb0000;">LV_COVER_RES_MASKED</code>オブジェクトにマスクがあり,その領域を完全に覆っていません. | ||
+ | |||
+ | |||
+ | ここでは、物体が領域を完全にカバーできない理由を説明します。 | ||
+ | |||
+ | * 単純に面積が足りない | ||
+ | * 半径を持っている | ||
+ | * 背景の不透明度が100%でない | ||
+ | * ARGBまたはクロマキー画像である | ||
+ | * 通常のブレンディングモードを持っていない。 | ||
+ | * この場合、LVGLはオブジェクトの下の色を知っていなければ、適切にブレンディングを適用することができません。 | ||
+ | * テキストである、など | ||
+ | |||
+ | |||
+ | 要するに、何らかの理由でオブジェクトの下の領域が見えている場合、そのオブジェクトはその領域をカバーしていません。 | ||
+ | |||
+ | このイベントを送る前に、LVGLは、少なくともウィジェットの座標がその領域を完全に覆っているかどうかをチェックします。 | ||
+ | |||
+ | もしそうでなければ、このイベントは呼ばれません。 | ||
+ | |||
+ | |||
+ | 追加した描画のみを確認する必要があります。 | ||
+ | |||
+ | ウィジェットが知っている既存のプロパティは、その内部イベントで処理されます。 | ||
+ | |||
+ | |||
+ | 例えば、ウィジェットの半径が > 0 の場合、領域をカバーできないかもしれませんが、<code style="color: #bb0000;">radius</code> を変更する場合のみ処理する必要があり、ウィジェットはそれを知ることはありません。 | ||
|} | |} | ||
− | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | + | :[[App:Library:LVGL:docs:Overview#Drawing|戻る : Previous]] |
458行目: | 623行目: | ||
You can simply set the required draw area with <code style="color: #bb0000;">lv_event_set_ext_draw_size(e, size)</code>. | You can simply set the required draw area with <code style="color: #bb0000;">lv_event_set_ext_draw_size(e, size)</code>. | ||
− | | | + | |ウィジェットの外側に描画する必要がある場合、LVGLは描画のための余分なスペースを提供するために、そのことを知る必要があります。 |
+ | 例えば、スライダーの現在値をそのノブの上に書き込むイベントを作るとします。 | ||
+ | |||
+ | この場合、LVGLは、スライダーの描画領域がテキストに必要な大きさより大きいことを知る必要があります。 | ||
+ | |||
+ | <code style="color: #bb0000;">lv_event_set_ext_draw_size(e, size)</code>で必要な描画領域を設定すればよいのです。 | ||
|} | |} | ||
2022年7月2日 (土) 13:19時点における最新版
https://docs.lvgl.io/8.2/overview/drawing.html
Drawing
英文 | 自動翻訳 |
---|---|
With LVGL, you don't need to draw anything manually. Just create objects (like buttons, labels, arc, etc.), move and change them, and LVGL will refresh and redraw what is required. However, it can be useful to have a basic understanding of how drawing happens in LVGL to add customization, make it easier to find bugs or just out of curiosity. The basic concept is to not draw directly onto the display but rather to first draw on an internal draw buffer. When a drawing (rendering) is ready that buffer is copied to the display.
LVGL will simply render in "tiles" that fit into the given draw buffer. This approach has two main advantages compared to directly drawing to the display:
|
LVGLを使えば、何も手動で描く必要はありません。
オブジェクト(ボタン、ラベル、円弧など)を作成し、移動、変更するだけで、LVGLは必要なものをリフレッシュして再描画します。 しかし、LVGLでどのように描画が行われるかを基本的に理解しておくことは、カスタマイズの追加やバグの発見を容易にするため、あるいは単なる好奇心で、役に立つことがあるのです。 基本的なコンセプトは、ディスプレイに直接描画するのではなく、まず内部のドローバッファに描画することです。 描画(レンダリング)の準備ができると、そのバッファがディスプレイにコピーされます。
LVGLは、与えられたドローバッファに収まる「タイル」で単純にレンダリングします。 この方法は、ディスプレイへの直接描画と比較して、主に2つの利点があります。
|
Mechanism of screen refreshing
英文 | 自動翻訳 |
---|---|
Be sure to get familiar with the Buffering modes of LVGL first. LVGL refreshes the screen in the following steps:
For example, if a button's label has changed, the library will see that it's enough to draw the button under the text and it's not necessary to redraw the display under the rest of the button too. The difference between buffering modes regarding the drawing mechanism is the following:
|
まず,LVGL の Buffering モードに慣れるようにしてください.
LVGLは以下の手順で画面を更新しています。
例えば、ボタンのラベルが変更された場合、ライブラリは、テキストの下にボタンを描画すれば十分であり、ボタンの残りの部分の表示も再描画する必要はないと判断します。 描画の仕組みに関するバッファリングモードの違いは、以下の通りです。
|
Masking
英文 | 自動翻訳 |
---|---|
Masking is the basic concept of LVGL's draw engine. To use LVGL it's not required to know about the mechanisms described here but you might find interesting to know how drawing works under hood. Knowing about masking comes in handy if you want to customize drawing. To learn about masking let's see the steps of drawing first. LVGL performs the following steps to render any shape, image or text. It can be considered as a drawing pipeline.
|
マスキングは、LVGLの描画エンジンの基本概念です。
LVGLを使用するには、ここで説明したメカニズムについて知る必要はありませんが、内部での描画のしくみを知ることは興味深いことです。マスキングに関する知識は、図面をカスタマイズする場合に役立ちます。
LVGLは、次の手順を実行してシェイプ、イメージ、またはテキストをレンダリングします。これは、描画パイプラインと見なすことができます。
|
Using masks
英文 | 自動翻訳 |
---|---|
Every mask type has a related parameter structure to describe the mask's data. The following parameter types exist:
|
すべてのマスクタイプは、マスクのデータを記述するための関連するパラメータ構造を持っています。
以下のパラメータタイプが存在する。
パラメータは何度でも追加・削除できますが、不要になったら解放する必要があります。
|
Hook drawing
英文 | 自動翻訳 |
---|---|
Although widgets can be easily customized by styles there might be cases when something more custom is required. To ensure a great level of flexibility LVGL sends a lot of events during drawing with parameters that tell what LVGL is about to draw. Some fields of these parameters can be modified to draw something else or any custom drawing operations can be added manually. A good use case for this is the Button matrix widget. By default, its buttons can be styled in different states, but you can't style the buttons one by one. However, an event is sent for every button and you can, for example, tell LVGL to use different colors on a specific button or to manually draw an image on some buttons. Each of these events is described in detail below. |
ウィジェットはスタイルによって簡単にカスタマイズできますが、よりカスタムなものが必要な場合があります。
|
Main drawing
英文 | 自動翻訳 |
---|---|
These events are related to the actual drawing of an object. E.g. the drawing of buttons, texts, etc. happens here.
The clip area is required in draw functions to make them draw only on a limited area. |
これらのイベントは、実際のオブジェクトの描画に関連するものである。
例えば、ボタンやテキストなどの描画はここで行われます。
クリップ領域は、描画関数が限られた領域にしか描画しないようにするために必要です。 |
LV_EVENT_DRAW_MAIN_BEGIN
英文 | 自動翻訳 |
---|---|
Sent before starting to draw an object. This is a good place to add masks manually. E.g. add a line mask that "removes" the right side of an object. |
オブジェクトの描画を開始する前に送信されます。
ここは、マスクを手動で追加するのに適した場所です。 例えば、オブジェクトの右側を「削除」するラインマスクを追加します。 |
LV_EVENT_DRAW_MAIN
英文 | 自動翻訳 |
---|---|
The actual drawing of an object happens in this event. E.g. a rectangle for a button is drawn here. First, the widgets' internal events are called to perform drawing and after that you can draw anything on top of them. For example you can add a custom text or an image. |
オブジェクトの実際の描画は、このイベントで行われます。
例えば、ボタン用の矩形はここで描画されます。 まず、ウィジェットの内部イベントが呼び出されて描画が行われ、その後、ウィジェットの上に何かを描画することができます。例えば、カスタムテキストや画像を追加することができます。 |
LV_EVENT_DRAW_MAIN_END
英文 | 自動翻訳 |
---|---|
Called when the main drawing is finished. You can draw anything here as well and it's also a good place to remove any masks created in |
メイン描画が終了したときに呼び出される。
ここでも何でも描画でき、 |
Post drawing
英文 | 自動翻訳 |
---|---|
Post drawing events are called when all the children of an object are drawn. For example LVGL use the post drawing phase to draw scrollbars because they should be above all of the children.
|
ポストドローイングイベントは、オブジェクトの子オブジェクトがすべて描画されたときに呼び出される。
例えば、LVGLはスクロールバーを描画するためにポストドローイングフェーズを使用します。
|
LV_EVENT_DRAW_POST_BEGIN
英文 | 自動翻訳 |
---|---|
Sent before starting the post draw phase. Masks can be added here too to mask out the post drawn content. |
ポストドローイングフェーズを開始する前に送信される。
描画後の内容をマスクするために、ここでもマスクを追加することができる。 |
LV_EVENT_DRAW_POST
英文 | 自動翻訳 |
---|---|
The actual drawing should happen here. |
実際の描画はここで行う必要があります。 |
LV_EVENT_DRAW_POST_END
英文 | 自動翻訳 |
---|---|
Called when post drawing has finished. If masks were not removed in |
後描画が終了したときに呼び出される。
|
Part drawing
英文 | 自動翻訳 |
---|---|
When LVGL draws a part of an object (e.g. a slider's indicator, a table's cell or a button matrix's button) it sends events before and after drawing that part with some context of the drawing.
In these events an Not all fields are set for every part and widget.
// Always set
const lv_area_t * clip_area; // The current clip area, required if you need to draw something in the event
uint32_t part; // The current part for which the event is sent
uint32_t id; // The index of the part. E.g. a button's index on button matrix or table cell index.
// Draw desciptors, set only if related
lv_draw_rect_dsc_t * rect_dsc; // A draw descriptor that can be modified to changed what LVGL will draw. Set only for rectangle-like parts
lv_draw_label_dsc_t * label_dsc; // A draw descriptor that can be modified to changed what LVGL will draw. Set only for text-like parts
lv_draw_line_dsc_t * line_dsc; // A draw descriptor that can be modified to changed what LVGL will draw. Set only for line-like parts
lv_draw_img_dsc_t * img_dsc; // A draw descriptor that can be modified to changed what LVGL will draw. Set only for image-like parts
lv_draw_arc_dsc_t * arc_dsc; // A draw descriptor that can be modified to changed what LVGL will draw. Set only for arc-like parts
// Other parameters
lv_area_t * draw_area; // The area of the part being drawn
const lv_point_t * p1; // A point calculated during drawing. E.g. a point of a chart or the center of an arc.
const lv_point_t * p2; // A point calculated during drawing. E.g. a point of a chart.
char text[16]; // A text calculated during drawing. Can be modified. E.g. tick labels on a chart axis.
lv_coord_t radius; // E.g. the radius of an arc (not the corner radius).
int32_t value; // A value calculated during drawing. E.g. Chart's tick line value.
const void * sub_part_ptr; // A pointer the identifies something in the part. E.g. chart series.
|
LVGLがオブジェクトの一部分(例えば、スライダーのインジケータ、テーブルのセル、ボタンマトリックスのボタン)を描画するとき、描画のいくつかのコンテキストでその部分の描画の前後にイベントを送信します。
これらのイベントでは、 すべてのフィールドが、すべての部品とウィジェットに設定されているわけではない事に注意して下さい。
ウィジェットに設定されているフィールドを確認するには、ウィジェットのドキュメントを参照してください。
// Always set
const lv_area_t * clip_area; // The current clip area, required if you need to draw something in the event
uint32_t part; // The current part for which the event is sent
uint32_t id; // The index of the part. E.g. a button's index on button matrix or table cell index.
// Draw desciptors, set only if related
lv_draw_rect_dsc_t * rect_dsc; // A draw descriptor that can be modified to changed what LVGL will draw. Set only for rectangle-like parts
lv_draw_label_dsc_t * label_dsc; // A draw descriptor that can be modified to changed what LVGL will draw. Set only for text-like parts
lv_draw_line_dsc_t * line_dsc; // A draw descriptor that can be modified to changed what LVGL will draw. Set only for line-like parts
lv_draw_img_dsc_t * img_dsc; // A draw descriptor that can be modified to changed what LVGL will draw. Set only for image-like parts
lv_draw_arc_dsc_t * arc_dsc; // A draw descriptor that can be modified to changed what LVGL will draw. Set only for arc-like parts
// Other parameters
lv_area_t * draw_area; // The area of the part being drawn
const lv_point_t * p1; // A point calculated during drawing. E.g. a point of a chart or the center of an arc.
const lv_point_t * p2; // A point calculated during drawing. E.g. a point of a chart.
char text[16]; // A text calculated during drawing. Can be modified. E.g. tick labels on a chart axis.
lv_coord_t radius; // E.g. the radius of an arc (not the corner radius).
int32_t value; // A value calculated during drawing. E.g. Chart's tick line value.
const void * sub_part_ptr; // A pointer the identifies something in the part. E.g. chart series.
|
LV_EVENT_DRAW_PART_BEGIN
英文 | 自動翻訳 |
---|---|
Start the drawing of a part. This is a good place to modify the draw descriptors (e.g. |
部品の描画を開始します。ここで描画記述子(例:rect_dsc など)を変更したり、マスクを追加したりします。
|
LV_EVENT_DRAW_PART_END
英文 | 自動翻訳 |
---|---|
Finish the drawing of a part. This is a good place to draw extra content on the part or remove masks added in |
パーツの描画を終了する。部品に追加コンテンツを描画したり、LV_EVENT_DRAW_PART_BEGIN で追加したマスクを削除するのに適した場所です。
|
Others
LV_EVENT_COVER_CHECK
英文 | 自動翻訳 |
---|---|
This event is used to check whether an object fully covers an area or not.
Before sending this event LVGL checks if at least the widget's coordinates fully cover the area or not. If not the event is not called.
The existing properties known by a widget are handled in its internal events. E.g. if a widget has > 0 radius it might not cover an area, but you need to handle |
このイベントは、オブジェクトがある領域を完全に覆っているかどうかをチェックするために使用されます。
このイベントを送る前に、LVGLは、少なくともウィジェットの座標がその領域を完全に覆っているかどうかをチェックします。 もしそうでなければ、このイベントは呼ばれません。
ウィジェットが知っている既存のプロパティは、その内部イベントで処理されます。
|
LV_EVENT_REFR_EXT_DRAW_SIZE
英文 | 自動翻訳 |
---|---|
If you need to draw outside a widget, LVGL needs to know about it to provide extra space for drawing. Let's say you create an event which writes the current value of a slider above its knob. In this case LVGL needs to know that the slider's draw area should be larger with the size required for the text. You can simply set the required draw area with |
ウィジェットの外側に描画する必要がある場合、LVGLは描画のための余分なスペースを提供するために、そのことを知る必要があります。
例えば、スライダーの現在値をそのノブの上に書き込むイベントを作るとします。 この場合、LVGLは、スライダーの描画領域がテキストに必要な大きさより大きいことを知る必要があります。
|