分析lvgl的代码启动过程，对比esp32，stm32，linux

lvgl是gui层负责绘制gui并根据输入设备的事件来响应重绘 ，然后把绘制的缓冲区发送给显示驱动去实际显示。

以下代码参考lvgl arduino官方例程，gui guider模拟器例程，，零知 stm32 fsmc lvgl例程

第0步 时钟

时钟是lvgl绘制gui的节拍器。获取时钟   在这个文件里  ..\lvgl\src\hal\lv_hal_tick.c

在arduino 中时钟是从 millis（）这个函数获得的

#define LV_TICK_CUSTOM 1
#if LV_TICK_CUSTOM
    #define LV_TICK_CUSTOM_INCLUDE "Arduino.h"         /*Header for the system time function*/
    #define LV_TICK_CUSTOM_SYS_TIME_EXPR (millis())    /*Expression evaluating to current system time in ms*/
#endif   /*LV_TICK_CUSTOM*/

 

stm32使用硬件timer   

HardwareTimer *MyTim;
    /*Initialize the graphics library's tick*/
    MyTim = new HardwareTimer(TIM2);
    MyTim->setMode(2, TIMER_OUTPUT_COMPARE);  // In our case, channekFalling is configured but not really used. Nevertheless it would be possible to attach a callback to channel compare match.
    MyTim->setOverflow(1000/LVGL_TICK_PERIOD, HERTZ_FORMAT); // period in Hz
    MyTim->attachInterrupt(lv_tick_handler);
    MyTim->resume();



static void lv_tick_handler(HardwareTimer*)
{
    
    lv_tick_inc(LVGL_TICK_PERIOD);
}

linux等使用 mingw标准库   <stddef.h>  里的宏定义  sys_time

#if !LV_TICK_CUSTOM
/**
 * You have to call this function periodically
 * @param tick_period the call period of this function in milliseconds
 */
LV_ATTRIBUTE_TICK_INC void lv_tick_inc(uint32_t tick_period)
{
    tick_irq_flag = 0;
    sys_time += tick_period;
}
#endif

第一步 核心初始化

lv核心初始化 完成各种结构体与函数的初始化   

  lv_init();

第二步  硬件抽象层

硬件虚拟层需要 完成  display, input devices, tick     也就是与驱动的对接，与输入设备的对接   完成tick （节拍）？

1 先看display 

先实例化底层显示驱动    

 

SDL驱动      monitor_init();

TFT espi驱动      tft.begin();          /* TFT init TFT初始化*/ 

  tft.setRotation( 1 ); /* Landscape orientation, flipped 设置方向*/

 

创造缓冲区

    /*Create a display buffer  SDL样式的*/  
    static lv_disp_draw_buf_t disp_buf1;
    static lv_color_t buf1_1[480 * 10];
    lv_disp_draw_buf_init(&disp_buf1, buf1_1, NULL, 480 * 10);

?

1	lv_disp_buf_init(&disp_buf, buf, NULL, LV_HOR_RES_MAX * 10);

完成display到实际底层驱动的填充函数

 

/* Display flushing 显示填充  espi样式  */
void my_disp_flush( lv_disp_drv_t *disp, const lv_area_t *area, lv_color_t *color_p )
{
    uint32_t w = ( area->x2 - area->x1 + 1 );
    uint32_t h = ( area->y2 - area->y1 + 1 );

    tft.startWrite();
    tft.setAddrWindow( area->x1, area->y1, w, h );
    tft.pushColors( ( uint16_t * )&color_p->full, w * h, true );
    tft.endWrite();

    lv_disp_flush_ready( disp );
}

直接写GRAM样式

void my_disp_flush(lv_disp_drv_t *disp, const lv_area_t *area, lv_color_t *color_p)
{

    u16 height,width;
    u16 i,j;
    width=area->x2 - area->x1+1;             //得到填充的宽度
    height=area->y2 - area->y1+1;            //高度
    for(i=0;i<height;i++)
    {
        LCD_SetCursor(area->x1,area->y1+i);       //设置光标位置
        LCD_WriteRAM_Prepare();     //开始写入GRAM
        for(j=0;j<width;j++)
        {
            LCD_TYPE->LCD_RAM=color_p->full;//写入数据
            color_p++;
        }
    }
    
    lv_disp_flush_ready(disp); /* tell lvgl that flushing is done */
}

 

 

SDL样式

monitor_flush

 

 

创造display

    /*Initialize the display初始化display*/
    lv_disp_drv_t disp_drv;
    lv_disp_drv_init(&disp_drv);
    disp_drv.hor_res = LV_HOR_RES_MAX;
    disp_drv.ver_res = LV_VER_RES_MAX;
    disp_drv.flush_cb = my_disp_flush;//  这里就用到了填充函数
    disp_drv.buffer = &disp_buf;
    lv_disp_drv_register(&disp_drv);

 

 

2 再看输入层

先初始化硬件接口 

TFT-esp 这样  触摸屏

    uint16_t calData[5] = { 187, 3596, 387, 3256, 5 };
    tft.setTouch( calData ); // espi如果设置了touch cs 自动完成触摸的初始化

 独立的xpt2046驱动 触摸屏

XPT2046_Touchscreen ts(CS_PIN, irq_pin);

 模拟器的鼠标键盘

mouse_init();//在模拟器里也完成了触摸回调函数

其他的滚轮键盘编码器也同样原理

对接触摸驱动 完成触摸回调函数

espi

/*Read the touchpad*/
/*读取触摸板*/
void my_touchpad_read( lv_indev_drv_t * indev_driver, lv_indev_data_t * data )
{
    uint16_t touchX, touchY;

    bool touched = tft.getTouch( &touchX, &touchY, 600 );

    if( !touched )
    {
        data->state = LV_INDEV_STATE_REL;
    }
    else
    {
        data->state = LV_INDEV_STATE_PR;

        /*Set the coordinates*/
        data->point.x = touchX;
        data->point.y = touchY;

        Serial.print( "Data x " );
        Serial.println( touchX );

        Serial.print( "Data y " );
        Serial.println( touchY );
    }
}

 

xpt2046

bool my_touchpad_read(lv_indev_drv_t * indev, lv_indev_data_t * data)
{
    static lv_coord_t last_x = 0;
    static lv_coord_t last_y = 0;

    /*Save the state and save the pressed coordinate*/
    data->state = ts.touched() ? LV_INDEV_STATE_PR : LV_INDEV_STATE_REL;
    if(data->state == LV_INDEV_STATE_PR){
        TS_Point p = ts.getPoint();
        
        //convert to lcd position
        last_x = LV_HOR_RES-(p.x *LV_HOR_RES)/4095;       /*TODO save the current X coordinate*/
        last_y = LV_VER_RES-(p.y *LV_VER_RES)/4095;       /*TODO save the current Y coordinate*/
        
        Serial.print("touched:");
        Serial.print(last_x);Serial.print(",");Serial.println(last_y);
    } 

    /*Set the coordinates (if released use the last pressed coordinates)*/
    data->point.x = last_x;
    data->point.y = last_y;

    return false; /*Return `false` because we are not buffering and no more data to read*/
}

完成lvgl输入驱动与硬件驱动的对接

触摸样式

    /*Initialize the (dummy) input device driver*/
    /*初始化（虚拟）输入设备驱动程序*/
    static lv_indev_drv_t indev_drv;
    lv_indev_drv_init( &indev_drv );
    indev_drv.type = LV_INDEV_TYPE_POINTER;
    indev_drv.read_cb = my_touchpad_read;//上一步的在这用到了
    lv_indev_drv_register( &indev_drv );

模拟器样式 使用鼠标

   /* Add the mouse as input device
     * Use the 'mouse' driver which reads the PC's mouse*/
    mouse_init();
    lv_indev_drv_t indev_drv;
    lv_indev_drv_init(&indev_drv);          /*Basic initialization*/
    indev_drv.type = LV_INDEV_TYPE_POINTER;
    indev_drv.read_cb = mouse_read;         /*This function will be called periodically (by the library) to get the mouse position and state*/
    lv_indev_t * mouse_indev = lv_indev_drv_register(&indev_drv);

 

3 初始化节拍

arduino 自动完成此步骤

模拟器

    /* Tick init.
     * You have to call 'lv_tick_inc()' in periodically to inform LittelvGL about how much time were elapsed
     * Create an SDL thread to do this*/
    SDL_CreateThread(tick_thread, "tick", NULL);

stm32

 

    /*Initialize the graphics library's tick*/
    MyTim = new HardwareTimer(TIM2);
    MyTim->setMode(2, TIMER_OUTPUT_COMPARE);  // In our case, channekFalling is configured but not really used. Nevertheless it would be possible to attach a callback to channel compare match.
    MyTim->setOverflow(1000/LVGL_TICK_PERIOD, HERTZ_FORMAT); // period in Hz
    MyTim->attachInterrupt(lv_tick_handler);
    MyTim->resume();

说实话我没怎么看懂

 

第三步  开始绘制gui

硬件抽象层完成初始化   就可以开始绘制ui

第一步是初始化sceen

从sceen里创建各种widget    给widget添加事件回调  然后在无线循环里调用lv_timer_handler()，它会按LVGL_TICK_PERIOD 设置的事件重复的响应输入事件来重绘ui

 

这里简单绘制个label，注意label默认不带事件。除非用函数强制开启

    /*Create a Label on the currently active screen在当前屏幕上生成一个label*/

　　static  lv_obj_t * label1= lv_label_create(lv_scr_act());// lv_sce_act()可以获得当前屏幕   使用静态指针是避免setup函数结束后指针被释放找不到对象自己

/*Modify the Label's text设置文本*/
    lv_label_set_text(label1, "Hello world!");
    
    lv_obj_set_pos(label1, 0, 2);

    /* Align the Label to the center
     * NULL means align on parent (which is the screen now)
     * 0, 0 at the end means an x, y offset after alignment*/
// 

 

添加一个带事件的按钮 

 这里我一开始尝试用模拟器，但是guiguider跟lvgl是是纯c语言的  不支持 c++的String，但是c想实现字符串的动态增长可是无比蛋疼的  这时候arduino的C++特性就很好用

 static void btn_event_cb(lv_event_t * e)//回调函数都是静态的 

{
    lv_event_code_t code = lv_event_get_code(e);

        if(code == LV_EVENT_CLICKED) {
           static String temp = lv_label_get_text(label);//临时变量也是静态的
           temp = temp + "!";


            lv_label_set_text(label1,  temp.c_str());
            
        }

}

 

    lv_obj_t * btn = lv_btn_create(lv_scr_act());     /*Add a button the current screen*/
    lv_obj_set_pos(btn, 50, 50);                            /*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*/