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()	กำหนดข้อความ (static text)
lv_label_set_text_fmt()	กำหนดข้อความแบบ format (เหมือน printf)
lv_obj_set_style_text_color()	เปลี่ยนสีข้อความ
lv_obj_set_style_text_font()	เปลี่ยนขนาดและชนิด font
lv_obj_set_style_bg_color()	เปลี่ยนสีพื้นหลัง
lv_color_hex()	สร้างสีจาก hex code
lv_palette_main()	ใช้สีจาก Material Design palette

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

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

---

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

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

2.2 Flowchart การสร้าง Label

---

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

3.1 โค้ดอ้างอิง: part1_ex1_hello_world()

จากไฟล์ part1_examples.c:

/*******************************************************************************
 * Example 1: Hello World - Basic Label
 *
 * Official Reference: https://docs.lvgl.io/9.2/widgets/label.html
 ******************************************************************************/
void part1_ex1_hello_world(void)
{
    /* Set background color */
    lv_obj_set_style_bg_color(lv_screen_active(),
                              lv_color_hex(0x003a57),
                              LV_PART_MAIN);

    /* Create title label */
    lv_obj_t * title = lv_label_create(lv_screen_active());
    lv_label_set_text(title, "Part 1 - Example 1");
    lv_obj_set_style_text_color(title, lv_color_hex(0xFFFFFF), 0);
    lv_obj_align(title, LV_ALIGN_TOP_MID, 0, 20);

    /* Create 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);
    lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);

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

---

วิเคราะห์ทีละขั้น:

ขั้นตอน	โค้ด	อธิบาย
1	lv_screen_active()	ดึง Screen ปัจจุบัน
2	lv_obj_set_style_bg_color(..., 0x003a57, ...)	Background น้ำเงินเข้ม
3	lv_label_create(lv_screen_active())	สร้าง Label บน Screen
4	lv_label_set_text(title, "...")	กำหนดข้อความ
5	lv_obj_set_style_text_color(title, ..., 0)	สีขาว, part=0 (MAIN)
6	lv_obj_align(title, LV_ALIGN_TOP_MID, 0, 20)	กลางบน, เลื่อนลง 20px

---

4. ฟังก์ชันสำคัญ (API Reference)

4.1 Label Creation & Text

ฟังก์ชัน	พารามิเตอร์	คำอธิบาย
lv_label_create(parent)	parent object	สร้าง Label ใหม่
lv_label_set_text(label, text)	label, "string"	กำหนดข้อความ (copy)
lv_label_set_text_fmt(label, fmt, ...)	label, format, args	กำหนดข้อความแบบ printf
lv_label_set_text_static(label, text)	label, "string"	กำหนดข้อความ (ไม่ copy, ประหยัด RAM)
lv_label_set_long_mode(label, mode)	label, LV_LABEL_LONG_*	กำหนดวิธีจัดการข้อความยาว

4.2 Style: Text Color & Font

ฟังก์ชัน	พารามิเตอร์	คำอธิบาย
lv_obj_set_style_text_color(obj, color, part)	obj, lv_color_t, 0	สีข้อความ
lv_obj_set_style_text_font(obj, font, part)	obj, &lv_font_*, 0	ขนาด/ชนิด font
lv_obj_set_style_text_align(obj, align, part)	obj, LV_TEXT_ALIGN_*, 0	จัด text ซ้าย/กลาง/ขวา
lv_obj_set_style_text_opa(obj, opa, part)	obj, LV_OPA_*, 0	ความโปร่งใส

4.3 Style: Background

ฟังก์ชัน	พารามิเตอร์	คำอธิบาย
lv_obj_set_style_bg_color(obj, color, part)	obj, lv_color_t, part	สีพื้นหลัง
lv_obj_set_style_bg_opa(obj, opa, part)	obj, LV_OPA_*, part	ความโปร่งใสพื้นหลัง

4.4 Color Functions

ฟังก์ชัน	พารามิเตอร์	คำอธิบาย
lv_color_hex(hex)	0xRRGGBB	สร้างสีจาก hex code
lv_color_make(r, g, b)	0-255, 0-255, 0-255	สร้างสีจาก RGB
lv_palette_main(palette)	LV_PALETTE_*	สีหลักจาก Material palette
lv_palette_lighten(palette, lvl)	LV_PALETTE_*, 1-5	สีอ่อน
lv_palette_darken(palette, lvl)	LV_PALETTE_*, 1-4	สีเข้ม

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

5.1 Vertical Stacking Pattern (ใช้ใน part1_ex1)

    +-------------------------------------------+
    | Title (TOP_MID, y=+20)     font_24        |
    |                                           |
    |                                           |
    |        Main Content (CENTER, y=0)         |
    |                                           |
    |                                           |
    | Description (BOTTOM_MID, y=-50) font_14   |
    +-------------------------------------------+

ในตัวอย่างนี้ใช้รูปแบบการวาง 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);    /* ตัดบรรทัดอัตโนมัติ */

5.4 Format Specifiers สำหรับ Embedded

/* int32_t ใช้ %d + cast */
int32_t adc_val = 2048;
lv_label_set_text_fmt(label, "ADC: %d", (int)adc_val);

/* uint32_t ใช้ %u + cast */
uint32_t count = 12345;
lv_label_set_text_fmt(label, "Count: %u", (unsigned int)count);

/* float ใช้ %.Xf */
float temp = 25.67f;
lv_label_set_text_fmt(label, "Temp: %.1f C", temp);

/* หลายค่า */
lv_label_set_text_fmt(label, "X:%d Y:%d Z:%d",
                      (int)ax, (int)ay, (int)az);

ข้อควรระวัง: ห้ามใช้ %ld หรือ %lu ตรงๆ เพราะขนาด long อาจต่างกันในแต่ละ platform ให้ cast เป็น (int) หรือ (unsigned int) แทน

---

6. แบบฝึกหัด

Exercise 1: Device Info Display

โจทย์: สร้างหน้าจอแสดงข้อมูลอุปกรณ์ (Device Information Screen) ที่แสดง Label 3 ตัวด้วยขนาดและสีต่างกัน

ข้อกำหนด:

1. Background สี 0x0f0f23 (เข้มมาก)

2. Label ที่ 1 (Title): "PSoC Edge E84 Info"

   • Font: montserrat_24

   • สี: ขาว (0xFFFFFF)

   • ตำแหน่ง: TOP_MID, y=+20

3. Label ที่ 2 (Detail): แสดงข้อมูล 4 บรรทัด (ใช้ \n)

   • "Board: APP_KIT_PSE84_EVAL_EPC2"

   • "CPU: Cortex-M33 + Cortex-M55"

   • "Display: 480 x 320 (TFT)"

   • "LVGL: v9.2.0"

   • Font: montserrat_16 (default)

   • สี: สีเขียว (LV_PALETTE_GREEN)

   • ตำแหน่ง: CENTER, y=0

   • Text align: LEFT

4. Label ที่ 3 (Footer): "Embedded C for IoT Course - BUU"

   • Font: montserrat_14

   • สี: เทา (0x888888)

   • ตำแหน่ง: BOTTOM_MID, y=-20

ผลลัพธ์ที่คาดหวัง:

    +-------------------------------------------+
    |       PSoC Edge E84 Info (ใหญ่,ขาว)        |
    |                                           |
    |  Board: APP_KIT_PSE84_EVAL_EPC2           |
    |  CPU: Cortex-M33 + Cortex-M55             |
    |  Display: 480 x 320 (TFT)                 |
    |  LVGL: v9.2.0                             |
    |                (เขียว)                     |
    |                                           |
    |  Embedded C for IoT Course - BUU (เทา)    |
    +-------------------------------------------+

---

Exercise 2: Scrolling Marquee Label

โจทย์: สร้างป้ายแสดงข้อความวิ่ง (Marquee) เหมือนป้ายโฆษณา LED ที่เห็นตามห้างสรรพสินค้า พร้อมข้อความสถานะด้านบน

ข้อกำหนด:

1. Background สี 0x1a1a2e

2. Label ชื่อ "Factory Monitor" ด้านบน (font_24, สีขาว)

3. สร้าง Container กว้าง 400px สูง 50px ตรงกลางจอ มี background สี 0x2a2a3e พร้อมขอบสีเหลือง

4. ภายใน Container สร้าง Label ข้อความยาว:

   • "ALERT: Temperature sensor T-04 reading 85C -- Motor M-02 vibration above threshold -- Conveyor Belt B-01 maintenance due in 48 hours"

   • ใช้ LV_LABEL_LONG_SCROLL_CIRCULAR

   • กำหนดความกว้างของ label ให้เท่า Container (380px)

   • สีเหลือง, font_20

5. Label แสดงเวลา "Last Update: 14:32:05" ด้านล่าง Container

   • สีเทา, font_14

ผลลัพธ์ที่คาดหวัง:

    +-------------------------------------------+
    |          Factory Monitor (ขาว)            |
    |                                           |
    |  +-------------------------------------+  |
    |  | ALERT: Temperature sensor T-04 r... |  |  <-- ข้อความวิ่ง
    |  +-------------------------------------+  |
    |       Last Update: 14:32:05 (เทา)         |
    |                                           |
    +-------------------------------------------+

---

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