1. The concept of LVGL GUI text area control
A text area is a page with a label and cursor. Text or characters can be added to it. Long lines are wrapped, and when the text is long enough, the text area can be scrolled.
2. LVGL GUI text area widgets and styles
The text area is the same as the page section. Except using LV_PAGE_PART_SCRL because it can't be referenced and it's always transparent. See detailed documentation on this page.
In addition to the page part, a virtual LV_TEXTAREA_PART_CURSOR part exists to draw the cursor. The area of the cursor is always the bounding box of the current character. Block cursors can be created by adding a background color and background opa in the style of LV_TEXTAREA_PART_CURSOR. create line cursor allows the cursor to be transparent and sets the border_side property.
Three. The use of LVGL GUI text area controls
1. Add text
Add a character through this function lv_textarea_add_char(textarea, 'c')
Add a string through this function lv_textarea_add_text(textarea, "insert this text")
Change the value of the entire text area through this function lv_textarea_set_text(ta, "New text")
2. Placeholder
Set the placeholder through this function lv_textarea_set_placeholder_text(ta, "Placeholder text")
3. Delete character
Delete the characters on the left through this function lv_textarea_del_char(textarea), similar to the Backspack function
Delete the characters on the right through this function lv_textarea_del_char_forward(textarea), similar to the Delete function
4. Move the cursor
Set the cursor position through this function lv_textarea_set_cursor_pos(textarea, 10), the second parameter 0 means the cursor is changed to the front of the first character, LV_TA_CURSOR_LAST means the broadcast is after the last character
And the broadcast can be changed up and down, left and right, the function is as follows
-
lv_textarea_cursor_right(textarea) -
lv_textarea_cursor_left(textarea) -
lv_textarea_cursor_up(textarea) -
lv_textarea_cursor_down(textarea)
5. Hide the cursor
Hide the cursor through this function lv_textarea_set_cursor_hidden(textarea, true)
6. Cursor blink time
Set the cursor blinking time through this function lv_textarea_set_cursor_blink_time(textarea, time_ms)
7. One line mode
The text area can be configured as one line lv_textarea_set_one_line(ta, true). In this mode, the height is automatically set to display only one line, line breaks are ignored, and line breaks are disabled.
8. Password mode
The text area supports password mode, which can be enabled by lv_textarea_set_pwd_mode(textarea, true).
If the • (Bullet, U+2022) character is present in the font, the entered character will be converted to it after a period of time or when a new character is entered. If • does not exist, use *.
In password mode lv_textarea_get_text(textarea) gives real text, not bullet characters.
The visible time can be adjusted by lv_textarea_set_pwd_show_time(textarea, time_ms)
9. Text align
Set text alignment through this function lv_textarea_set_text_align(textarea, LV_LABEL_ALIGN_LET/CENTER/RIGHT)
10. Accepted characters
You can use lv_textarae_set_accepted_chars(ta, "0123456789.+-") to set a list of accepted characters. Other characters will be ignored.
11. Max text length
Set the maximum text length through this function lv_textarea_set_max_length(textarea, max_char_num)
12. Very long texts
If there is a very long text in the text area (eg > 20k characters) its scrolling and drawing may be slow. However, it can be greatly improved by enabling LV_LABEL_LONG_TXT_HINT 1 in lv_conf.h. It will save some information about the label to speed up its drawing. With LV_LABEL_LONG_TXT_HINT, scrolling and drawing will be as fast as "normal" short text.
13. Select text
Partial text can be selected if lv_textarea_set_text_sel(textarea, true) is enabled. It works just like you would select text on your computer with your mouse.
14. Scrollbars
The scrollbar can be displayed according to different strategies set by lv_textarea_set_scrollbar_mode(textarea, lv_scrbar_mode_…). Learn more in the Page object.
15. Scroll propagation
When scrolling a text area on another scrollable object (such as a page), the scroll has reached the edge of the text area and the scroll can propagate to the parent object. In other words, when the text area can be scrolled further, the parent area will be scrolled.
It can be enabled with lv_ta_set_scroll_propagation(ta, true).
16. Edge flash
When the text area is scrolled to the edge, if lv_ta_set_edge_flash(ta, true) is enabled, a circle like a flash animation can be displayed.
17. Event
In addition to the basic hours, there are the following special events
-
LV_EVENT_INSERT Sent when before a character or text is inserted. The event data is the text planned to insert.
lv_ta_set_insert_replace(ta, "New text")replaces the text to insert. The new text can't be in a local variable which is destroyed when the event callback exists.""means do not insert anything. -
LV_EVENT_VALUE_CHANGED When the content of the text area has been changed.
-
LV_EVENT_APPLY When LV_KEY_ENTER is sent to a text area which is in one line mode.
We will not give examples of text area space one by one, let's take a few comprehensive examples
Example one:
lv_obj_t* ta1;
static void text_area_event_handler(lv_obj_t* obj, lv_event_t event)
{
if (event == LV_EVENT_INSERT)
{
printf("LV_EVENT_INSERT\n");
}
if (event == LV_EVENT_VALUE_CHANGED) {
printf("Value: %s\n", lv_textarea_get_text(obj));
}
else if (event == LV_EVENT_LONG_PRESSED_REPEAT) {
/*For simple test: Long press the Text are to add the text below*/
const char* txt = "\n\nYou can scroll it if the text is long enough.\n";
static uint16_t i = 0;
if (txt[i] != '\0') {
lv_textarea_add_char(ta1, txt[i]);
i++;
}
}
}
void lvgl_text_area_test1(void)
{
ta1 = lv_textarea_create(lv_scr_act(), NULL);
lv_obj_set_size(ta1, 200, 100);
lv_obj_align(ta1, NULL, LV_ALIGN_CENTER, 0, 0);
lv_textarea_set_text(ta1, "A text in a Text Area"); /*Set an initial text*/
lv_obj_set_event_cb(ta1, text_area_event_handler);
}Example 1 effect:
Example 2
static void text_area2_event_cb(lv_obj_t* ta, lv_event_t event);
static lv_obj_t* kb;
void lvgl_text_area_test2(void)
{
/* Create the password box */
lv_obj_t* pwd_ta = lv_textarea_create(lv_scr_act(), NULL);
lv_textarea_set_text(pwd_ta, "");
lv_textarea_set_pwd_mode(pwd_ta, true);
lv_textarea_set_one_line(pwd_ta, true);
lv_textarea_set_cursor_hidden(pwd_ta, true);
lv_obj_set_width(pwd_ta, LV_HOR_RES / 2 - 20);
lv_obj_set_pos(pwd_ta, 5, 20);
lv_obj_set_event_cb(pwd_ta, text_area2_event_cb);
/* Create a label and position it above the text box */
lv_obj_t* pwd_label = lv_label_create(lv_scr_act(), NULL);
lv_label_set_text(pwd_label, "Password:");
lv_obj_align(pwd_label, pwd_ta, LV_ALIGN_OUT_TOP_LEFT, 0, 0);
/* Create the one-line mode text area */
lv_obj_t* oneline_ta = lv_textarea_create(lv_scr_act(), pwd_ta);
lv_textarea_set_pwd_mode(oneline_ta, false);
lv_textarea_set_cursor_hidden(oneline_ta, true);
lv_obj_align(oneline_ta, NULL, LV_ALIGN_IN_TOP_RIGHT, -5, 20);
/* Create a label and position it above the text box */
lv_obj_t* oneline_label = lv_label_create(lv_scr_act(), NULL);
lv_label_set_text(oneline_label, "Text:");
lv_obj_align(oneline_label, oneline_ta, LV_ALIGN_OUT_TOP_LEFT, 0, 0);
/* Create a keyboard */
kb = lv_keyboard_create(lv_scr_act(), NULL);
lv_obj_set_size(kb, LV_HOR_RES, LV_VER_RES / 2);
lv_keyboard_set_textarea(kb, pwd_ta); /* Focus it on one of the text areas to start */
lv_keyboard_set_cursor_manage(kb, true); /* Automatically show/hide cursors on text areas */
}
static void text_area2_event_cb(lv_obj_t* ta, lv_event_t event)
{
if (event == LV_EVENT_CLICKED) {
/* Focus on the clicked text area */
if (kb != NULL)
lv_keyboard_set_textarea(kb, ta);
}
else if (event == LV_EVENT_INSERT) {
const char* str = lv_event_get_data();
if (str[0] == '\n') {
printf("Ready\n");
}
}
}Effect
Okay, it's over, continue to poke more exciting ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
