[FireBeetle 2 ESP32 C6 development board] 6. Adapt lvgl 9.1-- Complete LVGL test program

walker2048

[FireBeetle 2 ESP32 C6 development board] 6. Adapt lvgl 9.1-- Complete LVGL test program [Copy link]

<div class='showpostmsg'>### Preface lvgl has been released to version 9.x, and the lv_port_esp32 on github is still version 7.x. Since I have development needs for both Linux and esp32 devices, and the RAM and Flash of esp32 are not small, I plan to directly use version 9.1 of lvgl, and then use the lvgl_esp32_drivers repository. The warehouse address is https://github.com/lvgl/lvgl_esp32_drivers.git ### Write an lvgl test program The program written here is relatively simple. It plagiarizes the demonstration code of lvgl and then makes some simple modifications. ```c /* * SPDX-FileCopyrightText: 2010-2022 Espressif Systems (Shanghai) CO LTD * * SPDX-License-Identifier: CC0-1.0 */ #include "freertos/FreeRTOS.h" #include "freertos/task.h" #include "sdkconfig.h" #include "lvgl.h" #include<inttypes.h>
#include <stdio.h>

#include "esp_err.h"
#include "esp_log.h"
#include "esp_timer.h"

#include "src/widgets/label/lv_label.h"

#define TAG "LVGL"

static void btn_event_cb(lv_event_t *e) {
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t *btn = lv_event_get_target(e);
if (code == LV_EVENT_CLICKED) {
  uint32_t current_time = esp_timer_get_time() / 1000;
  static bool status = true;
  static uint32_t last_check_time = 0;
  if (current_time - last_check_time >= 300) {
  static uint8_t cnt = 0;
  cnt++;
  last_check_time = current_time;
  /*Get the first child of the button which is the label and change its
   * text*/
  lv_obj_t *label = lv_obj_get_child(btn, 0);

if (status) {
  lv_obj_set_style_bg_color(btn, lv_palette_main(LV_PALETTE_CYAN), 0);
  lv_label_set_text(label, "LED Off");
  } else {
  lv_obj_set_style_bg_color(btn, lv_palette_main(LV_PALETTE_AMBER), 0);
  lv_label_set_text(label, "LED On");
  }
  status = !status;
  }
}
}

/**
 * Create a button with a label and react on click event.
 */
void lv_example_get_started_2(void) {
lv_obj_t *btn =
  lv_button_create(lv_screen_active()); /*Add a button the current screen*/

lv_obj_set_style_bg_color(btn, lv_palette_main(LV_PALETTE_AMBER), 0);

lv_obj_set_pos(btn, 80, 140);/*Set its position*/
lv_obj_set_size(btn, 120, 50); /*Set its size*/
lv_obj_add_event_cb(btn, btn_event_cb, LV_EVENT_ALL,
        NULL); /*Assign a callback to the button*/

lv_obj_t *label = lv_label_create(btn); /*Add a label to the button*/
lv_label_set_text(label, "Button"); /*Set the labels text*/
lv_obj_center(label);

lv_obj_t *btn1 =
  lv_button_create(lv_screen_active()); /*Add a button the current screen*/

lv_obj_set_style_bg_color(btn1, lv_palette_main(LV_PALETTE_DEEP_ORANGE), 0);

lv_obj_set_pos(btn1, 80, 60); /*Set its position*/
lv_obj_set_size(btn1, 120, 50); /*Set its size*/
lv_obj_add_event_cb(btn1, NULL, LV_EVENT_ALL,
        NULL); /*Assign a callback to the button*/

lv_obj_t *label1 = lv_label_create(btn1); /*Add a label to the button*/
lv_label_set_text(label1, "LED");  /*Set the labels text*/
lv_obj_center(label1);
}

static void example_increase_lvgl_tick(void *arg) {
/* Tell LVGL how many milliseconds has elapsed */
lv_tick_inc(2);
}

extern void lv_port_disp_init(void);
extern void lv_port_indev_init(void);
void app_main(void) {
lv_init();
lv_port_disp_init();
lv_port_indev_init();

ESP_LOGI(TAG, "Install LVGL tick timer");
// Tick interface for LVGL (using esp_timer to generate 2ms periodic event)
const esp_timer_create_args_t lvgl_tick_timer_args = {
  .callback = &example_increase_lvgl_tick, .name = "lvgl_tick"}; esp_timer_handle_t lvgl_tick_timer = NULL; ESP_ERROR_CHECK(esp_timer_create(&lvgl_tick_timer_args, &lvgl_tick_timer)); ESP_ERROR_CHECK(esp_timer_start_periodic(lvgl_tick_timer, 2 * 1000)); lv_example_get_started_2(); /* handle the tasks of LVGL */ while (1) { lv_task_handler(); vTaskDelay(pdMS_TO_TICKS(30)); } } ``` Here is a brief introduction to the calling process of the lvgl program, as shown in the figure. 1. Initialization: 1.1 lv_init(): This is the initialization function of the LVGL library, it will set up the internal data structure and prepare the library to start working. 2. Hardware adaptation: 2.1 lv_port_disp_init(): This function configures the display adapter for LVGL so that LVGL can interact with the display screen of a specific hardware. 2.2 lv_port_indev_init(): Initializes input device processing, usually to handle touch screens or other forms of user input. 3. Set up LVGL timer: 3.1 example_increase_lvgl_tick function: LVGL needs a timer to update the interface and simulate the passage of time. This function calls lv_tick_inc() every 2 milliseconds to report the passage of time to LVGL. 3.2 esp_timer_create and esp_timer_start_periodic: Creates a periodic timer that calls example_increase_lvgl_tick every 2 milliseconds. 4. Run LVGL example: 4.1 lv_example_get_started_2(): This is an example application of LVGL to help developers quickly understand how to create and operate UI elements. 5. Main loop: 5.1 while (1) loop: This is the main event processing loop of LVGL. 5.2 lv_task_handler(): Processes the task queue of LVGL, updates the interface and processes animations. 5.3 vTaskDelay(pdMS_TO_TICKS(30)): In order to prevent the CPU from being overloaded, a short delay is added to give other tasks a chance to run. This ensures smooth and responsive interface updates. 
<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_814413_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>lvgl.png</strong> <em class="xg1">(542.91 KB, downloads: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >download attach</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_814413" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=814413&handlekey=savephoto_814413">save to album</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>
 #### The actual photo program function is to display two simple buttons, and then click button 1 (yellow), the text on the button will switch between LED On and LED Off, and the button color will also change. Since I can't find where to set the debounce function of the touch screen in lvgl, I will first write a simple debounce function in the button callback function, and set the debounce to within 300ms, so that a simple debounce button can be implemented. Since the touch screen board has not been prototyped yet, it is not easy to test it with the FireBeetle board. So I will first test it with the esp32s3 touch screen board I have. Before clicking the button 
<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_814428_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>p1.png</strong> <em class="xg1">(207.79 KB, downloads: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >download attach</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_814428" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=814428&handlekey=savephoto_814428">save to album</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>
 After clicking the button 
<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_814429_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>p2.png</strong> <em class="xg1">(215.58 KB, downloads: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >download attach</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_814429" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=814429&handlekey=savephoto_814429">save to album</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

</stdio.h></inttypes.h></div><script>					var loginstr = '<div class="locked">To view all the contents of the post, please <a href="/bbs/member.php?mod=logging&action=login"   style="color:#e60000" class="loginf">log in</a> or <a href="/bbs/member.php?mod=register_eeworld.php&action=wechat" style="color:#e60000" target="_blank">register</a></div>';
					
					if(parseInt(discuz_uid)==0){
						
					}		</script><script type="text/javascript">(function(d,c){var a=d.createElement("script"),m=d.getElementsByTagName("script")[0],eewurl="//counter.eeworld.com.cn/pv/count/";a.src=eewurl+c;m.parentNode.insertBefore(a,m)})(document,523)</script>

Jacktang

lvgl has been released to version 9.x, the speed of evolution and iteration is really fast

walker2048

Jacktang posted on 2024-6-7 07:32 lvgl has been released to version 9.x, the speed of evolution and iteration is really fast

Many experts say that version 9 takes up more resources and is slower. I don't have any requirements here, but I just don't want to use different versions to adapt to different APIs.

[FireBeetle 2 ESP32 C6 development board] 6. Adapt lvgl 9.1-- Complete LVGL test program [Copy link]

Latest reply

Comments