# Sensor-to-HMI Display

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

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

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

{% embed url="<https://detailed-dove.static.domains/lvgl-basic>" fullWidth="true" %}

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

```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) */
```