HMI Development

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

เตรียมพร้อม 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

2. เปิด MSYS2 UCRT64 terminal

3. รันคำสั่ง:

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

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

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

Linux (Ubuntu/Debian)

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

Linux (Fedora/RHEL)

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

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

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

GitHub - Advance-Innovation-Centre-AIC/lv_port_pc_vscode_aic-eec: AIC-EEC LVGL PC Simulator for Embedded C for IoT Course (Burapha University)GitHub

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

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

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

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

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

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

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

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      # แสดงวิธีใช้

Script จะ:

1. ตั้งค่า SELECTED_PART และ SELECTED_EXAMPLE ใน src/example_selector.h ให้อัตโนมัติ

2. สร้าง build directory + cmake (ถ้ายังไม่มี)

3. Build โปรเจค

4. Copy SDL2.dll ให้อัตโนมัติ (Windows)

5. รันโปรแกรมทันที (ยกเว้นใช้ -b)

---

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

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

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

แล้ว build ใหม่:

cd build
make -j

---

รายการตัวอย่างทั้งหมด

Part 1: LVGL พื้นฐาน + GPIO (11 Examples)

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

Example	ชื่อ	เรียนรู้
1	Hello World	Label, Align, Style
2	Button Counter	Button, Event Callback
3	LED Control	LED Widget, Slider, Brightness
4	Switch Toggle	Switch, State Check
5	GPIO Dashboard	Layout, Multiple Widgets

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

Example	ชื่อ	เรียนรู้
6	HW LED Control	Real GPIO LED On/Off/Toggle
7	HW Button Status	Real Button State Display
8	HW ADC Display	Real ADC Potentiometer Reading
9	HW GPIO Dashboard	Combined LEDs + Button + ADC
10	CapSense Mockup	CapSense UI (no hardware)
11	CapSense Hardware	Real CapSense via I2C

Part 2: แสดงผลข้อมูลเซ็นเซอร์ (11 Examples)

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

Example	ชื่อ	เรียนรู้
1	Slider Bar	Slider, Bar, ADC Visualization
2	Arc Gauge	Arc Widget, Circular Gauge
3	Chart Time Series	Chart, Line Series, Timer
4	Scale Temperature	Scale Widget, Color Zones
5	Sensor Dashboard	TabView, IMU + ADC
6	Chart Dashboard	Bar/Area/Scatter/Line Charts

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

Example	ชื่อ	เรียนรู้
7	Real IMU Display	BMI270 3-Axis Accelerometer Chart
8	Real Sensor Dashboard	Real ADC + IMU Dashboard
9	Real Arc Gauge	Real Potentiometer → Arc Display
10	Real Scale Gauge	Real Potentiometer → Scale Needle
11	Real Chart Dashboard	Real IMU on Multiple Chart Types

Part 3: Oscilloscope & Signal Processing (8 Examples)

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

Example	ชื่อ	เรียนรู้
1	Waveform Generator	Square/Sine/Triangle/Sawtooth
2	Noise Generator	White Noise Display
3	Audio Waveform	I2S Audio Visualization
4	Mic Visualizer	PDM Microphone Display
5	Oscilloscope UI	Full Scope Interface
6	Spectrum Analyzer	FFT Frequency Display

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

Example	ชื่อ	เรียนรู้
7	Custom Panel Scope	Custom Panel Navigation
8	HW Scope	Real Potentiometer + LED3 Scope

Part 4: IPC, Logging, Event Bus (9 Examples)

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

Example	ชื่อ	เรียนรู้
1	IPC Ping Test	IPC Ping/Pong
2	Logging System	Remote Logging
3	IPC Sensor Data	Sensor Data via IPC
4	Event Bus	Event-driven Architecture

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

Example	ชื่อ	เรียนรู้
5	HW IPC LED	LED Control via IPC
6	HW IPC Button	Button Events via IPC
7	HW IPC Dashboard	Full IPC Dashboard
8	Advanced Features	IPC + Event Bus + Logging
9	CapSense IPC	CapSense Touch via IPC

Part 5: WiFi Manager & IoT (8 Examples)

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

Example	ชื่อ	เรียนรู้
1	WiFi Network List	List Widget, Network Data
2	WiFi Connect	Connect/Disconnect Flow
3	TCP/IP Info	Network Information Display
4	Hardware Info	System Information

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

Example	ชื่อ	เรียนรู้
5	WiFi Manager	Full WiFi Manager UI
6	WiFi Status	Real-time Status Dashboard
7	IoT Dashboard	WiFi + Sensors Combined
8	MQTT Preview	MQTT Broker/Topics UI

---

โครงสร้างโปรเจค

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:

cd build
make -j

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

cd build
cmake ..
make -j

---

Clean Build

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

หรือใช้ build.sh:

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

แก้ปัญหา (Troubleshooting)

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

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

ตรวจสอบ:

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

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 เดิม:

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