เปิดโปรแกรม PyQt Designer เพื่อออกแบบหน้าจอ GUI โดยคลิกที่ Pi --> Programming --> Qt 5 Designer

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

     1. เลือกเท็มเพลต โดยคลิกเลือก Main Window แล้วคลิกปุ่ม Create

     2. ลบแท็บ Menu Bar โดยคลิกขวาที่แท็บ Type Here จากนั้นเลือกคาสั่ง Remove Menu Bar

     3. บันทึกไฟล์ ไว้ในโฟลเดอร์ robot โดยตั้งชื่อว่า “main.ui” โดยคลิกแท็บ File --> Save

     4. กำหนดขนาดของหน้าจอให้เท่ากับหน้าจอหุ่นยนต์ โดยคลิกที่ geometry แล้วกำหนดค่า Width: 1024 และ Height: 550

     5. ใส่สีพื้นหลัง
          1) คลิกขวาบน MainWindow แล้วคลิกเลือก Change stylesheet

          2) จากนั้นคลิกลูกศรด้านหลัง Add Color แล้วคลิกเลือก background-color

          3) เลือกสีที่ต้องการ จากนั้นคลิกปุ่ม OK

          4) คลิกปุ่ม OK

     6. แทรกภาพหุ่นยนต์เคลื่อนไหว (.gif)

          1) ลาก Label มาวางบน MainWindow

          2) แก้ไข Property ของ Label โดยคลิกลูกศรด้านหลัง pixmap เลือก Choose File

          3) คลิกเลือกไฟล์รูปภาพ .gif จากนั้นคลิกปุ่ม Open

          4) ปรับรูปให้พอดีกับ Label โดยคลิกถูกตรง scaledCentents

          5) ตั้งชื่อ Label ว่า “lblRobot” ในช่อง objectName

     7. สร้างปุ่มเมนู “ควบคุมหุ่นยนต์ด้วยปุ่ม”

          1) ลาก Push Button มาวางบน MainWindow

          2) แก้ไขข้อความบนปุ่ม โดยดับเบิ้ลคลิกที่ปุ่ม จากนั้นพิมพ์ข้อความว่า “ควบคุมหุ่นยนต์ด้วยปุ่ม” จากนั้นแก้ไขขนาดและลักษณะของตัวอักษรใน Property: font แล้วคลิกปุ่ม OK

          3) ตั้งชื่อปุ่ม โดยคลิกที่ objectName ตั้งชื่อเป็น “btnMove”

     8. สร้างปุ่มเมนู “ควบคุมหุ่นยนต์ด้วยเสียง” โดยคัดลอกปุ่มแรก จากนั้นแก้ไขข้อความบนปุ่มเป็น “ควบคุมหุ่นยนต์ด้วยเสียง” แล้วเปลี่ยนชื่อปุ่มโดยคลิกที่ objectName ตั้งชื่อเป็น “btnVoice”

     9. สร้างปุ่มเมนู “ถาม-ตอบด้วย Chatbot” โดยคัดลอกปุ่มใดก็ได้ จากนั้นแก้ไขข้อความบนปุ่มเป็น “ถาม-ตอบด้วย Chatbot” แล้วเปลี่ยนชื่อปุ่ม โดยคลิกที่ objectName ตั้งชื่อเป็น “btnChatbot”

     10. ใส่รูปภาพประกอบปุ่มคาสั่งทั้ง 3 ปุ่ม

          1) คัดลอก Label รูปภาพหุ่นยนต์ จากนั้นแก้ไขรูปภาพในช่อง pixmap ให้สอดคล้องกับปุ่ม คัดลอกและทำให้ครบทั้ง 3 รูปภาพ

          ตั้งชื่อ object แต่ละอันในช่อง objectName ดังรูป

ออกแบบหน้าจอ “ควบคุมหุ่นยนต์ด้วยปุ่ม” (move.ui)

     1. คลิกแท็บ File --> New จากนั้นเลือกเท็มเพลต Dialog without Buttons แล้วคลิกปุ่ม Create

     2. กำหนดขนาดหน้าจอ โดยใส่ค่า Width: 1024 และ Height: 550

     3. แทรกรูปภาพเคลื่อนไหว .gif โดยลาก Label มาวาง แล้วคลิกที่ pixmap เลือกรูปภาพ .gif แล้วคลิกที่ scaledContents เพื่อปรับรูปภาพให้พอดีกับ Label

     4. ใส่สีพื้นหลังให้เป็นสีเดียวกับพื้นหลังรูปภาพ โดยคลิกขวาที่หน้าจอ Dialog แล้วเลือก Change styleSheet

          1) คลิกลูกศรด้านหลัง Add Color จากนั้นเลือก background-color

          2) คลิกปุ่ม Pick Screen Color

          3) นำเมาส์ไปคลิกตรงพื้นหลังรูปภาพ แล้วคลิกปุ่ม OK

     5. แทรกปุ่ม
          1) ลาก Push Button มาวาง แล้วเปลี่ยนข้อความบนปุ่มและเปลี่ยนสีพื้นหลังปุ่ม ดังนี้

          2) กำหนด Property: objectName ของแต่ละปุ่ม ดังนี้

                - ปุ่ม Forward --> btnFW
                - ปุ่ม Backward --> btnBW
                - ปุ่ม Turn Left --> btnTL
                - ปุ่ม Turn Right --> btnTR
                - ปุ่ม Slide Left --> btnSL
                - ปุ่ม Slide Right --> btnSR
                - ปุ่ม Hand Up --> btnHU
                - ปุ่ม Hand Down --> btnHD
                - ปุ่ม RGB On --> btnRGB1
                - ปุ่ม RGB Off --> btnRGB0
                - ปุ่ม Stop --> btnStop
                - ปุ่ม Home --> btnHome

     6. บันทึกไฟล์ในโฟลเดอร์ robot โดยตั้งชื่อเป็น move.ui

ออกแบบหน้าจอ “ควบคุมหุ่นยนต์ด้วยเสียง” (voicecontrol.ui)

     1. คลิกแท็บ File --> New จากนั้นเลือกเท็มเพลต Dialog without Buttons แล้วคลิกปุ่ม Create

     2. กำหนดขนาดหน้าจอ โดยใส่ค่า Width: 1024 และ Height: 550

     3. แทรกรูปภาพเคลื่อนไหว .gif โดยลาก Label มาวาง แล้วคลิกที่ pixmap เลือกรูปภาพ .gif แล้วคลิกที่ scaledContents เพื่อปรับรูปภาพให้พอดีกับ Label

     4. แทรกข้อความ โดยลาก Label มาวางแล้วแก้ไขข้อความและปรับ font

     5. แทรกปุ่ม Start และ Home
     1) ลาก Push Button มาวาง แล้วเปลี่ยนข้อความบนปุ่ม ดังนี้

     2) กำหนด Property: objectName ของปุ่ม ดังนี้

               - ปุ่ม Start --> btnStart
               - ปุ่ม Start --> btnHome

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

     6. บันทึกไฟล์ในโฟลเดอร์ robot โดยตั้งชื่อเป็น voicecontrol.ui

ออกแบบหน้าจอ “ถาม-ตอบด้วย Chatbot” (chatbot.ui)

     1. คลิกแท็บ File --> New จากนั้นเลือกเท็มเพลต Dialog without Buttons แล้วคลิกปุ่ม Create

     2. กำหนดขนาดหน้าจอ โดยใส่ค่า Width: 1024 และ Height: 550

     3. แทรกรูปภาพเคลื่อนไหว .gif โดยลาก Label มาวาง แล้วคลิกที่ pixmap เลือกรูปภาพ .gif

     4. แทรกปุ่ม Start และ Home

          1) ลาก Push Button มาวาง แล้วเปลี่ยนข้อความบนปุ่ม ดังนี้

          2) กำหนด Property: objectName ของปุ่ม ดังนี้

                - ปุ่ม Start --> btnStart
                - ปุ่ม Start --> btnHome

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

     5. บันทึกไฟล์ในโฟลเดอร์ robot โดยตั้งชื่อเป็น chatbot.ui