Advertised Video

ฉบับ 30 วินาที

https://www.youtube.com/watch?v=c0LSYWcIAo8&feature=youtu.be

ฉบับตัวเต็ม

https://www.youtube.com/watch?v=j2hR9wYbslg&feature=youtu.be

Kivy on Android

เนื่องจาก SPN ต้องการให้ลองไปเล่น kivy บนมือถือ ก็เลยทำการโหลด Kivy Launcher มาจาก Play Store ของมือถือ Android แล้วสร้างโฟลเดอร์ ชื่อ kivy ขึ้นมาไว้ในเครื่อง แล้วก็จากที่อ่านมาก็คือเราสามารถ ที่จะนำ Project Kivy ต่างๆ ใส่เข้าไปได้ แต่ว่า ใน Project นั้นจะต้องมี ไฟล์ android.txt ไว้ เพื่อทำการเซ็ตค่าของการรัน kivy ด้วย

โดย title จะเป็นหัวข้อที่จะแสดงใน App มือถือเรา ส่วน Author ก็เป็นการบอกว่าใครเขียน ส่วน orientation จะเป็นการตั้งค่าว่าจะให้เป็นแนวนอนหรือแนวตั้ง (landscape & portrait)

หลังจากนั้นก็สามารถกดรัน kivy บน App ได้เลย

ตอนแรกผมก็คิดอย่างนั้นแต่มันกลับ ไม่ได้ซะงั้น พอกดรันแล้วมันก็เด้งออกหน้าจอ จากนั้นก็ลองไปถามเพื่อนว่ามันมีสาเหตุจากอะไร (Sarik Kampan) เพื่อนก็บอกมาว่าให้ลอง เปลี่ยนชื่อไฟล์หลักนั้นให้เป็น main.py สิแล้วจะรันได้ ซึ่งพอเปลี่ยนก็ทำได้จริงๆ ซึ่งเหตุผลที่ได้ ผมก็เดาว่ามันน่าจะมาจากการที่ว่า ถ้ามีไฟล์ .py หลายๆไฟล์ App จะไม่รู้ว่าตัวเป็นเป็น ตัวหลักก็เป็นได้

แล้วผลที่ได้จากการนำ ไปใช้กับเกม Pong, OX, ComicCreator และ Memo

Memo pt.8.1 (Setting)

จาก อ.SPN ให้ลองใช้ issues บน bitbucket แล้วให้ตั้งหัวข้อเกี่ยวกับการทำ setting ใน Memo ดู ก็เลยไปลอง ทดลองทำดู ได้ผลมาดังนี้

ซึ่งเราก็ได้ทำไปจนเป็นรูปเป็นร่างแล้ว

ส่วนที่เริ่มทำส่วนแรกจะเป็นส่วนของ ขนาดตัวอักษร font และสีพื้นหลัง โดยจะเก็บไฟล์การ setting นี้ให้อยู่ใน ไฟล์ .txt โดยจะมีลักษณะดังนี้

โดยหลักการของเราคือจะมีการสร้าง Class Setting ขึ้นมาโดยจะมี method ใหม่ดังนี้

+data()

+all_set()

+font_size_set()

+font_name_set()

+bg_color_set)

โดยผมจะขอเริ่มต้นที่ method data() ก่อน

ใน method นี้ก็ไม่ได้มีอะไรมากเลย เป็นเพียงการเก็บข้อมูลในไฟล์ .txt ให้เป็นชุดๆ โดยจะให้เป็น list เอาไว้ โดยใช้คำสั่ง split เมื่อเจอช่องว่าง จะแยกเป็น ลิสตัวใหม่ จากไฟล์ .txt ด้านบนจะเห็นได้ว่าแบ่งได้เป็น 8 ตัว index (0-7)

ต่อไปก่อนที่จะไปจุดอื่น จะขออธิบายเกี่ยวกับ Class Option ก่อน

ในคลาสนี่จะมีตัวแปร 2 ตัวคือ font_size กับ font_name โดยสองตัวนี้จะ เป็นตัวแปรที่ใช้ในการใส่ขนาดและ font ทุุกข้อความในโปรแกรม 

method font_size_set()

ทำหน้าที่ในการ รับค่ามาจาก method data() โดยจะใช้ ตัวที่ 2 ในลิสต์ มาเทียบ แล้วใส่ค่าตัวแปร font_size ในคลาส Option

method font_name_set()

ทำหน้าที่โดยรับค่า จาก method data() อีกเช่นเคย แต่ว่าจะเอาตัวตำแหน่งที่ 4 แล้วนำมาบวกกับ .ttf เพราะในไฟล์ .txt จะรับมาเฉพาะชื่อ font ไม่มีนามสกุล แล้วก็นำไปใส่แทนค่าใน font_name ในคลาส Option กับ StatusBar ลืมบอกไปว่าในส่วนของ StatusBar ก็มีตัวแปรนี้เช่นกัน 

method bg_color_set()

จะทำหน้าที่เหมือนกับที่ผ่านมาทั้งสองตัว แต่ว่าในส่วนนี้จะเป็นเรื่องของสีพื้นหลัง โดยจะรับค่าจาก method data() จากตำแหน่งตัวที่ 6 แล้วจะใช้ Window.clearcolor =(r,g,b,a) ตั้งค่าสี ตาม keyword ที่กำหนด

Memo pt.7 (การใส่ฟอนต์ไทย)

ในตอนแรก Memo นั้นจะยังไม่สามารถอ่าน ภาษาไทยได้เลย ต้องทำการหาฟอนต์ที่มันอ่านภาษาไทยได้มาลง  ก็เลยได้ไปหา มา แล้วยังมีเพื่อนผู้แสนดี แนะนำมาว่า มันสวยมาก ก็เลยลองนำมาใช้ดู นั้นคือ font ที่มีชื่อว่า WareeSans

ซึ่ง ถ้ายังไม่ได้เปลี่ยน font มันก็จะอ่านภาษาไทยเป็นรูปสี่เหลียมๆ แต่เมื่อทำการเปลี่ยน โดยวิธีการเปลี่ยน font นั้นก็คือ นำ font ที่เราต้องการไปใส่ในโฟลเดอร์ไฟล์งานก่อน แบบนี้

ส่วนใน py กับ kv จากปกติ จะใช้คำสั่ง

font_name="Waree" (Python)

font_name:"Waree" (Kivy)

ซึ่ง Waree เป็น font ที่มีอยู่บน Linux อยู่แล้ว แต่ถ้าหากนำไปรันที่ os อื่นอาจจะเกิดปัญหาได้ เราจึงต้องใส่ WareeSans ที่เป็น font ที่สามารถ โหลดได้ฟรี แบบถูก กม. มาใช้  แล้วใส่ลงในโฟลเดอร์งาน ตามที่ได้กล่าวไปแล้วสักครู่ 

โดยเวลาเรียกใช้ก็จะเปลี่ยนจากปกติเป็น

font_name="WareeSans.ttf" (Python)

font_name:"WareeSans.ttf" (Kivy)

ซึ่งกรณีนี้เป็นการเรียกใช้แบบ กรณีที่ ไฟล์ font เราไม่ได้อยู่ในโฟลเดอร์ ถ้าหากอยู่ใน โฟลเดอร์เราก็ต้องใช้เป็น

font_name = './folder/WareeSans.ttf'  (Python)

font_name: './folder/WareeSans.ttf' (Kivy)

หรือ ก็คือต้องมีการกำหนด path ให้กับมันด้วย (Credit:Sarik Kampan)

Memo pt.6 (delete files)

4. Delete File

        มีการเรียกใช้ method delete_box() เมื่อมีการกดและปล่อยปุุ่ม

        ใน method ดังกล่าวจะมีการใช้คำสั่ง ของ os คือ os.remove() โดยจะทำการลบไฟล์ที่ self.desk.filechooser.selection[0] หรือ ก็คือตัวที่ถูกเลือกอยู่นั้นเอง หลังจากนั้น จะมีการเด้งหน้าต่างขึ้นมาเพื่อสอบถามความแน่ใจ ว่าจะลบจริงหรือไม่ และ ชื่อไฟล์ที่จะลบใช่ชื่อนี้ไหม ลบถูกแน่นะ แล้วจะมีส่งค่าไปให้กับทาง status bar เพื่อ update ค่าอีกด้วย

Memo pt.5 (import file)

4. Import File

        ไฟล์ kv จะมีการเรียกใช้ method importfile()

        โดยใน method นี้จะ มีการสร้างการ ดูไฟล์ แบบ icon view โดยเอามาจาก Filechooser โดยจะมีการตั้ง filters ได้ หรือ ตั้งว่าจะเห็นได้เฉพาะไฟล์ แล้วจะมีการสร้างปุ่ม Import โดย เมื่อกดปุ่มดังกล่าวแล้วปล่อย จะเรียกใช้ method imported () 

        ใน method imported() จะทำการ copy ไฟล์จากที่เราทำการเลือก แล้วไปใส่ในโฟลเดอร์ Storage แล้วทำการ update_files() ก็จะเห็นได้ว่ามีการ import ไฟล์เข้ามาในโฟลเดอร์ของเราเป็นที่เรียบร้อยแล้ว สาเหตุที่ต้องใช้ try....except ใน method นี้ก็เพราะว่า ถ้ากดปุ่ม import โดยไม่ได้เลือกก็จะไม่ให้มีอะไรเกิดขึ้น

Memo pt.4 (view file)

3. View

        ในไฟล์ kv มีการเรียกใช้ method เมื่อกดปุ่มของ View โดยจะเรียก method viewfile()

        ใน method นี่จะมีการทำงาน 2 แบบเรียกดูแบบ ไฟล์ข้อความ กับ ไฟล์รูปภาพ โดยจะมีการเช็ค substring 4 ตัวท้าย ซึ่งจะเป็นชื่อไฟล์ พอดี (.txt, .jpg) โดยถ้าเป็นไฟล์ข้อความ ก็จะใช้ TextInput แต่จะตั้ง keyword readonly ให้เป็น true เพื่อที่จะไม่สามารถแก้ไขได้

        หากเป็นไฟล์รูปภาพ ก็จะใช้ Image เพื่อใช้ในการเปิดไฟล์ภาพได้

     

        การทำงานส่วนใหญ่ก็ไม่ค่อยมีอะไรมากมาย เพราะเป็นเพียงการเรียกดูไฟล์