# GPIO-to-HMI Display

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

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

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

<figure><img src="/files/b0W3ni9wwUJrGT2FZkdp" 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="/files/1kfPzNADcVrozszClmb0" 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="/files/MYj2pbXqNgddOwbCx3qA" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/0kklOaa6nTg70TpYtRjE" 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="/files/Rxa4gh4q6r9SBOQn8Uve" 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) */
```


---

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