สร้าง GUI ให้ Python ด้วย Kivy (Part1)
Post id: 40 — kivy gui
Date: 19/09/2022
1. การตั้งชื่อ App
ชื่อของ App จะไม่ใช่ชื่อเดียวกันกับไฟล์ แต่จะเป็นชื่อของ class ที่เรียกใช้งาน App ดังตัวอย่างนี้
ไฟล์นี้มีชื่อว่า sample_kivy.py
แต่เมื่อรันออกมาแล้วจะเห็นว่าชื่อ App คือ “MyName” ไม่ใช่ “Sample_kivy”
หากสังเกตุที่โค้ดจะเห็นว่าชื่อ App ตรงกับชื่อคลาสในบรรทัดที่ 5 โดยตัดคำว่า App ออกไป หรือก็คือการกำหนดชื่อ App สามารถกำหนดได้ตรงนี้นั่นเอง เช่น หากเปลี่ยนชื่อคลาสจาก MyNameApp(App) ให้เป็น HippoApp(App) ชื่อของ App ก็จะกลายเป็น Hippo ดังนี้
2. การกำหนดขนาดและการล็อคขนาดของ App (ขนาดของ window)
จากตัวอย่างแรก หากใครได้ลองรันดูจะพบว่าขนาดของ App (หรือขนาดของ Window) มันสามารถ resize ได้ หากเราต้องการกำหนดขนาดของ window และล็อคขนาดเอาไว้ไม่ให้ user เปลี่ยนแปลงขนาดได้ สามารถทำได้ดังนี้
หมายเหตุ ในบรรทัดที่ 13 นอกจากการกำหนดเป็น 0 หรือ 1 สามารถใช้เป็น True หรือ False แทนก็ได้เช่นกัน
Config.set('graphics', 'resizable', False)ผลลัพธ์ที่ได้
จะเห็นว่าตอนนี้ App ของเราไม่สามารถ resize ได้แล้ว
อีกวิธีคือการใช้โมดูล Window ของ kivy ดังตัวอย่างต่อไปนี้
from kivy.core.window import WindowWindow.size = (300, 100) # (width, height)
แต่ว่าระวังเอาไว้ด้วยนะครับ หากใช้ core.window คำสั่ง Config จะไม่ทำงานนะ
3. การกำหนดสีพื้นหลัง
ถ้าพูดตามตรง สีพื้นหลังของ App ไม่สามารถเปลี่ยนได้นะครับ มันถูกตั้งค่าไว้ให้เป็นสีดำเสมอ
แต่ว่าก็ยังมีวิธีอ้อมๆ ที่สามารถทำให้สีของ App เปลี่ยนไปได้เช่นกัน นั่นคือการใช้ Widget ที่ชื่อ Canvas นั่นเองครับ พูดง่ายๆ ก็คือ เหมือนเอาผืนผ้าใบสีที่เราต้องการมาแปะทับพื้นหลังเอาไว้อีกทีนั่นแหละครับ ตัวอย่างเช่น
ตัวอย่างผลรัน
โค้ดข้างบนนี้อาจดูยาวไปสักหน่อยนะครับ แต่หากแยกดูเป็นส่วนๆ ก็จะเข้าใจได้ง่ายขึ้น
จริงๆ แล้วโค้ดที่ใช้สร้าง canvas มีเพียงบรรทัดที่ 12–21 เท่านั้น แต่ว่าหากสร้างขึ้นมาไว้เฉยๆ อาจมีปัญหาได้ถ้าขนาดของ App ถูก user resize ซึ่งปัญหานี้แก้ได้ด้วย 2 วิธีคือ
วิธีที่ 1 ใช้ Config เพื่อ set property ‘resizable’ ของ graphics ให้เป็น 0 หรือ False ดังตัวอย่างในบรรทัดที่ 35 (แต่ในตัวอย่างผมกำหนดให้เป็น 1 เอาไว้ เพื่อโชว์การแก้ปัญหาวิธีที่ 2 ครับ)
วิธีที่ 2 เขียน method เพิ่มเติมเพื่อคอยปรับขนาดของ canvas ตามขนาดของ Window ซึ่งก็คือโค้ดในบรรทัดที่ 23–25 แต่ว่าหากจะให้ canvas ทำงานตาม method นี้ได้ ก็ต้องผูก method นี้เข้ากับ canvas ก่อน ซึ่งก็คือโค้ดบรรทัดที่ 20–21
และส่วนสุดท้ายที่สำคัญที่สุดคือ บรรทัดที่ 13 คำสั่ง Color ใช้เพื่อกำหนดสีให้กับ canvas นั่นเองครับ โดยรูปแบบคือ
Color(r, g, b, a) # 'a' is transparentหมายเหตุ
การใช้คำสั่ง Config ไม่ได้มีผลกับ App ในทันที แต่ App จะไปอ่านค่า Config ที่อยู่ในไฟล์มาก่อน ดังนั้นถึงแม้เราจะเปลี่ยนค่า Config แล้ว แต่ App ก็จะยังไม่เปลี่ยนค่าในครั้งแรก
ในครั้งแรก โปรแกรมจะใช้ค่า Config อันเดิมจากไฟล์ config ก่อน แล้วค่อยเขียนค่า config ใหม่ลงไปในไฟล์ config
ดังนั้นสรุปง่ายๆ ก็คือ เราจะเห็นค่าที่เรา config เอาไว้ ก็ต่อเมื่อกดรันครั้งที่ 2 นั่นเองครับ
4. การกำหนดสีตัวอักษร
ทำได้ 2 วิธีดังนี้
วิธีที่ 1 คือการเซ็ตค่า color ให้กับ label โดยตรง
วิธีที่ 2 คือการใช้ markup ซึ่งจะทำให้เราใช้โค้ดเหมือนกับ html syntax ในการกำหนดรูปแบบตัวอักษรได้
ผลรัน
5. การใช้ inputtext button และ popup
เนื่องจากว่าหากหยิบยกมาแค่อันเดียว มันจะมองเห็นภาพได้ยาก เพราะปกติแล้ว object พวกนี้มันจะทำงานร่วมกันเสมอ ดังนั้นผมจึงนำมากล่าวรวมกันในตัวอย่างเดียวเลย
ถ้าหากผมยกมาแค่ object เดียวอย่างเช่น inputtext สคริปต์ก็จะไม่สามารถทำอย่างอื่นได้นอกจากรับแค่ inputtext เท่านั้น คุณก็จะไม่เห็นว่าวิธีการอ่าน inputtext นั้นทำอย่างไร
ดังนั้นตัวอย่างนี้อาจจะยาวไปสักหน่อย แต่ค่อยๆ ทำความเข้าใจนะครับ ไม่ยากเกินไปแน่นอน
ผลลัพธ์
พาร์ทแรกของเนื้อหา ผมขอจบเอาไว้เพียงเท่านี้ก่อนนะครับ ซึ่งความรู้เพียงเท่านี้ก็เพียงพอจะทำ App ธรรมดาทั่วไปได้แล้ว ส่วนในพาร์ทต่อๆ ไป จะเป็นเนื้อหาที่ลึกกว่านี้ หากใครสนใจก็ติดตามกันต่อไปได้เลยครับ
