> 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/interfacing-with-infineon-psoc-tm-edge/hmi-development/gpio-to-hmi-display/ux-ui-workshops/label-and-button/label.md).

# 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?: เราจะเรียนรู้อะไร?

<table><thead><tr><th width="338.9503173828125">ฟังก์ชัน</th><th>หน้าที่</th></tr></thead><tbody><tr><td><code>lv_label_create()</code></td><td>สร้าง Label widget</td></tr><tr><td><code>lv_label_set_text()</code></td><td>กำหนดข้อความ (static text)</td></tr><tr><td><code>lv_label_set_text_fmt()</code></td><td>กำหนดข้อความแบบ format (เหมือน printf)</td></tr><tr><td><code>lv_obj_set_style_text_color()</code></td><td>เปลี่ยนสีข้อความ</td></tr><tr><td><code>lv_obj_set_style_text_font()</code></td><td>เปลี่ยนขนาดและชนิด font</td></tr><tr><td><code>lv_obj_set_style_bg_color()</code></td><td>เปลี่ยนสีพื้นหลัง</td></tr><tr><td><code>lv_color_hex()</code></td><td>สร้างสีจาก hex code</td></tr><tr><td><code>lv_palette_main()</code></td><td>ใช้สีจาก Material Design palette</td></tr></tbody></table>

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

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

<figure><img src="https://1856353139-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MClo3nC-1US0rbK8Qau%2Fuploads%2Fvcv1D570agzBkEzL1qiL%2Fweek3_ex1_hello_world.png?alt=media&amp;token=80de773c-b0a8-4f5d-9507-708d4678099f" alt=""><figcaption></figcaption></figure>

***

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

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

<figure><img src="https://1856353139-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MClo3nC-1US0rbK8Qau%2Fuploads%2Fv8eZsRaceWPEQFD1GxBq%2FEmbedded%20Systems%20and%20IoT-Page-13.drawio.png?alt=media&amp;token=0f1f4ef5-d9aa-4dc6-8bea-e1a4d5045154" alt=""><figcaption></figcaption></figure>

#### 2.2 Flowchart การสร้าง Label

<figure><img src="https://1856353139-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MClo3nC-1US0rbK8Qau%2Fuploads%2FRtBWlZqeMHdAMsIwUtDU%2FEmbedded%20Systems%20and%20IoT-Page-13.drawio-2.png?alt=media&amp;token=c918b973-20b2-45cc-95a9-ee34ca5b6652" alt=""><figcaption></figcaption></figure>

***

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

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

จากไฟล์ `part1_examples.c`:

```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);
}
```

***

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

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

***

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

#### 4.1 Label Creation & Text

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

#### 4.2 Style: Text Color & Font

<table><thead><tr><th width="420.4488525390625">ฟังก์ชัน</th><th width="211.72509765625">พารามิเตอร์</th><th>คำอธิบาย</th></tr></thead><tbody><tr><td><code>lv_obj_set_style_text_color(obj, color, part)</code></td><td>obj, lv_color_t, 0</td><td>สีข้อความ</td></tr><tr><td><code>lv_obj_set_style_text_font(obj, font, part)</code></td><td>obj, &#x26;lv_font_*, 0</td><td>ขนาด/ชนิด font</td></tr><tr><td><code>lv_obj_set_style_text_align(obj, align, part)</code></td><td>obj, LV_TEXT_ALIGN_*, 0</td><td>จัด text ซ้าย/กลาง/ขวา</td></tr><tr><td><code>lv_obj_set_style_text_opa(obj, opa, part)</code></td><td>obj, LV_OPA_*, 0</td><td>ความโปร่งใส</td></tr></tbody></table>

#### 4.3 Style: Background

<table><thead><tr><th width="384.69598388671875">ฟังก์ชัน</th><th>พารามิเตอร์</th><th>คำอธิบาย</th></tr></thead><tbody><tr><td><code>lv_obj_set_style_bg_color(obj, color, part)</code></td><td>obj, lv_color_t, part</td><td>สีพื้นหลัง</td></tr><tr><td><code>lv_obj_set_style_bg_opa(obj, opa, part)</code></td><td>obj, LV_OPA_*, part</td><td>ความโปร่งใสพื้นหลัง</td></tr></tbody></table>

#### 4.4 Color Functions

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

### 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 แนวตั้ง:

```c
/* 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 การจัดการข้อความหลายบรรทัด

```c
/* ใช้ \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

```c
/* ถ้าข้อความยาวเกินไป ให้ใช้ 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

```c
/* 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>