「App:Library:LVGL:docs:Overview:Drawing」の版間の差分
2行目: | 2行目: | ||
__NOTOC__ | __NOTOC__ | ||
= Drawing = | = Drawing = | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
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. | 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. | ||
16行目: | 21行目: | ||
Note that this concept is different from "traditional" double buffering where there are two display sized frame buffers: one holds the current image to show on the display, and rendering happens to the other (inactive) frame buffer, and they are swapped when the rendering is finished. The main difference is that with LVGL you don't have to store two frame buffers (which usually requires external RAM) but only smaller draw buffer(s) that can easily fit into internal RAM. | Note that this concept is different from "traditional" double buffering where there are two display sized frame buffers: one holds the current image to show on the display, and rendering happens to the other (inactive) frame buffer, and they are swapped when the rendering is finished. The main difference is that with LVGL you don't have to store two frame buffers (which usually requires external RAM) but only smaller draw buffer(s) that can easily fit into internal RAM. | ||
+ | | | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | ||
+ | |||
== Mechanism of screen refreshing == | == Mechanism of screen refreshing == | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
Be sure to get familiar with the Buffering modes of LVGL first. | Be sure to get familiar with the Buffering modes of LVGL first. | ||
28行目: | 42行目: | ||
#* Areas partially out of the parent are cropped to the parent's area. | #* Areas partially out of the parent are cropped to the parent's area. | ||
#* Objects on other screens are not added. | #* Objects on other screens are not added. | ||
− | # In every <code>LV_DISP_DEF_REFR_PERIOD</code> (set in <code>lv_conf.h</code>) the following happens: | + | # In every <code style="color: #bb0000;">LV_DISP_DEF_REFR_PERIOD</code> (set in <code style="color: #bb0000;">lv_conf.h</code>) the following happens: |
#* LVGL checks the invalid areas and joins those that are adjacent or intersecting. | #* LVGL checks the invalid areas and joins those that are adjacent or intersecting. | ||
#* Takes the first joined area, if it's smaller than the ''draw buffer'', then simply renders the area's content into the ''draw buffer''. If the area doesn't fit into the buffer, draw as many lines as possible to the ''draw buffer''. | #* Takes the first joined area, if it's smaller than the ''draw buffer'', then simply renders the area's content into the ''draw buffer''. If the area doesn't fit into the buffer, draw as many lines as possible to the ''draw buffer''. | ||
− | #* When the area is rendered, call <code>flush_cb</code> from the display driver to refresh the display. | + | #* When the area is rendered, call <code style="color: #bb0000;">flush_cb</code> from the display driver to refresh the display. |
#* If the area was larger than the buffer, render the remaining parts too. | #* If the area was larger than the buffer, render the remaining parts too. | ||
#* Repeat the same with remaining joined areas. | #* Repeat the same with remaining joined areas. | ||
39行目: | 53行目: | ||
The difference between buffering modes regarding the drawing mechanism is the following: | The difference between buffering modes regarding the drawing mechanism is the following: | ||
− | # One buffer - LVGL needs to wait for <code>lv_disp_flush_ready()</code> (called from <code>flush_cb</code>) before starting to redraw the next part. | + | # One buffer - LVGL needs to wait for <code style="color: #bb0000;">lv_disp_flush_ready()</code> (called from <code style="color: #bb0000;">flush_cb</code>) before starting to redraw the next part. |
− | # Two buffers - LVGL can immediately draw to the second buffer when the first is sent to <code>flush_cb</code> because the flushing should be done by DMA (or similar hardware) in the background. | + | # Two buffers - LVGL can immediately draw to the second buffer when the first is sent to <code style="color: #bb0000;">flush_cb</code> because the flushing should be done by DMA (or similar hardware) in the background. |
− | # Double buffering - <code>flush_cb</code> should only swap the addresses of the frame buffers. | + | # Double buffering - <code style="color: #bb0000;">flush_cb</code> should only swap the addresses of the frame buffers. |
+ | | | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | ||
+ | |||
== Masking == | == Masking == | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
''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. | ''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. | 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. | ||
− | # Prepare the draw descriptors Create a draw descriptor from an object's styles (e.g. <code>lv_draw_rect_dsc_t</code>). This gives us the parameters for drawing, for example colors, widths, opacity, fonts, radius, etc. | + | # Prepare the draw descriptors Create a draw descriptor from an object's styles (e.g. <code style="color: #bb0000;">lv_draw_rect_dsc_t</code>). This gives us the parameters for drawing, for example colors, widths, opacity, fonts, radius, etc. |
− | # Call the draw function Call the draw function with the draw descriptor and some other parameters (e.g. <code>lv_draw_rect()</code>). It will render the primitive shape to the current draw buffer. | + | # Call the draw function Call the draw function with the draw descriptor and some other parameters (e.g. <code style="color: #bb0000;">lv_draw_rect()</code>). It will render the primitive shape to the current draw buffer. |
# Create masks If the shape is very simple and doesn't require masks, go to #5. Otherwise, create the required masks in the draw function. (e.g. a rounded rectangle mask) | # Create masks If the shape is very simple and doesn't require masks, go to #5. Otherwise, create the required masks in the draw function. (e.g. a rounded rectangle mask) | ||
# 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. | ||
56行目: | 79行目: | ||
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: | ||
− | * <code>LV_DRAW_MASK_TYPE_LINE</code> Removes a side from a line (top, bottom, left or right). <code>lv_draw_line</code> uses four instances of it. Essentially, every (skew) line is bounded with four line masks forming a rectangle. | + | * <code style="color: #bb0000;">LV_DRAW_MASK_TYPE_LINE</code> Removes a side from a line (top, bottom, left or right). <code style="color: #bb0000;">lv_draw_line</code> uses four instances of it. Essentially, every (skew) line is bounded with four line masks forming a rectangle. |
− | * <code>LV_DRAW_MASK_TYPE_RADIUS</code> Removes the inner or outer corners of a rectangle with a radiused transition. It's also used to create circles by setting the radius to large value (<code>LV_RADIUS_CIRCLE</code>) | + | * <code style="color: #bb0000;">LV_DRAW_MASK_TYPE_RADIUS</code> Removes the inner or outer corners of a rectangle with a radiused transition. It's also used to create circles by setting the radius to large value (<code style="color: #bb0000;">LV_RADIUS_CIRCLE</code>) |
− | * <code>LV_DRAW_MASK_TYPE_ANGLE</code> Removes a circular sector. It is used by <code>lv_draw_arc</code> to remove the "empty" sector. | + | * <code style="color: #bb0000;">LV_DRAW_MASK_TYPE_ANGLE</code> Removes a circular sector. It is used by <code style="color: #bb0000;">lv_draw_arc</code> to remove the "empty" sector. |
− | * <code>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>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: | ||
71行目: | 94行目: | ||
* 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. | ||
+ | | | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | ||
+ | |||
=== Using masks === | === Using masks === | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
Every mask type has a related parameter structure to describe the mask's data. The following parameter types exist: | Every mask type has a related parameter structure to describe the mask's data. The following parameter types exist: | ||
− | * <code>lv_draw_mask_line_param_t</code> | + | * <code style="color: #bb0000;">lv_draw_mask_line_param_t</code> |
− | * <code>lv_draw_mask_radius_param_t</code> | + | * <code style="color: #bb0000;">lv_draw_mask_radius_param_t</code> |
− | * <code>lv_draw_mask_angle_param_t</code> | + | * <code style="color: #bb0000;">lv_draw_mask_angle_param_t</code> |
− | * <code>lv_draw_mask_fade_param_t</code> | + | * <code style="color: #bb0000;">lv_draw_mask_fade_param_t</code> |
− | * <code>lv_draw_mask_map_param_t</code> | + | * <code style="color: #bb0000;">lv_draw_mask_map_param_t</code> |
− | # Initialize a mask parameter with <code>lv_draw_mask_<type>_init</code>. See <code>lv_draw_mask.h</code> for the whole API. | + | # Initialize a mask parameter with <code style="color: #bb0000;">lv_draw_mask_<type>_init</code>. See <code style="color: #bb0000;">lv_draw_mask.h</code> for the whole API. |
− | # Add the mask parameter to the draw engine with <code>int16_t mask_id = lv_draw_mask_add(¶m, ptr)</code>. <code>ptr</code> can be any pointer to identify the mask, (<code>NULL</code> if unused). | + | # Add the mask parameter to the draw engine with <code style="color: #bb0000;">int16_t mask_id = lv_draw_mask_add(¶m, ptr)</code>. <code style="color: #bb0000;">ptr</code> can be any pointer to identify the mask, (<code style="color: #bb0000;">NULL</code> if unused). |
# Call the draw functions | # Call the draw functions | ||
− | # Remove the mask from the draw engine with <code>lv_draw_mask_remove_id(mask_id)</code> or <code>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>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>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. |
+ | | | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | ||
+ | |||
== Hook drawing == | == Hook drawing == | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
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. | 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. | ||
97行目: | 138行目: | ||
Each of these events is described in detail below. | Each of these events is described in detail below. | ||
− | + | | | |
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | ||
=== Main drawing === | === Main drawing === | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
These events are related to the actual drawing of an object. E.g. the drawing of buttons, texts, etc. happens here. | These events are related to the actual drawing of an object. E.g. the drawing of buttons, texts, etc. happens here. | ||
− | <code>lv_event_get_clip_area(event)</code> can be used to get the current clip 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> can be used to get the current clip area. The clip area is required in draw functions to make them draw only on a limited area. |
+ | | | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | ||
+ | |||
==== LV_EVENT_DRAW_MAIN_BEGIN ==== | ==== LV_EVENT_DRAW_MAIN_BEGIN ==== | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
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. | 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. | ||
+ | | | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | ||
+ | |||
==== LV_EVENT_DRAW_MAIN ==== | ==== LV_EVENT_DRAW_MAIN ==== | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
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. | 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. | ||
+ | | | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | ||
+ | |||
==== LV_EVENT_DRAW_MAIN_END ==== | ==== 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 <code>LV_EVENT_DRAW_MAIN_BEGIN</code>. | + | {| class="wikitable" |
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
+ | 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 <code style="color: #bb0000;">LV_EVENT_DRAW_MAIN_BEGIN</code>. | ||
+ | | | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | ||
+ | |||
=== Post drawing === | === Post drawing === | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
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. | 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. | ||
− | <code>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. |
+ | | | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | ||
+ | |||
==== LV_EVENT_DRAW_POST_BEGIN ==== | ==== LV_EVENT_DRAW_POST_BEGIN ==== | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
Sent before starting the post draw phase. Masks can be added here too to mask out the post drawn content. | Sent before starting the post draw phase. Masks can be added here too to mask out the post drawn content. | ||
+ | | | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | ||
+ | |||
==== LV_EVENT_DRAW_POST ==== | ==== LV_EVENT_DRAW_POST ==== | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
The actual drawing should happen here. | The actual drawing should happen here. | ||
+ | | | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | ||
+ | |||
==== LV_EVENT_DRAW_POST_END ==== | ==== LV_EVENT_DRAW_POST_END ==== | ||
− | Called when post drawing has finished. If masks were not removed in <code>LV_EVENT_DRAW_MAIN_END</code> they should be removed here. | + | {| class="wikitable" |
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
+ | Called when post drawing has finished. If masks were not removed in <code style="color: #bb0000;">LV_EVENT_DRAW_MAIN_END</code> they should be removed here. | ||
+ | | | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | ||
+ | |||
=== Part drawing === | === Part drawing === | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
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. This allows changing the parts on a very low level with masks, extra drawing, or changing the parameters that LVGL is planning to use for 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. This allows changing the parts on a very low level with masks, extra drawing, or changing the parameters that LVGL is planning to use for drawing. | ||
− | In these events an <code>lv_obj_draw_part_t</code> structure is used to describe the context of the drawing. Not all fields are set for every part and widget. To see which fields are set for a widget refer to the widget's documentation. | + | In these events an <code style="color: #bb0000;">lv_obj_draw_part_t</code> structure is used to describe the context of the drawing. Not all fields are set for every part and widget. To see which fields are set for a widget refer to the widget's documentation. |
− | <code>lv_obj_draw_part_t</code> has the following fields: | + | <code style="color: #bb0000;">lv_obj_draw_part_t</code> has the following fields: |
// 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 | ||
154行目: | 274行目: | ||
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. | ||
− | <code>lv_event_get_draw_part_dsc(event)</code> can be used to get a pointer to <code>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>. |
+ | | | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | ||
+ | |||
==== LV_EVENT_DRAW_PART_BEGIN ==== | ==== LV_EVENT_DRAW_PART_BEGIN ==== | ||
− | Start the drawing of a part. This is a good place to modify the draw descriptors (e.g. <code>rect_dsc</code>), or add masks. | + | {| class="wikitable" |
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
+ | 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. | ||
+ | | | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | ||
+ | |||
==== LV_EVENT_DRAW_PART_END ==== | ==== 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 <code>LV_EVENT_DRAW_PART_BEGIN</code>. | + | {| class="wikitable" |
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
+ | 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>. | ||
+ | | | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | ||
+ | |||
=== Others === | === Others === | ||
− | |||
==== LV_EVENT_COVER_CHECK ==== | ==== LV_EVENT_COVER_CHECK ==== | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
This event is used to check whether an object fully covers an area or not. | This event is used to check whether an object fully covers an area or not. | ||
− | <code>lv_event_get_cover_area(event)</code> returns a pointer to an area to check and <code>lv_event_set_cover_res(event, res)</code> can be used to set one of these results: | + | <code style="color: #bb0000;">lv_event_get_cover_area(event)</code> returns a pointer to an area to check and <code style="color: #bb0000;">lv_event_set_cover_res(event, res)</code> can be used to set one of these results: |
− | * <code>LV_COVER_RES_COVER</code> the area is fully covered by the object | + | * <code style="color: #bb0000;">LV_COVER_RES_COVER</code> the area is fully covered by the object |
− | * <code>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>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: | ||
186行目: | 332行目: | ||
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. | 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. | ||
− | You need to check only the drawing you have added. 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>radius</code> only if you will modify it and the widget won't know about it. | + | You need to check only the drawing you have added. 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. |
+ | | | ||
+ | |} | ||
+ | :[[App:Library:LVGL:docs:Overview|戻る : Previous]] | ||
+ | |||
==== LV_EVENT_REFR_EXT_DRAW_SIZE ==== | ==== LV_EVENT_REFR_EXT_DRAW_SIZE ==== | ||
+ | {| class="wikitable" | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | | | ||
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. | 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 <code>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>. |
− | + | | | |
− | + | |} | |
− | |||
− | |||
− | |||
− | |||
− | |||
:[[App:Library:LVGL#Overview|戻る : Previous]] | :[[App:Library:LVGL#Overview|戻る : Previous]] |
2022年7月1日 (金) 17:52時点における版
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. The draw buffer can be smaller than a display's size. 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:
Note that this concept is different from "traditional" double buffering where there are two display sized frame buffers: one holds the current image to show on the display, and rendering happens to the other (inactive) frame buffer, and they are swapped when the rendering is finished. The main difference is that with LVGL you don't have to store two frame buffers (which usually requires external RAM) but only smaller draw buffer(s) that can easily fit into internal RAM. |
Mechanism of screen refreshing
英文 | 自動翻訳 |
---|---|
Be sure to get familiar with the Buffering modes of LVGL first. LVGL refreshes the screen in the following steps:
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:
|
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 has the following built-in mask types which can be calculated and applied real-time:
Masks are used to create almost every basic primitive:
|
Using masks
英文 | 自動翻訳 |
---|---|
Every mask type has a related parameter structure to describe the mask's data. The following parameter types exist:
A parameter can be added and removed any number of times, but it needs to be freed when not required anymore.
|
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.
|
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.
|
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. This allows changing the parts on a very low level with masks, extra drawing, or changing the parameters that LVGL is planning to use for drawing. In these events an
// 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. |
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 |
Others
LV_EVENT_COVER_CHECK
英文 | 自動翻訳 |
---|---|
This event is used to check whether an object fully covers an area or not.
Here are some reasons why an object would be unable to fully cover an area:
In short if for any reason the area below an object is visible than the object doesn't cover that area. 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. You need to check only the drawing you have added. 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 |
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 |