Ctrlk
For the complete documentation index, see llms.txt. This page is also available as Markdown.

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: นำไปใช้อย่างไร?

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

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

2.2 Flowchart การสร้าง Label

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

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

จากไฟล์ part1_examples.c:

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

ขั้นตอน
โค้ด
อธิบาย

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)

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

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

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

5.4 Format Specifiers สำหรับ Embedded

ข้อควรระวัง: ห้ามใช้ %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

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

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

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

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

PreviousLabel & Button
NextButton

Last updated

Was this helpful?