# 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="https://1856353139-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MClo3nC-1US0rbK8Qau%2Fuploads%2F9zPnekXz6FIubI5lxiqC%2FScreenshot%202026-02-25%20212805.png?alt=media&#x26;token=9c4e818f-3704-41cc-b342-47341683be3c" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1856353139-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MClo3nC-1US0rbK8Qau%2Fuploads%2FkixTL0SNYlOEy4vQVTaG%2FScreenshot%202026-02-25%20213217.png?alt=media&#x26;token=a03161af-dae3-434e-a3a1-b24fe0b6a6e2" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1856353139-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MClo3nC-1US0rbK8Qau%2Fuploads%2FKmEWW9Vj2sxB6mDDwhV3%2FScreenshot%202026-02-25%20213239.png?alt=media&#x26;token=aad5f50b-4585-4541-a65b-b1e07925fd7e" 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 %}