Label

Lab 1: Hello World - Basic Label

---

1. ภาพรวมของ Lab (Why? What? How?)

Why?: วัตถุประสงค์การเรียนรู้

Label เป็น Widget พื้นฐานที่สุดและสำคัญที่สุดใน LVGL:

• แสดงค่าจาก Sensor (อุณหภูมิ, ความชื้น, ADC)

• แสดง Status Messages (Connected, Error, Ready)

• ใช้เป็น Debug Output บนหน้าจอแทน UART

• ทุกแอปพลิเคชัน ต้องมี Label เพื่อสื่อสารกับผู้ใช้

What?: เราจะเรียนรู้อะไร?

ฟังก์ชัน	หน้าที่
lv_label_create()	สร้าง Label widget
lv_label_set_text()	ตั้งค่าข้อความ
lv_obj_set_style_text_color()	เปลี่ยนสีข้อความ
lv_obj_set_style_bg_color()	เปลี่ยนสีพื้นหลัง
lv_obj_align()	จัดตำแหน่ง Widget

How: นำไปใช้อย่างไร?

[สร้าง Label] → [ตั้งค่าข้อความ] → [ตั้งค่าสี] → [จัดตำแหน่ง]

---

2. หลักการทำงาน

2.1 โครงสร้าง Label Widget

┌─────────────────────────────────────────┐
│              Screen (Parent)            │
│  ┌───────────────────────────────────┐  │
│  │           Label Widget            │  │
│  │  ┌─────────────────────────────┐  │  │
│  │  │     "Hello BUU!"            │  │  │
│  │  │     (Text Content)          │  │  │
│  │  └─────────────────────────────┘  │  │
│  │  • Font: Montserrat               │  │
│  │  • Color: White                   │  │
│  │  • Alignment: Center              │  │
│  └───────────────────────────────────┘  │
│                                         │
└─────────────────────────────────────────┘

2.2 Flowchart การสร้าง Label

┌─────────────────────────────┐
│           เริ่มต้น             │
└──────────────┬──────────────┘
               │
┌──────────────▼──────────────┐
│ ตั้งค่า Background Screen      │
│ lv_obj_set_style_bg_color() │
└──────────────┬──────────────┘
               │
┌──────────────▼──────────────┐
│ สร้าง Label                  │
│ lv_label_create(screen)     │
└──────────────┬──────────────┘
               │
┌──────────────▼──────────────┐
│ ตั้งค่าข้อความ                  │
│ lv_label_set_text()         │
└──────────────┬──────────────┘
               │
┌──────────────▼───────────────┐
│ ตั้งค่าสี Font                   │
│ lv_obj_set_style_text_color()│
└──────────────┬───────────────┘
               │
┌──────────────▼──────────────┐
│ ตั้งค่า Font Size              │
│ lv_obj_set_style_text_font()│
└──────────────┬──────────────┘
               │
┌──────────────▼──────────────┐
│ จัดตำแหน่ง                    │
│ lv_obj_align()              │
└──────────────┬──────────────┘
               │
┌──────────────▼──────────────┐
│            แสดงผล           │
└─────────────────────────────┘

2.3 Layout ของ Example 1

     ┌────────────────────────────────────┐
     │                                    │
     │     "Week 3 - Example 1"           │ ← Title (TOP_MID, y=20)
     │                                    │
     │                                    │
     │         "Hello BUU!"               │ ← Main Label (CENTER)
     │         Font: 24pt                 │
     │                                    │
     │                                    │
     │     "Basic Label Example"          │ ← Description (BOTTOM_MID, y=-50)
     │  "Learning: lv_label_create..."    │
     │                                    │
     │     (C) 2026 AIC-EEC.com           │ ← Footer
     └────────────────────────────────────┘

---

3. โค้ดตัวอย่าง

/*******************************************************************************
 * Example 1: Hello World - Basic Label
 *
 * Official Reference: https://docs.lvgl.io/9.2/widgets/label.html
 ******************************************************************************/
void week3_ex1_hello_world(void)
{
    /* 1. ตั้งค่าสีพื้นหลัง */
    lv_obj_set_style_bg_color(lv_screen_active(),
                              lv_color_hex(0x003a57),   /* สีน้ำเงินเข้ม */
                              LV_PART_MAIN);

    /* 2. สร้าง Title Label */
    lv_obj_t *title = lv_label_create(lv_screen_active());
    lv_label_set_text(title, "Week 3 - Example 1");
    lv_obj_set_style_text_color(title, lv_color_hex(0xFFFFFF), 0);  /* สีขาว */
    lv_obj_align(title, LV_ALIGN_TOP_MID, 0, 20);

    /* 3. สร้าง Main Label */
    lv_obj_t *label = lv_label_create(lv_screen_active());
    lv_label_set_text(label, "Hello BUU!");
    lv_obj_set_style_text_color(label, lv_color_hex(0xFFFFFF), 0);
    lv_obj_set_style_text_font(label, &lv_font_montserrat_24, 0);   /* Font 24pt */
    lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);

    /* 4. สร้าง Description Label */
    lv_obj_t *desc = lv_label_create(lv_screen_active());
    lv_label_set_text(desc, "Basic Label Example\n"
                           "Learning: lv_label_create, lv_obj_align");
    lv_obj_set_style_text_color(desc, lv_color_hex(0xAAAAAA), 0);   /* สีเทา */
    lv_obj_set_style_text_align(desc, LV_TEXT_ALIGN_CENTER, 0);
    lv_obj_align(desc, LV_ALIGN_BOTTOM_MID, 0, -50);
}

---

4. ฟังก์ชันสำคัญ

4.1 lv_label_create() - สร้าง Label

lv_obj_t *label = lv_label_create(parent);

Parameter	คำอธิบาย
parent	Parent object (ปกติคือ lv_screen_active())
Return	Pointer ไปยัง Label object

4.2 lv_label_set_text() - ตั้งค่าข้อความ

lv_label_set_text(label, "Hello World!");

ข้อควรระวัง: ฟังก์ชันนี้ copy string ทุกครั้ง (ใช้ memory)

ทางเลือก:

/* ใช้เมื่อ string เป็น constant (ประหยัด memory) */
lv_label_set_text_static(label, "Static Text");

/* ใช้เมื่อต้องการ format string */
lv_label_set_text_fmt(label, "Value: %d", 42);

4.3 lv_obj_set_style_text_color() - เปลี่ยนสีข้อความ

lv_obj_set_style_text_color(label, lv_color_hex(0xFFFFFF), 0);
/*                          object    color (RGB hex)    selector */

สีที่ใช้บ่อย:

สี	Hex Code
ขาว	0xFFFFFF
เทา	0xAAAAAA
เขียว	0x00FF00
แดง	0xFF0000
น้ำเงิน	0x0000FF

4.4 lv_obj_set_style_text_font() - เปลี่ยน Font

lv_obj_set_style_text_font(label, &lv_font_montserrat_24, 0);

Font ที่มีให้ใช้:

• lv_font_montserrat_14 - เล็ก

• lv_font_montserrat_16 - ปกติ

• lv_font_montserrat_24 - ใหญ่

• lv_font_montserrat_28 - ใหญ่มาก

4.5 lv_obj_set_style_bg_color() - เปลี่ยนสีพื้นหลัง

lv_obj_set_style_bg_color(lv_screen_active(),
                          lv_color_hex(0x003a57),
                          LV_PART_MAIN);

---

5. องค์ความรู้และเทคนิค

5.1 Pattern: Vertical Stacking

ในตัวอย่างนี้ใช้รูปแบบการวาง Widget แนวตั้ง:

/* Title - ชิดบน */
lv_obj_align(title, LV_ALIGN_TOP_MID, 0, 20);

/* Main Content - กลางจอ */
lv_obj_align(main, LV_ALIGN_CENTER, 0, 0);

/* Description - ชิดล่าง */
lv_obj_align(desc, LV_ALIGN_BOTTOM_MID, 0, -50);

5.2 การจัดการข้อความหลายบรรทัด

/* ใช้ \n เพื่อขึ้นบรรทัดใหม่ */
lv_label_set_text(label, "Line 1\nLine 2\nLine 3");

/* ตั้งค่าให้จัดกลาง */
lv_obj_set_style_text_align(label, LV_TEXT_ALIGN_CENTER, 0);

5.3 ข้อควรระวังเรื่อง Long Text

/* ถ้าข้อความยาวเกินไป ให้ใช้ long mode */
lv_label_set_long_mode(label, LV_LABEL_LONG_SCROLL);  /* เลื่อนอัตโนมัติ */
/* หรือ */
lv_label_set_long_mode(label, LV_LABEL_LONG_WRAP);    /* ตัดบรรทัดอัตโนมัติ */

---

6. แบบฝึกหัด

แบบฝึกหัดที่ 1: เปลี่ยนข้อความและสี (10 นาที)

โจทย์: แก้ไขโค้ดให้:

• Main Label แสดง "สวัสดี IoT!"

• สีพื้นหลังเป็นสีดำ (0x000000)

• สีข้อความ Main Label เป็นสีเขียว (0x00FF00)

---

แบบฝึกหัดที่ 2: แสดงค่าตัวแปร (15 นาที)

โจทย์: สร้าง Label แสดงค่าอุณหภูมิและความชื้น:

• Title: "Sensor Data"

• Label 1: "Temperature: 25.5 °C"

• Label 2: "Humidity: 60 %"

Hint: ใช้ lv_label_set_text_fmt() สำหรับ format string

---

แบบฝึกหัดที่ 3: Label หลายบรรทัด (10 นาที)

โจทย์: สร้าง Label แสดงข้อมูลระบบ 4 บรรทัด:

System Info
-----------
CPU: PSoC Edge
Freq: 350 MHz
Cores: CM55 + CM33

---

7. สรุป

หัวข้อ	สิ่งที่เรียนรู้
Label Widget	Widget พื้นฐานสำหรับแสดงข้อความ
lv_label_set_text()	ตั้งค่าข้อความ (copy string)
lv_label_set_text_fmt()	Format string เหมือน printf()
Style Functions	เปลี่ยนสี, font, alignment
Alignment	ใช้ lv_obj_align() วางตำแหน่ง

Best Practices:

1. ใช้ lv_label_set_text_static() สำหรับ constant string (ประหยัด memory)

2. ตรวจสอบความยาวข้อความ หรือใช้ lv_label_set_long_mode()

3. ใช้สีที่อ่านง่าย (contrast สูง)

4. จัด alignment ให้สอดคล้องกับ UX ที่ต้องการ

---

LVGL v9.2 Reference: https://docs.lvgl.io/9.2/widgets/label.html