# Create your own screen

## 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);           /*วางแถบข้อความไว้กลางจอแล้วเลื่อนไปด้านล่าง*/
```

![](/files/-MfRtYS2WE8j06RT3CHs)

{% 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);  /*จัดวางอุปกรณ์ไว้กลางจอ*/
```

![](/files/-MfRyf7nvFjcebvywEXd)

```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); /**/
```

![](/files/-MfS16a0sLkm3RcMdShr)

### “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);
```

![](/files/-MUIjJKmltqR2rpe-PeJ)

### “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); // ใส่ตำแหน่งข้อความ
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.aic-eec.com/general/getting-start/lvgl-light-and-versatile-embedded-graphics-library/create-your-own-screen.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.