# 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="/files/MeYWGEIROaIISoyKUIFt" alt=""><figcaption></figcaption></figure>

***

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

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

<figure><img src="/files/zQkNHqV0FzTp8dVFq63K" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/nf00gyiJQtIVkwLJsYJJ" 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>


---

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