当前位置:网站首页>ESP32 LVGL8. 1 - textarea text area (textarea 26)

ESP32 LVGL8. 1 - textarea text area (textarea 26)

2022-04-23 18:38:00 Please call me Xiao Peng

Tips : This blog serves as a learning note , If there are mistakes, I hope to correct them

One 、textarea brief introduction

1.1 summary Overview

   A text area is a basic object with a label and cursor . Text or characters can be added to it . Long lines are wrapped , When the text becomes long enough , The text area can be scrolled .
   Support single line mode and password mode .

1.2 Part and style Parts and Styles

• LV_PART_MAIN The background of the text area , It uses all typical background style attributes and text related style attributes , Include text_align To align the text to the left , Align right or center .
• LV_PART_SCROLLBAR Scroll bar displayed when text is too long .
• LV_PART_SELECTED Tell the style of the selected text . Only use text_color and bg_color Style attribute .
• LV_PART_CURSOR Mark the position where the character is inserted . The area of the cursor is always the bounding box of the current character . The block cursor can be displayed by pointing to
LV_PART_CURSOR Add background color and background opacity to the style to create .create line The cursor makes the cursor transparent , And set the left border .anim_time The style property sets the cursor blink time .
• LV_PART_TEXTAREA_PLACEHOLDER It is only related to the text area , And allows you to style placeholder text .

1.3 Use Usage

1.3.1 Add text Add text

   You can use the following methods to insert text or characters into the current cursor position :
• lv_textarea_add_char(textarea, ‘c’)
• lv_textarea_add_text(textarea, “insert this text”)
   Add wide characters such as ’á’, 'ß’ or CJK Character usage lv_textarea_add_text(ta, “á”).
  lv_textarea_set_text(ta,“New text”) Change the entire text .

1.3.2 Place holder Placeholder

   have access to lv_textarea_set_placeholder_text(ta, “ Placeholder text ”) Specify a placeholder text —— Dangwen
This text is displayed when this field is empty .

1.3.3 Delete character Delete character

   Use lv_textarea_del_char(textarea) Delete a character from the left of the current cursor position . Delete use from the right
lv_textarea_del_char_forward(textarea)

1.3.4 Move the cursor Move the cursor

   Can be like lv_textarea_set_cursor_pos(textarea, 10) Then directly modify the cursor position .0 Position means “ Before the first character ”,LV_TA_CURSOR_LAST Express “ After the last character ”
   You can step the cursor
• lv_textarea_cursor_right(textarea)
• lv_textarea_cursor_left(textarea)
• lv_textarea_cursor_up(textarea)
• lv_textarea_cursor_down(textarea)
   If the application lv_textarea_set_cursor_click_pos(textarea, true), The cursor will jump to the position where you click the text area .

1.3.5 hide cursor Hide the cursor

   The cursor is always visible , But it's best to set it only in LV_STATE_FOCUSED Visible in state .

1.3.6 One line mode One line mode

  Text The area can be configured to be connected to lv_textarea_set_one_line(textarea, true) An area aligned . In this mode , high
The degree is automatically set to show only one line , Ignore line breaks , And disable word wrap .

1.3.7 Password mode Password mode

   The text area supports the use of lv_textarea_set_password_mode(textarea, true) Enable password mode . If there is... In the font •(Bullet, U+2022) character , The character you enter will be converted to it after a period of time or when you enter a new character . If • non-existent , Then use *.
   In password mode ,lv_textarea_get_text(textarea) Given the real text , Symbols, not bullets . Visible time can pass through lv_conf.h Medium LV_TEXTAREA_DEF_PWD_SHOW_TIME Adjustment .

1.3.8 Accepted characters Accepted characters

   have access to lv_textaae_set_accepted_chars (textarea, “0123456789.±”) Set the accepted character list . Other characters will be ignored .

1.3.9 Maximum text length Max text length

   If there is a long text in the text area ( for example > 20k Characters ), Its scrolling and drawing may be slow . however , By means of
lv_conf.h Enable LV_LABEL_LONG_TXT_HINT 1, Can greatly improve performance . It will save some information about the tag , To speed it up . Use LV_LABEL_LONG_TXT_HINT, Scrolling and drawing will work with “ Ordinary ” It's as fast as a short text .

1.3.10 A long text Very long texts

   If there is a long text in the text area ( for example > 20k Characters ), Its scrolling and drawing may be slow . however , By means of
lv_conf.h Enable LV_LABEL_LONG_TXT_HINT 1, Can greatly improve performance . It will save some information about the tag ,
To speed it up . Use LV_LABEL_LONG_TXT_HINT, Scrolling and drawing will work with “ Ordinary ” It's as fast as a short text .

1.3.10 Select text Select text

   If you use lv_textarea_set_text_selection(textarea, true) Enable , You can select part of the text . It works like you select a text with your mouse on your computer .

1.4 event Events

• LV_EVENT_INSERT Send... Before inserting characters or text . The event parameter is the text inserted by the plan .
lv_textarea_set_insert_replace(textarea,“ New text ”) Replace the text to insert . New text cannot be in a local variable , This variable is destroyed when the event callback exists . It means don't insert anything .
• LV_EVENT_VALUE_CHANGED Send when the content of the text area is changed .
• LV_EVENT_APPL. Y When LV_KEY_ENTER Press down ( or ( send out ) Send when to a line of text area .

1.5 Key Keys

• LV_KEY_UP/DOWN/LEFT/RIGHT Move the cursor
• Any character Adds a character to the current cursor position

Two 、textarea API

lv_obj_t * lv_textarea_create(lv_obj_t * parent);							// Create a text area object 
void lv_textarea_add_char(lv_obj_t * obj, uint32_t c);						// Insert a character to the current cursor position .
void lv_textarea_add_text(lv_obj_t * obj, const char * txt);				// Insert a text to the current cursor position 
void lv_textarea_del_char(lv_obj_t * obj);									// Delete the left character at the current cursor position 
void lv_textarea_del_char_forward(lv_obj_t * obj);							// Delete the right character at the current cursor position 
void lv_textarea_set_text(lv_obj_t * obj, const char * txt);				// Set the text of the text area 
void lv_textarea_set_placeholder_text(lv_obj_t * obj, const char * txt);	// Set the placeholder text for the text area 
void lv_textarea_set_cursor_pos(lv_obj_t * obj, int32_t pos);				// Set cursor position 
void lv_textarea_set_cursor_click_pos(lv_obj_t * obj, bool en);				// Enable... By clicking on the text in the text area / Disable cursor positioning .
void lv_textarea_set_password_mode(lv_obj_t * obj, bool en);				// Enable / Disable password mode 
void lv_textarea_set_one_line(lv_obj_t * obj, bool en);						// Set the text area to one line or return to normal 
void lv_textarea_set_accepted_chars(lv_obj_t * obj, const char * list);		// Set a character list . Only these characters will be accepted by the text area 
void lv_textarea_set_max_length(lv_obj_t * obj, uint32_t num);				// Set the maximum length of the text area 
void lv_textarea_set_insert_replace(lv_obj_t * obj, const char * txt);		// stay ' LV_EVENT_INSERT ' in , The text you plan to insert can be replaced by other text .
void lv_textarea_set_text_selection(lv_obj_t * obj, bool en);				// Enable / Disable selection mode .
void lv_textarea_set_password_show_time(lv_obj_t * obj, uint16_t time);		// Set password to “*” How long did it last 
void lv_textarea_set_align(lv_obj_t * obj, lv_text_align_t align);			// Have been abandoned : Use ordinary text_align Style attribute 
const char * lv_textarea_get_text(const lv_obj_t * obj);					// Get the text of the text area . In password mode , It gives the real text ( instead of '*').
const char * lv_textarea_get_placeholder_text(lv_obj_t * obj);				// Gets the placeholder text for the text area 
lv_obj_t * lv_textarea_get_label(const lv_obj_t * obj);						// Get the label of the text area 
uint32_t lv_textarea_get_cursor_pos(const lv_obj_t * obj);					// Gets the position of the current cursor in the character index 
bool lv_textarea_get_cursor_click_pos(lv_obj_t * obj);						// Gets whether cursor click positioning is enabled .
bool lv_textarea_get_password_mode(const lv_obj_t * obj);					// Get password mode properties 
bool lv_textarea_get_one_line(const lv_obj_t * obj);						// Get a row of configuration properties 
const char * lv_textarea_get_accepted_chars(lv_obj_t * obj);				// Get a list of acceptable characters .
uint32_t lv_textarea_get_max_length(lv_obj_t * obj);						// Gets the maximum length of the text area .
bool lv_textarea_text_is_selected(const lv_obj_t * obj);					// Find whether the text is selected .
bool lv_textarea_get_text_selection(lv_obj_t * obj);						// Check whether the selection mode is enabled .
uint16_t lv_textarea_get_password_show_time(lv_obj_t * obj);				// Set password to “*” How long did it last 
void lv_textarea_clear_selection(lv_obj_t * obj);							// Clear the selection area on the text .
void lv_textarea_cursor_right(lv_obj_t * obj);								// Move the cursor one character to the right 
void lv_textarea_cursor_left(lv_obj_t * obj);								// Move the cursor one character to the left 
void lv_textarea_cursor_down(lv_obj_t * obj);								// Move the cursor down one line 
void lv_textarea_cursor_up(lv_obj_t * obj);									// Move the cursor up one line 

3、 ... and 、 Example

3.1 Example to achieve digital key input

static void textarea_Show1_event_cb(lv_event_t * e)
{
    
   lv_obj_t * ta = lv_event_get_target(e);
   LV_LOG_USER("Enter was pressed. The current text is: %s", lv_textarea_get_text(ta));
}
/************************************************* *  The name of the function  : textarea_Show1_btnm_event_cb *  ginseng   Count  : lv_event_t * e *  The functionality  :  Input callback function  *************************************************/
static void textarea_Show1_btnm_event_cb(lv_event_t * e)
{
    
   lv_obj_t * obj = lv_event_get_target(e);
   lv_obj_t * ta = lv_event_get_user_data(e);
   const char * txt = lv_btnmatrix_get_btn_text(obj,lv_btnmatrix_get_selected_btn(obj));
   if(strcmp(txt,LV_SYMBOL_BACKSPACE) == 0)
      lv_textarea_del_char(ta);
   else if(strcmp(txt,LV_SYMBOL_NEW_LINE) == 0)
      lv_event_send(ta,LV_EVENT_READY,NULL);
   else lv_textarea_add_text(ta,txt);
}
/************************************************* *  The name of the function  : textarea_show1 *  ginseng   Count  :  nothing  *  The functionality  :  Input display  *************************************************/
void textarea_show1()
{
    
   lv_obj_t * ta = lv_textarea_create(lv_scr_act());  // Create input box 
   lv_textarea_set_one_line(ta,true);                 // Set the input to display only one line 
   lv_obj_align(ta,LV_ALIGN_TOP_MID,0,10);            // Set location 
   lv_obj_add_event_cb(ta,textarea_Show1_event_cb,LV_EVENT_READY,ta);// Set the callback function 
   lv_obj_set_size(ta,200,35);                        // Set dimensions 
   lv_obj_add_state(ta,LV_STATE_FOCUSED);             // Add state 

   static const char * btnm_map[]={
     "1","2","3","\n",
                                    "4","5","6","\n",
                                    "7","8","9","\n",
                                    LV_SYMBOL_BACKSPACE,"0",LV_SYMBOL_NEW_LINE,""};
   lv_obj_t * btnm = lv_btnmatrix_create(lv_scr_act());  // Create matrix key 
   lv_obj_set_size(btnm,200,150);                        // Set dimensions 
   lv_obj_align(btnm,LV_ALIGN_BOTTOM_MID,0,-10);         // Set location 
   lv_obj_add_event_cb(btnm,textarea_Show1_btnm_event_cb,LV_EVENT_VALUE_CHANGED,ta);   // Set callback 
   lv_obj_clear_flag(btnm,LV_OBJ_FLAG_CLICK_FOCUSABLE);  // Set flag bit 
   lv_btnmatrix_set_map(btnm,btnm_map);                  // Set the matrix key 
}

 Insert picture description here

3.2 The example implements keyboard input password mode and normal mode

static lv_obj_t * kb;
static void textarea_Show2_event_cb(lv_event_t * e)
{
    
   lv_event_code_t code = lv_event_get_code(e);          // Create an input event object 
   lv_obj_t * ta = lv_event_get_target(e);               // Get event object 
   if(code == LV_EVENT_CLICKED || code == LV_EVENT_FOCUSED){
       // Get events 
      if(kb != NULL){
    
         lv_keyboard_set_textarea(kb,ta);                // Specify a text area for the keyboard . The pressed character will be placed there .
      }else if(code == LV_EVENT_READY){
                      // End of process 
         LV_LOG_USER("Ready current text: %s",lv_textarea_get_text(ta));// Print display 
      }
   }
}
/************************************************* *  The name of the function  : textarea_show2 *  ginseng   Count  :  nothing  *  The functionality  :  Input display  *************************************************/
void textarea_show2()
{
    
   lv_obj_t * pwd_ta = lv_textarea_create(lv_scr_act());       // Create input dialog box 
   lv_textarea_set_text(pwd_ta,"");                            // Set the text of the text area 
   lv_textarea_set_password_mode(pwd_ta,true);                 // Password entry mode 
   lv_textarea_set_one_line(pwd_ta,true);                      // One line input mode 
   lv_obj_set_width(pwd_ta,lv_pct(40));                        // Set width 
   lv_obj_set_pos(pwd_ta,5,20);                                // Set location 
   lv_obj_add_event_cb(pwd_ta,textarea_Show2_event_cb,LV_EVENT_ALL,NULL);// Create callback function 

   lv_obj_t * pwd_label = lv_label_create(lv_scr_act());       // establish label object 
   lv_label_set_text(pwd_label,"Password");                    // Password entry mode 
   lv_obj_align_to(pwd_label,pwd_ta,LV_ALIGN_OUT_TOP_LEFT,0,0);// Set location 

   lv_obj_t * text_ta = lv_textarea_create(lv_scr_act());      // Create input dialog box 
   lv_textarea_set_one_line(text_ta,true);                     // Create input dialog box 
   lv_textarea_set_password_mode(text_ta,false);               // Non password input mode 
   lv_obj_set_width(text_ta,lv_pct(40));                       // Set dimensions 
   lv_obj_add_event_cb(text_ta,textarea_Show2_event_cb,LV_EVENT_ALL,NULL);// Create callback 
   lv_obj_align(text_ta,LV_ALIGN_TOP_RIGHT,-5,20);             // Set location 

   lv_obj_t * oneline_label = lv_label_create(lv_scr_act());   // establish label
   lv_label_set_text(oneline_label,"Text:");                   // Set up label Content 
   lv_obj_align_to(oneline_label,text_ta,LV_ALIGN_OUT_TOP_LEFT,0,0);// Set location 

   kb = lv_keyboard_create(lv_scr_act());                      // Create keyboard input 
   lv_obj_set_size(kb,LV_HOR_RES,LV_VER_RES/2);                // Set the keyboard size 
   lv_keyboard_set_textarea(kb,pwd_ta);                        // Specify a text area for the keyboard . The pressed character will be placed there .
}

 Insert picture description here

3.3 The example implements a fixed number to receive input and force the insertion of a character in the third position

/************************************************* *  The name of the function  : textarea_show3_event_cb *  ginseng   Count  : lv_event_t * e *  The functionality  :  Implement callback display  *************************************************/
static void textarea_show3_event_cb(lv_event_t * e)
{
    
   lv_obj_t * ta = lv_event_get_target(e);
   const char * txt = lv_textarea_get_text(ta);
   if(txt[0] >= '0' && txt[0] <= '9' && txt[1] >= '0' && txt[1] <= '9' && txt[2] != ';'){
    
      lv_textarea_set_cursor_pos(ta,2);
      lv_textarea_add_char(ta,':');
   }
}
/************************************************* *  The name of the function  : textarea_show3 *  ginseng   Count  :  nothing  *  The functionality  :  Input display  *************************************************/
void textarea_show3()
{
    
   lv_obj_t * ta = lv_textarea_create(lv_scr_act());     // Create input box 
   lv_obj_add_event_cb(ta,textarea_show3_event_cb,LV_EVENT_VALUE_CHANGED,NULL);  // Create callback 
   lv_textarea_set_accepted_chars(ta,"0123456789:");     // Only receive Fonts 
   lv_textarea_set_max_length(ta,5);                     // Set length 
   lv_textarea_set_one_line(ta,true);                    // One line display mode 
   lv_textarea_set_text(ta,"");                          // Set the initial font 
   lv_obj_set_size(ta,200,39);                           // Set dimensions 
   lv_obj_align(ta,LV_ALIGN_TOP_MID,0,10);               // Set location 

   kb = lv_keyboard_create(lv_scr_act());                // Create keyboard 
   lv_obj_set_size(kb,LV_HOR_RES,LV_VER_RES/2);          // Set dimensions 
   lv_keyboard_set_mode(kb,LV_KEYBOARD_MODE_NUMBER);     // Set the mode 
   lv_keyboard_set_textarea(kb,ta);                      // Specify a text area for the keyboard . The pressed character will be placed there .
}

 Insert picture description here

版权声明
本文为[Please call me Xiao Peng]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/04/202204210609450118.html