Insertion Sort

slide : InsertionSort.pdf

        Insertion Sort (การเรียงลำดับแบบแทรก) เป็นขั้นตอนวิธีการเรียงลำดับอย่างง่าย ทำงานโดยจะแบ่งข้อมูลในรายการเป็นสองส่วนคือส่วนที่เรียงแล้ว และส่วนที่ยังไม่เรียง แน่นอนว่าในตอนเริ่มแรกส่วนที่เรียงแล้วก็จะมีอย่างน้อยหนึ่งตัว และจะเริ่มหยิบข้อมูลตัวหนึ่งของส่วนที่ยังไม่เรียงมาเปรียบเทียบเพื่อหาตำแหน่งที่เหมาะสมในการแทรกลงในข้อมูลที่เรียงแล้ว ลักษณะเดียวกับการเรียงไพ่ในมือ และด้วยประสิทธิภาพ O(n^2) ดังนั้นการเรียงลำดับแบบแทรกจึงไม่เหมาะในการทำงานในรายการที่มีจำนวนสมาชิกมากๆ (อ้างอิงจาก https://th.wikipedia.org/wiki/การเรียงลำดับแบบแทรก)

Text Mode

        เริ่มต้นด้วยการเขียนโปรแกรม Insertion Sort ด้วยภาษา python ดังนี้

                                           

        และผลที่ได้

                                       

        จากนั้นได้เพิ่มการแสดงผลแต่ละขึ้นตอน และจัดเรียง code ใหม่

                                                 

        ได้ผลดังนี้

                                        

Sort with GUI [เพิ่มเติมใน slide]

        ได้ทำการดัดแปลง code จาก Selection Sort ให้ใช้วิธี sort แบบ Insertion Sort แทน และทำการปรับเปลี่ยนการแสดงผลให้เหมาะสมกับ Insertion Sort

                                         

        การทำงานของโปรแกรม

        - เริ่มการทำงานเมื่อ ใส่ input และกดปุ่ม " sort! " ที่มุมขวา-บน ในโปรแกรมจะทำการ sort ด้วยวิธี Insertion Sort และเก็บข้อมูลการ Sort ของทุกขั้นตอนไว้ และเริ่มสร้าง widgets ที่มีข้อมูลจาก input อยู่ภายใน

                                         

        - จะแสดงผลการ sort ขั้นต่อไปเมื่อกดปุ่ม "next" ที่มุมขวา-ล่าง (สามารถกดย้อนดูขั้นตอนที่ผ่านมาแล้วด้วยปุ่ม "previous") 

                                         

                                         

ปล. การ sort แบบเต็ม สามารถดูได้จาก slide บนโพสต์

Selecting Sort

slide present #1 : Quiz3.pdf (slide เดียวกับ Simple Calculator)
slide present #2 : Selection Sort.pdf

1st week : 

        ศุกร์ ที่ 11 พฤศจิกายน 2559

                - ได้เริ่มทำ Selection Sort ใน python โดยแสดงผลใน terminal

                - มีการ commit ลง bitbucket 4 ครั้ง

                - ดูรายละเอียด code และผลลัพธ์ ที่ slide present #1 (ด้านบนโพสต์) 

2nd week :

        พุธ ที่ 11 พฤศจิการยน 2559

                - present เรื่อง Selection Sort และ Simple Calculator

        ศุกร์ ที่ 18 พฤศจิกายน 2559

                - สร้าง app ด้วย kivy จากโค๊ด Selection Sort ใน python

นี่คือ code จากทั้ง 2 ไฟล์ คือ ไฟล์ .kv และ .py ตามลำดับ

                การสร้าง GUI จะสร้างจาก BoxLayout ทั้งหมด ทั้งในส่วนหลัก และส่วนย่อย (เนื่องจากง่ายในการใช้งาน) โดยส่วนหลักจะตั้ง orientation เป็นแบบ vertical (แนวตั้ง) หลังจากนั้นจึงสร้าง ส่วนย่อย

                - ส่วนย่อยแรก ได้สร้างเป็น BoxLayout แบบ horizontal (แนวนอน) ซึ่งเป็น Default  เพื่อสร้าง Label แสดงคำว่า 'input' และสร้าง TextInput ไว้รับค่าที่จะนำมา Sort

                - ส่วนย่อยที่สอง สร้างเป็น BoxLayout เช่นกัน ซึ่งจะสร้าง Button ไว้ ซึ่ง binding กับ method selectionSort( ) และสร้าง Label แสดงผลลัพธ์หลังจากการ Sort

                การทำงานของโปรแกรม

                - เริ่มด้วยการกำหนด Default ของ dSorted (data อาจไม่จำเป็นต้องมี Default) เพื่อนำไปแสดงเป็นผลลัพธ์ของโปรแกรมก่อน

                - เมื่อได้รับ input จาก TextInput แล้วกดปุ่ม ' sort! ' โปรแกรมจะเรียกใช้ selectionSort( ) รับค่า จาก TextInput มาใส่ไว้ใน self.data จากนั้นจึงเริ่มการ sort (เป็นการเปรียบเทียบ String ทุกตัว ที่นำมาใส่ใน input) แล้วจึงนำผลลัพธ์ จากการ Sort ส่งค่าไปให้ .kv แสดงผล

                                         

โปรแกรม หลังจากการ Sort

3rd week :

        พุธ ที่ 23 พฤศจิกายน 2559

                - ปรับเปลี่ยนหน้าตา GUI

                - เพิ่มการแสดงผลจากการ Sort ทุกๆขั้นตอนด้วย clock

                - เปลี่ยนรูปแบบการรับ input โดยแบ่งด้วย comma ( , )

                                      
                                     

                จาก code ข้างต้นจะเห็นว่ามีการรับ data จาก input มา โดยทำการ split ด้วย ' , ' ทำให้สามารถ Sort ค่าที่มากกว่า 1 หลักได้ นอกจากนั้นยังมีการใช้ clock ในการเรียกใช้ method update ทุกๆ 1 วินาที โดย method นี้จะส่งค่าของ keepSorted ให้ .kv ไปแสดงผล ซึ่งค่าของ keepSorted ได้จากค่าหนึ่งใน list ของ self.keep ซึ่ง list นี้ได้มาจาก...

                                     

                ทำให้โปรแกรมต้องเปลี่ยนหน้าตา ดังนี้

                                         

                                           
                                         

                และมีการ update ค่าเรื่อยๆ จนกลายเป็นค่าที่ Sort เสร็จเรียบร้อยดีแล้ว

        ศุกร์ ที่ 25 พฤศจิการยน 2559

                - ปรับเปลี่ยนหน้าตา GUI

                - เปลี่ยนการแสดงผลจากแบบ text เป็นกล่องตัวเลข

                - เลิกใช้ clock แต่จะแสดงผลเป็น step by step (กด 1 ครั้ง เปลี่ยนไป 1 ขั้นตอน)

                - กดเพื่อเปลี่ยนไปขั้นถัดไปได้ และกดเพื่อย้อนหลังกลับไปขั้นก่อนหน้าได้

                - ดูรายละเอียดเพิ่มเติมที่ slide present #2 (ด้านบนโพสต์)

                                         

                GUI ทุกส่วนจะเป็น BoxLayout ยกเว้นส่วนแสดงการ Sort เนื่องจากหาก ใช้ BoxLayout จะทำให้ data ที่แสดงจะเรียงเป็นแถวเดียว (มีข้อดีที่จะทำให้ดูการเรียงของ data ง่าย) จึงมีข้อเสีย คือเมื่อรับ data ที่จะนำมา Sort เยอะๆ จะทำให้ผลออกมาไม่สวย (เป็นกล่องสูงๆ ที่ไม่มีความกว้าง) และอาจทำให้มองดูตัวเลขลำบาก เพราะความกว้างกล่องน้อย และทำให้โดนกล่องถัดไปบังตัวเลข [ภาพเพิ่มเติม ใน slide present #2]

                การทำงานของโปรแกรม

                - จะเริ่มการ Sort เมื่อใส่ input และกดปุ่ม ' sort! ' ทางขวา-บน แล้วโปรแกรมจะเริ่มสร้างตัวแปร และเก็บค่าของทุกขั้นตอนของการ Sort ไว้ จากนั้นจึงสร้าง widget ขึ้นมาเป็นกล่อง (Button) ที่มีตัวเลขอยู่ภายใน ซึ่งเป็นตัวเลขเริ่มต้น [code ใน slide present #2]

                                          

                - จะแสดงค่าในขั้นตอนถัดไป เมื่อกดปุ่ม 'next' ทางขวา-ล่าง และสามารถย้อนหลังได้ เมื่อกดปุ่ม 'previous' ทางซ้าย-ล่าง ทั้งสองปุ่มนั้นมีการ binding ไปยัง method เพื่อ clear widgets และสร้าง widget ขึ้นมาใหม่ โดยเมื่อกด next โปรแกรมจะเพิ่มค่า index เพื่อจะใช้ป้อนให้ keep (list ที่เก็บ data ทุกขั้นตอนของการ Sort เอาไว้) แสดงค่าที่ต้องการออกมา ในทำนองเดียวกับ previous ที่จะลดค่า index ลง และป้อนให้ keep [ดู code ได้จาก slide present #2]

                                          

                - สีของกล่อง ก็อยู่ในขั้นตอนการสร้างปุ่มเช่นกัน โดยโปรแกรมจะมี list ที่เก็บค่า iMin ไว้, มี count_up (index ที่ส่งให้ keep นำค่าที่ต้องการออกมา) เมื่อมีตัวแปรเหล่านี้แล้ว จึงเอาไปใช้เป็นเงื่อนไขในการใส่สีของกล่อง [รายละเอียดเพิ่มเติมใน slide present #2]

                เช่น จากภาพด้านบน count_up = 1 (Sort ไปแล้ว 1 ขั้นตอน) 

                       กล่องที่ index น้อยกว่า count_up จะมีสีเขียว หรือก็คือ กล่องที่ 0 มีสีเขียว

                       กล่องที่ index เท่ากับ count_up จะมีสีแดง หรือก็คือ กล่องที่ 1 มีสีแดง

                       กล่องที่ index เท่ากับ imin[count_up] จะมีสีน้ำเงิน (ตาม list ที่เก็บค่าไว้ ซึ่งใน ต.ย. คือ กล่องที่ 4 จะมีสีน้ำเงิน)

Quiz3 : Simple Calculator

slide นำเสนอ : Quiz3.pdf  (รวม selection sort เล็กน้อย)

Programme Interface

การใช้งาน (use case)

        - คำนวณเลข 2 จำนวนง่ายๆ ได้ (บวก, ลบ, คูณ, หาร)

                1. ใส่ Input ซึ่งมี 3 ส่วนคือ ส่วนแรก ใส่ตัวตั้ง, ส่วนที่สอง กดปุ่มเพื่อเลือกเครื่องหมาย, ส่วนที่สาม ใส่ตัวบวก,ลบ,คุณ หรือ ตัวหาร

                2. กดที่ปุ่มที่มีเครื่องหมาย ' = '

                3. ผลลัพธ์จะแสดงอยู่ในช่องล่างสุด

 

        ในส่วน code

        

        ในส่วนนี้จะเป็นการสร้างช่องใส่ input ใน kv ด้วย class ที่มากับ kivy ที่ชื่อ TextInput มารับตัวเลขที่จะนำมาคำนวณ

                     

        ในส่วนนี้ใช้เป็นปุ่มที่จะรับค่าเครื่องหมาย (operator) โดยมีการ binding เมื่อ release ปุ่ม จะไปเรียกใช้ method จากไฟล์ .py เพื่อไปกำหนดค่าของเครื่องหมายตาม ปุ่มที่ถูกกด

        หลังจากได้รับ input ที่ต้องการทั้ง 3 แล้ว เมื่อผู้ใช้กดปุ่ม '=' แล้ว โปรแกรมก็จะเรียกใช้ method calculate( ) เพื่อเริ่มการคำนวณ เมื่อคำนวณเสร็จ ใน code บรรทัดสุดท้ายจะส่งค่าผลลัพธ์จะส่งค่าไปให้ทางส่วน .kv แสดงผลต่อไป

        โดยใน code การคำนวณนั้น เราไม่สามารถที่จะนำค่าที่นำมาจาก TextInput มาคำนวณทันทีเลยได้ เพราะค่าที่ได้รับมานั้นเป็น String ดังนั้นก่อนที่จะนำค่ามาคำนวณ จึงต้องเปลี่ยนค่าจะ String เป็นค่าตัวเลขที่สามารถคำนวณได้ ก็คือ int( ) หรือ float( ) แต่เนื่องจากใน use case ถัดไป int นั้นไม่สามารถที่จะ support ได้ ดังนั้นการคำนวณนี้จึงใช้ float( ) 

        - นำผลลัพธ์ที่ได้จากการคำนวณครั้งที่แล้วมาคำนวณต่อ (เป็นตัวตั้งของการคำนวณใหม่)

                1. หลังจากทำการคำนวณครั้งแรก หรือหลายครั้งไปแล้ว

                2. กดปุ่มที่แสดงผลลัพธ์ (ล่างสุด)

                3. ผลลัพธ์จากการคำนวณครั้งล่าสุด จะไปแทนที่ตัวตั้ง และรอการป้อน Input ที่เหลืออีก 2 ส่วน เพื่อใช้ไปการคำนวณต่อไป 

        ในส่วน code

        ทำการ binding ปุ่มที่แสดงผลลัพธ์ กับ method reCal( ) ซึ่งจะทำการกำหนดค่าของการคำนวณใหม่ให้ผู้ใช้ โดยจะนำค่าผลลัพธ์ครั้งล่าสุด ไปใส่แทน input1 หรือก็คือ ตัวตั้ง และกำหนดให้ input ตัวที่สอง และเครื่องหมายกลับไปเป็น default (ไม่มีค่า และกำลังหาใส่ค่า เพื่อนำไปคำนวณต่อ) จากนั้นจึง update ค่าไปให้ .kv แสดงผล ในบรรทัดสุดท้าย

Quiz2 : comiccreator

1. เปลี่ยนชื่อ method : on_children เป็น on_30september

           - เริ่มจากแก้ไขตามโจทย์

            - แล้วไปเพิ่มคำสั่ง on_30september ให้ถูกเรียกใช้ตามจุดต่างๆ

2. แสดงจำนวน StickMan บน statusbar

            - เพิ่ม text ที่ statusbar ด้านล่าง และเพิ่มตัวแปร smCount

           - เพิ่มการกำหนดค่าจาก drawingSpace ไปให้ statusbar หาก children = 0
           - เพิ่มการอัพเดทค่าของ smCount




           -  import : StickMan จาก comicwidgets
           - ทำการตรวจสอบชนิดของ children ใน remove หากเป็น StickMan ให้ลดจำนวน StickMan ลง 1 (sm_decrease)

            - เพิ่มการเรียกใช้ sm_increase ใน class: ToolStickman , Method: draw


3. การ remove แบบ Group

           - แยกกรณี การ remove (แบบ group / แบบไม่ group)