Noise and unshaped Button when using lvgl to produce

Description

What MCU/Processor/Board and compiler are you using?

I am using STM32L4R9I Discovery. The compiler is gcc

What do you want to achieve?

I want to have a normal button like this link:
https://camo.githubusercontent.com/31704de54ed46c4906599cfb1bc196f73196a2e7/68747470733a2f2f646f63732e6c6974746c6576676c2e636f6d2f656e2f6d6973632f73696d706c655f627574746f6e5f6578616d706c652e676966

What have you tried so far?

I performed tasks in this website:
https://docs.littlevgl.com/en/html/porting/project.html
I also wrote the driver for the MB1314 (display module).
I based on the STM32L4R9I_discovery library and DSI library to write the driver:
the link is:

Code to reproduce

Add a code snippet which can run in the simulator. It should contain only the relevant code that compiles without errors when separated from your main code base.

The code block(s) should be formatted like:

the driver of display module:
#include "lv_conf.h"
#include "display.h"
#include "lvgl/src/lv_hal/lv_hal.h"

#include "display.h"
#include "stm32l4xx_hal.h"
#include "stm32l4xx_hal_ltdc.h"
#include "stm32l4xx_hal_dma2d.h"
#include "stm32l4xx_hal_dsi.h"
#include "stm32l4xx_hal_rcc.h"

#include "stm32l4r9i_discovery.h"
#include "stm32l4r9i_discovery_lcd.h"
#include "stm32l4r9i_discovery_psram.h"

#include "st7735/st7735.h"

#define LAYER0_ADDRESS               GFXMMU_VIRTUAL_BUFFER0_BASE
//**************STATIC PROTOTYPES**************

/* For LittlevGL */
static void tft_flush_cb(lv_disp_drv_t *drv, const lv_area_t *area,
lv_color_t *color_p);

/* LCD */

/* RAM */
static void CopyBuffer(const uint32_t *pSrc, uint32_t *pDst, uint16_t x, uint16_t y, uint16_t xsize, uint16_t ysize);

// ************STATIC VARIABLES***************

extern LTDC_HandleTypeDef hltdc_discovery;
//static DMA2D_HandleTypeDef hdma2d;
extern DSI_HandleTypeDef hdsi_discovery;
DSI_VidCfgTypeDef hdsivideo_handle;
DSI_PLLInitTypeDef dsiPllInit;
//static RCC_PeriphCLKInitTypeDef PeriphClkInitStruct;

static uint32_t *my_fb = (uint32_t*)LAYER0_ADDRESS;
static DMA2D_HandleTypeDef   Dma2dHandle;
// ************ GLOBAL FUNCTION *************

// ********* initialize the display ***********
void tft_init(void) {
BSP_PSRAM_Init();
BSP_LCD_Init();
BSP_LCD_SelectLayer(0);

HAL_DSI_ShortWrite(&(hdsi_discovery), 0, DSI_DCS_SHORT_PKT_WRITE_P0,
           DSI_SET_DISPLAY_ON, 0x00);

BSP_LCD_Refresh();

static lv_disp_buf_t disp_buf;
static lv_color_t buf[TFT_HOR_RES * 10];
lv_disp_buf_init(&disp_buf, buf, NULL, TFT_HOR_RES * 10);

lv_disp_drv_t disp_drv;
lv_disp_drv_init(&disp_drv);
disp_drv.flush_cb = tft_flush_cb;
disp_drv.buffer = &disp_buf;
   lv_disp_drv_register(&disp_drv);
}

static void tft_flush_cb(lv_disp_drv_t *drv, const lv_area_t *area,
lv_color_t *color_p) {
CopyBuffer((const uint32_t*) color_p, my_fb, area->x1, area->y1,
lv_area_get_width(area), lv_area_get_height(area));

HAL_DSI_Refresh(&hdsi_discovery);

lv_disp_flush_ready(drv);

/*lv_disp_t * disp;
int32_t x,y;
for (y = area->y1; y<= area->y2; y++)
{
for (x = area->x1; y <= area->x2; x++)
{
put_px(x, y, *color_p);
color_p++;
}
}
lv_disp_flush_ready(disp);*/
}

static void CopyBuffer(const uint32_t *pSrc, uint32_t *pDst, uint16_t x, uint16_t y, uint16_t xsize, uint16_t ysize)
{
 uint32_t destination = (uint32_t)pDst + (y * 390 + x) * 4;
 uint32_t source      = (uint32_t)pSrc;

 Dma2dHandle.Instance          = DMA2D;

 /*##-1- Configure the DMA2D Mode, Color Mode and output offset #############*/
 Dma2dHandle.Init.Mode           = DMA2D_M2M_PFC;
 Dma2dHandle.Init.ColorMode      = DMA2D_OUTPUT_RGB888;
 Dma2dHandle.Init.OutputOffset   = 1024 - 390;
 Dma2dHandle.Init.AlphaInverted  = DMA2D_REGULAR_ALPHA;  /* No Output Alpha Inversion */
 Dma2dHandle.Init.RedBlueSwap    = DMA2D_RB_REGULAR;     /* No Output Red & Blue swap */
 Dma2dHandle.Init.BytesSwap      = DMA2D_BYTES_REGULAR;  /* Regular output byte order */
 Dma2dHandle.Init.LineOffsetMode = DMA2D_LOM_PIXELS;     /* Pixel mode                */

 /*##-2- Foreground Configuration ###########################################*/
 Dma2dHandle.LayerCfg[1].InputColorMode = DMA2D_INPUT_RGB888;
 Dma2dHandle.LayerCfg[1].InputOffset    = 0;
 Dma2dHandle.LayerCfg[1].AlphaMode      = DMA2D_NO_MODIF_ALPHA;
 Dma2dHandle.LayerCfg[1].InputAlpha     = 0xFF;                /* Not used */
 Dma2dHandle.LayerCfg[1].RedBlueSwap    = DMA2D_RB_SWAP; //DMA2D_RB_REGULAR;    /* No ForeGround Red/Blue swap */
 Dma2dHandle.LayerCfg[1].AlphaInverted  = DMA2D_REGULAR_ALPHA; /* No ForeGround Alpha inversion */

 /* DMA2D Initialization */
 if(HAL_DMA2D_Init(&Dma2dHandle) == HAL_OK)
 {
   if(HAL_DMA2D_ConfigLayer(&Dma2dHandle, 1) == HAL_OK)
   {
     if (HAL_DMA2D_Start(&Dma2dHandle, source, destination, xsize, ysize) == HAL_OK)
     {
       /* Polling For DMA transfer */
       HAL_DMA2D_PollForTransfer(&Dma2dHandle, 100);
     }
   }
 }
}

the code of button i wrote to test:
* theButton.c
*
*  Created on: Jan 3, 2020
*      Author: laptop88
*/

#include "theButton.h"

//#if LV_USE_BTN && LV_USE_TESTS

//void btn_event_cb(lv_obj_t *btn, lv_event_t);

void lv_button(void)
{
lv_obj_t * btn = lv_btn_create(lv_disp_get_scr_act(NULL), NULL);
lv_obj_set_pos(btn, 10, 10);
lv_obj_set_size(btn, 10, 10);

lv_obj_t * label = lv_label_create(btn, NULL);
lv_label_set_text(label, "button");

static lv_style_t style_rel;
lv_style_copy(&style_rel, &lv_style_pretty);
style_rel.body.main_color = LV_COLOR_ORANGE;
}

/*
void btn_event_cb(lv_obj_t * btn, lv_event_t event)
{
if (event == LV_EVENT_CLICKED)
{
printf("clicked");
}
}*/

//#endif

Screenshot and/or video

20200115_164056.jpg
20200116_112751_HDR.jpg

So I want to ask what might cause the current situation.

It must be an issue in your tft_flush_cb function. To debug it I suggest trying to draw a rectangle at a specific area separately from LittlevGL.

Hi @embeddedt,

I apologize for replying so late like this.

Yes, I can draw a rectangle, a circle,… by using functions from BSP Library, not by using anything from LittlevGL.

Our team spent last month to change the flush callback function from the one above to put_px(x,y,color_p) but none worked. So we tried to debug by seeing what is inside each variable and now we find this situation where variable from lvgl was not created. The error is like this:
2020-02-11 2020-02-11.png

As soon as I clicked Resume in Debug, the error of each variable is “Target is not available” before they changed to that in the picture.
I assume that although i can add lvgl into a project but things relating to lvgl is not working.
So what might be the cause of this situation? I read the documentation and did exactly what they told.

Thank you

I’m not sure what the cause of that error is. (I’ve never seen it before.) My initial guesses would be that either your debugger is broken or you have optimization turned up too high (try turning it off temporarily if you can).

the problem of noise and unshaped buttons has been solved