GPIO-to-HMI Display

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

1.1 LVGL คืออะไร?

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

---

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! */

https://responsive-crow.static.domains/lvgl-basic

https://responsive-crow.static.domains/lvgl-basicresponsive-crow.static.domains

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

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

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

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

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

ประเภทการจัดตำแหน่ง (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:

กลุ่ม 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) */