Basic HMI Display

ส่วนที่ 1: ภาพรวม LVGL (20 นาที)

1.1 LVGL คืออะไร?

LVGL (Light and Versatile Graphics Library) เป็น Open Source Graphics Library สำหรับ Embedded Systems

┌─────────────────────────────────────────────────────────────┐
│                     LVGL ARCHITECTURE                       │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌──────────────────────────────────────────────────────┐   │
│  │              APPLICATION LAYER                       │   │
│  │  ┌────────┐  ┌────────┐  ┌────────┐  ┌────────┐      │   │
│  │  │ Button │  │ Label  │  │ Slider │  │ Chart  │      │   │
│  │  └───┬────┘  └───┬────┘  └───┬────┘  └───┬────┘      │   │
│  │      └───────────┴───────────┴───────────┘           │   │
│  │                      │                               │   │
│  │               ┌──────▼──────┐                        │   │
│  │               │  lv_obj_t   │  (Base Object)         │   │
│  └───────────────┴──────┬──────┴────────────────────────┘   │
│                         │                                   │
│  ┌──────────────────────┼───────────────────────────────┐   │
│  │                CORE LAYER                            │   │
│  │  ┌─────────┐  ┌──────▼────┐  ┌─────────┐             │   │
│  │  │  Timer  │  │  Display  │  │  Input  │             │   │
│  │  │ Handler │  │  Manager  │  │ Device  │             │   │
│  └──┴─────────┴──┴───────────┴──┴─────────┴─────────────┘   │
│                         │                                   │
│  ┌──────────────────────┼───────────────────────────────┐   │
│  │              HARDWARE LAYER                          │   │
│  │  ┌───────────────┐  ┌───────────────┐                │   │
│  │  │  LCD Display  │  │  Touch Panel  │                │   │
│  │  │  (MIPI-DSI)   │  │  (I2C)        │                │   │
│  └──┴───────────────┴──┴───────────────┴────────────────┘   │
│                                                             │
└─────────────────────────────────────────────────────────────┘

---

1.2 Display Options

Display	Resolution	Interface	Touch
4.3" Waveshare	800 x 480	MIPI-DSI	FT5406 (I2C)
7" Waveshare	1024 x 600	MIPI-DSI	GT911 (I2C)

---

1.3 LVGL Core Concepts

Concept	คำอธิบาย
Display	พื้นที่แสดงผลทั้งหมด
Screen	หน้าจอที่สลับได้ (container หลัก)
Widget (Object)	UI element เช่น Button, Label
Style	การตกแต่ง (สี, ขนาด, font)
Event	การตอบสนองต่อ user interaction

/* Key LVGL Functions */
lv_init();                          /* Initialize LVGL */
lv_obj_t *scr = lv_scr_act();       /* Get active screen */
lv_obj_t *btn = lv_btn_create(scr); /* Create button on screen */
lv_timer_handler();                  /* Must call periodically! */

LVGL 9.2 UI Design Guidedetailed-dove.static.domains

1.4 LVGL Layout และ Positioning พื้นฐาน

หมายเหตุ: ส่วนนี้เป็นพื้นฐานสำคัญที่ต้องเข้าใจก่อนเริ่มสร้าง UI จริง เพราะการวางตำแหน่งที่ผิดพลาดจะทำให้ Widget แสดงผลไม่ถูกต้องหรือหายไปจากจอ

หน้าจอและระบบพิกัด (Screen & Coordinate System)

ข้อมูลจอภาพ PSoC Edge E84 Eval Kit:

┌─────────────────────────────────────────────────────────────┐
│ Physical Display: 480 x 800 pixels (Vertical/Portrait)      │
│ Usable Area:      480 x 320 pixels (ส่วนที่ใช้งานจริง)           │
│ Origin (0,0):     มุมซ้ายบน (Top-Left Corner)                 │
│ X-axis:           → เพิ่มไปทางขวา (0 to 479)                  │
│ Y-axis:           ↓ เพิ่มไปทางล่าง (0 to 319)                  │
└─────────────────────────────────────────────────────────────┘

ระบบพิกัดของ LVGL:

     X=0                    X=240                  X=479
Y=0   ┌─────────────────────────────────────────────┐
      │ ○ Origin (0,0)                              │
      │                                             │
      │          X+ ───────────────────►            │
      │          │                                  │
      │          │                                  │
Y=160 │          │ Y+       ● CENTER                │
      │          │       (240,160)                  │
      │          ▼                                  │
      │                                             │
      │                                             │
Y=319 └─────────────────────────────────────────────┘

ประเภทการจัดตำแหน่ง (Alignment Types)

LVGL v9.2 มี 2 กลุ่มหลักของ alignment:

กลุ่ม 1: Align ภายใน Parent (ใช้กับ lv_obj_align)

Constant	ตำแหน่ง	การใช้งานที่เหมาะสม
LV_ALIGN_TOP_LEFT	มุมซ้ายบน	Default position
LV_ALIGN_TOP_MID	กลางบน	Title, Header
LV_ALIGN_TOP_RIGHT	มุมขวาบน	Close button, Status
LV_ALIGN_LEFT_MID	กลางซ้าย	Side panel items
LV_ALIGN_CENTER	กลางจอ	Main content
LV_ALIGN_RIGHT_MID	กลางขวา	Side panel items
LV_ALIGN_BOTTOM_LEFT	มุมซ้ายล่าง	Footer buttons
LV_ALIGN_BOTTOM_MID	กลางล่าง	Description, Footer
LV_ALIGN_BOTTOM_RIGHT	มุมขวาล่าง	Action buttons

แผนภาพ Alignment ภายใน Parent:

┌────────────────────────────────────────────────────────┐
│ TOP_LEFT          TOP_MID           TOP_RIGHT          │
│    ●                 ●                  ●              │
│                                                        │
│                                                        │
│ LEFT_MID            CENTER           RIGHT_MID         │
│    ●                 ●                  ●              │
│                                                        │
│                                                        │
│ BOTTOM_LEFT       BOTTOM_MID        BOTTOM_RIGHT       │
│    ●                 ●                  ●              │
└────────────────────────────────────────────────────────┘

กลุ่ม 2: Align ภายนอก Object อ้างอิง (ใช้กับ lv_obj_align_to)

Constant	ตำแหน่งจาก Object อ้างอิง
LV_ALIGN_OUT_TOP_LEFT	ด้านบน ชิดซ้าย
LV_ALIGN_OUT_TOP_MID	ด้านบน กลาง
LV_ALIGN_OUT_TOP_RIGHT	ด้านบน ชิดขวา
LV_ALIGN_OUT_BOTTOM_LEFT	ด้านล่าง ชิดซ้าย
LV_ALIGN_OUT_BOTTOM_MID	ด้านล่าง กลาง
LV_ALIGN_OUT_BOTTOM_RIGHT	ด้านล่าง ชิดขวา
LV_ALIGN_OUT_LEFT_TOP	ด้านซ้าย ชิดบน
LV_ALIGN_OUT_LEFT_MID	ด้านซ้าย กลาง
LV_ALIGN_OUT_LEFT_BOTTOM	ด้านซ้าย ชิดล่าง
LV_ALIGN_OUT_RIGHT_TOP	ด้านขวา ชิดบน
LV_ALIGN_OUT_RIGHT_MID	ด้านขวา กลาง
LV_ALIGN_OUT_RIGHT_BOTTOM	ด้านขวา ชิดล่าง

ตัวอย่างการใช้ OUT_* Alignment:

/* สร้าง Label ใต้ LED widget */
lv_obj_t * label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "LED Status");
lv_obj_align_to(label, led_widget, LV_ALIGN_OUT_BOTTOM_MID, 0, 5);
/*                       ↑               ↑                  ↑  ↑
                    object          วางใต้ led           x=0, y=+5 (ห่างลงมา 5px) */