当前位置:网站首页>ESP32 LVGL8. 1 - calendar (calendar 25)

ESP32 LVGL8. 1 - calendar (calendar 25)

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


Preface : hurried , Time is a pig killing knife of years , Slowly change our appearance ,2021 Years have passed , Welcome a brand new 2022, No matter in the past , Don't ask about the future . Happy New Year's day in the new year !!

One 、Calendar brief introduction

1.1 summary Overview

  Calendar The object is a classic calendar , It can :
• In a 7x7 The number of days in any month is displayed in the matrix
• Displays the name of the date
• Highlight the current day ( today )
• Highlight any user-defined date
  Calendar Added to the default group ( If it's set up ). Besides , A calendar is an editable object , Allows you to select and click dates and encoder navigation .
   In order to make Calendar flexible , By default, it does not display the current year or month . In its place , Can be attached to the outside of the calendar “ title ” Area .

1.2 Part and style Parts and Styles

  calendar Object is used inside it Button Matrix objects arrange dates into a matrix .
• LV_PART_MAIN The background of the calendar . It uses all the style attributes related to the background .
• LV_PART_ITEMS Refers to the date and the name of the date . Set the button matrix control flag to distinguish buttons , And add a custom
   Collapse the item event to modify the properties of the button :
     Date names have no boundaries , No background , Draw in gray
     The number of days in the previous month and the next month is LV_BTNMATRIX_CTRL_DISABLED sign
     Today there is a thicker border with the primary color of the theme
     Bright days have some opaque theme primary colors .

1.3 Use Usage

   Some functions use lv_calendar_date_t type , This is a year with 、 Structure of month and day fields .

1.3.1 The current date Current date

   To set the current date ( today ), Use lv_calendar_set_today_date(calendar, year, month, day) function . Month needs to be in 1…12
rangeand day in 1…31 Range .

1.3.2 Highlight days Highlighted days

   The highlighted date list should be stored in lv_calendar_date_t Array , The array consists of lv_calendar_set_highlighted_dates(calendar,highlighted_dates, date_num) load .
   Only array pointers will be saved , Therefore, the array should be a static or global variable .

1.3.3 The name of the day Name of the days

   The name of the number of days can be lv_calendar_set_day_names(calendar, day_names) adjustment , among day_names Look like const char *day_names[7] = {“Su”, “Mo”,…}; Save only date names The pointer , Therefore, the element should be static 、 Global or constant variables .

1.4 event Events

  LV_EVENT_VALUE_CHANGED It means clicking data .Lv_calendar_get_pressed_date (calendar, &date) Tell me which day is currently pressed . If there is valid press data , return LV_RES_OK, otherwise LV_RES_INV.

1.5 Key Keys

• LV_KEY_RIGHT/UP/LEFT/RIGHT Navigate to the date... Between the buttons
• LV_KEY_ENTER Press down / Release selected date

1.6 header Headers

1.6.1 Arrow keys Arrow buttons

  lv_calendar_header_arrow_crea te (pare nt, calend ar, button_size) Create a header , Both sides of the header contain a left and right arrow , And text containing the current year and month .

1.6.2 The drop-down Drop-down

  Lv_calendar_header_dropdown_create (calendar) Created a include 2 The title of a drop-down list
A year , A month .

Two 、Calendar API

lv_obj_t * lv_calendar_create(lv_obj_t * parent);															// Create a calendar 
void lv_calendar_set_today_date(lv_obj_t * obj, uint32_t year, uint32_t month, uint32_t day);				// Set today's date 
void lv_calendar_set_showed_date(lv_obj_t * obj, uint32_t year, uint32_t month);							// Set current display 
void lv_calendar_set_highlighted_dates(lv_obj_t * obj, lv_calendar_date_t highlighted[], uint16_t date_num);// Set the highlighted date 
void lv_calendar_set_day_names(lv_obj_t * obj, const char ** day_names);									// Set the name of the day 
lv_obj_t * lv_calendar_get_btnmatrix(const lv_obj_t * obj);													// Get the button matrix object of the calendar 
const lv_calendar_date_t * lv_calendar_get_today_date(const lv_obj_t * calendar);							// Get today's date 
const lv_calendar_date_t * lv_calendar_get_showed_date(const lv_obj_t * calendar);							// Get the currently displayed content 
lv_calendar_date_t * lv_calendar_get_highlighted_dates(const lv_obj_t * calendar);							// Get the highlighted date 
uint16_t lv_calendar_get_highlighted_dates_num(const lv_obj_t * calendar);									// Get the number of highlighted dates 
lv_res_t lv_calendar_get_pressed_date(const lv_obj_t * calendar, lv_calendar_date_t * date);				// Get press data 
lv_obj_t * lv_calendar_header_dropdown_create(lv_obj_t * parent);											// Create a calendar title , With drop-down box to select year and month 

3、 ... and 、 Example

It is worth noting that LVGL8 Version and 8.1 In version lv_calendar_header_dropdown_create(); This API There are some different

3.1 Basic display of the sample calendar

/************************************************* *  The name of the function  : calendar_event_handler *  ginseng   Count  :  nothing  *  The functionality  :  The calendar callback displays  *************************************************/
static void calendar_event_handler(lv_event_t * e)
{
    
   lv_event_code_t code = lv_event_get_code(e);          // Get callback event  
   lv_obj_t * obj = lv_event_get_current_target(e);      // Get the current objective function 
   if(code == LV_EVENT_VALUE_CHANGED){
                       // Event judgment 
      lv_calendar_date_t date;   
      if(lv_calendar_get_pressed_date(obj,&date)){
           // Get date 
         LV_LOG_USER("Click date:%02d.%02d.%d",date.day,date.month,date.year);
      }
   }
}
/************************************************* *  The name of the function  : Calendar_show *  ginseng   Count  :  nothing  *  The functionality  :  The calendar shows  *************************************************/
void Calendar_show()
{
    
   lv_obj_t * calendar = lv_calendar_create(lv_scr_act());  // Create a calendar object 
   lv_obj_set_size(calendar,185,185);                       // Set dimensions 
   lv_obj_align(calendar,LV_ALIGN_CENTER,0,27);             // Set location 
   lv_obj_add_event_cb(calendar,calendar_event_handler,LV_EVENT_ALL,NULL); // Set the callback function 

   lv_calendar_set_today_date(calendar,2022,01,01);         // Set today's date 
   lv_calendar_set_showed_date(calendar,2022,01);           // Set the current date 

   static lv_calendar_date_t highlighted_days[3];
   highlighted_days[0].year  = 2022;
   highlighted_days[0].month = 01;
   highlighted_days[0].day   = 01;

   highlighted_days[1].year  = 2022;
   highlighted_days[1].month = 01;
   highlighted_days[1].day   = 01;

   highlighted_days[2].year  = 2022;
   highlighted_days[2].month = 01;
   highlighted_days[2].day   = 01;

   lv_calendar_set_highlighted_dates(calendar,highlighted_days,3);   // Set highlight date  
   lv_calendar_header_dropdown_create(lv_scr_act(),calendar);        // Create a calendar title , With drop-down box to select year and month  LVGL8.0 
// lv_calendar_header_dropdown_create(calendar); // Create a calendar title , With drop-down box to select year and month  LVGL8.1 
   lv_calendar_set_showed_date(calendar,2022,01);                    // Set current display 
}

 Insert picture description here

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