# GPIO-to-HMI Display

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

### 1.1 LVGL คืออะไร?

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

<figure><img src="https://1856353139-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MClo3nC-1US0rbK8Qau%2Fuploads%2FVVlJAhb4iVTaZg06oxkE%2FEmbedded%20Systems%20and%20IoT-Page-11.drawio.png?alt=media&#x26;token=0882bb4a-638e-4f06-adb0-b378104723ad" alt=""><figcaption></figcaption></figure>

***

### 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    |

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

<figure><img src="https://1856353139-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MClo3nC-1US0rbK8Qau%2Fuploads%2FM4F7Fw8BVWSFMEsG41jD%2FScreenshot%202569-01-21%20at%2020.12.41.png?alt=media&#x26;token=2635184e-03e4-4cc7-87eb-6bb78c362856" alt="" width="563"><figcaption><p><a href="https://responsive-crow.static.domains/lvgl-basic">https://responsive-crow.static.domains/lvgl-basic</a></p></figcaption></figure>

{% embed url="<https://responsive-crow.static.domains/lvgl-basic>" %}

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

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

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

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

<figure><img src="https://1856353139-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MClo3nC-1US0rbK8Qau%2Fuploads%2Fu6EZRUX4TLBMkZ2GMBGV%2FEmbedded%20Systems%20and%20IoT-Page-11.drawio-5.png?alt=media&#x26;token=95ea3c36-face-43db-98bb-1b32dca3294e" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1856353139-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MClo3nC-1US0rbK8Qau%2Fuploads%2F5IPlK3sepmy40Y9gC0Fx%2FEmbedded%20Systems%20and%20IoT-Page-11.drawio-3.png?alt=media&#x26;token=27907f40-cf55-4e45-943c-7e32ffe3f0a2" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1856353139-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MClo3nC-1US0rbK8Qau%2Fuploads%2FTYPhdh0CdXsZT4zuBPtk%2FEmbedded%20Systems%20and%20IoT-Page-11.drawio-4.png?alt=media&#x26;token=68b50ea1-8c9f-4341-8a82-0b4a70045dc9" alt=""><figcaption></figcaption></figure>

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

```c
/* สร้าง 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) */
```