# HMI Development

## เตรียมพร้อม UX/UI Development สำหรับเครื่อง PC

## 1. ติดตั้ง LVGL PC Simulator

PC Simulator ใช้ **SDL2** เพื่อจำลองหน้าจอ LCD และ touch input บน PC ทำให้สามารถ:

* พัฒนาและทดสอบ UI ได้รวดเร็ว
* Debug code บน PC ได้สะดวก
* ไม่ต้องมีบอร์ดจริงก็พัฒนาได้
* รองรับ Widows, macOS และ Linux 

#### Windows

**ติดตั้ง MSYS2 (**Software Distribution and Building Platform for Windows**)**

1. ดาวน์โหลดและติดตั้ง [MSYS2](https://www.msys2.org/)
2. เปิด MSYS2 UCRT64 terminal
3. รันคำสั่ง:

```bash
pacman -Syu
pacman -S mingw-w64-ucrt-x86_64-cmake mingw-w64-ucrt-x86_64-gcc mingw-w64-ucrt-x86_64-SDL2 git make
```

#### macOS

```bash
# ติดตั้ง Homebrew (ถ้ายังไม่มี)
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# ติดตั้ง dependencies
brew install cmake sdl2 git
```

#### Linux (Ubuntu/Debian)

```bash
sudo apt update
sudo apt install -y build-essential cmake git libsdl2-dev
```

#### Linux (Fedora/RHEL)

```bash
sudo dnf install -y cmake gcc gcc-c++ git SDL2-devel
```

## 2. ดาวโหลดโปรเจค LVGL PC Simulator (AIC-EEC version)

{% embed url="<https://www.youtube.com/watch?v=hXF-6t2KABs>" fullWidth="true" %}

กดลิงค์ GitHub ด้านล่าง

{% embed url="<https://github.com/Advance-Innovation-Centre-AIC/lv_port_pc_vscode_aic-eec>" %}

แล้วแตกไฟล์ลงในเครื่องของตัวเอง **`C:\lv_port_pc_vscode_aic-eec-main`**

### เปิดโปรแกรม MSYS2 UCRT64 Terminal แล้วรันคำสั่ง

```bash
cd C:\lv_port_pc_vscode_aic-eec-main
mkdir build && cd build
cmake -G "MSYS Makefiles" ..
make -j
```

Executable จะอยู่ที่ `bin/main` (macOS/Linux) หรือ `bin/main.exe` (Windows)

***

## 3. การรันโปรแกรม

เปิดโปรแกรม MSYS2 UCRT64 Terminal

<figure><img src="/files/6Rxh9f05MGqafH6kQePH" alt=""><figcaption></figcaption></figure>

ตัวอย่างการรันโปรแกรม

<figure><img src="/files/fCNNQswwu12EvwVqRqqw" alt=""><figcaption></figcaption></figure>

ผลลัพธ์การรันโปรแกรม

<figure><img src="/files/hI5j7o4B85SCqN4jwOxo" alt=""><figcaption></figcaption></figure>

### แบบที่ 1: เลือกตัวอย่าง + Build ด้วย build.sh

วิธีที่ง่ายที่สุด ใช้ `build.sh`:

```shellscript
cd C:\lv_port_pc_vscode_aic-eec-main
./build.sh 1 1     # Part 1, Example 1 (Hello World) → build + รัน
./build.sh 2 3     # Part 2, Example 3 (Chart Time Series)
./build.sh 5 5     # Part 5, Example 5 (WiFi Manager)
./build.sh 3 2 -b  # Part 3, Example 2 → build อย่างเดียว (ไม่รัน)
./build.sh         # build ค่าปัจจุบัน + รัน
./build.sh -l      # แสดงรายการตัวอย่างทั้งหมด
./build.sh -c      # ลบ build directory (clean)
./build.sh -h      # แสดงวิธีใช้
```

{% embed url="<https://www.youtube.com/watch?v=8cUpaT30wqI>" fullWidth="true" %}

Script จะ:

1. ตั้งค่า `SELECTED_PART` และ `SELECTED_EXAMPLE` ใน `src/example_selector.h` ให้อัตโนมัติ
2. สร้าง build directory + cmake (ถ้ายังไม่มี)
3. Build โปรเจค
4. Copy `SDL2.dll` ให้อัตโนมัติ (Windows)
5. รันโปรแกรมทันที (ยกเว้นใช้ `-b`)

{% embed url="<https://youtu.be/I0dRazU0NMA>" fullWidth="true" %}

***

### แบบที่ 1:  เลือกตัวอย่าง (แบบ Manual)

แก้ไขไฟล์ `src/example_selector.h`:

```c
#define SELECTED_PART       1    // เลือก Part (1-5)
#define SELECTED_EXAMPLE    1    // เลือก Example
```

แล้ว build ใหม่:

```bash
cd build
make -j
```

***

### รายการตัวอย่างทั้งหมด <a href="#e0-b8-a3-e0-b8-b2-e0-b8-a2-e0-b8-81-e0-b8-b2-e0-b8-a3-e0-b8-95-e0-b8-b1-e0-b8-a7-e0-b8-a-d-e0-b8-a2" id="e0-b8-a3-e0-b8-b2-e0-b8-a2-e0-b8-81-e0-b8-b2-e0-b8-a3-e0-b8-95-e0-b8-b1-e0-b8-a7-e0-b8-a-d-e0-b8-a2"></a>

#### Part 1: LVGL พื้นฐาน + GPIO (11 Examples) <a href="#part-1-lvgl-e0-b8-9e-e0-b8-b7-e0-b9-89-e0-b8-99-e0-b8-90-e0-b8-b2-e0-b8-99-gpio-11-examples" id="part-1-lvgl-e0-b8-9e-e0-b8-b7-e0-b9-89-e0-b8-99-e0-b8-90-e0-b8-b2-e0-b8-99-gpio-11-examples"></a>

**Section I — UI Only (จำลองบน PC ได้)**

<table><thead><tr><th width="106.2620849609375">Example</th><th width="230.8309326171875">ชื่อ</th><th>เรียนรู้</th></tr></thead><tbody><tr><td>1</td><td>Hello World</td><td>Label, Align, Style</td></tr><tr><td>2</td><td>Button Counter</td><td>Button, Event Callback</td></tr><tr><td>3</td><td>LED Control</td><td>LED Widget, Slider, Brightness</td></tr><tr><td>4</td><td>Switch Toggle</td><td>Switch, State Check</td></tr><tr><td>5</td><td>GPIO Dashboard</td><td>Layout, Multiple Widgets</td></tr></tbody></table>

**Section II — Hardware Integration (ใช้บอร์ดจริง / mock บน PC)**

<table><thead><tr><th width="109.24151611328125">Example</th><th width="259.03546142578125">ชื่อ</th><th>เรียนรู้</th></tr></thead><tbody><tr><td>6</td><td>HW LED Control</td><td>Real GPIO LED On/Off/Toggle</td></tr><tr><td>7</td><td>HW Button Status</td><td>Real Button State Display</td></tr><tr><td>8</td><td>HW ADC Display</td><td>Real ADC Potentiometer Reading</td></tr><tr><td>9</td><td>HW GPIO Dashboard</td><td>Combined LEDs + Button + ADC</td></tr><tr><td>10</td><td>CapSense Mockup</td><td>CapSense UI (no hardware)</td></tr><tr><td>11</td><td>CapSense Hardware</td><td>Real CapSense via I2C</td></tr></tbody></table>

#### Part 2: แสดงผลข้อมูลเซ็นเซอร์ (11 Examples) <a href="#part-2-e0-b9-81-e0-b8-aa-e0-b8-94-e0-b8-87-e0-b8-9c-e0-b8-a5-e0-b8-82-e0-b9-89-e0-b8-a-d-e0-b8-a1-e0" id="part-2-e0-b9-81-e0-b8-aa-e0-b8-94-e0-b8-87-e0-b8-9c-e0-b8-a5-e0-b8-82-e0-b9-89-e0-b8-a-d-e0-b8-a1-e0"></a>

**Section I — Simulated Data (จำลองบน PC ได้)**

<table><thead><tr><th width="131.9296875">Example</th><th width="236.06109619140625">ชื่อ</th><th>เรียนรู้</th></tr></thead><tbody><tr><td>1</td><td>Slider Bar</td><td>Slider, Bar, ADC Visualization</td></tr><tr><td>2</td><td>Arc Gauge</td><td>Arc Widget, Circular Gauge</td></tr><tr><td>3</td><td>Chart Time Series</td><td>Chart, Line Series, Timer</td></tr><tr><td>4</td><td>Scale Temperature</td><td>Scale Widget, Color Zones</td></tr><tr><td>5</td><td>Sensor Dashboard</td><td>TabView, IMU + ADC</td></tr><tr><td>6</td><td>Chart Dashboard</td><td>Bar/Area/Scatter/Line Charts</td></tr></tbody></table>

**Section II — Hardware Integration (ใช้บอร์ดจริง / mock บน PC)**

<table><thead><tr><th width="117.93109130859375">Example</th><th width="261.328125">ชื่อ</th><th>เรียนรู้</th></tr></thead><tbody><tr><td>7</td><td>Real IMU Display</td><td>BMI270 3-Axis Accelerometer Chart</td></tr><tr><td>8</td><td>Real Sensor Dashboard</td><td>Real ADC + IMU Dashboard</td></tr><tr><td>9</td><td>Real Arc Gauge</td><td>Real Potentiometer → Arc Display</td></tr><tr><td>10</td><td>Real Scale Gauge</td><td>Real Potentiometer → Scale Needle</td></tr><tr><td>11</td><td>Real Chart Dashboard</td><td>Real IMU on Multiple Chart Types</td></tr></tbody></table>

#### Part 3: Oscilloscope & Signal Processing (8 Examples) <a href="#part-3-oscilloscope--signal-processing-8-examples" id="part-3-oscilloscope--signal-processing-8-examples"></a>

**Section I — Simulated Data (จำลองบน PC ได้)**

<table><thead><tr><th width="129.49359130859375">Example</th><th width="216.311767578125">ชื่อ</th><th>เรียนรู้</th></tr></thead><tbody><tr><td>1</td><td>Waveform Generator</td><td>Square/Sine/Triangle/Sawtooth</td></tr><tr><td>2</td><td>Noise Generator</td><td>White Noise Display</td></tr><tr><td>3</td><td>Audio Waveform</td><td>I2S Audio Visualization</td></tr><tr><td>4</td><td>Mic Visualizer</td><td>PDM Microphone Display</td></tr><tr><td>5</td><td>Oscilloscope UI</td><td>Full Scope Interface</td></tr><tr><td>6</td><td>Spectrum Analyzer</td><td>FFT Frequency Display</td></tr></tbody></table>

**Section II — Integration (จำลอง + ฮาร์ดแวร์)**

<table><thead><tr><th width="111.94036865234375">Example</th><th width="222.6484375">ชื่อ</th><th>เรียนรู้</th></tr></thead><tbody><tr><td>7</td><td>Custom Panel Scope</td><td>Custom Panel Navigation</td></tr><tr><td>8</td><td>HW Scope</td><td>Real Potentiometer + LED3 Scope</td></tr></tbody></table>

#### Part 4: IPC, Logging, Event Bus (9 Examples) <a href="#part-4-ipc-logging-event-bus-9-examples" id="part-4-ipc-logging-event-bus-9-examples"></a>

**Section I — Simulated (จำลองบน PC ได้)**

<table><thead><tr><th width="105.100830078125">Example</th><th width="226.735107421875">ชื่อ</th><th>เรียนรู้</th></tr></thead><tbody><tr><td>1</td><td>IPC Ping Test</td><td>IPC Ping/Pong</td></tr><tr><td>2</td><td>Logging System</td><td>Remote Logging</td></tr><tr><td>3</td><td>IPC Sensor Data</td><td>Sensor Data via IPC</td></tr><tr><td>4</td><td>Event Bus</td><td>Event-driven Architecture</td></tr></tbody></table>

**Section II — Hardware IPC (ใช้บอร์ดจริง / mock บน PC)**

<table><thead><tr><th width="118.8082275390625">Example</th><th width="241.116455078125">ชื่อ</th><th>เรียนรู้</th></tr></thead><tbody><tr><td>5</td><td>HW IPC LED</td><td>LED Control via IPC</td></tr><tr><td>6</td><td>HW IPC Button</td><td>Button Events via IPC</td></tr><tr><td>7</td><td>HW IPC Dashboard</td><td>Full IPC Dashboard</td></tr><tr><td>8</td><td>Advanced Features</td><td>IPC + Event Bus + Logging</td></tr><tr><td>9</td><td>CapSense IPC</td><td>CapSense Touch via IPC</td></tr></tbody></table>

#### Part 5: WiFi Manager & IoT (8 Examples) <a href="#part-5-wifi-manager--iot-8-examples" id="part-5-wifi-manager--iot-8-examples"></a>

**Section I — WiFi Basics (จำลองบน PC ได้)**

<table><thead><tr><th width="106.24432373046875">Example</th><th width="224.08380126953125">ชื่อ</th><th>เรียนรู้</th></tr></thead><tbody><tr><td>1</td><td>WiFi Network List</td><td>List Widget, Network Data</td></tr><tr><td>2</td><td>WiFi Connect</td><td>Connect/Disconnect Flow</td></tr><tr><td>3</td><td>TCP/IP Info</td><td>Network Information Display</td></tr><tr><td>4</td><td>Hardware Info</td><td>System Information</td></tr></tbody></table>

**Section II — Full WiFi Integration (จำลอง + ฮาร์ดแวร์)**

<table><thead><tr><th width="116.571044921875">Example</th><th width="224.4815673828125">ชื่อ</th><th>เรียนรู้</th></tr></thead><tbody><tr><td>5</td><td>WiFi Manager</td><td>Full WiFi Manager UI</td></tr><tr><td>6</td><td>WiFi Status</td><td>Real-time Status Dashboard</td></tr><tr><td>7</td><td>IoT Dashboard</td><td>WiFi + Sensors Combined</td></tr><tr><td>8</td><td>MQTT Preview</td><td>MQTT Broker/Topics UI</td></tr></tbody></table>

***

### โครงสร้างโปรเจค <a href="#e0-b9-82-e0-b8-84-e0-b8-a3-e0-b8-87-e0-b8-aa-e0-b8-a3-e0-b9-89-e0-b8-b2-e0-b8-87-e0-b9-82-e0-b8-9b-e" id="e0-b9-82-e0-b8-84-e0-b8-a3-e0-b8-87-e0-b8-aa-e0-b8-a3-e0-b9-89-e0-b8-b2-e0-b8-87-e0-b9-82-e0-b8-9b-e"></a>

```bash
lv_port_pc_vscode_aic-eec/
├── build.sh                   Build Script (แนะนำ)
├── src/
│   ├── example_selector.h     <-- ตั้งค่า Part + Example ที่นี่
│   ├── main.c
│   ├── part1/                 Part 1: LVGL พื้นฐาน
│   ├── part2/                 Part 2: เซ็นเซอร์
│   ├── part3/                 Part 3: Oscilloscope
│   ├── part4/                 Part 4: IPC/Event Bus
│   ├── part5/                 Part 5: WiFi/IoT
│   ├── aic-eec/               ไลบรารี AIC-EEC (mock)
│   └── hal/                   Hardware Abstraction (SDL)
├── lvgl/                      LVGL Library v9.2
├── lv_conf.h                  LVGL Configuration
├── CMakeLists.txt             Build Configuration
├── patches/                   Patch files สำหรับ repo ต้นฉบับ LVGL
├── bin/                       Output Executables
└── build/                     Build Directory (auto-generated)
```

***

#### Rebuild หลังแก้โค้ด

ไม่ต้อง cmake ใหม่ แค่ make:

```bash
cd build
make -j
```

ถ้าแก้ CMakeLists.txt หรือเพิ่ม/ลบไฟล์ ให้ cmake ใหม่:

```bash
cd build
cmake ..
make -j
```

***

#### Clean Build

```bash
rm -rf build
mkdir build && cd build
cmake ..
make -j
```

หรือใช้ `build.sh`:

```bash
./build.sh -c        # clean
./build.sh 1 1       # build ใหม่
```

{% hint style="danger" %}

### แก้ปัญหา (Troubleshooting)&#x20;

#### Windows: cmake "Permission denied" หรือหา compiler ไม่เจอ

ถ้าติดตั้ง cmake จาก Windows (winget/installer) ไว้ด้วย จะชนกับ cmake ของ MSYS2

**ตรวจสอบ:**

```shellscript
which cmake
```

ถ้าได้ `/c/Program Files/CMake/bin/cmake` แสดงว่าใช้ตัวผิด

**แก้ไข:** เพิ่ม PATH ก่อนรัน cmake

```
export PATH=/ucrt64/bin:$PATH
```

หรือ**ถอนการติดตั้ง cmake ตัว Windows** ออก (ผ่าน Settings > Apps)

#### Windows: SDL2.dll was not found

```bash
cp /ucrt64/bin/SDL2.dll bin/
```

หรือใช้ `build.sh` ซึ่งจะ copy ให้อัตโนมัติ

#### Windows: ThorVG "config.h: No such file or directory"

> **หมายเหตุ:** ปัญหานี้เกิดเฉพาะกรณีที่ไปโหลด repo ต้นฉบับจาก LVGL (`git clone https://github.com/lvgl/lv_port_pc_vscode.git`) มาใช้เอง **repo นี้ (lv\_port\_pc\_vscode\_aic-eec) แก้ไขไว้ให้แล้ว ไม่ต้องทำอะไรเพิ่ม**

ถ้าใช้ repo ต้นฉบับของ LVGL จะเจอ error นี้ตอน build บน Windows/MSYS2:

```
tvgCommon.h:29:10: fatal error: config.h: No such file or directory
```

สาเหตุ: ThorVG (ไลบรารี vector graphics ใน LVGL) ต้องการ `config.h` ที่ cmake ควรจะ generate ให้ แต่บน MSYS2 มันไม่ทำงานถูกต้อง

**วิธีแก้:** ดูรายละเอียดทั้งหมดที่ `patches/fix-thorvg-windows.patch` โดยสรุปคือปิด ThorVG ใน `lv_conf.h` และ `CMakeLists.txt` (ไม่กระทบการใช้งานปกติ)

#### ทุก OS: Build ไม่ผ่านหลังย้ายโฟลเดอร์

ถ้าย้าย directory ของโปรเจค ต้อง clean build ใหม่เพราะ cmake cache จำ path เดิม:

```bash
rm -rf build bin
./build.sh 1 1
```

{% endhint %}


---

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