> For the complete documentation index, see [llms.txt](https://docs.aic-eec.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.aic-eec.com/general/getting-start.md).

# LVGL Development

หัวข้อนี้เป็นการแนะนำเพื่อติดตั้งการแสดงภาพของแอพพลิเคชั่น (GUI) ผ่านทาง Window Subsystem Linux : WSL  คิดว่าหลายคนน่าจะมี WSL อยู่บนเครื่องแล้ว ถ้าใครยังไม่ได้ติดตั้งลองดูตามนี้ครับ 

{% content-ref url="/pages/-MNM88uYQ8SIjWIB0w0t" %}
[ติดตั้ง WSL 2](/computer-operation-systems/linuxos-preparation/wsl-2.md)
{% endcontent-ref %}

{% hint style="info" %}
**คำเตือน** : "ภายในลิ้งมีสองหัวข้อนะครับ" ใครเกิดปัญหาในการติดตั้งสามารถหลังไมค์ใน Classroom เพื่อสอบถามหรือ comment ทิ้งไว้ได้เลยครับ
{% endhint %}

1. ลองเปิด WSL ของเราดูก่อนครับ ว่ายังใช้งานได้ไหมครับ ถ้าใช้งานไม่ได้ให้บอกพี่ๆ RA ใน Group Line ครับ ถ้าใช้งานได้จะเป็นดังรูปด้านล่าง แตกต่างกันเพียงชื่อ User 

> "**คำเตือน** : "ลิ้งมีสองหัวข้อนะครับ" ใครเกิดปัญหาในการติดตั้งสามารถหลังไมค์ใน Classroom เพื่อสอบถามหรือ comment ทิ้งไว้ได้เลยครับ

![](https://paper-attachments.dropbox.com/s_00913CA5609A83463BCFB163D3A71BD776327875F7BB32C5584B62984F69CF79_1613646060155_image.png)

2\. ทำการติดตั้ง โปรแกรม **VcXsrv** ลงบนเครื่องของเรา เพื่อใช้ในการแสดงหน้า Gui ที่ใช้ในการเขียนโปรแกรม ดังลิ้งด้านล่าง [VcXsrv Windows X Server download | SourceForge.net](https://sourceforge.net/projects/vcxsrv/) กด Next ไปเรื่อยๆจนโหลดเสร็จ ให้กด Finish ครับ จะได้โปรแกรมหน้าตาดังรูป

![](https://paper-attachments.dropbox.com/s_00913CA5609A83463BCFB163D3A71BD776327875F7BB32C5584B62984F69CF79_1613646580081_image.png)

3\. คลิกขวาที่ icon Xlaunch → เลือก Properties 

* ใส่ข้อความที่ Target

```
    "C:\Program Files\VcXsrv\xlaunch.exe" :0 -ac -terminate -lesspointer -multiwindow -clipboard -wgl -dpi auto
```

![](https://paper-attachments.dropbox.com/s_00913CA5609A83463BCFB163D3A71BD776327875F7BB32C5584B62984F69CF79_1613646927168_Capture.PNG)

* กด apply แล้วกด ok (ถ้าใครขึ้นหน้าให้รันผ่าน administrator ให้กด ok)

4\. กดเปิด XLaunch ผ่าน icon แล้วกด next จนถึงหน้า Extra settings แล้วทำการคลิกเช็ค Disable access control ดังภาพด้านล่าง

![](https://paper-attachments.dropbox.com/s_00913CA5609A83463BCFB163D3A71BD776327875F7BB32C5584B62984F69CF79_1613647390367_Capture1.PNG)

5\. เข้าหน้า Powershell ด้วย administrator เพื่อตรวจสอบว่าพร้อมทำงานหรือยัง

```
netstat -abno|findstr 6000
```

![](https://paper-attachments.dropbox.com/s_00913CA5609A83463BCFB163D3A71BD776327875F7BB32C5584B62984F69CF79_1613647115921_image.png)

จากรูปแสดงว่าพร้อมทำงานแล้ว **`ถ้าไม่ได้พิมคำสั่งจะไม่ขึ้นอะไรเลย`**

6\. หลังจากนั้นเปิด Ubuntu WSL2 บนเครื่องแล้วพิมคำสั่งดังนี้

```
# install terminal application
$ sudo apt update && sudo apt-get install terminator
# Export Xserver Display 
$ DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2}'):0 terminator & 
```

ถ้าขึ้นหน้าต่างดังรูปด้านล่างถือว่าผ่าน

![](https://paper-attachments.dropbox.com/s_00913CA5609A83463BCFB163D3A71BD776327875F7BB32C5584B62984F69CF79_1613647629619_image.png)

7\. ถ้าผ่านแล้วให้ทำการกดปิดและกด Ctrl + c เพื่อยกเลิกการแสดงแล้วทำการโหลดแพคเกต และติดตั้ง environment LVGL ที่จะใช้งานกัน ***ทุกคนต้องมี Visual studio code บนเครื่องเพื่อใช้งาน***

{% content-ref url="/pages/-MNSeOAF67rgBiIU-Xvs" %}
[ติดตั้งโปรแกรม Visual Studio Code](/c-c++-for-embedded-programming/development-environment-preparation/visual-studio-code.md)
{% endcontent-ref %}

{% hint style="info" %}
**คำเตือน** : "ภายในลิ้งมีสองหัวข้อนะครับ" ใครเกิดปัญหาในการติดตั้งสามารถหลังไมค์ใน Classroom เพื่อสอบถามหรือ comment ทิ้งไว้ได้เลยครับ
{% endhint %}

```
# Test environment LVGL
$ git clone --recursive https://github.com/lvgl/lv_sim_vscode_sdl
$ sudo apt-get update && sudo apt-get install -y build-essential libsdl2-dev
$ cd lv_sim_vscode_sdl && code . 
```

8\. หลังจากใส่คำสั่งด้านล่างเสร็จจะขึ้นหน้่าต่างดังรูป

![](https://paper-attachments.dropbox.com/s_00913CA5609A83463BCFB163D3A71BD776327875F7BB32C5584B62984F69CF79_1613648207015_image.png)

9\. กด F5 จะขึ้นหน้าต่างดังรูป

![](https://paper-attachments.dropbox.com/s_00913CA5609A83463BCFB163D3A71BD776327875F7BB32C5584B62984F69CF79_1613648251313_image.png)

10\. กดปิดแล้วกด enter ที่ terminal แล้วทำการพิมคำสั่งลงใน terminal ดังนี้

```
$ cd build/bin/
$ export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2}'):0 
$ ./demo
```

จะได้หน้าต่างดังรูป

![](https://1856353139-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MClo3nC-1US0rbK8Qau%2F-MfRY1a41b7fJdZYpN13%2F-MfRY6U81Lf042YvajJn%2Fimage.png?alt=media\&token=f7cf0915-c3dd-4c18-8a7a-0a521ba3bfc9)