「App:Library:LVGL:docs:Overview:Objects」の版間の差分
(同じ利用者による、間の13版が非表示) | |||
1行目: | 1行目: | ||
https://docs.lvgl.io/8.2/overview/object.html | https://docs.lvgl.io/8.2/overview/object.html | ||
__NOTOC__ | __NOTOC__ | ||
+ | = Objects = | ||
{| class="wikitable" | {| class="wikitable" | ||
!英文 | !英文 | ||
6行目: | 7行目: | ||
|- | |- | ||
| | | | ||
− | | | + | In LVGL the basic building blocks of a user interface are the objects, also called ''Widgets''. |
− | + | ||
+ | For example a [https://docs.lvgl.io/8.2/widgets/core/btn.html '''Button'''], [https://docs.lvgl.io/8.2/widgets/core/label.html '''Label'''], [https://docs.lvgl.io/8.2/widgets/core/img.html '''Image'''], [https://docs.lvgl.io/8.2/widgets/extra/list.html '''List'''], [https://docs.lvgl.io/8.2/widgets/extra/chart.html '''Chart'''] or [https://docs.lvgl.io/8.2/widgets/core/textarea.html '''Text area''']. | ||
+ | |||
+ | |||
+ | You can see all the [https://docs.lvgl.io/8.2/widgets/index.html '''Object types'''] here. | ||
+ | |||
+ | |||
+ | All objects are referenced using an <code style="color: #bb0000;">lv_obj_t</code> pointer as a handle. | ||
+ | |||
+ | This pointer can later be used to set or get the attributes of the object. | ||
+ | |LVGLでは、ユーザー・インターフェースの基本的な構成要素は、ウィジェットとも呼ばれるオブジェクトです。 | ||
+ | |||
+ | 例えば、 [https://docs.lvgl.io/8.2/widgets/core/btn.html '''Button'''], [https://docs.lvgl.io/8.2/widgets/core/label.html '''Label'''], [https://docs.lvgl.io/8.2/widgets/core/img.html '''Image'''], [https://docs.lvgl.io/8.2/widgets/extra/list.html '''List'''], [https://docs.lvgl.io/8.2/widgets/extra/chart.html '''Chart'''] or [https://docs.lvgl.io/8.2/widgets/core/textarea.html '''Text area''']などです。 | ||
+ | |||
+ | |||
+ | すべての [https://docs.lvgl.io/8.2/widgets/index.html '''Object types'''] をここで見ることができます。 | ||
− | |||
− | |||
− | + | すべてのオブジェクトは、<code style="color: #bb0000;">lv_obj_t</code> ポインタをハンドルとして参照されます。 | |
+ | |||
+ | このポインタは、後で、オブジェクトの属性を設定したり、取得したりするために使用されます。 | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview#Objects|戻る : Previous]] | ||
− | |||
== Attributes == | == Attributes == | ||
− | |||
=== Basic attributes === | === Basic attributes === | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
All object types share some basic attributes: | All object types share some basic attributes: | ||
28行目: | 49行目: | ||
* Etc | * Etc | ||
− | You can set/get these attributes with <code>lv_obj_set_...</code> and <code>lv_obj_get_...</code> functions. For example: | + | |
+ | You can set/get these attributes with <code style="color: #bb0000;">lv_obj_set_...</code> and <code style="color: #bb0000;">lv_obj_get_...</code> functions. | ||
+ | |||
+ | For example: | ||
+ | <syntaxhighlight lang="C++" style="border: 1px dashed gray;"> | ||
+ | /*Set basic object attributes*/ | ||
+ | lv_obj_set_size(btn1, 100, 50); /*Set a button's size*/ | ||
+ | lv_obj_set_pos(btn1, 20,30); /*Set a button's position*/ | ||
+ | </syntaxhighlight> | ||
+ | To see all the available functions visit the [https://docs.lvgl.io/8.2/widgets/obj.html '''Base object's documentation''']. | ||
+ | |すべてのオブジェクトタイプは、いくつかの基本的な属性を共有しています。 | ||
+ | |||
+ | * Position | ||
+ | * Size | ||
+ | * Parent | ||
+ | * Styles | ||
+ | * Event handlers | ||
+ | * Etc | ||
+ | |||
+ | |||
+ | これらの属性は, <code style="color: #bb0000;">lv_obj_set_...</code> and <code style="color: #bb0000;">lv_obj_get_...</code> 関数で設定/取得することができます. | ||
+ | |||
+ | For example: | ||
+ | <syntaxhighlight lang="C++" style="border: 1px dashed gray;"> | ||
/*Set basic object attributes*/ | /*Set basic object attributes*/ | ||
lv_obj_set_size(btn1, 100, 50); /*Set a button's size*/ | lv_obj_set_size(btn1, 100, 50); /*Set a button's size*/ | ||
lv_obj_set_pos(btn1, 20,30); /*Set a button's position*/ | lv_obj_set_pos(btn1, 20,30); /*Set a button's position*/ | ||
− | To | + | </syntaxhighlight> |
+ | 使用可能なすべての関数については、 [https://docs.lvgl.io/8.2/widgets/obj.html '''Base object's documentation''']を参照してください。 | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview#Objects|戻る : Previous]] | ||
+ | |||
+ | === Specific attributes === | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
+ | The object types have special attributes too. For example, a slider has | ||
+ | |||
+ | * Minimum and maximum values | ||
+ | * Current value | ||
+ | |||
+ | |||
+ | For these special attributes, every object type may have unique API functions. | ||
+ | |||
+ | For example for a slider: | ||
+ | |||
+ | <syntaxhighlight lang="C++" style="border: 1px dashed gray;"> | ||
+ | /*Set slider specific attributes*/ | ||
+ | lv_slider_set_range(slider1, 0, 100); /*Set the min. and max. values*/ | ||
+ | lv_slider_set_value(slider1, 40, LV_ANIM_ON); /*Set the current value (position)*/ | ||
+ | </syntaxhighlight> | ||
+ | |||
+ | The API of the widgets is described in their [https://docs.lvgl.io/8.2/widgets/index.html '''Documentation'''] but you can also check the respective header files (e.g. ''widgets/lv_slider.h'') | ||
+ | |オブジェクト型にも特殊な属性があります。たとえば、スライダには | ||
+ | |||
+ | * 最小値と最大値 | ||
+ | * 現在の値 | ||
+ | |||
+ | |||
+ | これらの特殊な属性では、すべてのオブジェクトタイプに固有のAPI関数があります。 | ||
+ | |||
+ | スライダの例: | ||
+ | |||
+ | <syntaxhighlight lang="C++" style="border: 1px dashed gray;"> | ||
+ | /*Set slider specific attributes*/ | ||
+ | lv_slider_set_range(slider1, 0, 100); /*Set the min. and max. values*/ | ||
+ | lv_slider_set_value(slider1, 40, LV_ANIM_ON); /*Set the current value (position)*/ | ||
+ | </syntaxhighlight> | ||
+ | |||
+ | ウィジェットのAPIはそれぞれの [https://docs.lvgl.io/8.2/widgets/index.html '''Documentation'''] but you can に記載されていますが、ヘッダファイル (e.g. ''widgets/lv_slider.h'')で確認することもできます。 | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview#Objects|戻る : Previous]] | ||
+ | |||
+ | == Working mechanisms == | ||
+ | |||
+ | === Parent-child structure === | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
+ | A parent object can be considered as the container of its children. | ||
+ | |||
+ | Every object has exactly one parent object (except screens), but a parent can have any number of children. | ||
+ | |||
+ | There is no limitation for the type of the parent but there are objects which are typically a parent (e.g. button) or a child (e.g. label). | ||
+ | |親オブジェクトは、その子オブジェクトのコンテナと考えることができます。 | ||
+ | |||
+ | |||
+ | すべてのオブジェクトは正確に1つの親オブジェクトを持ちますが(スクリーンを除く)、親は任意の数の子を持つことができます。 | ||
+ | |||
+ | |||
+ | 親のタイプに制限はありませんが、典型的な親(例:ボタン)または子(例:ラベル)になるオブジェクトがあります。 | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview#Objects|戻る : Previous]] | ||
+ | |||
+ | |||
+ | === Moving together === | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
+ | If the position of a parent changes, the children will move along with it. | ||
+ | |||
+ | Therefore, all positions are relative to the parent. | ||
+ | |||
+ | [[file:LVGL docs overview objects 01.png|link=https://docs.lvgl.io/8.2/overview/object.html]] | ||
+ | |||
+ | <syntaxhighlight lang="C++" style="border: 1px dashed gray;"> | ||
+ | lv_obj_t * parent = lv_obj_create(lv_scr_act()); /*Create a parent object on the current screen*/ | ||
+ | lv_obj_set_size(parent, 100, 80); /*Set the size of the parent*/ | ||
+ | |||
+ | lv_obj_t * obj1 = lv_obj_create(parent); /*Create an object on the previously created parent object*/ | ||
+ | lv_obj_set_pos(obj1, 10, 10); /*Set the position of the new object*/ | ||
+ | </syntaxhighlight> | ||
+ | |||
+ | |||
+ | Modify the position of the parent: | ||
+ | |||
+ | [[file:LVGL docs overview objects 02.png|link=https://docs.lvgl.io/8.2/overview/object.html]] | ||
+ | |||
+ | <syntaxhighlight lang="C++" style="border: 1px dashed gray;"> | ||
+ | lv_obj_set_pos(parent, 50, 50); /*Move the parent. The child will move with it.*/ | ||
+ | </syntaxhighlight> | ||
+ | |||
+ | (For simplicity the adjusting of colors of the objects is not shown in the example.) | ||
+ | | | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview#Objects|戻る : Previous]] | ||
+ | |||
+ | |||
+ | === Visibility only on the parent === | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
+ | If a child is partially or fully outside its parent then the parts outside will not be visible. | ||
+ | |||
+ | [[file:LVGL docs overview objects 03.png|link=https://docs.lvgl.io/8.2/overview/object.html]] | ||
+ | |||
+ | <syntaxhighlight lang="C++" style="border: 1px dashed gray;"> | ||
+ | lv_obj_set_x(obj1, -30); /*Move the child a little bit off the parent*/ | ||
+ | </syntaxhighlight> | ||
+ | This behavior can be overwritten with <code style="color: #bb0000;">lv_obj_add_flag(obj, LV_OBJ_FLAG_OVERFLOW_VISIBLE);</code> which allow the children to be drawn out of the parent. | ||
+ | |この動作は <code style="color: #bb0000;">lv_obj_add_flag(obj, LV_OBJ_FLAG_OVERFLOW_VISIBLE);</code>で上書きすることができ、これにより親から子への描画が可能になります。 | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview#Objects|戻る : Previous]] | ||
+ | |||
+ | |||
+ | === Create and delete objects === | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
+ | In LVGL, objects can be created and deleted dynamically at run time. | ||
+ | |||
+ | It means only the currently created (existing) objects consume RAM. | ||
+ | |||
+ | This allows for the creation of a screen just when a button is clicked to open it, and for deletion of screens when a new screen is loaded. | ||
+ | |||
+ | |||
+ | UIs can be created based on the current environment of the device. | ||
+ | |||
+ | For example one can create meters, charts, bars and sliders based on the currently attached sensors. | ||
+ | |||
+ | |||
+ | Every widget has its own '''create''' function with a prototype like this: | ||
+ | <syntaxhighlight lang="C++" style="border: 1px dashed gray;"> | ||
+ | lv_obj_t * lv_<widget>_create(lv_obj_t * parent, <other parameters if any>); | ||
+ | </syntaxhighlight> | ||
+ | |||
+ | |||
+ | Typically, the create functions only have a ''parent'' parameter telling them on which object to create the new widget. | ||
+ | |||
+ | The return value is a pointer to the created object with <code style="color: #bb0000;">lv_obj_t *</code> type. | ||
+ | |||
+ | |||
+ | There is a common '''delete''' function for all object types. | ||
+ | |||
+ | It deletes the object and all of its children. | ||
+ | <syntaxhighlight lang="C++" style="border: 1px dashed gray;"> | ||
+ | void lv_obj_del(lv_obj_t * obj); | ||
+ | <code style="color: #bb0000;">lv_obj_del</code> will delete the object immediately. If for any reason you can't delete the object immediately you can use <c</syntaxhighlight> | ||
+ | ode>lv_obj_del_async(obj) which will perform the deletion on the next call of <code style="color: #bb0000;">lv_timer_handler()</code>. | ||
+ | |||
+ | |||
+ | This is useful e.g. if you want to delete the parent of an object in the child's <code style="color: #bb0000;">LV_EVENT_DELETE</code> handler. | ||
+ | |||
+ | You can remove all the children of an object (but not the object itself) using <code style="color: #bb0000;">lv_obj_clean(obj)</code>. | ||
+ | |||
+ | You can use <code style="color: #bb0000;">lv_obj_del_delayed(obj, 1000)</code> to delete an object after some time. The delay is expressed in milliseconds. | ||
+ | |LVGLでは、オブジェクトは実行時に動的に作成・削除することができます。 | ||
+ | |||
+ | つまり、現在作成されている(既存の)オブジェクトだけがRAMを消費します。 | ||
+ | |||
+ | このため、ボタンをクリックして画面を開くだけで画面を作成したり、新しい画面を読み込むと画面を削除したりすることが可能です。 | ||
+ | |||
+ | 端末の現在の環境に応じたUIを作成することができる。 | ||
+ | |||
+ | 例えば、現在装着されているセンサーを元にメーター、チャート、バー、スライダーを作成することができます。 | ||
+ | |||
+ | 各ウィジェットは、このようなプロトタイプを持つ独自のcreate関数を持っています。<syntaxhighlight lang="C++" style="border: 1px dashed gray;"> | ||
+ | lv_obj_t * lv_<widget>_create(lv_obj_t * parent, <other parameters if any>); | ||
+ | </syntaxhighlight> | ||
+ | |||
+ | |||
+ | 一般に、create 関数は、どのオブジェクトに新しいウィジェットを作成するかを示す親パラメータを持つだけです。 | ||
+ | |||
+ | 戻り値は、<code style="color: #bb0000;">lv_obj_t *</code> 型の作成されたオブジェクトへのポインタです。 | ||
+ | |||
+ | すべてのオブジェクトタイプに共通の delete 関数があります。 | ||
+ | |||
+ | これは、オブジェクトとその子オブジェクトをすべて削除します。<syntaxhighlight lang="C++" style="border: 1px dashed gray;"> | ||
+ | void lv_obj_del(lv_obj_t * obj); | ||
+ | <code style="color: #bb0000;">lv_obj_del</code> will delete the object immediately. If for any reason you can't delete the object immediately you can use <c</syntaxhighlight> | ||
+ | ode>lv_obj_del_async(obj) とすると、次の <code style="color: #bb0000;">lv_timer_handler()</code> のコールで削除が実行されます。 | ||
+ | |||
+ | |||
+ | これは、例えば、子の <code style="color: #bb0000;">LV_EVENT_DELETE</code>ハンドラで、オブジェクトの親を削除したい場合に便利です。 | ||
+ | |||
+ | |||
+ | <code style="color: #bb0000;">lv_obj_clean(obj)</code>を使用すると、オブジェクトのすべての子を削除できます(ただし、オブジェクト自身は削除されません)。 | ||
+ | |||
+ | |||
+ | <code style="color: #bb0000;">lv_obj_del_delayed(obj, 1000)</code>を使用すると、ある時間後にオブジェクトを削除することができます。遅延時間はミリ秒単位で表されます。 | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview#Objects|戻る : Previous]] | ||
+ | |||
+ | |||
+ | == Screens == | ||
+ | |||
+ | === Create screens === | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
+ | The screens are special objects which have no parent object. | ||
+ | |||
+ | So they can be created like: | ||
+ | <syntaxhighlight lang="C++" style="border: 1px dashed gray;"> | ||
+ | lv_obj_t * scr1 = lv_obj_create(NULL); | ||
+ | </syntaxhighlight> | ||
+ | Screens can be created with any object type. | ||
+ | |||
+ | For example, a [https://docs.lvgl.io/8.2/widgets/obj.html '''Base object'''] or an image to make a wallpaper. | ||
+ | |スクリーンは、親オブジェクトを持たない特別なオブジェクトです。 | ||
+ | |||
+ | そのため、次のように作成することができます。<syntaxhighlight lang="C++" style="border: 1px dashed gray;"> | ||
+ | lv_obj_t * scr1 = lv_obj_create(NULL); | ||
+ | </syntaxhighlight> | ||
+ | 画面は、どのようなオブジェクトタイプでも作成することができます。 | ||
+ | |||
+ | 例えば、 [https://docs.lvgl.io/8.2/widgets/obj.html '''Base object'''] や画像を使って壁紙を作ることができます。 | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview#Objects|戻る : Previous]] | ||
+ | |||
+ | |||
+ | === Get the active screen === | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
+ | There is always an active screen on each display. | ||
+ | |||
+ | By default, the library creates and loads a "Base object" as a screen for each display. | ||
+ | |||
+ | To get the currently active screen use the <code style="color: #bb0000;">lv_scr_act()</code> function. | ||
+ | |各ディスプレイには、常にアクティブなスクリーンが存在します。 | ||
+ | |||
+ | デフォルトでは、ライブラリは各ディスプレイのスクリーンとして "Base object" を作成し、ロードします。 | ||
+ | |||
+ | 現在アクティブな画面を取得するには、<code style="color: #bb0000;">lv_scr_act()</code>関数を使用します。 | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview#Objects|戻る : Previous]] | ||
+ | |||
+ | |||
+ | === Load screens === | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
+ | To load a new screen, use <code style="color: #bb0000;">lv_scr_load(scr1)</code>. | ||
+ | |新しい画面を読み込むには、 <code style="color: #bb0000;">lv_scr_load(scr1)</code>を使用します。 | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview#Objects|戻る : Previous]] | ||
+ | |||
+ | |||
+ | === Layers === | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
+ | There are two automatically generated layers: | ||
+ | |||
+ | * top layer | ||
+ | * system layer | ||
+ | |||
+ | |||
+ | They are independent of the screens and they will be shown on every screen. | ||
+ | |||
+ | The ''top layer'' is above every object on the screen and the ''system layer'' is above the ''top layer''. | ||
+ | |||
+ | You can add any pop-up windows to the ''top layer'' freely. | ||
+ | |||
+ | But, the ''system layer'' is restricted to system-level things (e.g. mouse cursor will be placed there with <code style="color: #bb0000;">lv_indev_set_cursor()</code>). | ||
+ | |||
+ | The <code style="color: #bb0000;">lv_layer_top()</code> and <code style="color: #bb0000;">lv_layer_sys()</code> functions return pointers to the top and system layers respectively. | ||
+ | |||
+ | |||
+ | Read the [https://docs.lvgl.io/8.2/overview/layer.html '''Layer overview'''] section to learn more about layers. | ||
+ | |自動生成されるレイヤーは2つです。 | ||
+ | |||
+ | * top layer | ||
+ | * system layer | ||
+ | |||
+ | |||
+ | これらはスクリーンから独立しており、どのスクリーンにも表示されます。 | ||
+ | |||
+ | トップレイヤーは画面上のあらゆるオブジェクトの上にあり、システムレイヤーはトップレイヤーの上にあります。 | ||
+ | |||
+ | トップレイヤーには、任意のポップアップウィンドウを自由に追加することができます。 | ||
+ | |||
+ | |||
+ | しかし、システムレイヤーはシステムレベルのものに限定されます(例えば、マウスカーソルは<code style="color: #bb0000;">lv_indev_set_cursor()</code>でそこに配置されます)。 | ||
+ | |||
+ | <code style="color: #bb0000;">lv_layer_top()</code> と <code style="color: #bb0000;">lv_layer_sys()</code> 関数は、それぞれトップレイヤーとシステムレイヤーへのポインタを返します。 | ||
+ | |||
+ | |||
+ | レイヤーについてもっと知るには、 [https://docs.lvgl.io/8.2/overview/layer.html '''Layer overview'''] section を読んでください。 | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview#Objects|戻る : Previous]] | ||
+ | |||
+ | |||
+ | ==== Load screen with animation ==== | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
+ | A new screen can be loaded with animation by using <code style="color: #bb0000;">lv_scr_load_anim(scr, transition_type, time, delay, auto_del)</code>. The following transition types exist: | ||
+ | |||
+ | * <code style="color: #bb0000;">LV_SCR_LOAD_ANIM_NONE</code> Switch immediately after <code style="color: #bb0000;">delay</code> milliseconds | ||
+ | * <code style="color: #bb0000;">LV_SCR_LOAD_ANIM_OVER_LEFT/RIGHT/TOP/BOTTOM</code> Move the new screen over the current towards the given direction | ||
+ | * <code style="color: #bb0000;">LV_SCR_LOAD_ANIM_MOVE_LEFT/RIGHT/TOP/BOTTOM</code> Move both the current and new screens towards the given direction | ||
+ | * <code style="color: #bb0000;">LV_SCR_LOAD_ANIM_FADE_ON</code> Fade the new screen over the old screen | ||
+ | |||
+ | |||
+ | Setting <code style="color: #bb0000;">auto_del</code> to <code style="color: #bb0000;">true</code> will automatically delete the old screen when the animation is finished. | ||
+ | |||
+ | The new screen will become active (returned by <code style="color: #bb0000;">lv_scr_act()</code>) when the animation starts after <code style="color: #bb0000;">delay</code> time. | ||
+ | |<code style="color: #bb0000;">lv_scr_load_anim(scr, transition_type, time, delay, auto_del)</code> を使用すると、新しいスクリーンにアニメーションをロードすることができます。以下のトランジションタイプが存在します: | ||
+ | |||
+ | *<code style="color: #bb0000;">LV_SCR_LOAD_ANIM_NONE</code> :<code style="color: #bb0000;">delay</code> ミリ秒後に即座に切り替わる。 | ||
+ | *<code style="color: #bb0000;">LV_SCR_LOAD_ANIM_OVER_LEFT/RIGHT/TOP/BOTTOM</code> 現在の画面の上に指定された方向へ移動します。 | ||
+ | *<code style="color: #bb0000;">LV_SCR_LOAD_ANIM_MOVE_LEFT/RIGHT/TOP/BOTTOM</code> 現在の画面と新しい画面の両方を指定された方向へ移動させる | ||
+ | *<code style="color: #bb0000;">LV_SCR_LOAD_ANIM_FADE_ON</code> 古い画面の上に新しい画面をフェードさせる | ||
+ | |||
+ | |||
+ | Setting <code style="color: #bb0000;">auto_del</code> を <code style="color: #bb0000;">true</code> に設定すると、アニメーションが終了したときに古い画面が自動的に削除される。 | ||
+ | |||
+ | 新しい画面は、<code style="color: #bb0000;">delay</code> time後にアニメーションが始まるとアクティブになります (returned by <code style="color: #bb0000;">lv_scr_act()</code>) | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview#Objects|戻る : Previous]] | ||
+ | |||
+ | |||
+ | === Handling multiple displays === | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
+ | Screens are created on the currently selected ''default display''. | ||
+ | |||
+ | The ''default display'' is the last registered display with <code style="color: #bb0000;">lv_disp_drv_register</code>. | ||
+ | |||
+ | You can also explicitly select a new default display using <code style="color: #bb0000;">lv_disp_set_default(disp)</code>. | ||
+ | |||
+ | <code style="color: #bb0000;">lv_scr_act()</code>, <code style="color: #bb0000;">lv_scr_load()</code> and <code style="color: #bb0000;">lv_scr_load_anim()</code> operate on the default screen. | ||
+ | |||
+ | |||
+ | Visit [https://docs.lvgl.io/8.2/overview/display.html '''Multi-display support'''] to learn more. | ||
+ | |画面は、現在選択されているデフォルト・ディスプレイで作成されます。 | ||
+ | |||
+ | デフォルトディスプレイは、<code style="color: #bb0000;">lv_disp_drv_register</code>で最後に登録されたディスプレイです。 | ||
+ | |||
+ | <code style="color: #bb0000;">lv_disp_set_default(disp)</code>を使用して、明示的に新しいデフォルトディスプレイを選択することも可能です。 | ||
+ | |||
+ | <code style="color: #bb0000;">lv_scr_act()</code>, <code style="color: #bb0000;">lv_scr_load()</code> , <code style="color: #bb0000;">lv_scr_load_anim()</code> はデフォルトスクリーンで操作します。 | ||
+ | |||
+ | 詳細については、 [https://docs.lvgl.io/8.2/overview/display.html '''Multi-display support'''] を参照してください。 | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview#Objects|戻る : Previous]] | ||
+ | |||
+ | |||
+ | == Parts == | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
+ | The widgets are built from multiple parts. | ||
+ | |||
+ | For example a Base object uses the main and scrollbar parts but a Slider uses the main, indicator and knob parts. | ||
+ | |||
+ | Parts are similar to ''pseudo-elements'' in CSS. | ||
+ | |||
+ | The following predefined parts exist in LVGL: | ||
+ | |||
+ | * <code style="color: #bb0000;">LV_PART_MAIN</code> A background like rectangle | ||
+ | * <code style="color: #bb0000;">LV_PART_SCROLLBAR</code> The scrollbar(s) | ||
+ | * <code style="color: #bb0000;">LV_PART_INDICATOR</code> Indicator, e.g. for slider, bar, switch, or the tick box of the checkbox | ||
+ | * <code style="color: #bb0000;">LV_PART_KNOB</code> Like a handle to grab to adjust the value | ||
+ | * <code style="color: #bb0000;">LV_PART_SELECTED</code> Indicate the currently selected option or section | ||
+ | * <code style="color: #bb0000;">LV_PART_ITEMS</code> Used if the widget has multiple similar elements (e.g. table cells) | ||
+ | * <code style="color: #bb0000;">LV_PART_TICKS</code> Ticks on scales e.g. for a chart or meter | ||
+ | * <code style="color: #bb0000;">LV_PART_CURSOR</code> Mark a specific place e.g. text area's or chart's cursor | ||
+ | * <code style="color: #bb0000;">LV_PART_CUSTOM_FIRST</code> Custom parts can be added from here. | ||
+ | |||
+ | |||
+ | The main purpose of parts is to allow styling the "components" of the widgets. | ||
+ | |||
+ | They are described in more detail in the [https://docs.lvgl.io/8.2/overview/style.html '''Style overview'''] section. | ||
+ | |ウィジェットは、複数のパーツから構成されています。 | ||
+ | |||
+ | たとえば Base オブジェクトは main と scrollbar のパーツを使いますが、Slider は main、indicator、knob のパーツを使用します。 | ||
+ | |||
+ | パーツは、CSSの擬似要素に似ています。 | ||
+ | |||
+ | LVGLには以下の定義済みパーツが存在します。 | ||
+ | *<code style="color: #bb0000;">LV_PART_MAIN</code> 矩形のような背景画像 | ||
+ | *<code style="color: #bb0000;">LV_PART_SCROLLBAR</code> スクロールバー。 | ||
+ | *<code style="color: #bb0000;">LV_PART_INDICATOR</code>スライダ、バー、スイッチ、チェックボックスなどのインジケータ | ||
+ | *<code style="color: #bb0000;">LV_PART_KNOB</code> 値を調整するためにつかむハンドルのようなもの | ||
+ | *<code style="color: #bb0000;">LV_PART_SELECTED</code> 現在選択されているオプションやセクションを表すもの | ||
+ | *<code style="color: #bb0000;">LV_PART_ITEMS</code> ウィジェットに複数の類似した要素(例:テーブルセル)がある場合に使用されます。 | ||
+ | *<code style="color: #bb0000;">LV_PART_TICKS</code> グラフやメーターのような目盛りの刻み目 | ||
+ | *<code style="color: #bb0000;">LV_PART_CURSOR</code> テキストエリアやグラフのカーソルなど、特定の場所を示すマーク | ||
+ | *<code style="color: #bb0000;">LV_PART_CUSTOM_FIRST</code> ここからカスタムパーツを追加することができます。 | ||
+ | |||
+ | |||
+ | パーツの主な目的は、ウィジェットの「コンポーネント」をスタイリングできるようにすることです。 | ||
+ | |||
+ | 詳細については、 [https://docs.lvgl.io/8.2/overview/style.html '''Style overview'''] section で説明します。 | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview#Objects|戻る : Previous]] | ||
+ | |||
+ | == States == | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
+ | The object can be in a combination of the following states: | ||
+ | * <code style="color: #bb0000;">LV_STATE_DEFAULT</code> Normal, released state | ||
+ | * <code style="color: #bb0000;">LV_STATE_CHECKED</code> Toggled or checked state | ||
+ | * <code style="color: #bb0000;">LV_STATE_FOCUSED</code> Focused via keypad or encoder or clicked via touchpad/mouse | ||
+ | * <code style="color: #bb0000;">LV_STATE_FOCUS_KEY</code> Focused via keypad or encoder but not via touchpad/mouse | ||
+ | * <code style="color: #bb0000;">LV_STATE_EDITED</code> Edit by an encoder | ||
+ | * <code style="color: #bb0000;">LV_STATE_HOVERED</code> Hovered by mouse (not supported now) | ||
+ | * <code style="color: #bb0000;">LV_STATE_PRESSED</code> Being pressed | ||
+ | * <code style="color: #bb0000;">LV_STATE_SCROLLED</code> Being scrolled | ||
+ | * <code style="color: #bb0000;">LV_STATE_DISABLED</code> Disabled state | ||
+ | * <code style="color: #bb0000;">LV_STATE_USER_1</code> Custom state | ||
+ | * <code style="color: #bb0000;">LV_STATE_USER_2</code> Custom state | ||
+ | * <code style="color: #bb0000;">LV_STATE_USER_3</code> Custom state | ||
+ | * <code style="color: #bb0000;">LV_STATE_USER_4</code> Custom state | ||
+ | |||
+ | The states are usually automatically changed by the library as the userinteracts qith an object (presses, releases, focuses, etc.). | ||
+ | |||
+ | However, the states can be changed manually too. | ||
+ | |||
+ | To set or clear given state (but leave the other states untouched) use <code style="color: #bb0000;">lv_obj_add/clear_state(obj, LV_STATE_...)</code> In both cases OR-ed state values can be used as well. | ||
+ | |||
+ | E.g. <code style="color: #bb0000;">lv_obj_add_state(obj, part, LV_STATE_PRESSED | LV_PRESSED_CHECKED)</code>. | ||
+ | |||
+ | To learn more about the states read the related section of the Style overview. | ||
+ | |オブジェクトは、以下の状態の組み合わせであり得る。 | ||
+ | |||
+ | *<code style="color: #bb0000;">LV_STATE_DEFAULT</code> 通常状態、解除状態 | ||
+ | *<code style="color: #bb0000;">LV_STATE_CHECKED</code> トグル状態またはチェック状態 | ||
+ | *<code style="color: #bb0000;">LV_STATE_FOCUSED</code> キーパッドまたはエンコーダでフォーカス、またはタッチパッド/マウスでクリックされた状態 | ||
+ | *<code style="color: #bb0000;">LV_STATE_FOCUS_KEY</code> キーパッドまたはエンコーダでフォーカスされ、タッチパッド/マウスでフォーカスされない状態 | ||
+ | *<code style="color: #bb0000;">LV_STATE_EDITED</code> エンコーダで編集されたもの | ||
+ | *<code style="color: #bb0000;">LV_STATE_HOVERED</code> マウスでホバリングする(現在はサポートされていません)。 | ||
+ | *<code style="color: #bb0000;">LV_STATE_PRESSED</code> 押された状態 | ||
+ | *<code style="color: #bb0000;">LV_STATE_SCROLLED</code> スクロールされている状態 | ||
+ | *<code style="color: #bb0000;">LV_STATE_DISABLED</code> 無効状態 | ||
+ | *<code style="color: #bb0000;">LV_STATE_USER_1</code> カスタム状態 | ||
+ | *<code style="color: #bb0000;">LV_STATE_USER_2</code> カスタム状態 | ||
+ | *<code style="color: #bb0000;">LV_STATE_USER_3</code> カスタム状態 | ||
+ | *<code style="color: #bb0000;">LV_STATE_USER_4</code> カスタム状態 | ||
+ | |||
+ | |||
+ | 通常、ユーザーがオブジェクトを操作(押す、離す、フォーカスするなど)すると、ライブラリによって状態が自動的に変更されます。 | ||
+ | |||
+ | しかし、状態を手動で変更することもできます。 | ||
+ | |||
+ | 与えられた状態を設定またはクリアするには(他の状態はそのままにして) <code style="color: #bb0000;">lv_obj_add/clear_state(obj, LV_STATE_...)</code> を使います。どちらの場合も、状態の値を OR にすることができます。 | ||
+ | |||
+ | 例えば、 <code style="color: #bb0000;">lv_obj_add_state(obj, part, LV_STATE_PRESSED | LV_PRESSED_CHECKED)</code>のように。 | ||
+ | |||
+ | ステートの詳細については、スタイル概要の関連セクションを参照してください。 | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview#Objects|戻る : Previous]] | ||
+ | |||
+ | |||
+ | == Snapshot == | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
+ | A snapshot image can be generated for an object together with its children. Check details in [https://docs.lvgl.io/8.2/others/snapshot.html '''Snapshot''']. | ||
+ | |オブジェクトとその子オブジェクトに対して、スナップショット画像を生成することができます。詳しくは[https://docs.lvgl.io/8.2/others/snapshot.html '''Snapshot''']でご確認ください。 | ||
+ | |} | ||
:[[App:Library:LVGL:docs:Overview|戻る : Previous]] | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] |
2022年7月2日 (土) 10:06時点における最新版
https://docs.lvgl.io/8.2/overview/object.html
Objects
英文 | 自動翻訳 |
---|---|
In LVGL the basic building blocks of a user interface are the objects, also called Widgets. For example a Button, Label, Image, List, Chart or Text area.
This pointer can later be used to set or get the attributes of the object. |
LVGLでは、ユーザー・インターフェースの基本的な構成要素は、ウィジェットとも呼ばれるオブジェクトです。
例えば、 Button, Label, Image, List, Chart or Text areaなどです。
このポインタは、後で、オブジェクトの属性を設定したり、取得したりするために使用されます。 |
Attributes
Basic attributes
英文 | 自動翻訳 |
---|---|
All object types share some basic attributes:
For example: /*Set basic object attributes*/
lv_obj_set_size(btn1, 100, 50); /*Set a button's size*/
lv_obj_set_pos(btn1, 20,30); /*Set a button's position*/
To see all the available functions visit the Base object's documentation. |
すべてのオブジェクトタイプは、いくつかの基本的な属性を共有しています。
For example: /*Set basic object attributes*/
lv_obj_set_size(btn1, 100, 50); /*Set a button's size*/
lv_obj_set_pos(btn1, 20,30); /*Set a button's position*/
使用可能なすべての関数については、 Base object's documentationを参照してください。 |
Specific attributes
英文 | 自動翻訳 |
---|---|
The object types have special attributes too. For example, a slider has
For example for a slider: /*Set slider specific attributes*/
lv_slider_set_range(slider1, 0, 100); /*Set the min. and max. values*/
lv_slider_set_value(slider1, 40, LV_ANIM_ON); /*Set the current value (position)*/
The API of the widgets is described in their Documentation but you can also check the respective header files (e.g. widgets/lv_slider.h) |
オブジェクト型にも特殊な属性があります。たとえば、スライダには
スライダの例: /*Set slider specific attributes*/
lv_slider_set_range(slider1, 0, 100); /*Set the min. and max. values*/
lv_slider_set_value(slider1, 40, LV_ANIM_ON); /*Set the current value (position)*/
ウィジェットのAPIはそれぞれの Documentation but you can に記載されていますが、ヘッダファイル (e.g. widgets/lv_slider.h)で確認することもできます。 |
Working mechanisms
Parent-child structure
英文 | 自動翻訳 |
---|---|
A parent object can be considered as the container of its children. Every object has exactly one parent object (except screens), but a parent can have any number of children. There is no limitation for the type of the parent but there are objects which are typically a parent (e.g. button) or a child (e.g. label). |
親オブジェクトは、その子オブジェクトのコンテナと考えることができます。
|
Moving together
英文 | 自動翻訳 |
---|---|
If the position of a parent changes, the children will move along with it. Therefore, all positions are relative to the parent. lv_obj_t * parent = lv_obj_create(lv_scr_act()); /*Create a parent object on the current screen*/
lv_obj_set_size(parent, 100, 80); /*Set the size of the parent*/
lv_obj_t * obj1 = lv_obj_create(parent); /*Create an object on the previously created parent object*/
lv_obj_set_pos(obj1, 10, 10); /*Set the position of the new object*/
lv_obj_set_pos(parent, 50, 50); /*Move the parent. The child will move with it.*/
(For simplicity the adjusting of colors of the objects is not shown in the example.) |
Visibility only on the parent
英文 | 自動翻訳 |
---|---|
If a child is partially or fully outside its parent then the parts outside will not be visible. lv_obj_set_x(obj1, -30); /*Move the child a little bit off the parent*/
This behavior can be overwritten with |
この動作は lv_obj_add_flag(obj, LV_OBJ_FLAG_OVERFLOW_VISIBLE); で上書きすることができ、これにより親から子への描画が可能になります。
|
Create and delete objects
英文 | 自動翻訳 |
---|---|
In LVGL, objects can be created and deleted dynamically at run time. It means only the currently created (existing) objects consume RAM. This allows for the creation of a screen just when a button is clicked to open it, and for deletion of screens when a new screen is loaded.
For example one can create meters, charts, bars and sliders based on the currently attached sensors.
lv_obj_t * lv_<widget>_create(lv_obj_t * parent, <other parameters if any>);
The return value is a pointer to the created object with
It deletes the object and all of its children. void lv_obj_del(lv_obj_t * obj);
<code style="color: #bb0000;">lv_obj_del</code> will delete the object immediately. If for any reason you can't delete the object immediately you can use <c
ode>lv_obj_del_async(obj) which will perform the deletion on the next call of
You can remove all the children of an object (but not the object itself) using You can use |
LVGLでは、オブジェクトは実行時に動的に作成・削除することができます。
つまり、現在作成されている(既存の)オブジェクトだけがRAMを消費します。 このため、ボタンをクリックして画面を開くだけで画面を作成したり、新しい画面を読み込むと画面を削除したりすることが可能です。 端末の現在の環境に応じたUIを作成することができる。 例えば、現在装着されているセンサーを元にメーター、チャート、バー、スライダーを作成することができます。 各ウィジェットは、このようなプロトタイプを持つ独自のcreate関数を持っています。 lv_obj_t * lv_<widget>_create(lv_obj_t * parent, <other parameters if any>);
戻り値は、 すべてのオブジェクトタイプに共通の delete 関数があります。 これは、オブジェクトとその子オブジェクトをすべて削除します。 void lv_obj_del(lv_obj_t * obj);
<code style="color: #bb0000;">lv_obj_del</code> will delete the object immediately. If for any reason you can't delete the object immediately you can use <c
ode>lv_obj_del_async(obj) とすると、次の
|
Screens
Create screens
英文 | 自動翻訳 |
---|---|
The screens are special objects which have no parent object. So they can be created like: lv_obj_t * scr1 = lv_obj_create(NULL);
Screens can be created with any object type. For example, a Base object or an image to make a wallpaper. |
スクリーンは、親オブジェクトを持たない特別なオブジェクトです。
そのため、次のように作成することができます。 lv_obj_t * scr1 = lv_obj_create(NULL);
画面は、どのようなオブジェクトタイプでも作成することができます。 例えば、 Base object や画像を使って壁紙を作ることができます。 |
Get the active screen
英文 | 自動翻訳 |
---|---|
There is always an active screen on each display. By default, the library creates and loads a "Base object" as a screen for each display. To get the currently active screen use the |
各ディスプレイには、常にアクティブなスクリーンが存在します。
デフォルトでは、ライブラリは各ディスプレイのスクリーンとして "Base object" を作成し、ロードします。 現在アクティブな画面を取得するには、 |
Load screens
英文 | 自動翻訳 |
---|---|
To load a new screen, use |
新しい画面を読み込むには、 lv_scr_load(scr1) を使用します。
|
Layers
英文 | 自動翻訳 |
---|---|
There are two automatically generated layers:
The top layer is above every object on the screen and the system layer is above the top layer. You can add any pop-up windows to the top layer freely. But, the system layer is restricted to system-level things (e.g. mouse cursor will be placed there with The
|
自動生成されるレイヤーは2つです。
トップレイヤーは画面上のあらゆるオブジェクトの上にあり、システムレイヤーはトップレイヤーの上にあります。 トップレイヤーには、任意のポップアップウィンドウを自由に追加することができます。
|
Load screen with animation
英文 | 自動翻訳 |
---|---|
A new screen can be loaded with animation by using
The new screen will become active (returned by |
lv_scr_load_anim(scr, transition_type, time, delay, auto_del) を使用すると、新しいスクリーンにアニメーションをロードすることができます。以下のトランジションタイプが存在します:
新しい画面は、 |
Handling multiple displays
英文 | 自動翻訳 |
---|---|
Screens are created on the currently selected default display. The default display is the last registered display with You can also explicitly select a new default display using
|
画面は、現在選択されているデフォルト・ディスプレイで作成されます。
デフォルトディスプレイは、
詳細については、 Multi-display support を参照してください。 |
Parts
英文 | 自動翻訳 |
---|---|
The widgets are built from multiple parts. For example a Base object uses the main and scrollbar parts but a Slider uses the main, indicator and knob parts. Parts are similar to pseudo-elements in CSS. The following predefined parts exist in LVGL:
They are described in more detail in the Style overview section. |
ウィジェットは、複数のパーツから構成されています。
たとえば Base オブジェクトは main と scrollbar のパーツを使いますが、Slider は main、indicator、knob のパーツを使用します。 パーツは、CSSの擬似要素に似ています。 LVGLには以下の定義済みパーツが存在します。
詳細については、 Style overview section で説明します。 |
States
英文 | 自動翻訳 |
---|---|
The object can be in a combination of the following states:
However, the states can be changed manually too. To set or clear given state (but leave the other states untouched) use E.g. To learn more about the states read the related section of the Style overview. |
オブジェクトは、以下の状態の組み合わせであり得る。
しかし、状態を手動で変更することもできます。 与えられた状態を設定またはクリアするには(他の状態はそのままにして) 例えば、 ステートの詳細については、スタイル概要の関連セクションを参照してください。 |
Snapshot
英文 | 自動翻訳 |
---|---|
A snapshot image can be generated for an object together with its children. Check details in Snapshot. |
オブジェクトとその子オブジェクトに対して、スナップショット画像を生成することができます。詳しくはSnapshotでご確認ください。 |