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

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

![](/files/-MfRY6U81Lf042YvajJn)


---

# 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/general/getting-start.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.