Back to Lvgl

README He

docs/README_he.md

9.5.016.1 KB
Original Source

<a href="https://github.com/sponsors/lvgl" target="_blank"></a>

<p align="right"> <b>ืขื‘ืจื™ืช</b> | <a href="./docs/README_zh.md">ไธญๆ–‡</a> | <a href="./docs/README_pt_BR.md">Portuguรชs do Brasil</a> | <a href="./docs/README_jp.md">ๆ—ฅๆœฌ่ชž</a> | <a href="./README.md">English</a> </p> <p align="center"> </p> <h1 align="center">ืกืคืจื™ื™ืช ื’ืจืคื™ืงื” ืงืœื” ื•ืจื‘-ืฉื™ืžื•ืฉื™ืช</h1> <div align="center">

ย 

</div> <p align="center"> <a href="https://lvgl.io" title="ืขืžื•ื“ ื”ื‘ื™ืช ืฉืœ LVGL">ืืชืจ</a> | <a href="https://pro.lvgl.io" title="ืขื•ืจืš UI ืžื‘ื•ืกืก XML ืฉืœ LVGL Pro">ืขื•ืจืš LVGL Pro</a> | <a href="https://docs.lvgl.io/" title="ืชื™ืขื•ื“ ืžืคื•ืจื˜ ืขื ื™ื•ืชืจ ืžึพ100 ื“ื•ื’ืžืื•ืช">ืชื™ืขื•ื“</a> | <a href="https://forum.lvgl.io" title="ืงื‘ืœ ืขื–ืจื” ื•ืขื–ื•ืจ ืœืื—ืจื™ื">ืคื•ืจื•ื</a> | <a href="https://lvgl.io/demos" title="ื”ื“ื’ืžื•ืช ืฉืจืฆื•ืช ื‘ื“ืคื“ืคืŸ">ื“ื•ื’ืžืื•ืช</a> | <a href="https://lvgl.io/services" title="ืขื™ืฆื•ื‘ ื’ืจืคื™, ื™ื™ืฉื•ื UI ื•ื™ื™ืขื•ืฅ">ืฉื™ืจื•ืชื™ื</a> </p>

๐Ÿ“’ ืกืงื™ืจื”

LVGL ื”ื™ื ืกืคืจื™ื™ืช UI ื—ื™ื ืžื™ืช ื•ืงื•ื“ ืคืชื•ื— ืฉืžืืคืฉืจืช ืœื™ืฆื•ืจ ืžืžืฉืงื™ ืžืฉืชืžืฉ ื’ืจืคื™ื™ื ืœื›ืœ MCU ืื• MPU ืžื›ืœ ืกืคืง ื•ืขืœ ื›ืœ ืคืœื˜ืคื•ืจืžื”.

ื“ืจื™ืฉื•ืช: ืœึพLVGL ืื™ืŸ ืชืœื•ืช ื—ื™ืฆื•ื ื™ืช, ืžื” ืฉืžืงืœ ืขืœ ื”ื™ื“ื•ืจ ืœื›ืœ ื™ืขื“ ืžื•ื“ืจื ื™, ื”ื—ืœ ืžึพMCU ืงื˜ื ื™ื ื•ืขื“ MPU ืžื‘ื•ืกืกื™ Linux ืžืจื•ื‘ื™ ืœื™ื‘ื•ืช ืขื ืชืžื™ื›ืช 3D. ืขื‘ื•ืจ UI ืคืฉื•ื˜ ื“ืจื•ืฉื™ื ืจืง 100kB RAM, ื›200โ€“300kB Flash ื•ืžืื’ืจ ืจื™ื ื“ื•ืจ ื‘ื’ื•ื“ืœ 1/10 ืžื’ื•ื“ืœ ื”ืžืกืš.

ืœื”ืชื—ืœื” ืžื”ื™ืจื”: ื‘ื—ืจื• ืคืจื•ื™ืงื˜ ืžื•ื›ืŸ ืœึพVSCode,โ€ Eclipse ืื• ื›ืœ ืกื‘ื™ื‘ืช ืคื™ืชื•ื— ืื—ืจืช ื•ื ืกื• ืืช LVGL ืขืœ ื”ืžื—ืฉื‘. ืงื•ื“ ื”ึพUI ืฉืœ LVGL ื‘ืœืชื™ ืชืœื•ื™ ื‘ืคืœื˜ืคื•ืจืžื”, ื•ืœื›ืŸ ื ื™ืชืŸ ืœื”ืฉืชืžืฉ ื‘ืื•ืชื• ืงื•ื“ ื’ื ื‘ื™ืขื“ื™ื ืžืฉื•ื‘ืฆื™ื.

LVGL Pro ื”ื•ื ืžืืจื– ื›ืœื™ื ืžืœื ืœื‘ื ื™ื™ื”, ื‘ื“ื™ืงื”, ืฉื™ืชื•ืฃ ื•ื”ืคืฆื” ืžื”ื™ืจื” ื™ื•ืชืจ ืฉืœ UI. ื”ื•ื ื›ื•ืœืœ ืขื•ืจืš XML ืœื™ืฆื™ืจื” ื•ืœื‘ื“ื™ืงื” ืžื”ื™ืจื” ืฉืœ ืจื›ื™ื‘ื™ื ืœืฉื™ืžื•ืฉ ื—ื•ื–ืจ, ื™ื™ืฆื•ื ืงื•ื“ C ืื• ื˜ืขื™ื ืช ืงื•ื‘ืฆื™ XML ื‘ื–ืžืŸ ืจื™ืฆื”. ืžื™ื“ืข ื ื•ืกืฃ ื‘ืืชืจ.

๐Ÿ’ก ื™ื›ื•ืœื•ืช

ื—ื™ื ืžื™ืช ื•ื ื™ื™ื“ืช

  • ืกืคืจื™ื™ืช C ืžืœืื” (ืชื•ืืžืช ++C) ืœืœื ืชืœื•ืช ื—ื™ืฆื•ื ื™ืช.
  • ื ื™ืชื ืช ืœืงื™ืžืคื•ืœ ืœื›ืœ MCU ืื• MPU, ืขื ื›ืœ (RT)OS. ืชื•ืžื›ืช ื‘ึพMake,โ€ CMake ื•ื‘ึพglobbing ืคืฉื•ื˜.
  • ืชืžื™ื›ื” ื‘ืžืกื›ื™ ืžื•ื ื•ื›ืจื•ื, ePaper,โ€ OLED ืื• TFT, ื•ืืฃ ื‘ืžืกื›ื™ื ืฉืœ ืžื—ืฉื‘ื™ื. ืจืื• ืชืฆื•ื’ื•ืช
  • ืจื™ืฉื™ื•ืŸ MIT ื”ืžืงืœ ืขืœ ืฉื™ืžื•ืฉ ืžืกื—ืจื™.
  • ื ื“ืจืฉื™ื ืจืง 32kB RAM ื•ึพ128kB Flash, ืžืื’ืจ ืžืกื’ืจืช, ื•ืœืคื—ื•ืช ืžืื’ืจ ืจื™ื ื“ื•ืจ ื‘ื’ื•ื“ืœ 1/10 ืžื’ื•ื“ืœ ื”ืžืกืš.
  • ืžืขืจื›ืช ื”ืคืขืœื”, ื–ื™ื›ืจื•ืŸ ื—ื™ืฆื•ื ื™ ื•ึพGPU ื ืชืžื›ื™ื ืืš ืื™ื ื ื ื“ืจืฉื™ื.

ื•ื™ื“ื’'ื˜ื™ื, ืกื’ื ื•ื ื•ืช, ืคืจื™ืกื•ืช ื•ืขื•ื“

  • ื™ื•ืชืจ ืžึพ30 ื•ื™ื“ื’'ื˜ื™ื ืžื•ื‘ื ื™ื: Button, Label, Slider, Chart, Keyboard, Meter, Arc, Table ื•ืขื•ื“ ืจื‘ื™ื.
  • ืžืขืจื›ืช ืกื’ื ื•ื ื•ืช ื’ืžื™ืฉื” ืขื ื›~100 ืžืืคื™ื™ื ื™ ืขื™ืฆื•ื‘ ืœื”ืชืืžื” ืฉืœ ื›ืœ ื—ืœืงื™ ื”ื•ื•ื™ื“ื’'ื˜ื™ื ื‘ื›ืœ ืžืฆื‘.
  • ืžื ื•ืขื™ ืคืจื™ืกื” ื‘ืกื’ื ื•ืŸ Flexbox ื•ึพGrid ืœืžื™ืงื•ื ื•ื’ื•ื“ืœ ืจืกืคื•ื ืกื™ื‘ื™ื™ื.
  • ื˜ืงืกื˜ ืžืขื•ื‘ื“ ื‘ืงื™ื“ื•ื“ UTF-8 ืขื ืชืžื™ื›ื” ื‘ืžืขืจื›ื•ืช ื›ืชื™ื‘ื” ืกื™ื ื™ืช/ื™ืคื ื™ืช/ืงื•ืจื™ืื ื™ืช, ืชืื™ืช, ื”ื™ื ื“ื™, ืขืจื‘ื™ืช ื•ืคืจืกื™ืช.
  • ืงื™ืฉื•ืจื™ ื ืชื•ื ื™ื ืœื—ื™ื‘ื•ืจ ืงืœ ื‘ื™ืŸ ื”ึพUI ืœื™ื™ืฉื•ื.
  • ืžื ื•ืข ืจื™ื ื“ื•ืจ ืขื ืชืžื™ื›ื” ื‘ืื ื™ืžืฆื™ื•ืช, ื”ื—ืœืงืช ืงืฆื•ื•ืช, ืฉืงื™ืคื•ืช, ื’ืœื™ืœื” ื—ืœืงื”, ืฆืœืœื™ื, ื˜ืจื ืกืคื•ืจืžืฆื™ื•ืช ืชืžื•ื ื” ื•ืขื•ื“.
  • ืžื ื•ืข ืจื™ื ื“ื•ืจ 3D ื—ื–ืง ืœื”ืฆื’ืช ืžื•ื“ืœื™ glTF ืขื OpenGL.
  • ืชืžื™ื›ื” ื‘ืขื›ื‘ืจ, ืžืฉื˜ื— ืžื’ืข, ืœื•ื— ืžืงืฉื™ื, ืžืงืœื“ืช, ื›ืคืชื•ืจื™ื ื—ื™ืฆื•ื ื™ื™ื ื•ืื ืงื•ื“ืจ ื”ืชืงื ื™ ืงืœื˜.
  • ืชืžื™ื›ื” ื‘ืžืกื›ื™ื ืžืจื•ื‘ื™ื.

๐Ÿ“ฆ๏ธ ืชืžื™ื›ืช ืคืœื˜ืคื•ืจืžื•ืช

ืœึพLVGL ืื™ืŸ ืชืœื•ืช ื—ื™ืฆื•ื ื™ืช, ื•ืœื›ืŸ ื ื™ืชืŸ ืœืงืžืคืœ ืื•ืชื” ื‘ืงืœื•ืช ืœื›ืœ ื”ืชืงืŸ. ื”ื™ื ื–ืžื™ื ื” ื’ื ื‘ืžื ื”ืœื™ ื—ื‘ื™ืœื•ืช ืจื‘ื™ื ื•ื‘ืžืขืจื›ื•ืช RTOS:

๐Ÿš€ ืขื•ืจืš LVGL Pro

LVGL Pro ื”ื•ื ืžืืจื– ื›ืœื™ื ืžืœื ืœื‘ื ื™ื™ื”, ื‘ื“ื™ืงื”, ืฉื™ืชื•ืฃ ื•ื”ืคืฆื” ื™ืขื™ืœื™ื ืฉืœ UI ืžืฉื•ื‘ืฅ.

ื”ื•ื ืžื•ืจื›ื‘ ืžืืจื‘ืขื” ื›ืœื™ื ื”ืžืฉื•ืœื‘ื™ื ื–ื” ื‘ื–ื”:

  1. ืขื•ืจืš XML: ื”ืœื‘ ืฉืœ LVGL Pro. ื™ื™ืฉื•ื ืฉื•ืœื—ื ื™ ืœื‘ื ื™ื™ืช ืจื›ื™ื‘ื™ื ื•ืžืกื›ื™ื ื‘ึพXML, ื ื™ื”ื•ืœ ืงื™ืฉื•ืจื™ ื ืชื•ื ื™ื, ืชืจื’ื•ืžื™ื, ืื ื™ืžืฆื™ื•ืช, ื‘ื“ื™ืงื•ืช ื•ืขื•ื“. ืงืจืื• ืขื•ื“ ืขืœ ืคื•ืจืžื˜ ื”ึพXML ื•ืขืœ ื”ืขื•ืจืš.
  2. ืžืฆื™ื’ ืžืงื•ื•ืŸ: ื”ืจื™ืฆื• ืืช ื”ืขื•ืจืš ื‘ื“ืคื“ืคืŸ, ืคืชื—ื• ืคืจื•ื™ืงื˜ื™ื ืžึพGitHub ื•ืฉื™ืชืคื• ื‘ืงืœื•ืช ื‘ืœื™ ืœื”ืงื™ื ืกื‘ื™ื‘ืช ืคื™ืชื•ื—. ื‘ืงืจื• ื‘ึพhttps://viewer.lvgl.io.
  3. ื›ืœื™ CLI: ื”ืคืงืช ืงื•ื“ C ื•ื”ืจืฆืช ื‘ื“ื™ืงื•ืช ื‘ึพCI/CD. ืคืจื˜ื™ื ื›ืืŸ.
  4. ืชื•ืกืฃ Figma: ืกื ื›ืจื•ืŸ ื•ื—ื™ืœื•ืฅ ืกื’ื ื•ื ื•ืช ื™ืฉื™ืจื•ืช ืžึพFigma. ืžื™ื“ืข ื ื•ืกืฃ ื›ืืŸ.

ื‘ื™ื—ื“, ื”ื›ืœื™ื ืžืืคืฉืจื™ื ืœื‘ื ื•ืช UI ื‘ื™ืขื™ืœื•ืช, ืœื‘ื“ื•ืง ื‘ืืžื™ื ื•ืช ื•ืœืฉืชืฃ ืคืขื•ืœื” ืขื ืฆื•ื•ืชื™ื ื•ืœืงื•ื—ื•ืช.

ืžื™ื“ืข ื ื•ืกืฃ: https://pro.lvgl.io

๐Ÿค ืฉื™ืจื•ืชื™ื ืžืกื—ืจื™ื™ื

ื—ื‘ืจืช LVGL LLC ืžืกืคืงืช ืžื’ื•ื•ืŸ ืฉื™ืจื•ืชื™ื ืžืกื—ืจื™ื™ื ืœืกื™ื•ืข ื‘ืคื™ืชื•ื— UI. ืขื ื™ื•ืชืจ ืžึพ15 ืฉื ื•ืช ื ื™ืกื™ื•ืŸ ื‘ืชื—ื•ื ื”ืžืžืฉืงื™ื ื•ื”ื’ืจืคื™ืงื”, ื ื•ื›ืœ ืœืงื“ื ืืช ื”ึพUI ืฉืœ ื”ืžื•ืฆืจ ืฉืœื›ื ืœืจืžื” ื”ื‘ืื”.

  • ืขื™ืฆื•ื‘ ื’ืจืคื™: ื”ืžืขืฆื‘ื™ื ื”ืคื ื™ืžื™ื™ื ืฉืœื ื• ืžื•ืžื—ื™ื ื‘ืขื™ืฆื•ื‘ ืžื•ื“ืจื ื™ ื•ื™ืคื” ืฉืžืชืื™ื ืœืžื•ืฆืจ ื•ืœื™ื›ื•ืœื•ืช ื”ื—ื•ืžืจื”.
  • ืžื™ืžื•ืฉ UI: ื ื™ื™ืฉื ืืช ื”ึพUI ืขืœ ื‘ืกื™ืก ื”ืขื™ืฆื•ื‘ ืฉืœื›ื ืื• ืฉืœื ื•, ื•ื ืžืฆื” ืืช ื™ื›ื•ืœื•ืช ื”ื—ื•ืžืจื” ื•ึพLVGL. ืื ื—ืกืจ ืจื›ื™ื‘ ืื• ื™ื›ื•ืœืช ื‘ึพLVGL, ื ืคืชื— ื–ืืช ืขื‘ื•ืจื›ื.
  • ื™ื™ืขื•ืฅ ื•ืชืžื™ื›ื”: ื™ื™ืขื•ืฅ ืžืงืฆื•ืขื™ ืœืžื ื™ืขืช ื˜ืขื•ื™ื•ืช ื™ืงืจื•ืช ื•ื’ื•ื–ืœื•ืช ื–ืžืŸ ื‘ืžื”ืœืš ืคื™ืชื•ื— ื”ึพUI.
  • ืื™ืฉื•ืจ ืœื•ื—ื•ืช: ืœื—ื‘ืจื•ืช ืฉืžืฆื™ืขื•ืช ืœื•ื—ื•ืช ืคื™ืชื•ื— ืื• ืขืจื›ื•ืช ืžื•ื›ื ื•ืช ืœื™ื™ืฆื•ืจ ืื ื• ืžืกืคืงื™ื ื”ืกืžื›ื” ืฉืžื“ื’ื™ืžื” ื›ื™ืฆื“ ื”ืœื•ื— ืžืจื™ืฅ LVGL.

ืขื™ื™ื ื• ื‘ื“ื•ื’ืžืื•ืช ืฉืœื ื• ืœืขๅ‚่€ƒ. ืœืžื™ื“ืข ื ื•ืกืฃ ืจืื• ืืช ืขืžื•ื“ ื”ืฉื™ืจื•ืชื™ื.

ืฆืจื• ืงืฉืจ ื•ืกืคืจื• ืœื ื• ื›ื™ืฆื“ ื ื•ื›ืœ ืœืขื–ื•ืจ.

๐Ÿง‘โ€๐Ÿ’ป ืฉื™ืœื•ื‘ LVGL

ืฉื™ืœื•ื‘ LVGL ืคืฉื•ื˜ ืžืื•ื“. ื”ื•ืกื™ืคื• ืื•ืชื• ืœืคืจื•ื™ืงื˜ ื•ืงื•ืžืคืœื• ื›ืžื• ืงื‘ืฆื™ื ืื—ืจื™ื. ื›ื“ื™ ืœื”ื’ื“ื™ืจ, ื”ืขืชื™ืงื• ืืช lv_conf_template.h ืœึพlv_conf.h, ื”ืคืขื™ืœื• ืืช ื”ึพ#if 0 ื”ืจืืฉื•ืŸ ื•ื”ืชืื™ืžื• ืืช ื”ื”ื’ื“ืจื•ืช ืœืคื™ ื”ืฆื•ืจืš. (ื‘ื“ืจืš ื›ืœืœ ื‘ืจื™ืจืช ื”ืžื—ื“ืœ ืžืกืคืงืช.) ื ื™ืชืŸ ื’ื ืœื”ืฉืชืžืฉ ื‘ึพLVGL ืขื Kconfig ื›ืฉื–ืžื™ืŸ.

ืœืื—ืจ ืžื›ืŸ ืืคืฉืจ ืœืืชื—ืœ ืืช LVGL ื•ืœื™ืฆื•ืจ ื”ืชืงื ื™ ืชืฆื•ื’ื” ื•ืงืœื˜ ื›ืš:

c
#include "lvgl/lvgl.h" /*ื”ื’ื“ื™ืจื• LV_LVGL_H_INCLUDE_SIMPLE ื›ื“ื™ ืœื›ืœื•ืœ ื›-"lvgl.h"*/

#define TFT_HOR_RES 320
#define TFT_VER_RES 240

static uint32_t my_tick_cb(void)
{
    return my_get_millisec();
}

static void my_flush_cb(lv_display_t * disp, const lv_area_t * area, uint8_t * px_map)
{
    /*ื›ืชื‘ื• ืืช px_map ืœืื–ื•ืจ ื”ืžืชืื™ื ื‘ืžืื’ืจ ื”ืžืกื’ืจืช ืื• ื‘ื‘ืงืจ ื”ืชืฆื•ื’ื” ื”ื—ื™ืฆื•ื ื™*/
}

static void my_touch_read_cb(lv_indev_t * indev, lv_indev_data_t * data)
{
   if(my_touch_is_pressed()) {
       data->point.x = touchpad_x;
       data->point.y = touchpad_y;
       data->state = LV_INDEV_STATE_PRESSED;
   } else {
       data->state = LV_INDEV_STATE_RELEASED;
   }
}

void main(void)
{
    my_hardware_init();

    /*ืืชื—ื•ืœ LVGL*/
    lv_init();

    /*ื”ื’ื“ืจืช ืžืงื•ืจ ื˜ื™ืง ื‘ืžื™ืœื™ืฉื ื™ื•ืช ื›ื“ื™ ืฉืœึพLVGL ืชื”ื™ื” ืกืคื™ืจืช ื–ืžืŸ*/
    lv_tick_set_cb(my_tick_cb);

    /*ื™ืฆื™ืจืช ืชืฆื•ื’ื” ืœื”ื•ืกืคืช ืžืกื›ื™ื ื•ื•ื™ื“ื’'ื˜ื™ื*/
    lv_display_t * display = lv_display_create(TFT_HOR_RES, TFT_VER_RES);

    /*ื”ื•ืกืคืช ืžืื’ืจื™ ืจื™ื ื“ื•ืจ
     *ื›ืืŸ ืžื•ืกื™ืคื™ื ืžืื’ืจ ื—ืœืงื™ ืงื˜ืŸ ื‘ื”ื ื—ื” ืฉืœ 16 ืกื™ื‘ื™ื•ืช (RGB565)*/
    static uint8_t buf[TFT_HOR_RES * TFT_VER_RES / 10 * 2]; /* x2 ื‘ื’ืœืœ ืขื•ืžืง ืฆื‘ืข 16 ื‘ื™ื˜ */
    lv_display_set_buffers(display, buf, NULL, sizeof(buf), LV_DISPLAY_RENDER_MODE_PARTIAL);

    /*ืงื•ืœื‘ืง ืœืจืขื ื•ืŸ ื”ืชื•ื›ืŸ ืžืŸ ื”ืžืื’ืจ ืืœ ื”ืชืฆื•ื’ื”*/
    lv_display_set_flush_cb(display, my_flush_cb);

    /*ื™ืฆื™ืจืช ื”ืชืงืŸ ืงืœื˜ ืœืžื’ืข*/
    lv_indev_t * indev = lv_indev_create();
    lv_indev_set_type(indev, LV_INDEV_TYPE_POINTER);
    lv_indev_set_read_cb(indev, my_touch_read_cb);

    /*ื”ื“ืจื™ื™ื‘ืจื™ื ืžื•ื›ื ื™ื, ื™ื•ืฆืจื™ื UI*/
    lv_obj_t * label = lv_label_create(lv_screen_active());
    lv_label_set_text(label, "Hello world");
    lv_obj_center(label);

    /*ืœื•ืœืืช ืžืฉื™ืžื•ืช ืฉืœ LVGL*/
    while(1) {
        lv_timer_handler();
        my_sleep_ms(5);         /*ื”ืฉื”ื™ื” ืงืฆืจื” ืœื”ื•ืจื“ืช ืขื•ืžืก ื”ืžืขืจื›ืช*/
    }
}

๐Ÿค– ื“ื•ื’ืžืื•ืช

ืžืขืœ 100 ื“ื•ื’ืžืื•ืช ื–ืžื™ื ื•ืช ื‘ึพhttps://docs.lvgl.io/master/examples.html

ื”ืžืฆื™ื’ ื”ืžืงื•ื•ืŸ ื›ื•ืœืœ ื’ื ืžื“ืจื™ื›ื™ื ืœืœื™ืžื•ื“ XML: โ€https://viewer.lvgl.io/

ื›ืคืชื•ืจ Hello World ืขื ืื™ืจื•ืข

<details> <summary>ืงื•ื“ C</summary>
c
static void button_clicked_cb(lv_event_t * e)
{
  printf("Clicked\n");
}

[...]

lv_obj_t * button = lv_button_create(lv_screen_active());
lv_obj_center(button);
lv_obj_add_event_cb(button, button_clicked_cb, LV_EVENT_CLICKED, NULL);

lv_obj_t * label = lv_label_create(button);
lv_label_set_text(label, "Hello from LVGL!");
</details> <details> <summary>ื‘ึพXML ืขื LVGL Pro</summary>
xml
<screen>
	<view>
		<lv_button align="center">
			<event_cb callback="button_clicked_cb" />
			<lv_label text="Hello from LVGL!" />
		</lv_button>
	</view>
</screen>
</details>

ืžื—ื•ื•ืŸ ืžืขื•ืฆื‘ ืขื ืงื™ืฉื•ืจ ื ืชื•ื ื™ื

<details> <summary>ืงื•ื“ C</summary>
c
static void my_observer_cb(lv_observer_t * observer, lv_subject_t * subject)
{
	printf("Slider value: %d\n", lv_subject_get_int(subject));
}

[...]

static lv_subject_t subject_value;
lv_subject_init_int(&subject_value, 35);
lv_subject_add_observer(&subject_value, my_observer_cb, NULL);

lv_style_t style_base;
lv_style_init(&style_base);
lv_style_set_bg_color(&style_base, lv_color_hex(0xff8800));
lv_style_set_bg_opa(&style_base, 255);
lv_style_set_radius(&style_base, 4);

lv_obj_t * slider = lv_slider_create(lv_screen_active());
lv_obj_center(slider);
lv_obj_set_size(slider, lv_pct(80), 16);
lv_obj_add_style(slider, &style_base, LV_PART_INDICATOR);
lv_obj_add_style(slider, &style_base, LV_PART_KNOB);
lv_obj_add_style(slider, &style_base, 0);
lv_obj_set_style_bg_opa(slider, LV_OPA_50, 0);
lv_obj_set_style_border_width(slider, 3, LV_PART_KNOB);
lv_obj_set_style_border_color(slider, lv_color_hex3(0xfff), LV_PART_KNOB);
lv_slider_bind_value(slider, &subject_value);

lv_obj_t * label = lv_label_create(lv_screen_active());
lv_obj_align(label, LV_ALIGN_CENTER, 0, -30);
lv_label_bind_text(label, &subject_value, "Temperature: %d ยฐC");
</details> <details> <summary>ื‘ึพXML ืขื LVGL Pro</summary>
xml
<screen>
	<styles>
		<style name="style_base" bg_opa="100%" bg_color="0xff8800" radius="4" />
		<style name="style_border" border_color="0xfff" border_width="3" />
	</styles>

	<view>
		<lv_label bind_text="value" bind_text-fmt="Temperature: %d ยฐC" align="center" y="-30" />
		<lv_slider align="center" bind_value="value" style_bg_opa="30%">
			<style name="style_base" />
			<style name="style_base" selector="knob" />
			<style name="style_base" selector="indicator" />
			<style name="style_border" selector="knob" />
		</lv_slider>
	</view>
</screen>
</details>

ืชื™ื‘ื•ืช ืกื™ืžื•ืŸ ื‘ืคืจื™ืกื”

<details> <summary>ืงื•ื“ C</summary>
c
/* ื™ืฆื™ืจืช ืžืกืš ื—ื“ืฉ ื•ื˜ืขื™ื ืชื• */
lv_obj_t * scr = lv_obj_create(NULL);
lv_screen_load(scr);

/* ื”ื’ื“ืจืช ืคืจื™ืกืช ืขืžื•ื“ื” */
lv_obj_set_flex_flow(scr, LV_FLEX_FLOW_COLUMN);
lv_obj_set_flex_align(scr, LV_FLEX_ALIGN_SPACE_EVENLY, /*ื™ื™ืฉื•ืจ ืื ื›ื™*/
  					   LV_FLEX_ALIGN_START,	       /*ื™ื™ืฉื•ืจ ืื•ืคืงื™ ื‘ืžืกื™ืœื”*/
  					   LV_FLEX_ALIGN_CENTER);      /*ื™ื™ืฉื•ืจ ื”ืžืกื™ืœื”*/

/* ื™ืฆื™ืจืช 5 ืชื™ื‘ื•ืช ืกื™ืžื•ืŸ */
const char * texts[5] = {"Input 1", "Input 2", "Input 3", "Output 1", "Output 2"};
for(int i = 0; i < 5; i++) {
  lv_obj_t * cb = lv_checkbox_create(scr);
  lv_checkbox_set_text(cb, texts[i]);
}

/* ืฉื™ื ื•ื™ ืžืฆื‘ื™ื */
lv_obj_add_state(lv_obj_get_child(scr, 1), LV_STATE_CHECKED);
lv_obj_add_state(lv_obj_get_child(scr, 3), LV_STATE_DISABLED);
</details> <details> <summary>ื‘ึพXML ืขื LVGL Pro</summary>
xml
<screen>
	<view
		flex_flow="column"
		style_flex_main_place="space_evenly"
		style_flex_cross_place="start"
		style_flex_track_place="center"
	>
		<lv_checkbox text="Input 1"/>
		<lv_checkbox text="Input 2"/>
		<lv_checkbox text="Input 3" checked="true"/>
		<lv_checkbox text="Output 1"/>
		<lv_checkbox text="Output 2" disabled="true"/>
   </view>
</screen>
</details>

๐ŸŒŸ ืชืจื•ืžื”

LVGL ื”ื•ื ืคืจื•ื™ืงื˜ ืคืชื•ื— ื•ืชืจื•ืžื•ืช ืžืชืงื‘ืœื•ืช ื‘ื‘ืจื›ื”. ืืคืฉืจ ืœืชืจื•ื ื‘ื“ืจื›ื™ื ืจื‘ื•ืช: ืœืฉืชืฃ ืขืœ ื”ืคืจื•ื™ืงื˜ ืฉืœื›ื, ืœื›ืชื•ื‘ ื“ื•ื’ืžืื•ืช, ืœืฉืคืจ ืืช ื”ืชื™ืขื•ื“, ืœืชืงืŸ ืชืงืœื•ืช ื•ืืคื™ืœื• ืœืืจื— ืคืจื•ื™ืงื˜ ืžืฉืœื›ื ืชื—ืช ืืจื’ื•ืŸ LVGL.

ืœืชื™ืื•ืจ ืžืคื•ืจื˜ ืฉืœ ืืคืฉืจื•ื™ื•ืช ื”ืชืจื•ืžื”, ื‘ืงืจื• ื‘ืคืจืง Contributing ื‘ืชื™ืขื•ื“.

ื™ื•ืชืจ ืžึพ600 ืื ืฉื™ื ื›ื‘ืจ ื”ื•ืชื™ืจื• ื—ื•ืชื ืขืœ LVGL. ื”ืฆื˜ืจืคื• ืืœื™ื ื•. ื ืชืจืื” ืฉื ๐Ÿ™‚

<a href="https://github.com/lvgl/lvgl/graphs/contributors"> </a>

...ื•ืขื•ื“ ืจื‘ื™ื.