> For the complete documentation index, see [llms.txt](https://docs.aic-eec.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.aic-eec.com/general/getting-start/lvgl-light-and-versatile-embedded-graphics-library/create-your-own-screen.md).

# Create your own screen

custom it make it your own

## start with basic widget

### “Label”

สร้างแถบข้อความ Hello world บนหน้าจอ \
Widget : Label

```cpp
lv_obj_t * label1 = lv_label_create(lv_scr_act());          /*สร้างแถบข้อความ*/
    lv_label_set_text(label1, "Hello world");               /*กำหนดข้อความ*/
    lv_obj_set_style_text_align(label1, LV_TEXT_ALIGN_CENTER, 0); /*วางข้อความไว้กลางแถบข้อความ*/
    lv_obj_align(label1, LV_ALIGN_CENTER, 0, -40);          /*วางแถบข้อความไว้กลางจอแล้วเลื่อนไปด้านบน*/

  lv_obj_t * label2 = lv_label_create(lv_scr_act());        /*สร้างแถบข้อความ*/
    lv_label_set_recolor(label2, true);                     /*เปิดโหมดเปลี่ยนสีข้อความ/
    lv_label_set_text(label2, "#0000ff Hello world but blue");     /*กำหนดข้อความ*/
    lv_obj_set_style_text_align(label2, LV_TEXT_ALIGN_CENTER, 0);  /*วางข้อความไว้กลางแถบข้อความ*/
    lv_obj_align(label2, LV_ALIGN_CENTER, 0, 0);            /*วางแถบข้อความไว้กลางจอ*/
  
  lv_obj_t * label3 = lv_label_create(lv_scr_act());        /*สร้างแถบข้อความ*/
    lv_label_set_recolor(label3, true);                     /*เปิดโหมดเปลี่ยนสีข้อความ/
    lv_label_set_text(label3, "#ff0000 Hello world but red");      /*กำหนดข้อความ*/
    lv_obj_set_style_text_align(label3, LV_TEXT_ALIGN_CENTER, 0);  /*วางข้อความไว้กลางแถบข้อความ*/
    lv_obj_align(label3, LV_ALIGN_CENTER, 0, 40);           /*วางแถบข้อความไว้กลางจอแล้วเลื่อนไปด้านล่าง*/
```

![](https://1856353139-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MClo3nC-1US0rbK8Qau%2F-MfRgtLVpbZewlQ0JruR%2F-MfRtYS2WE8j06RT3CHs%2Fimage.png?alt=media\&token=d55e1aec-51cf-4d54-b901-133993abd996)

{% hint style="warning" %}
รหัสสีที่ใช้คือรหัสสี [Hex color](https://manual-velaclassic-th.readyplanet.com/index.php?lay=show\&ac=article\&Id=539859\&Ntype=30)
{% endhint %}

{% hint style="success" %}
สามารถดูตำแหน่งการวาง object บนจอได้ [ที่นี่ ](https://docs.lvgl.io/master/widgets/obj.html)
{% endhint %}

###

### “Arc”

สร้างเส้นโค้งบนหน้าจอ \
[Widget : Arc](https://docs.lvgl.io/8.0/widgets/core/arc.html)

```cpp
lv_obj_t * arc = lv_arc_create(lv_scr_act()); /*สร้างเส้นโค้ง*/
    lv_obj_set_size(arc, 150, 150); /*กำหนดขนาด กว้างxยาว*/
    lv_arc_set_rotation(arc, 135);  /*กำหนดมุมเริ่มต้นของเส้นโค้ง*/
    lv_arc_set_bg_angles(arc, 0, 270);  /*กำหนดความยาวของเส้นโค้ง(หน่วยเป็นมุมองศา)*/
    lv_arc_set_value(arc, 40);  /*กำหนดค่าเริ่มต้นที่มีในเส้น*/
    lv_obj_center(arc);  /*จัดวางอุปกรณ์ไว้กลางจอ*/
```

![](https://1856353139-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MClo3nC-1US0rbK8Qau%2F-MfRuRXOKh7eOy4mS0bZ%2F-MfRyf7nvFjcebvywEXd%2Fimage.png?alt=media\&token=b90a5b8d-f3f5-4343-9233-e53232505037)

```cpp
lv_arc_set_value(arc,99)//สามารถใช้คำสั่งนี้เพื่อเติมแถมที่ฟ้าได้
```

### “Button”

สร้างปุ่มกดของคุณ \
[Widget : Button](https://docs.lvgl.io/8.0/widgets/core/btn.html)

```cpp
  lv_obj_t * label; /*สร้าง object เปล่าขึ้นมา*/

  lv_obj_t * btn1 = lv_btn_create(lv_scr_act()); /*สร้างปุ่มกดบนจอหลัก*/
      lv_obj_align(btn1, LV_ALIGN_CENTER, 0, -40); /*กำหนดตำแหน่งของปุ่มกด*/

      label = lv_label_create(btn1); /**/
      lv_label_set_text(label, "Button"); /**/
      lv_obj_center(label); /**/

  lv_obj_t * btn2 = lv_btn_create(lv_scr_act()); /**/
      lv_obj_align(btn2, LV_ALIGN_CENTER, 0, 40); /**/
      lv_obj_add_flag(btn2, LV_OBJ_FLAG_CHECKABLE); /**/

      label = lv_label_create(btn2); /**/
      lv_label_set_text(label, "Toggle"); /**/
      lv_obj_center(label); /**/
```

![](https://1856353139-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MClo3nC-1US0rbK8Qau%2F-MfRzYOaG97eON9rtSoV%2F-MfS16a0sLkm3RcMdShr%2Fimage.png?alt=media\&token=c5789138-899d-4c1a-a093-f10b5b3a5df6)

### “Bar” 

สร้างแถบสถานะของคุณเอง\
[Widget : Bar](https://docs.lvgl.io/8.0/widgets/core/bar.html)

```cpp
    lv_obj_t * bar1 = lv_bar_create(lv_scr_act()); //สร้าง object bar
    lv_obj_set_size(bar1, 200, 20); //กำหนดขนาด ยาวxสูง
    lv_bar_set_value(bar1,20,LV_ANIM_OFF); //กำหนดค่าใส่ใน bar
    lv_obj_align(bar1, LV_ALIGN_CENTER, 0, -60);
    
    lv_obj_t * bar2 = lv_bar_create(lv_scr_act());
    lv_obj_set_size(bar2, 200, 20);
    lv_bar_set_value(bar2,90,LV_ANIM_OFF);
    lv_obj_align(bar2, LV_ALIGN_CENTER, 0, -30);

    lv_obj_t * bar3 = lv_bar_create(lv_scr_act());
    lv_obj_set_size(bar3, 200, 20);
    lv_bar_set_value(bar3,20,LV_ANIM_ON); //มี animation เวลาเปิดขึ้นมา
    lv_obj_align(bar3,LV_ALIGN_CENTER, 0, 30);

    lv_obj_t * bar4 = lv_bar_create(lv_scr_act());
    lv_obj_set_size(bar4, 200, 20);
    lv_bar_set_value(bar4,90,LV_ANIM_ON);
    lv_obj_align(bar4, LV_ALIGN_CENTER, 0, 60);
```

![](https://1856353139-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MClo3nC-1US0rbK8Qau%2F-MUI7OHX1D1wZDZ78XTx%2F-MUIjJKmltqR2rpe-PeJ%2Fimage.png?alt=media\&token=aec22dcd-25c5-49a9-a6a3-7a33891a5b8d)

### “Status”

สร้าง label แสดงค่าของ Object คุณ \
Widget : Arc (can be anything else)

```cpp
  lv_obj_t * arc = lv_arc_create(lv_scr_act());
  lv_arc_set_bg_angles(arc,180,360); // สร้างครึ่งวงกลม
  lv_arc_set_value(arc,80); //เติมครึ่งวงกลมไป 80%
  lv_obj_set_size(arc, 150, 150);
  lv_obj_align(arc, LV_ALIGN_CENTER, 0, 0);

  lv_obj_t * label_arc = lv_label_create(lv_scr_act()); //สร้างข้อความบนครึ่งวงกลม
  lv_label_set_text_fmt(label_arc,"%d%%",lv_arc_get_value(arc));//นำค่าที่เติมบน Arc มาแสดงผล
  lv_obj_align(label_arc, LV_ALIGN_CENTER, 0, 0); //จัดต่ำแหน่งข้อความให้อยู่ตรงกลางของ Arc
```

## Extend : "Arc + text"

สร้าง Half Arc + ข้อความ

```cpp
  lv_obj_t * arc = lv_arc_create(lv_scr_act());
  lv_arc_set_bg_angles(arc,180,360); // สร้างครึ่งวงกลม
  lv_arc_set_value(arc,80); //เติมครึ่งวงกลมไป 80%
  lv_obj_set_size(arc, 150, 150);
  lv_obj_align(arc, LV_ALIGN_CENTER, 0, 0);

  lv_obj_t * label_arc = lv_label_create(lv_scr_act()); //สร้างข้อความบนครึ่งวงกลม
  lv_label_set_text_fmt(label_arc,"%d%%",lv_arc_get_value(arc));//นำค่าที่เติมบน Arc มาแสดงผล
  lv_obj_align(label_arc, LV_ALIGN_CENTER, 0, 0); //จัดต่ำแหน่งข้อความให้อยู่ตรงกลางของ Arc

  lv_obj_t * label = lv_label_create(arc); // สร้างข้อความบนครึ่งวงกลม
  lv_label_set_text(label, "Value"); // ใส่ข้อความลงบนครึ่งวงกลม
  lv_obj_align(label, LV_ALIGN_CENTER, 0, -20); // ใส่ตำแหน่งข้อความ
```