LVGL Development

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

ติดตั้ง WSL 2

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

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

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

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

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

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

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

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

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

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

netstat -abno|findstr 6000

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

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 & 

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

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

ติดตั้งโปรแกรม Visual Studio Code

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

# 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. หลังจากใส่คำสั่งด้านล่างเสร็จจะขึ้นหน้่าต่างดังรูป

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

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

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

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