MEMO APP

ตัวคลิปโฆษณา 30 วินาที

Selection sort on kivy '3'

*สิ่งที่ได้ทำการเพิ่มขึ้นมาคือ ตัวข้อมุลที่ถูกทำการ sort แล้วจะเปลี่ยนเป็นสีน้ำเงิน

    ส่วนประกอบของโปรแกรมจะมีด้วยกัน 3 ส่วน คือ ส่วนป้อนอินพุตด้านบน ส่วนแสดงผลตรงกลาง และปุ่ม sort ด้านล่าง

    หลักการทำงาน คือ เมื่อเราใส่ input ในช่องด้านบนเรียบร้อยแล้ว และทำการกดปุ่ม "selectionsort" ทางด้านล่าง ก็จะมี box แสดงผลขึ้นมาตามจำนวน input ที่เราได้ใส่เข้าไปในส่วนแสดงผล และเมื่อ กดปุ่ม "selectionsort" อีกครั้งก็จะเป็นการทำงานแบบ selectionsort โดยที่ตัวที่กำลัง sort จะเปลี่ยนเป็นสีแดง เมื่อเรากดปุ่มอีกครั้ง ก็จะทำงานอีกครั้ง โดยข้อมูลตัวที่ถูก sort แล้วจะเปลี่ยนเป็นสีน้ำเงิน

ตัวอย่าง :

    เมื่อทำการกดปุ่ม 'SELECTIONSORT' ก็จะสร้างชุด array ขึ้นมา ซึ่งจากรูปเป็นการสลับ '0' กับ '5' ซึ่งจะเป้นสีแดงตามที่ได้กำหนดไว้

เมื่อทำการกดปุ่ม 'SELECTIONSORT' ก็จะเป็นการเช๊ค index ตำแหน่งถัดไป กับตัวที่น้อยที่สุด ซึ่งจากภาพคือการสลับจาก '8' ไปที่ตำแหน่งของ '0' ซึ่งเมื่อกดปุ่ม 'SELECTIONSORT' ก็จะเป็นการ sort ไปทีละครั้ง เพื่อง่ายต่อการสังเกตุว่า index ตัวไหนสลับกัน และตัวที่ถูกสลับแล้วจะกลายเป็นสีน้ำเงิน

Selection sort on kivy '2'

จากคราวที่แล้วที่ได้ทำ selectionsort บน kivy ซึ่งรูปแบบที่ได้ยังคงเป็นแบบ text mode ดังภาพ

 

จึงได้ทำการแก้ไข code ใหม่ เพื่อที่จะให้แสดงออกมาเป็นรูปแบบของ graphic ซึ่งก็ได้นำ api ของ kivy ที่ชื่อ clock มาใช้

 

ซึ่งจาก code ที่ได้ทำการแก้ใหม่ ก็ได้มีการเปลี่ยนจากการใช้ while มาเป็น if เพื่อป้องกันการเกิด infinity loop และได้มีการเปลี่ยนตัวแปรเป็น m , n จาก x , y ตามลำดับ เนื่องจากเกิดปัญหาที่ว่าถูกอ่านค่าเป็น int และไม่สามารถนำไปใช้ได้ จึงได้ลองทำการเปลี่ยนชื่อตัวแปร ซึ่งก็สามารถทำงานได้ตามปกติ

Method draw และ countM : ซึ่ง method draw() คือการวาดปุ่มที่มี array ภายในเพื่อแสดงออกมาเป็น graphic สำหรับการทำ selectionsort โดยที่เราจะตั้งเงื่อนไขว่าถ้า index ของ array ตัวนั้นเท่ากับตัวที่ถูก selected(ตัวที่มีค่าน้อยที่สุด) หรือตัวที่ทำการเลือก จะให้มีสีแดง ส่วน index ตัวอื่นจะไม่มีสี เพื่อแสดงว่า index ตัวไหนที่ทำการสลับที่กัน ส่วน method countM คือการอัพเดตค่า m ที่ใช้ในการวนตำแหน่งของข้อมูลจนครบ

หน้าตา GUI : ซึ่งเมื่อรันโปรแกรมขึ้นมาก็จะมี textbox ให้ใส่ข้อมูลที่ต้องการ

 เมื่อทำการกดปุ่ม 'SELECTIONSORT' ก็จะสร้างชุด array ขึ้นมา ซึ่งจากรูปเป็นการสลับ '0' กับ '5' ซึ่งจะเป้นสีแดงตามที่ได้กำหนดไว้

และเมื่อทำการกดปุ่ม 'SELECTIONSORT' ก็จะเป็นการเช๊ค index ตำแหน่งถัดไป กับตัวที่น้อยที่สุด ซึ่งจากภาพคือการสลับจาก '8' ไปที่ตำแหน่งของ '0' ซึ่งเมื่อกดปุ่ม 'SELECTIONSORT' ก็จะเป็นการ sort ไปทีละครั้ง เพื่อง่ายต่อการสังเกตุว่า index ตัวไหนสลับกัน

Selection sort on kivy

จากการที่ทำ selection sort ในรูปของ text-mode ก็ได้ทำการเขียนให้อยู่ในรูปของ GUI โดย kivy ซึ่งจาก code ในครั้งที่แล้วคือ

  

   

แต่เนื่องจากพอมาเขียนเพื่อนใช้งานกับ kivy กลับมีปัญหา ซึ่งก็คือปัญหาของ คำสั่ง for .. in .. ที่ไม่สามารถเปลี่ยนจาก int ให้เป็น array ได้ จึงได้เปลี่ยน code ให้เป็นดังนี้

   

ซึ่งรุปแบบการทำงานจะเหมือนเดิมต่างเพียงจะใช้ while เข้ามาแทนที่คำสั่ง for .. in ..

Code ส่วนของ kivy :

 
                               

GUI :

                             

Quiz III

โจทย์ข้อที่สาม คือทำให้มีการแสดงสถานะบน statusbar เพื่อบอกจำนวนของ stickman โดยวิธีการคือ แก้ไขในส่วนของ class Stickman เพื่อสร้าง id ที่เป็น string คือ 'stickman' แล้วจะใช้ function เงื่อนไข เช็คว่า string ตรงกับของ stickman หรือไม่ ถ้าใช่ก็จะเป็นการเพิ่ม หรือลดจำนวน stickman