[DigiKey "Smart Manufacturing, Non-stop Happiness" Creative Competition] Smart Home Central Control Screen 3. Run LVGL

pomin · Published on 2023-11-14 23:24

[DigiKey "Smart Manufacturing, Non-stop Happiness" Creative Competition] Smart Home Central Control Screen 3. Run LVGL [Copy link]

Following the previous article, the development environment of keil + RTE + STM32CubeMX has been built. Here, the LVGL software package is added to the RTE. 
<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_753198_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>Pasted image 20231114224111.png</strong> <em class="xg1">(151.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_753198" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=753198&handlekey=savephoto_753198">save to album</a>

</p>

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

</ignore_js_op>
 Then write two files, lv_port_indev.c and lv_port_disp.c, to adapt the display interface and touch screen interface of LVGL, and use the full-screen cache and STM32's DMA2D to accelerate the screen refresh. The code of lv_port_disp.c is as follows ```c /** * @File lv_port_disp_templ.c * */ /*Copy this file as "lv_port_disp.c" and set this value to "1" to enable content*/ #if 1 /********************* * INCLUDES *********************/ #include "lv_port_disp.h" #include<stdbool.h>

/*********************
 *  DEFINES
 *********************/
#define MY_DISP_HOR_RES 480
#define MY_DISP_VER_RES 272
#ifndef MY_DISP_HOR_RES
  #warning Please define or replace the macro MY_DISP_HOR_RES with the actual screen width, default value 320 is used for now.
  #define MY_DISP_HOR_RES  320
#endif

#ifndef MY_DISP_VER_RES
  #warning Please define or replace the macro MY_DISP_HOR_RES with the actual screen height, default value 240 is used for now.
  #define MY_DISP_VER_RES  240
#endif

/**********************
 *  TYPEDEFS
 **********************/

/**********************
 *STATIC PROTOTYPES
 **********************/
static void disp_init(void);

static void disp_flush(lv_disp_drv_t * disp_drv, const lv_area_t * area, lv_color_t * color_p);
//static void gpu_fill(lv_disp_drv_t * disp_drv, lv_color_t * dest_buf, lv_coord_t dest_width,
//  const lv_area_t * fill_area, lv_color_t color);

/**********************
 *STATIC VARIABLES
 **********************/
lv_color_t fb_buf[MY_DISP_HOR_RES * MY_DISP_VER_RES];

/**********************
 *  MACROS
 **********************/

/**********************
 * GLOBAL FUNCTIONS
 **********************/

void lv_port_disp_init(void)
{
  /*-------------------------
 * Initialize your display
 * -----------------------*/
  disp_init();

/*-----------------------------
 * Create a buffer for drawing
 *----------------------------*/

/* Example for 3) also set disp_drv.full_refresh = 1 below*/
  static lv_disp_draw_buf_t draw_buf_dsc_3;
  lv_disp_draw_buf_init(&draw_buf_dsc_3, fb_buf, NULL,
        MY_DISP_HOR_RES * MY_DISP_VER_RES); /*Initialize the display buffer*/

/*-----------------------------------
 * Register the display in LVGL
 *----------------------------------*/

static lv_disp_drv_t disp_drv;         /*Descriptor of a display driver*/
  lv_disp_drv_init(&disp_drv);      /*Basic initialization*/

/*Set up the functions to access to your display*/

/*Set the resolution of the display*/
  disp_drv.hor_res = MY_DISP_HOR_RES;
  disp_drv.ver_res = MY_DISP_VER_RES;

/*Used to copy the buffer's content to the display*/
  disp_drv.flush_cb = disp_flush;

/*Set a display buffer*/
  disp_drv.draw_buf = &draw_buf_dsc_3;

/*Required for Example 3)*/
  disp_drv.full_refresh = 1;

/* Fill a memory array with a color if you have GPU.
 * Note that, in lv_conf.h you can enable GPUs that has built-in support in LVGL.
 * But if you have a different GPU you can use with this callback.*/
  //disp_drv.gpu_fill_cb = gpu_fill;

/*Finally register the driver*/
  lv_disp_drv_register(&disp_drv);
}

/**********************
 * STATIC FUNCTIONS
 **********************/

/*Initialize your display and the required peripherals.*/
static void disp_init(void)
{
  /*You code here*/
}

volatile bool disp_flush_enabled = true;

/* Enable updating the screen (the flushing process) when disp_flush() is called by LVGL
 */
void disp_enable_update(void)
{
  disp_flush_enabled = true;
}

/* Disable updating the screen (the flushing process) when disp_flush() is called by LVGL
 */
void disp_disable_update(void)
{
  disp_flush_enabled = false;
}

/*Flush the content of the internal buffer the specific area on the display
 *You can use DMA or any hardware acceleration to do this operation in the background but
 *'lv_disp_flush_ready()' has to be called when finished.*/
#include "main.h"
static void disp_flush(lv_disp_drv_t * disp_drv, const lv_area_t * area, lv_color_t * color_p)
{
//  BSP_LCD_FillRGBRect(0, area->x1, area->y1, color_p, area->x2 - area->x1 + 1, area->y2 - area->y1 + 1);
  uint16_t * fb = (uint16_t *) LCD_LAYER_0_ADDRESS;
  uint16_t stride = disp_drv->hor_res;
  fb += area->y1 * stride;
  fb += area->x1;
  lv_coord_t w = lv_area_get_width(area);
  int32_t y;
  for(y = area->y1; y <= area->y2; y++) {
  lv_memcpy(fb, color_p, w << 2);
  fb += stride << 1;
  color_p += w;
  }

//  /*IMPORTANT!!!
// *Inform the graphics library that you are ready with the flushing*/
  lv_disp_flush_ready(disp_drv);
}

#else /*Enable this file at the top*/

/*This dummy typedef exists purely to silence -Wpedantic.*/
typedef int keep_pedantic_happy;
#endif
```

lv_port_indev.c 的代码如下

```c
/**
 * @file lv_port_indev_templ.c
 *
 */

/*Copy this file as "lv_port_indev.c" and set this value to "1" to enable content*/
#if 1

/*********************
 *  INCLUDES
 *********************/
#include "lv_port_indev.h"
#include "lvgl.h"

/*********************
 *  DEFINES
 *********************/

/**********************
 *  TYPEDEFS
 **********************/

/**********************
 *STATIC PROTOTYPES
 **********************/

static void touchpad_init(void);
static void touchpad_read(lv_indev_drv_t * indev_drv, lv_indev_data_t * data);
static bool touchpad_is_pressed(void);
static void touchpad_get_xy(lv_coord_t * x, lv_coord_t * y);

static void mouse_init(void);
static void mouse_read(lv_indev_drv_t * indev_drv, lv_indev_data_t * data);
static bool mouse_is_pressed(void);
static void mouse_get_xy(lv_coord_t * x, lv_coord_t * y);

static void keypad_init(void);
static void keypad_read(lv_indev_drv_t * indev_drv, lv_indev_data_t * data);
static uint32_t keypad_get_key(void);

static void encoder_init(void);
static void encoder_read(lv_indev_drv_t * indev_drv, lv_indev_data_t * data);
static void encoder_handler(void);

static void button_init(void);
static void button_read(lv_indev_drv_t * indev_drv, lv_indev_data_t * data);
static int8_t button_get_pressed_id(void);
static bool button_is_pressed(uint8_t id);

/**********************
 *STATIC VARIABLES
 **********************/
lv_indev_t * indev_touchpad;
lv_indev_t * indev_mouse;
lv_indev_t * indev_keypad;
lv_indev_t * indev_encoder;
lv_indev_t * indev_button;

static int32_t encoder_diff;
static lv_indev_state_t encoder_state;

/**********************
 *  MACROS
 **********************/

/**********************
 * GLOBAL FUNCTIONS
 **********************/

void lv_port_indev_init(void)
{
  /**
 * Here you will find example implementation of input devices supported by LittelvGL:
 *- Touchpad
 *- Mouse (with cursor support)
 *- Keypad (supports GUI usage only with key)
 *- Encoder (supports GUI usage only with: left, right, push)
 *- Button (external buttons to press points on the screen)
 *
 *The `..._read()` function are only examples.
 *You should shape them according to your hardware
 */

static lv_indev_drv_t indev_drv;

/*------------------
 * Touchpad
 * -----------------*/

/*Initialize your touchpad if you have*/
  touchpad_init();

/*Register a touchpad input device*/
  lv_indev_drv_init(&indev_drv);
  indev_drv.type = LV_INDEV_TYPE_POINTER;
  indev_drv.read_cb = touchpad_read;
  indev_touchpad = lv_indev_drv_register(&indev_drv);

//  /*------------------
// * Mouse
// * -----------------*/

//  /*Initialize your mouse if you have*/
//  mouse_init();

//  /*Register a mouse input device*/
//  lv_indev_drv_init(&indev_drv);
//  indev_drv.type = LV_INDEV_TYPE_POINTER;
//  indev_drv.read_cb = mouse_read;
//  indev_mouse = lv_indev_drv_register(&indev_drv);

//  /*Set cursor. For simplicity set a HOME symbol now.*/
//  lv_obj_t * mouse_cursor = lv_img_create(lv_scr_act());
//  lv_img_set_src(mouse_cursor, LV_SYMBOL_HOME);
//  lv_indev_set_cursor(indev_mouse, mouse_cursor);

//  /*------------------
// * Keypad
// * -----------------*/

//  /*Initialize your keypad or keyboard if you have*/
//  keypad_init();

//  /*Register a keypad input device*/
//  lv_indev_drv_init(&indev_drv);
//  indev_drv.type = LV_INDEV_TYPE_KEYPAD;
//  indev_drv.read_cb = keypad_read;
//  indev_keypad = lv_indev_drv_register(&indev_drv);

//  /*Later you should create group(s) with `lv_group_t * group = lv_group_create()`,
// *add objects to the group with `lv_group_add_obj(group, obj)`
// *and assign this input device to group to navigate in it:
// *`lv_indev_set_group(indev_keypad, group);`*/

//  /*------------------
// * Encoder
// * -----------------*/

//  /*Initialize your encoder if you have*/
//  encoder_init();

//  /*Register a encoder input device*/
//  lv_indev_drv_init(&indev_drv);
//  indev_drv.type = LV_INDEV_TYPE_ENCODER;
//  indev_drv.read_cb = encoder_read;
//  indev_encoder = lv_indev_drv_register(&indev_drv);

//  /*Later you should create group(s) with `lv_group_t * group = lv_group_create()`,
// *add objects to the group with `lv_group_add_obj(group, obj)`
// *and assign this input device to group to navigate in it:
// *`lv_indev_set_group(indev_encoder, group);`*/

//  /*------------------
// * Button
// * -----------------*/

//  /*Initialize your button if you have*/
//  button_init();

//  /*Register a button input device*/
//  lv_indev_drv_init(&indev_drv);
//  indev_drv.type = LV_INDEV_TYPE_BUTTON;
//  indev_drv.read_cb = button_read;
//  indev_button = lv_indev_drv_register(&indev_drv);

//  /*Assign buttons to points on the screen*/
//  static const lv_point_t btn_points[2] = {
//  {10, 10}, /*Button 0 -> x:10; y:10*/
//  {40, 100},/*Button 1 -> x:40; y:100*/
//  };
//  lv_indev_set_button_points(indev_button, btn_points);
}

/**********************
 * STATIC FUNCTIONS
 **********************/

/*------------------
 * Touchpad
 * -----------------*/

/*Initialize your touchpad*/
static void touchpad_init(void)
{
uint16_t x1, y1;
uint32_t ts_status = BSP_ERROR_NONE;
uint32_t x_size, y_size;

BSP_LCD_GetXSize(0, &x_size);
BSP_LCD_GetYSize(0, &y_size);

hTS.Width = x_size;
hTS.Height = y_size;
hTS.Orientation = TS_SWAP_XY;
hTS.Accuracy = 0;

ts_status = BSP_TS_Init(0, &hTS);
  /*Your code comes here*/
}

/*Will be called by the library to read the touchpad*/
static void touchpad_read(lv_indev_drv_t * indev_drv, lv_indev_data_t * data)
{
  static lv_coord_t last_x = 0;
  static lv_coord_t last_y = 0;

/*Save the pressed coordinates and the state*/
  if(touchpad_is_pressed()) {
  touchpad_get_xy(&last_x, &last_y);
  data->state = LV_INDEV_STATE_PR;
  }
  else {
  data->state = LV_INDEV_STATE_REL;
  }

/*Set the last pressed coordinates*/
  data->point.x = last_x;
  data->point.y = last_y;
}

/*Return true is the touchpad is pressed*/
static bool touchpad_is_pressed(void)
{
  /*Your code comes here*/
  BSP_TS_GetState(0, &TS_State);
  return TS_State.TouchDetected;
}

/*Get the x and y coordinates if the touchpad is pressed*/
static void touchpad_get_xy(lv_coord_t * x, lv_coord_t * y)
{
  /*Your code comes here*/
  (*x) = TS_State.TouchX;
  (*y) = TS_State.TouchY;
}

/*------------------
 * Mouse
 * -----------------*/

/*Initialize your mouse*/
static void mouse_init(void)
{
  /*Your code comes here*/
}

/*Will be called by the library to read the mouse*/
static void mouse_read(lv_indev_drv_t * indev_drv, lv_indev_data_t * data)
{
  /*Get the current x and y coordinates*/
  mouse_get_xy(&data->point.x, &data->point.y);

/*Get whether the mouse button is pressed or released*/
  if(mouse_is_pressed()) {
  data->state = LV_INDEV_STATE_PR;
  }
  else {
  data->state = LV_INDEV_STATE_REL;
  }
}

/*Return true is the mouse button is pressed*/
static bool mouse_is_pressed(void)
{
  /*Your code comes here*/

return false;
}

/*Get the x and y coordinates if the mouse is pressed*/
static void mouse_get_xy(lv_coord_t * x, lv_coord_t * y)
{
  /*Your code comes here*/

(*x) = 0;
  (*y) = 0;
}

/*------------------
 * Keypad
 * -----------------*/

/*Initialize your keypad*/
static void keypad_init(void)
{
  /*Your code comes here*/
}

/*Will be called by the library to read the mouse*/
static void keypad_read(lv_indev_drv_t * indev_drv, lv_indev_data_t * data)
{
  static uint32_t last_key = 0;

/*Get the current x and y coordinates*/
  mouse_get_xy(&data->point.x, &data->point.y);

/*Get whether the a key is pressed and save the pressed key*/
  uint32_t act_key = keypad_get_key();
  if(act_key != 0) {
  data->state = LV_INDEV_STATE_PR;

/*Translate the keys to LVGL control characters according to your key definitions*/
  switch(act_key) {
    case 1:
      act_key = LV_KEY_NEXT;
      break;
    case 2:
      act_key = LV_KEY_PREV;
      break;
    case 3:
      act_key = LV_KEY_LEFT;
      break;
    case 4:
      act_key = LV_KEY_RIGHT;
      break;
    case 5:
      act_key = LV_KEY_ENTER;
      break;
  }

last_key = act_key;
  }
  else {
  data->state = LV_INDEV_STATE_REL;
  }

data->key = last_key;
}

/*Get the currently being pressed key.0 if no key is pressed*/
static uint32_t keypad_get_key(void)
{
  /*Your code comes here*/

return 0;
}

/*------------------
 * Encoder
 * -----------------*/

/*Initialize your keypad*/
static void encoder_init(void)
{
  /*Your code comes here*/
}

/*Will be called by the library to read the encoder*/
static void encoder_read(lv_indev_drv_t * indev_drv, lv_indev_data_t * data)
{

data->enc_diff = encoder_diff;
  data->state = encoder_state;
}

/*Call this function in an interrupt to process encoder events (turn, press)*/
static void encoder_handler(void)
{
  /*Your code comes here*/

encoder_diff += 0;
  encoder_state = LV_INDEV_STATE_REL;
}

/*------------------
 * Button
 * -----------------*/

/*Initialize your buttons*/
static void button_init(void)
{
  /*Your code comes here*/
}

/*Will be called by the library to read the button*/
static void button_read(lv_indev_drv_t * indev_drv, lv_indev_data_t * data)
{

static uint8_t last_btn = 0;

/*Get the pressed button's ID*/
  int8_t btn_act = button_get_pressed_id();

if(btn_act >= 0) {
  data->state = LV_INDEV_STATE_PR;
  last_btn = btn_act;
  }
  else {
  data->state = LV_INDEV_STATE_REL;
  }

/*Save the last pressed button's ID*/
  data->btn_id = last_btn;
}

/*Get ID(0, 1, 2 ..) of the pressed button*/
static int8_t button_get_pressed_id(void)
{
  uint8_t i;

/*Check to buttons see which is being pressed (assume there are 2 buttons)*/
  for(i = 0; i < 2; i++) {
  /*Return the pressed button's ID*/
  if(button_is_pressed(i)) {
    return i;
  }
  }

/*No button pressed*/
  return -1;
}

/*Test if `id` button is pressed or not*/
static bool button_is_pressed(uint8_t id)
{

/*Your code comes here*/

return false;
}

#else /*Enable this file at the top*/

/*This dummy typedef exists purely to silence -Wpedantic.*/
typedef int keep_pedantic_happy;
#endif

```

适配好了 LVGL 就跑一下 benchmark 测测分吧，最终结果如下，Weighted fps 可以达到 144 可以说十分流畅了，测试的项目最低的帧数也在 40，遥遥领先。

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_753199_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>1699722083401.jpg</strong> <em class="xg1">(1.86 MB, 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_753199" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=753199&handlekey=savephoto_753199">save to album</a>

</p>

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

</ignore_js_op>

然后跑一下 LVGL 的 widgets 的 demo，十分的流畅，40 fps 是在 lv_conf.h 中设置的上限，稳定40没有任何问题。

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_753197_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>IMG_20231114_224756 (2).jpg</strong> <em class="xg1">(893.04 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_753197" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=753197&handlekey=savephoto_753197">save to album</a>

</p>

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

</ignore_js_op>

然后不断的切换页面然后用手机抓拍，抓拍到如下结果，可以看到 CPU 占用在全屏刷新时占有率升高了，但是 fps 依旧是稳定在 40 不掉速，可以看到 STM32H7B3I 这个 MCU 虽然在 H7 系列中主频最低，但是依靠大 RAM 和 LTDC DMA2D 的加持在嵌入式 UI 应用上的表现还是很出色的。

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_753196_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>IMG_20231114_230013_BURST001_COVER (2).jpg</strong> <em class="xg1">(802.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_753196" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=753196&handlekey=savephoto_753196">save to album</a>

</p>

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

</ignore_js_op>
</stdbool.h>

Jacktang · Published on 2023-11-15 07:34

Although the STM32H7B3I MCU has the lowest main frequency in the H7 series, it still performs very well in embedded UI applications thanks to its large RAM and LTDC DMA2D.

wangerxian · Published on 2023-11-15 09:12

It is easy for H7 to drive a screen of this resolution.

lugl4313820 · Published on 2023-11-15 11:12

It is very convenient to transplant LVGL with stm32cbueIDE, but in actual projects, it is a bit troublesome to cooperate with freeRTOS, and memory management still requires a lot of knowledge.

sipower · Published on 2023-11-17 13:37

lugl4313820 Published on 2023-11-15 11:12 It is very convenient to transplant LVGL to stm32cbueIDE, but in actual projects, it is a bit troublesome to cooperate with freeRTOS, and memory management still requires a lot of effort...

I use the official routine of lvgl and compile it with stm32cubeide. As long as I start the LTDC DMA2D program, an error will be reported. I don't know what's going on.

lugl4313820 · Published on 2023-11-17 16:25

sipower posted on 2023-11-17 13:37 I used the official lvgl routines and compiled them with stm32cubeide. As long as I turned on the LTDC DMA2D program, an error message was displayed. I don't know what's going on.

It's all a memory problem. I run it alone without any errors, but if I run it with LVGL, there will be problems. I plan to enable the log function later to see if I can find the reason.

chejm · Published on 2023-11-19 07:49

Thank you for your hard work. Thank you for sharing such good technology.

[DigiKey "Smart Manufacturing, Non-stop Happiness" Creative Competition] Smart Home Central Control Screen 3. Run LVGL [Copy link]

Latest reply

Comments

Comments

Visited sections