การออกแบบ GUI

Graphical User Interface (GUI)

GUI ย่อมาจาก Graphical User Interface GUI (อ่านว่า จียูไอ หรือ กุย)คือ การติดต่อกับผู้ใช้โดยใช้ภาพสัญลักษณ์ เป็นการออกแบบส่วนของโปรแกรมคอมพิวเตอร์ให้มีการโต้ตอบกับผู้ใช้ โดยการใช้ Icon ,รูปภาพ และสัญลักษณ์อื่น ๆ เพื่อแทนลักษณะต่าง ๆ ของโปรแกรม แทนที่ผู้ใช้จะพิมพ์คำสั่งต่าง ๆ ในการทำงาน ช่วยทำให้ผู้ใช้งานสามารถทำงานได้ง่าย และรวดเร็วขึ้น ไม่จำเป็นต้องจดจำคำสั่งต่าง ๆ ของโปรแกรมมากนัก ถือเป็นวิธีการให้ความสะดวกแก่ผู้ใช้คอมพิวเตอร์ ให้ติดต่อสื่อสารกับระบบโดยผ่านทางภาพ เช่น ใช้เมาส์กดเลือก icon แทนการพิมพ์คำสั่งดังแต่ก่อน โดยเฉพาะในบางโปรแกรมที่มีคำสั่งมาก ๆ เช่น โปรแกรม Autocad ที่ใช้ในการวาดแบบ ซึ่งจะมี คำสั่งต่าง ๆ ที่ใช้ในการสร้างรูปมากมาย ผู้ใช้สามารถใช้เมาส์ (mouse) เลือกคำสั่งที่ต้องการจะวาดจาก Icons ที่ปรากฏในโปรแกรมและใช้งานได้เลย โดยไม่ต้องพิมพ์คำสั่งต่าง ๆ ทางแป้นพิมพ์ ช่วยทำให้เกิดความรวดเร็วในการทำงาน และไม่ต้องเสียเวลาในการเรียนรู้และจดจำคำสั่งที่ต้องการมากนัก เพียงดูจาก Icons ที่ปรากฏในโปรแกรมก็สามารถใช้งานได้ทันที ตัวอย่างโปรแกรมที่ช่วยออกแบบโปรแกรมที่ใช้ GUI เช่น Microsoft Visual Basic เป็นต้น

PyQt

ภาษา Python สามารถสร้าง GUI ได้อย่างไม่ยากนัก มีมอดูลอยู่หลายตัวที่ใช้ทำแบบนี้ได้ เช่น tkinter, kivy, wxpython เป็นต้น และที่นิยมใช้กันอย่างกว้างขวางก็คือ PyQt ซึ่งเป็นมอดูลสำหรับเขียนเฟรมเวิร์ก Qt ด้วยภาษา Python Qt นั้นได้ถูกพัฒนาขึ้นมาเรื่อย ๆ ปัจจุบันเวอร์ชัน Qt6 เพิ่งจะออกมา โดยมอดูลของ Qt6 ใน Python นั้นมีชื่อว่า PyQt6 แต่เนื่องจาก Qt6 เพิ่งออกและยังมีข้อมูลน้อยอยู่ ในที่นี้จะยังคงสอน Qt5 เป็นหลัก จนกว่า Qt6 จะเริ่มอยู่ตัวและถูกใช้งานอย่างกว้างขวาง

ขั้นตอนการออกแบบ GUI ด้วย PyQt5 (สำหรับเตรียมทำตู้จำหน่ายขนม) มีดังนี้

1. ออกแบบหน้าจอหลัก (main.ui)

1.1 สร้างโฟลเดอร์ snack_pic ในโฟลเดอร์ Snack Machine Vending จากนั้นคัดลอกรูปภาพขนม (ตัดพื้นหลังและปรับขนาดรูปภาพให้เท่ากันก่อน) มาใส่ในโฟลเดอร์ snack_pic ดังรูป

1.2 เปิดโปรแกรม QT 5 Designer โดยคลิกที่สัญลักษณ์ จากนั้นคลิกเมนู Programming แล้วเลือกโปรแกรม QT 5 Designer

1.3 คลิกเลือก templates/forms แบบ Dialog without Buttons แล้วคลิกปุ่ม Create

1.4 กำหนดความกว้างของหน้าจอ ให้มีขนาดเท่ากับหน้าจอทัชสกรีน (ขนาดหน้าจอทัชสกรีนในที่นี้ คือ 1280 x 720) โดยกำหนดค่า geometry ในส่วนของช่อง Width = 1280 และช่อง Height = 720

1.5 กำหนดชื่อหัวข้อด้านบนของหน้าต่าง โดยกรอกข้อความในช่อง windowTitle

1.6 สร้างกล่องข้อความ “Snack Vending Machine”

1.6.1 คลิกลาก Label ไปวางบนหน้าจอ และดับเบิ้ลคลิกที่ Label เพื่อเปลี่ยนข้อความ

1.6.2 คลิกที่ Property font เพื่อกำหนดรูปแบบตัวอักษรและขนาดของตัวอักษร

1.6.3 คลิกขวาที่ข้อความ จากนั้นเลือกคำสั่ง Change stylesheet…

1.6.4 คลิกลูกศรหลัง Add Color เลือกคำสั่ง Color จากนั้นเลือกสีข้อความตามต้องการ แล้วคลิกปุ่ม OK

1.7 สร้างกรอบสี่เหลี่ยมเพื่อกำหนดพื้นที่ในการวางปุ่มเลือกขนม

1.7.1 ลาก Label ไปวางบนหน้าจอ จากนั้นลากกำหนดขนาดตามต้องการ

1.7.2 กำหนดเส้นขอบ โดยกำหนด Property frameShape ในที่นี้จะเลือกแบบ StyledPanel

1.7.3 ดับเบิ้ลคลิกที่กล่องข้อความ จากนั้นลบข้อความ TextLabel ทิ้งไป

1.7.4 คลิกขวากล่องข้อความ จากนั้นเลือกคำสั่ง Change stylesheet…

1.7.5 คลิกลูกศรหลัง Add Color เลือกคำสั่ง Background-color จากนั้นเลือกสีพื้นหลังตามต้องการ แล้วคลิกปุ่ม OK

1.8 สร้างปุ่มเลือกขนม 6 ปุ่ม

1.8.1 ลาก Push Button ไปวางบนกรอบสี่เหลี่ยม จากนั้นดับเบิ้ลคลิกบนปุ่ม แล้วลบข้อความบนปุ่มทิ้ง

1.8.2 กำหนดให้แสดงรูปภาพบนปุ่ม โดยคลิกลูกศรด้านหลัง Property icon จากนั้นเลือกคำสั่ง Choose File…

1.8.3 เลือกรูปภาพขนมจากโฟลเดอร์ snack_pic จากนั้นคลิกปุ่ม Open

1.8.4 ปรับ Property iconSize (ขนาดไอคอน) ให้น้อยกว่าหรือเท่ากับขนาดรูป (ในที่นี้รูปขนาด 375*375 จึงปรับขนาดไอคอนให้มีขนาด 250*250 ดังรูป) จากนั้นก็ปรับขนาดปุ่มให้พอดีกับรูปภาพ โดยลากจุดทั้ง 8 จุดที่อยู่รอบปุ่ม

1.8.5 คัดลอกปุ่มขนมอันแรกให้เพิ่มขึ้นอีก 5 ปุ่ม

1.8.6 เปลี่ยนรูปภาพบนปุ่มที่ 2 – 6 ให้เป็นรูปภาพขนมอีก 5 ชนิด โดยคลิกที่ปุ่ม จากนั้นคลิกลูกศรด้านหลัง Property icon แล้วเลือกคำสั่ง Choose File… เลือกรูปภาพขนมในโฟลเดอร์ snack_pic

จะได้ผลลัพธ์ดังรูป

1.8.7 คลิกปุ่มขนมทีละปุ่ม จากนั้นแก้ไขชื่อปุ่มใน Property objectName ดังนี้

- ปุ่มขนมฮานามิ ตั้งชื่อ objectName = btnHanami

- ปุ่มขนมสแน็คแจ็ค ตั้งชื่อ objectName = btnSnackjack

- ปุ่มขนมเลย์ ตั้งชื่อ objectName = btnLays

- ปุ่มขนมปาปริก้า ตั้งชื่อ objectName = btnPaprika

- ปุ่มขนมปาร์ตี้ ตั้งชื่อ objectName = btnParty

- ปุ่มขนมแจ็กซ์ ตั้งชื่อ objectName = btnJaxx

1.9 สร้างข้อความ “แตะเลือกขนม”

1.9.1 ลาก Label มาวางด้านล่างหน้าจอ ดับเบิ้ลคลิกเปลี่ยนข้อความเป็น “แตะเลือกขนม” จากนั้นกำหนด Property objectName = lblSnack

1.9.2 กำหนดรูปแบบตัวอักษรที่ Property font

1.9.3 ปรับข้อความให้ชิดขวา โดยกำหนด Property alignment Horizontal = AlignRight

1.10 สร้างช่องแสดงราคาขนม

1.10.1 ลาก Label มาวางบนหน้าจอ ดับเบิ้ลคลิกเปลี่ยนข้อความเป็น “0” จากนั้นกำหนด Property objectName = lblPrice

1.10.2 กำหนดรูปแบบตัวอักษรที่ Property font

1.10.3 ปรับข้อความให้อยู่ตรงกลาง โดยกำหนด Property alignment Horizontal = AlignCenter

1.10.4 เปลี่ยนสีข้อความและสีพื้นหลัง โดยคลิกขวาที่ช่องแสดงราคาขนม จากนั้นเลือก Change styleSheet

คลิกลูกศรด้านหลัง Add Color แล้วเลือก color เพื่อเลือกสีข้อความ จากนั้นคลิกลูกศรด้านหลัง Add Color อีกครั้ง แล้วเลือก background-color เพื่อเลือกสีพื้นหลังข้อความ แล้วคลิกปุ่ม OK

1.11 คัดลอก Label แสดงราคาขนม นำมาวางต่อจาก Label แสดงราคาขนม จากนั้นเปลี่ยนข้อความเป็น “บาท”

1.12 สร้างปุ่ม “ยืนยัน”

1.12.1 ลาก Push Button มาวาง แล้วดับเบิ้ลคลิกเปลี่ยนข้อความบนปุ่มเป็น “ยืนยัน”

1.12.2 แก้ไข Property objectName = btnOK

1.12.3 กำหนดรูปแบบตัวอักษรที่ Property font และสีพื้นหลังปุ่มที่ Property styleSheet

1.13 สร้างปุ่ม “ยกเลิก” โดยคัดลอกปุ่มยืนยัน จากนั้นดับเบิ้ลคลิกเปลี่ยนข้อความบนปุ่มเป็น “ยกเลิก” และแก้ไข Property objectName = btnClear

จะได้หน้าจอ GUI ดังรูป

1.14 คัดลอกกรอบสีฟ้า ไปวางด้านขวาของหน้าจอ จากนั้นคลิกขวาเลือก Change styleSheet แล้วคลิกลูกศรด้านหลัง Add Color เลือกคำสั่ง background-color เพื่อเปลี่ยนสีพื้นหลัง ดังรูป

จะได้กรอบสี่เหลี่ยมเพิ่มขึ้นมาอีก 1 กรอบ ดังรูป

1.15 สร้างกล่องข้อความ “ขั้นตอนการใช้งาน”

1.15.1 คัดลอกกรอบสี่เหลี่ยมขึ้นมาอีก 1 อัน วางด้านบนกรอบสี่เหลี่ยมด้านขวา แล้วเปลี่ยนสีพื้นหลังที่ Property styleSheet

1.15.2 ลาก Label มาวางด้านบนกรอบสี่เหลี่ยม จากนั้นแก้ไขข้อความ ดังรูป

1.16 สร้างช่องแสดงข้อมูลลูกค้า

1.16.1 คัดลอกกรอบสี่เหลี่ยมขึ้นมาอีก 1 อัน วางด้านล่างขั้นตอนการใช้งาน แล้วเปลี่ยนสีพื้นหลังที่ Property styleSheet

1.16.2 ลาก Label มาวางในกรอบสี่เหลี่ยม จากนั้นดับเบิ้ลคลิกแก้ไขข้อความ จัดวาง Label แก้ไขรูปแบบข้อความใน Property font และเปลี่ยนสีข้อความใน Property styleSheet ดังรูป

1.16.3 ลาก Label มาวางด้านหลังข้อความ “รหัสลูกค้า :” จากนั้นปรับรูปแบบข้อความใน Property font ใส่สีข้อความและพื้นหลังใน Property styleSheet และแก้ไข objectName = lblID

1.16.4 คัดลอก Label แสดงรหัสลูกค้า นำมาวางด้านหลังข้อความ “ชื่อลูกค้า :” จากนั้นแก้ไข objectName = lblName

1.16.5 คัดลอก Label แสดงรหัสลูกค้า นำมาวางด้านหลังข้อความ “เงินคงเหลือ :” จากนั้นแก้ไข objectName = lblMoney

1.17 สร้างปุ่มชำระเงินและยกเลิกการชำระเงิน

1.17.1 คัดลอกปุ่มยืนยัน มาวางด้านล่างส่วนแสดงข้อมูลลูกค้า จากนั้นดับเบิ้ลคลิกเปลี่ยนข้อความบนปุ่มเป็น “ชำระเงิน” และกำหนด Property objectName = btnPay

1.17.2 คัดลอกปุ่มชำระเงิน มาวางด้านหลังปุ่มชำระเงิน จากนั้นดับเบิ้ลคลิกเปลี่ยนข้อความบนปุ่มเป็น “ยกเลิกการชำระเงิน” และกำหนด Property objectName = btnCancelPay

1.18 สร้างปุ่มเพิ่มข้อมูลลูกค้า โดยลาก Push Button มาวางด้านบนขั้นตอนการใช้งาน ดับเบิ้ลคลิกบนปุ่มเพื่อเปลี่ยนข้อความบนปุ่มเป็น “เพิ่มข้อมูลลูกค้า” และกำหนด Property objectName = btnAddCust

1.19 สร้างปุ่มเติมเงิน โดยคัดลอกปุ่มเพิ่มข้อมูลลูกค้า จากนั้นดับเบิ้ลคลิกบนปุ่มเพื่อเปลี่ยนข้อความบนปุ่มเป็น “เติมเงิน” และกำหนด Property objectName = btnAddMoney

1.20 สร้างปุ่มปิดหน้าจอ โดยคัดลอกปุ่มเพิ่มข้อมูลลูกค้า จากนั้นดับเบิ้ลคลิกบนปุ่มเพื่อเปลี่ยนข้อความบนปุ่มเป็น “ปิดหน้าจอ” และกำหนด Property objectName = btnClose

จะได้หน้าจอหลัก ดังนี้

1.21 บันทึกไฟล์

1.21.1 คลิกที่เมนู File --> Save

1.21.2 เลือกบันทึกไฟล์ในโฟลเดอร์ Snack Machine Vending โดยพิมพ์ชื่อไฟล์ในช่อง File name ว่า main.ui จากนั้นคลิกปุ่ม Save

2. ออกแบบหน้าจอเพิ่มข้อมูลลูกค้า (addcustomer.ui)

2.1 คลิกเมนู File --> New

2.2 คลิกเลือก templates/forms แบบ Dialog without Buttons จากนั้นคลิกปุ่ม Create

2.3 ปรับหน้าจอให้มีขนาด 600 x 400 pixels โดยกำหนดค่า Property geometry Width = 600 และ Height = 400

2.4 ลาก Label วางบนหน้าจอ แก้ไขข้อความและปรับเปลี่ยนลักษณะของข้อความ ดังรูป

2.5 สร้างช่องสำหรับกรอกข้อมูลลูกค้า

2.5.1 สร้างช่องสำหรับกรอกรหัสลูกค้า ลาก Line Edit มาวางด้านหลังข้อความ “รหัสลูกค้า” จากนั้นปรับสีและขนาดตัวอักษร และแก้ไข Property objectName = txtID

2.5.2 สร้างช่องสำหรับกรอกชื่อภาษาไทย โดยคัดลอกช่องกรอกรหัสลูกค้า มาวางด้านหลังข้อความ “ชื่อภาษาไทย” จากนั้นแก้ไข Property objectName = txtThainame

2.5.3 สร้างช่องสำหรับกรอกชื่อภาษาอังกฤษ โดยคัดลอกช่องกรอกรหัสลูกค้า มาวางด้านหลังข้อความ “ชื่อภาษาอังกฤษ” จากนั้นแก้ไข Property objectName = txtEngname

2.6 สร้างตัวเลือกจำนวนเงิน

2.6.1 ลาก Radio Button มาวาง ดับเบิ้ลคลิกเพื่อเปลี่ยนข้อความจาก “RadioButton” เป็น “20” ปรับเปลี่ยนรูปแบบตัวอักษร และแก้ไข Property objectName = rBtn_20

2.6.2 คัดลอก Radio Button วางเพิ่มอีก 3 ปุ่ม ดับเบิ้ลคลิกเปลี่ยนข้อความจาก “20” เป็น “50”, “100” และ “200” ตามลำดับ จากนั้นแก้ไข Property objectName เป็น rBtn_50, rBtn_100 และ rBtn_200 ตามข้อความที่อยู่บนปุ่ม Radio Button นั่นเอง

2.7 สร้างปุ่ม

2.7.1 สร้างปุ่มถ่ายรูป โดยลาก Push Button มาวาง ดับเบิ้ลคลิกแก้ไขข้อความบนปุ่มเป็น “ถ่ายรูป” ปรับแต่งข้อความตามต้องการ จากนั้นแก้ไข Property objectName = btnCapture

2.7.2 สร้างปุ่มกลับหน้าหลัก โดยคัดลอกปุ่มถ่ายรูปมาวาง ดับเบิ้ลคลิกแก้ไขข้อความบนปุ่มเป็น “กลับหน้าหลัก” จากนั้นแก้ไข Property objectName = btnBack

2.8 บันทึกไฟล์ โดยคลิกเมนู File --> Save จากนั้นเลือกบันทึกไฟล์ในโฟลเดอร์ Snack Machine Vending โดยพิมพ์ชื่อไฟล์ในช่อง File name ว่า addcustomer.ui จากนั้นคลิกปุ่ม Save