{"id":306814,"date":"2020-07-12T21:00:35","date_gmt":"2020-07-12T21:00:35","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=306814"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2020-07-12T21:00:35","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=306814","title":{"rendered":"\u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 LVGL \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u043b\u044f \u043c\u0438\u043a\u0440\u043e\u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u043e\u0432"},"content":{"rendered":"\n
LVGL<\/a> \u2014 Light and Versatile Graphics Library \u0442\u0430\u043a\u0436\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u0430\u044f \u043a\u0430\u043a LittleVGL.<\/p>\n
<\/div>\n

\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043c\u0438\u043a\u0440\u043e\u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u043e\u0432, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a STM32, ESP32 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435. \u041c\u043d\u0435 \u043f\u043e\u043a\u0430 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u0443\u044e \u0434\u0435\u043c\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0443 \u043d\u0430 ESP32 \u0438 STM32f429 Discovery. \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043e\u0442\u043a\u0440\u044b\u0442\u0430\u044f, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441 Dark and Light \u0442\u0435\u043c\u0430\u043c\u0438. \u0420\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0434 MIT license. \u041c\u043e\u0436\u043d\u043e \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u0436\u0435 \u0432 \u043a\u043e\u043c\u043c\u0435\u0440\u0447\u0435\u0441\u043a\u0438\u0445 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430\u0445. \u041c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 Online Demo<\/a> \u0431\u0435\u0437 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e.
<\/a>
\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0434\u0432\u0443\u0445 \u0442\u0438\u043f\u043e\u0432 \u0434\u0438\u0441\u043f\u043b\u0435\u044f.<\/p>\n

    \n
  1. \u041d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0447\u0435\u0440\u0435\u0437 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 RGB \u0433\u0434\u0435 \u0431\u0443\u0444\u0435\u0440 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 MCU \u0432\u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 RAM \u0438\u043b\u0438 \u0432\u043d\u0435\u0448\u043d\u0435\u0439 SDRAM<\/li>\n
  2. \u0427\u0435\u0440\u0435\u0437 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u0434\u0438\u0441\u043f\u043b\u0435\u044f. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 MCU \u043c\u043e\u0436\u0435\u0442 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0441 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u043e\u043c \u0434\u0438\u0441\u043f\u043b\u0435\u044f \u0447\u0435\u0440\u0435\u0437 SPI \u0438\u043b\u0438 I2C \u0448\u0438\u043d\u0443. \u0414\u043b\u044f \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0435 \u0431\u0443\u0444\u0435\u0440\u044b \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 MCU \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435<\/li>\n<\/ol>\n

    <\/p>\n

    Two typical hardware set-ups<\/b> <\/p>\n
    MCU with TFT\/LCD driver If your MCU has a TFT\/LCD driver periphery then you can connect a display directly via RGB interface. In this case, the frame buffer can be in the internal RAM (if the MCU has enough RAM) or in the external RAM (if the MCU has a memory interface).<\/p>\n

    External display controller If the MCU doesn’t have TFT\/LCD driver interface then an external display controller (E.g. SSD1963, SSD1306, ILI9341) has to be used. In this case, the MCU can communicate with the display controller via Parallel port, SPI or sometimes I2C. The frame buffer is usually located in the display controller which saves a lot of RAM for the MCU. <\/div>\n<\/p><\/div>\n

    <\/p>\n

    <\/div>\n

    \u0412\u0441\u0435 \u043e\u0447\u0435\u043d\u044c \u0433\u0438\u0431\u043a\u043e \u0432 \u044d\u0442\u043e\u043c \u043f\u043b\u0430\u043d\u0435. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u0440\u0430\u0439\u0432\u0435\u0440 \u0442\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0430\u043c\u0438 \u043b\u0435\u0433\u043a\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0432 \u0441\u0432\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442<\/p>\n

    \u0421\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431, \u043d\u043e \u0438 \u0441\u0430\u043c\u044b\u0439 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0439 \u044d\u0442\u043e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c callback \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u2014 my_flush_cb<\/p>\n

    void my_flush_cb(lv_disp_drv_t * disp_drv, const lv_area_t * area, lv_color_t * color_p) {     \/*The most simple case (but also the slowest) to put all pixels to the screen one-by-one*\/     int32_t x, y;     for(y = area->y1; y <= area->y2; y++) {         for(x = area->x1; x <= area->x2; x++) {             put_px(x, y, *color_p)             color_p++;         }     }      \/* IMPORTANT!!!      * Inform the graphics library that you are ready with the flushing*\/     lv_disp_flush_ready(disp); }<\/code><\/pre>\n
      put_px \u2014 \u042d\u0442\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u043f\u0438\u043a\u0441\u0435\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u0434\u0440\u0430\u0439\u0432\u0435\u0440\u0430. \u0418\u0437 \u0437\u0430 \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0438\u0434\u0435\u0442 \u043f\u043e\u043f\u0438\u043a\u0441\u0435\u043b\u044c\u043d\u043e \u044d\u0442\u043e \u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e. \u0412 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u044b \u0434\u0440\u0443\u0433\u0438\u0435 \u0431\u043e\u043b\u0435\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438<\/p>\n
      \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c \u043f\u043e\u0434 \u0432\u0430\u0448 \u0434\u0438\u0441\u043f\u043b\u0435\u0439 \u0434\u0440\u0430\u0439\u0432\u0435\u0440 \u0443\u0436\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043f\u043e\u0440\u0442 LVGL \u0438 \u0432\u0430\u043c \u043d\u0430\u0434\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u043f\u0440\u043e\u0435\u043a\u0442. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u0435\u0440\u0432\u043e\u0435 \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0434\u0438\u0441\u043f\u043b\u0435\u044f \u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0432\u0432\u043e\u0434\u0430 \u0432\u044b\u0432\u043e\u0434\u0430:<\/p>\n
        lv_init();    tft_init();    touchpad_init();     lv_demo_widgets();  \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0438\u0437 \u0434\u0435\u043c\u043e <\/code><\/pre>\n
      \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u0431\u044f \u0438\u043c\u0435\u0435\u0442 \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440 \u0437\u0430\u0434\u0430\u0447. \u0414\u0430 \u044d\u0442\u043e \u043c\u0443\u043b\u044c\u0442\u0438\u043f\u043e\u0442\u043e\u043a\u043e\u0432\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430, \u043f\u043e\u043f\u0440\u0430\u0432\u044c\u0442\u0435 \u043c\u0435\u043d\u044f \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a, \u0442\u043e \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440\u0430 \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c \u0432\u044b\u0437\u043e\u0432\u0430 lv_tick_inc<\/p>\n
    void * tick_thread (void *args) {       while(1) {         usleep(5*1000);   \/*Sleep for 5 millisecond*\/         lv_tick_inc(5);      \/*Tell LVGL that 5 milliseconds were elapsed*\/     } }<\/code><\/pre>\n
      \u041f\u0440\u0438\u0447\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043d\u0430\u0434\u043e \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u044b \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u043e\u0448\u043b\u0438 \u0441 \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u0435\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438 \u0432\u0440\u0435\u043c\u044f \u0441 \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438.<\/p>\n
      \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u0442\u0440\u0430\u0442\u0438\u0442\u044c \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043d\u0430 \u043b\u0438\u0448\u043d\u0438\u0439 \u043f\u043e\u0442\u043e\u043a \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u044d\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043f\u043e \u043f\u0440\u0435\u0440\u044b\u0432\u0430\u043d\u0438\u044e \u043e\u0442 \u0442\u0430\u0439\u043c\u0435\u0440\u0430. \u041a\u0430\u043a \u0440\u0430\u0437 \u0432 STM32 \u0435\u0441\u0442\u044c SysTick \u0442\u0430\u0439\u043c\u0435\u0440 \u0434\u043b\u044f \u0442\u0430\u043a\u0438\u0445 \u0446\u0435\u043b\u0435\u0439:<\/p>\n
     void systickInit (uint16_t frequency) {    RCC_ClocksTypeDef RCC_Clocks;    RCC_GetClocksFreq (&RCC_Clocks);    (void) SysTick_Config (RCC_Clocks.HCLK_Frequency \/ frequency); }  extern "C" void SysTick_Handler (void)  {       lv_tick_inc(1);    \/\/ 1 ms  } <\/code><\/pre>\n
      <\/p>\n
                             SysTick timer<\/b>                         <\/p>\n
    This timer is dedicated to real-time operating systems, but could also be used as a standard
      downcounter. It features:<\/p>\n