Dev หาทำ! ลองเพิ่ม keyboard ภาษาไทยในเว็บ Keyboard Simulator กันเถอะ

programming Dec 10, 2021

เนื่องจากมีน้องในทีมป้ายยาเรื่อง keyboard และน้องเขาก็เปิดเว็บนี้ให้ดู ชื่อว่า Keyboard Simulator เพื่อประกอบการอธิบายส่วนประกอบของ keyboard layout ต่างๆ เพื่อให้คนฟังเห็นภาพขึ้น

Keyboard Simulator
Design and test virtual keyboards
https://keyboardsimulator.xyz/

ดูเป็นคลิปได้ที่นี่จ้า

https://www.youtube.com/watch?v=dpDmhp1gBuY

ตัวเว็บ Keyboard Simulator นั้น จะเป็นการจำลอง Mechanical Keyboard ในการเลือก keyboard ที่เหมาะกับตัวเรานั่นเอง เราสามารถเลือก layout ในขนาดที่เราต้องการได้ มีทั้ง 100% 95% 80% 75% 65% 60% อันนี้มี 3 แบบนะ คือแบบปกติ แบบ ISO และ WKL 50% ก็จะมี 2 แบบคือ แบบปกติ และ ortho 40% ก็จะมี 2 แบบเหมือน 50% เลย คือ แบบปกติ และ ortho และจบด้วย 10% ที่เป็น numpad ล้วนๆ

เราสามารถเลือกวัสดุและสีของเคสได้ รวมไปถึงสีของ switch ได้ด้วย

Legend Style ก็จะมีแบบ SA ที่มีแค่ตัวหนังสือภาษาอังกฤษอยู่ตรงกลางปุ่ม กับแบบ Cheery ที่ตัวหนังสือภาษาอังกฤษจะอยู่ตรงมุมนั่นเอง

และ Sub Legends จะเลือกได้หลายภาษาเลย เช่น ภาษาอาราบิก ภาษาจีน ภาษาเกาหลี ภาษาญี่ปุ่นจะมีแบบ Hiragana และ Katakana

แล้วเว็บนี้ไม่มี layout keyboard ภาษาไทยจ้า


และในวันนี้เราจะ หาทำ กัน โดยใส่แป้นพิมพ์ภาษาไทยถึง 3 แป้นพิมพ์ด้วยกัน คือ แป้นพิมพ์เกษมณี แป้นพิมพ์ปัตตะโชติ และแป้นพิมพ์มนูญชัย ว่าเมื่อเราลองเพิ่มเข้าไปแล้ว เมื่อเปลี่ยน layout จะเป็นยังไงบ้างนะ

ก่อนอื่นเรา เราทำการ fork project นี้มาที่ github ของเราก่อนนะ

GitHub - crsnbrt/keysim: design and test virtual 3d keyboards.
design and test virtual 3d keyboards. Contribute to crsnbrt/keysim development by creating an account on GitHub.
https://github.com/crsnbrt/keysim

แล้ว clone มาที่เครื่องของเรา แล้วแตก branch ใหม่เพื่อลองกันนะจ๊ะ

ในที่นี้เราลอง work ไปประมาณนึงแล้วกับ layout แบบ เกษมณี ไป จะมีไฟล์ที่เราต้องเข้าไปแก้ ดังนี้

  • subs.js อันนี้เราจะต้องเพิ่มแป้นพิมพ์ในไฟล์นี้
ในรูปคือเพิ่มไปหมดหล่ะ
  • สร้างไฟล์ใหม่ ในที่นี้ชื่อว่า th-kedmanee.json สิ่งที่เราต้องทำคือก้อปไฟล์อื่นมา แหะ เราใส่แต่ละตัวอักษรบนปุ่ม อย่างเช่นปุ่ม A ของเกษมณี bottom จะเป็น ฟ และ top เป็น ฤ แล้วก็ใส่ไปจนครบ ก็จะได้ประมาณนี้
  • เมื่อเราลอง npm start ดูแล้ว จะไม่มี kadmanee ให้ไปเพิ่มในไฟล์ BoardOptions.js ในส่วนของ field

ภาพรวมของการเพิ่ม keyboard ในแต่ละแบบเนอะ

อันนี้ทดลองเป็น version 1 ก่อนว่าเป็นแบบที่เราคิดไหมนะ กับแป้นพิมพ์เกษมณี

ต่อมาเพิ่มแป้นพิมพ์ปัตตะโชติลงไป มีความมึนเพราะไม่คุ้นชิน

สุดท้ายที่มนูญชัย ซึ่งมันเหมาะกับ keyboard layout 40% ที่สุดหล่ะ แต่ก็พิมพ์ชื่อเฌอปรางไม่ได้ เพราะโดนตัดตรง ฌ ไป ไม่เป็นไรนะลู๊ก

ตัว github ที่ทำคือ fork ออกมาเพื่อใส่แป้นพิมพ์ภาษาไทยโดยเฉพาะเลยหล่ะ

GitHub - mikkipastel/keysim: design and test virtual 3d keyboards.
design and test virtual 3d keyboards. Contribute to mikkipastel/keysim development by creating an account on GitHub.

เอ้อออ ตัวเว็บไซต์ Keyboard Simulator นั้น ตัว render ใช้ three.js นะ แล้วตัวเว็บเป็น React

ส่วนตัวเว็บที่ fork สามารถลองเล่นได้ที่นี่เลย และอีกหลายๆ url อิอิ

Keyboard Simulator
Design and test virtual keyboards

กด follow Twitter เพื่อได้รับข่าวสารก่อนใคร เช่น สปอย content ใหม่ หรือสรุป content เร็วๆในนี้จ้า

ติดตามข่าวสารและบทความใหม่ๆได้ที่

อย่าลืมกด like กด share บทความกันด้วยนะคะ :)

Posted by MikkiPastel on Sunday, 10 December 2017

โหลดแอพต่างๆของเราได้ที่นี่

Android Apps by MikkiPastel Studio on Google Play
Innovation application by Android developer girl

Tags

Minseo Chayabanjonglerd

Android Developer ผู้เป็นเจ้าของบล็อก MikkiPastel ที่ชอบทำหลายๆอย่างนอกจากเขียนแอพแอนดรอยด์ เช่น เขียนบล็อก เขียนแชทบอท เรียนออนไลน์ อ่านหนังสือ วาดรูปเล่น ดู netfilx สั่งอาหารอร่อยๆกัน เป็นต้น

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.