Slide Animation Sort.

https://drive.google.com/file/d/0Bysm0R5CF1l6VHBJaXdQel82YWs/view?usp=sharing

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 ของงานนี้ทั้งหมด

Slide Sort kivy.

https://drive.google.com/open?id=0Bysm0R5CF1l6b1N0aEpTa1BMczg

Kivy Selection Sort.

สร้าง Text input สำหรับรับค่าตัวเลขเข้ามา และสร้าง Text input สำหรับเป็นหน้าจอแสดงผล หลังจากนั้นก็สร้างปุ่มกดที่เรียกใช้ฟังก์ชั่น Sort และปรับอัตราส่วนให้เหมาะสม

สร้าง Class Selectionsort ขึ้นมา จากนั้นสร้าง method sort และ findmin โดยให้ method sort เรียกใช้งานฟังก์ชั่นของ method findmin เพื่อป้องกันการเกิดลูปซ้อนลูป โดยได้ใช้คำสั่ง split สำหรับการเปลี่ยนสตริงเป็นอาเรย์ เพื่อให้สามารถนำค่าในอาเรย์ไป sort ได้

จากภาพ ใส่ตัวเลขเข้าไปในช่อง input และกด sort จะจัดเรียงตัวเลขจากน้อยไปมาก โดยแสดงผลทีละขั้นตอน และมีตัวเลขขี้ให้เห็นว่า เป็นขั้นตอนไหน และมีทั้งหมดกี่ขั้นตอน

Slide Quiz 3

https://drive.google.com/open?id=0Bysm0R5CF1l6ZUJBdWk4YlNheXM

Slide W12 9/11/2559

https://drive.google.com/file/d/0Bysm0R5CF1l6TUZrWHBPU3AtMFU/view?usp=sharing

Quiz 3 รอบบ่าย

โจทย์ข้อที่ 1 Find min

สร้างเมธตอดหาค่ามิน โดยกำหนดตัวแปร i = 0 และค่า min = number[i] คือเท่ากับค่าของตัวแรกของ array ไว้ก่อน จากนั้นตั้งเงื่อนไขว่า ในขณะที่ i น้อยกว่า จำนวนสมาชิกของ array number ถ้า ค่าใดๆในอาเรย์มีค่าน้อยกว่าค่า min ในปัจจุบัน ให้ค่ามิน กลายเป็นค่านั้นๆทันที จากนั้นก็อัพเเดทค่า i ให้เพิ่มขึ้นที่ละ 1 กล่าวคือ เทียบกับทุกๆตัวในอาเรย์ไปเรื่อยๆ หากค่า i เกินจำนวนสมาชิกของอาเรย์แล้ว จะปรินท์ค่า min ล่าสุดออกมา ซึ่งจะตรงกับค่า min ของอาเรย์

จากโค้ด ในอาเรย์มีสมาชิกดังนี้ 5 8 0 1 0 1 2 6 3 0 1 0 6 ดังนั้นค่าที่น้อยที่สุด คือ 0

โจทย์ข้อที่ 2 Find max

สร้างอาเรย์ขึ้นมา 3 อาเรย์ แล้วสร้างฟังก์ชันหาค่า Max โดยส่งอาเรย์ให้กับฟังก์ชัน ให้ฟังก์ชันนี้หาค่าของอาเรย์ไหนก็ได้ที่ส่งมา โดยเริ่มแรกกำหนค่า i = 0 และค่า max = array[i] กล่าวคือ ให้เท่ากับตัวแรกของอาเรย์นั้นไว้ก่อน จากนั้นตั้งเงื่อนไขว่า ในขณะที่ i น้อยกว่าจำนวนสมาชิกในอาเรย์ ถ้า max น้อยกว่า ค่าของจำนวนใดๆ ให้ค่า max เท่ากับค่าของจำนวนนั้นๆ จากนั้นก็อัพเดทค่า โดย i เพิ่มขึ้นทีละ 1 กล่าวคือ เทียบกับทุกตัวในอาเรย์ เมื่อเช็คครบทุกตัวในอาเรย์แล้ว จะหลุดลูปออกมา เจอคำสั่งปริ้นท์ค่าแมกซ์ปัจจุบันออกมา ซึ่งคือค่าแมกซ์ของอาเรย์นั้นๆ

อาเรย์ number ค่าสูงสุดคือ 6 อาเรย์ a ค่าสูงสุดคือ 8 และอาเรย์ b ค่าสูงสุดคือ -2 ตามลำดับ

โจทย์ข้อที่ 3 Selection Sort

สร้างอาเรย์ที่ต้องการขึ้นมา จากนั้นสร้าง method ในการ sort โดยให้ปริ้นท์อาเรย์ดั้งเดิมออกมาก่อน เพื่อดูการจัดเรียง จากนั้นตั้งตัวแปร i ไว้ใช้เป็นตัวเทียบ แล้วให้ตัวแปร j เป็นตัวแปรที่เป็นค่าน้อยที่สุด และให้ n เป็นตัวแปรที่เป็นจำนวนสมาชิกในอาเรย์ โดยตั้งเงื่อนไขว่า ในขณะที่ j น้อยกว่าค่าสมาชิกในอาเรย์ให้ j = ค่าที่น้อยที่สุด แล้วให้ i = j + 1 กล่าวคือ เป็นตัวถัดจาก j และตั้งเงื่อนไขซ้อนไปอีกว่า ในขณะที่ i < n แล้ว ถ้า ค่าของอาเรย์ตัวที่ i นั้น น้อยกว่าค่าของอาเรย์ตัวที่ j ให้ ค่าน้อยสุดเท่ากับ i แล้วอัพเดทค่า i ไปทีละ 1 หากหลุดลูปซ้อนแล้ว จะเข้าเงื่อไขที่ว่า หากค่าน้อยสุดไม่ได้เท่ากับ j แล้ว ให้สลับ i กับ j หรือกล่าวคือ สลับตำแหน่งของตัวเลขสองตัวเลขที่เทียบค่ากันอยู่นั่นเอง จากนั้นให้ปริ้นท์อาเรย์ที่เพิ่งสลับออกมาทันที เพื่อดูการเปรียบเทียบ และอัพเดทค่า j เพิ่มขึ้นทีละ 1 เช่นกัน

จะได้ผลการจัดเรียงดังภาพ

Quiz 3 รอบเช้า

โจทย์รอบเช้า สร้างโปรแกรมคำนวณเลขอย่างง่าย

สร้างปุ่มของแต่ละฟังก์ชั่น และสร้าง text input ขึ้นมาสำหรับรับค่าตัวเลข 2 ช่อง และ text input สำหรับแสดงผล 1 ช่อง

สร้างเมธตอด ที่เอาไว้ถูกเรียกใช้งานจากการกดปุ่ม

หน้าจอเริ่มต้นของโปรแกรม

กรอกตัวเลข ที่ 2 ช่องบน คือตัวตั้งและตัวบวก ตามลำดับ เมื่อกด Plus เลข 2 ตัวนั้นจะมาบวกกัน และแสดงผลที่ช่องด้านล่าง ดังภาพ

กรอกตัวเลข ที่ 2 ช่องบน คือตัวตั้งและตัวลบ ตามลำดับ เมื่อกด Minus เลข 2 ตัวนั้นจะมาลบกัน และแสดงผลที่ช่องด้านล่าง ดังภาพ

กรอกตัวเลข ที่ 2 ช่องบน คือตัวตั้งและตัวคูณ ตามลำดับ เมื่อกด Multiple เลข 2 ตัวนั้นจะมาคูณกัน และแสดงผลที่ช่องด้านล่าง ดังภาพ

กรอกตัวเลข ที่ 2 ช่องบน คือตัวตั้งและตัวหาร ตามลำดับ เมื่อกด Divide เลข 2 ตัวนั้นจะมาหารกัน และแสดงผลที่ช่องด้านล่าง ดังภาพ

commit 9/11/2559

https://bitbucket.org/RIKTI/memo/commits/f859cd6eef834c1fabae23e70e6ea25787dff8e4

เปลี่ยนฟอนต์ตัวหนังสือ ให้เป็นฟอนต์ของโปรแกรมทุกจุด และแก้โค้ดตาม PEP8 Style

การแก้โค้ดตาม PEP8 Style

commit 8/11/2559

https://bitbucket.org/RIKTI/memo/commits/683f15005e07b74a9cd3ac9a83ea5ce148f9ad88

เพิ่มขนาดคำพูดของคำว่า Welcome

https://bitbucket.org/RIKTI/memo/commits/10b50e6ef54f1b820d79db7a920a5a6077696cd7

เพิ่มขนาดของฟอนต์ ตอนดูไฟล์ และตอนลบ ให้เห็นชัดเจน

CommIt 5/11/2559

https://bitbucket.org/RIKTI/memo/commits/332d2bf8e008f3333e0def6cf889202ff43c5c38

การคอมมิทในครั้งนี้ ได้แก้ไขทั้งหมด 4 อย่างด้วยกัน ดังนี้

1. ใส่ข้อมูลที่เป็นไฟล์ text และรูปภาพในโฟลเดอร์ของโปรแกรม
โดยเนื้อหาที่กลุ่ม 6 นำมาเสนอนั้น คือเรื่อง การละเล่นไทย ทั้ง 10 อย่าง เช่น

เดินกะลา

ซึ่งในโปรแกรม จะมีเนื้อหาบรรยายเกี่ยวกับการละเล่นแต่ละอย่างด้วย

2. แก้บัค: สามารถอ่านชื่อไฟล์เป็นภาษาไทย ในขณะที่กดดูรูปภาพ

โดยการใส่ฟอนต์กำกับเข้าไปดังภาพ

3. สามารถรู้ชื่อไฟล์ที่เรากำลังจะลบได้

โดย + ชื่อไฟล์ของไฟล์ที่เรากำลังเลือกอยู่เข้าไปนั่นเอง แล้วใส่ฟอนต์กำกับเพื่อให้อ่านภาษาไทยได้

4. เพิ่มขนาดของตัวหนังสือให้ใหญ่ขึ้น

เพิ่มขนาดตัวหนังสือของปุ่มแต่ละปุ่มให้ใหญ่ขึ้น เพื่อการอ่านที่ชัดเจน นอกจากนี้ยังเพิ่มขนาดตัวหนังสือที่ชื่อไฟล์ หัวเรื่อง และเนื้อหาภายใน ให้อ่านได้สะดวกขึ้นอีกด้วย

Slide W12-2

https://drive.google.com/file/d/0Bysm0R5CF1l6cW1RV1FFa2RERlE/view?usp=sharing

Memo กลุ่ม 6 W 12-1

หน้าต่างเริ่มต้นของโปรแกรม Memo

เมื่อกด View จะขึ้นหน้าต่างของผู้ใช้ซึ่งจะปรากฎไฟล์ต่างๆทั้ง text file และ image file

เมื่อกดคำสั่ง New text จะขึ้นหน้าต่างสำหรับผู้ใช้ ให้ตั้งชื่อและเขียนข้อมูล text ลงไปในช่องว่างได้

เมื่อผู้ใช้ทำการกด Save จะมีหน้าต่างป๊อปอัพขึ้นมายืนยันว่าได้ทำการเซฟไฟล์ไปแล้ว (ในที่นี้อาจมีการแก้ไขให้ไม่ต้องมีหน้าต่างป๊อปอัพขึ้นมาในภายหลัง)

เมื่อกลับไปดูที่ View อีกครั้ง จะพบว่า text file ที่เราสร้างขึ้นมาใหม่ (ในที่นี้คือไฟล์ที่ชื่อว่า SaWadDee.txt) ได้ปรากฎเข้ามาในโฟลเดอร์ของ Text file แล้ว

หากทำการกดคำสั่ง Add จะมีป๊อปอัพขึ้นมาถามว่า จะเลือก add ไฟล์ชนิดใด และมีปุ่มกด Cancel เพื่อให้ผู้ใช้งานได้กดยกเลิก หากไม่ต้องการทำสิ่งนี้แล้ว

หากเลือก Text แล้วกดเข้าไปในโฟลเดอร์ต่างๆที่ต้องการ โปรแกรมจะคัดเลือกเพียงไฟล์ .txt ขึ้นมาเท่านั้น เช่นเดียวกันกับหากกดเลือก Picture โปรแกรมจะคัดเลือกเพียงไฟล์ .png ขึ้นมาให้เท่านั้น

หากทำการกดตกลงที่จะ Add ไฟล์ดังกล่าว ไฟล์นั้นจะถูกคัดลอกเข้าไปเก็บไว้ที่โฟลเดอร์ที่เรากำหนดไว้ กล่าวคือ ไฟล์ .txt จะไปเก็บไว้ที่โฟลเดอร์ text ส่วนไฟล์ .png จะถูกเก็บไว้ที่โฟลเดอร์ image

โฟลเดอร์ที่เก็บไฟล์ ที่กล่าวไปข้างต้น

หากอยู่ที่คำสั่งในคำสั่งหนึ่ง แล้วจะเปลี่ยนไปอีกคำสั่งหนึงกระทันหัน โปรแกรมจะสั่งให้กดปิดหน้าต่างคำสั่งนั้นๆไปเสียก่อน หากกดปิดหน้าต่างนั้นๆแล้ว จะมีป๊อปอัพถามผู้ใช้ว่า จะออกจริงหรือ? ดังภาพ

โค้ดใน mybutton.kv โดยใช้คำสั่ง on_release เป็นคำสั่งที่บอกว่า หากกดปุ่มนั้นๆแล้วปล่อย ให้ไปทำคำสั่งไหน

เช่นหากกดปุ่ม Add แล้วปล่อย จะไปทำคำสั่ง popupAdd อย่างที่เห็น ซึ่งภายในคำสั่ง popupAdd ใน mybutton.py นั้น จะเป็นการสร้างป๊อปอัพขึ้นมาให้ผู้ใช้

ซึ่งภายในจะมีคำสั่ง self.add_text.bind(on_release = self.addText) นั้นหมายความว่า หากกดปุ่ม Text แล้วปล่อย จะให้ไปทำคำสั่ง addText

เช่นเดียวกันกับ self.add_pic.bind(on_release = self.addPicture) คือ หากกดปุ่ม Picture แล้วปล่อย จะให้ไปทำคำสั่ง addPicture

และสุดท้าย self.cancel.bind(on_release = self.popup.dismiss) คือหากกดปุ่ม cancel แล้วปล่อย จะทำการปิดป๊อปอัพนั้นลง

ปล. ในคำสั่ง self.popup นั้น จะเห็นว่า auto_dismiss = False เพราะว่า ไม่ต้องการให้เมื่อผู้ใช้กดตำแหน่งใดๆนอกป๊อปอัพ แล้วให้ป๊อปอัพหายไปนั้นเอง

หากกด text แล้ว จะเข้ามาในคำสั่ง addText ซึ่งจะเป็นการสร้างป๊อปอัพให้ผู้ใช้เช่นกัน โดยตรง self.file จะมีคำสั่ง FileChooser ที่มีการกำหนด filters = ['*.txt'] อยู่ ซึ่งหมายความว่า ให้หาไฟล์ที่เป็น .txt โชว์ขึ้นมาเท่านั้น

เช่นเดียวกันคือ หากกดปุ่ม Picture จะเข้ามาในคำสั่ง addPicture ซึ่งจะเป็นการสร้างป๊อปอัพเช่นกัน เพียงแต่ตรง FileChooser นั้น จะกำหนด filters = ['*.png'] คือหาแต่ไฟล์ .png เท่านั้น

โดยทั้งสองปุ่มนั้นจะมีคำสั่งว่าถ้ากดปุ่มตกลงให้ไปทำคำสั่ง add_file หากกดปุ่มยกเลิก ให้ปิดป๊อปอัพนั้นไป

หากกดปุ่มตกลง จะเข้ามาทำในคำสั่ง add_file โดยในคำสั่งนี้จะกำหนดว่า หากเข้ามาทำแล้ว              ให้ปิดป๊อปอัพนั้นไป ซึ่งเงื่อนไขในคำสั่งนี้กล่าวว่า self.file.selection[0][-4:] == '.txt' นั้นหมายถึงหากไฟล์ที่เลือกอยู่นั้น 4 ตัวหลังของไฟล์คือ .txt (เช็คเพียงนามสกุลของไฟล์) จากนั้นจะทำคำสั่ง copyfile(self.file.selection[0], './text/') นั้นหมายถึงว่าให้ก็อปปี้ไฟล์นั้นไปเก็บไว้ที่โฟลเดอร์ text แต่ถ้า 4 ตัวหลังเป็น .png ให้ก็อปปี้ไฟล์นั้นไปเก็บไว้ที่โฟลเดอร์ image นั่นเอง

การ commit ของกลุ่ม 6 ที่ https://bitbucket.org/RIKTI/memo/commits/all