Selection sort animation.

หน้าจอเริ่มต้น

ใส่ตัวเลขเข้าไปตามที่เราต้องการ

กดปุ่ม Start

เพิ่มกด Sort แล้วตัวที่สลับกัน จะเป็นกล่องสีแดงในขณะสลับ และเมื่อสลับเสร็จจะเป็นสีน้ำเงิน ดังภาพ เลข 0 5 8 คือเลขที่โดนสลับไปแลัว ส่วนเลข 0 กับ 1 ที่เป็นสีแดง คือตัวที่กำลังสลับกัน

ภาพเมื่อ Sort ครบทุกตัวแล้ว

ในส่วนของการสร้างการเคลื่อนไหว คือ method ที่ชื่อว่า move โดย j และ nummin ที่ต้องเป็นติดลบด้านหน้าเนื่องจาก เวลาที่ add widget เข้ามาใน array จะ add สมาชิกตัวสุดท้ายเข้ามาก่อน เช่น หากใส่เลข 5 8 0 1 0 1 2 6 3 0 1 0 6 จะ add 6 เข้ามาเป็น widget ตัวแรก นั่นหมายความว่า 6 คือ index ที่ 0 ดังนั้น จึงใส่ลบ เพื่อให้กลับค่า index

จากนั้นตั้งสีของกล่องตามที่ต้องการตามหลัก rgba ทั้งในขณะที่กล่องเคลื่อนที่ และเคลื่อนที่เสร็จแล้ว ซึ่งสามารถใส่พฤติกรรมการเคลื่อนที่ของกล่องได้ด้วย ตามชื่อของพฤติกรรมในเว็บ

https://kivy.org/docs/api-kivy.animation.html

ตัวอย่างรูปแบบของพฤติกรรมการเคลื่อนไหวของกล่อง

ต่อมาคือในส่วนของคอมเมนต์ # swap box of i and j โค้ดส่วนนี้จะเป็นโค้ดที่สลับ position ของกล่อง i และกล่อง j ซึ่งเป็นเพียงการสลับ position เพียงเท่านั้น จึงยังไม่ทำให้ index ของกล่องนั้นๆสลับค่ากัน ดังนั้นในโค้ดส่วนต่อมา คือส่วนของคอมเมนต์ # swap index of i and j คือส่วนของโค้ดที่สลับค่า index ตามกล่องที่เพิ่งสลับไปนั่นเอง ซึ่งหลักการการสลับกัน จะเหมือนกับหลักการการ swap กันของโค้ด selection sort ต้นแบบ

โค้ดส่วนนี้คือโค้ดที่จะรับค่าตัวเลขที่เราใส่ไปเป็น string แล้วเปลี่ยนค่าออกมาเป็น array ด้วยคำสั่ง split และเป็นโค้ดที่สร้างปุ่มขึ้นมาตาม len ของ array ที่เราใส่เข้าไป โดยจะเช็คค่าของ array ก่อน ซึ่งจะอธิบายใส่ส่วนถัดไป หากเช็คแล้วค่าที่ return กลับมาคือ False จะสร้างกล่องขึ้นมาทันที ตามความยาวของ array ตามที่ได้กล่าวข้างต้น โดยจะล้างสมาชิกใน array ออกใหม่ทั้งหมด และเคลียร์ widget ออกใหม่ทั้งหมดเช่นกัน แล้วเริ่มสร้างใหม่ จากนั้นจะเอาตัวเลขใส่ในกล่อง ซึ่งจะอธิบายในส่วนถัดไปเช่นกัน

ดังที่บอกว่าโปรแกรมจะเช็ค array ก่อนที่จะสร้างปุ่ม กล่าวคือ จะมี method ชื่อว่า check ซึ่งจะทำหน้าที่ check ว่า ความยาวของ array เท่ากันหรือไม่ หากไม่เท่ากัน จะสร้างปุ่มใหม่ทันที เนื่องจากถือว่า ความยาวไม่เท่ากัน ต้องเป็นคนละ array กันแน่นอน แต่หาก check แล้ว ความยาวของ array เท่ากัน ฟังก์ชั่นนี้จะ check ต่อว่า สมาชิกของ array มีค่าเท่ากันหรือไม่ หากมีสมาชิกตัวใดซักตัวหนึ่งมีค่าไม่เท่ากัน ก็จะ return False แล้วสร้างปุ่มขึ้นมาใหม่ทันที

และจากที่บอกมาข้างต้นว่าโปรแกรมจะนำตัวเลขตาม array ใส่เข้าไปในปุ่มที่สร้างขึ้นมา ฟังก์ชั่นที่ทำหน้าที่นั้นคือ method button

method show คือ method ที่เพิ่ม frame ในทุกๆครั้งที่มีการ swap เนื่องจากเมื่อมีการสลับกล่องและสลับ index ของกล่องแล้ว ต้องเพิ่มค่าใน array move_j กับ move_min ด้วย เนื่องจากค่า i กับ j ได้เปลี่ยนค่าไปด้วย ดังนั้นตัว j กับ min ที่จะสลับต่อไปใน array move_j กับ move_min ต้องเปลี่ยนค่าด้วยเช่นกัน

โค้ดในส่วน kivy ส่วนนี้คือสร้าง text input ไว้ด้านบนสุดของหน้าจอ gui เริ่มต้นได้กำหนดให้ text เป็นช่องว่างไว้

ส่วนนี้คือส่วนของการแสดงผล การสลับกันของกล่อง คือส่วนตรงกลางจอทั้งหมด

ส่วนนี้คือส่วนล่างของหน้าจอ gui ซึ่งได้สร้างปุ่ม 2 ปุ่มไว้คือปุ่ม Start และ Sort ซึ่งปุ่ม Start จะเรียกใช้ method store คือ method ที่รับค่า array ที่เราใส่เข้าไปแล้ว split ค่าออกมา จากนั้นก็จะไปเรียกใช้ฟังก์ชั่นสร้างปุ่ม และใส่ตัวเลข ต่อๆไปตามลำดับที่กล่าวมาทั้งหมด

ในส่วนของปุ่ม Sort จะเรียกใช้ method sort ซึ่งจะเรียกใช้ฟังก์ชั่นของการเคลื่อนไหวของปุ่มและทำให้ปุ่มสลับกัน ดังที่กล่าวมาข้างต้นทั้งหมด

https://bitbucket.org/titi_rungruang/sorting/commits/all

การ commit ของงานนี้ทั้งหมด