วันอังคารที่ 25 กันยายน พ.ศ. 2561

XO update


   code ปัจจุบัน

from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.button import Button
from kivy.uix.widget import Widget
from kivy.uix.gridlayout import GridLayout
class Table(GridLayout) :

def __init__(self, **kwargs):
super(Table, self).__init__(**kwargs)

self.cols = 3
self.padding = 50
self.spacing = 2
self.round = 0 #count round for change player
self.arrayXO = [] #collect position
#add button to the layout
for item in range(1,10) :
btn = Button(text= " ", id = str(item))
btn.bind(on_press = self.btn_pressed)
self.add_widget(btn)
self.arrayXO.append(btn.id)
def btn_pressed(self,btn) :
self.round += 1
if self.i%2 == 0 :
btn.text = "O"
self.arrayXO[int(btn.id)-1] = "O"
elif self.i%2 == 1 :
btn.text = "X"
self.arrayXO[int(btn.id)-1] = "X"
print(btn.id)
if self.arrayXO[0]==self.arrayXO[1]==self.arrayXO[2] or
self.arrayXO[3]==self.arrayXO[4]==self.arrayXO[5] or
self.arrayXO[6]==self.arrayXO[7]==self.arrayXO[8] or
self.arrayXO[0]==self.arrayXO[3]==self.arrayXO[6] or
self.arrayXO[1]==self.arrayXO[4]==self.arrayXO[7] or
self.arrayXO[2]==self.arrayXO[5]==self.arrayXO[8] or
self.arrayXO[0]==self.arrayXO[4]==self.arrayXO[8] or
self.arrayXO[3]==self.arrayXO[5]==self.arrayXO[7] :
#condition for check win
if self.i%2 == 0 :
print(" O win")
elif self.i%2 == 1 :
print(" X win")

class xo(App):
def build(self):
return Table()

xo().run()


โดยหลังจากเปลี่ยนมาใช้ Visual Studio แล้ว มีปัญหาคือ เมื่อกด run ไปแล้ว และกลับมาแก้ไข code หากไม่กด save โปรแกรมจะจำค่า code เดิม ไม่ run ไในส่วนที่แก้ไข ทำให้ต้อง save ทุกครั้งที่แก้ไข code 
              และในส่วนของปุ่มกด ได้ใช้คำสั่ง bind เป็นการเชื่อมโยงปุ่มเข้ากับฟังก์ชัน btn_pressed โดยการใช้คำสั่ง on_press ที่จะไปเรียกใช้ฟังก์ชัน btn_pressed ในขณะที่กดปุ่ม ซึ่งจะแตกต่างกับคำสั่ง on_release ที่จะทำงานหลังจากที่กดปุ่มและปล่อยแล้ว


การใส่ค่า X O ลงใน list เพื่อนำไปตรวจสอบการชนะ
หน้าต่างเกม ในขณะที่กด X และ O ลงไปแล้ว 
     OUTPUT จะแสดงค่าตอรการกดครั้งที่...      

     และนำสัญลักษณ์ไปแทนลงในตำแหน่ง



ถ้าเรียงตรงกันตามเงื่อนไข จะ print ฝ่านที่ชนะลงบนช่องแสดง output

วันอาทิตย์ที่ 23 กันยายน พ.ศ. 2561

XO (tic tac toe update)

           จากครั้งที่แล้วที่ได้เสนอปัญหาในเรื่องของอาการเครื่องค้างเมื่อกด run โปรแกรม และใน jupyter notebook เมื่อ run ไปแล้วหนึ่งครั้งเมื่อกด run ใหม่อีกครั้ง จะไม่ run จึงได้เปลี่ยนมาใช้ Visual Studio Code แทนการใช้ jupyter notebook

update เกม =======>


ใส่ x หรือ o ลงในตาราง ด้วยการใช้คำสั่ง bind,on_press
และใช้การกำหนดค่าการใส่ x หรือ o โดยการ mod ด้วย 2


class Table(GridLayout) :

def __init__(self, **kwargs):
super(Table, self).__init__(**kwargs)

self.cols = 3
self.padding = 50
self.spacing = 2

#add button to the layout
for item in range(1,10) :
btn = Button(text= " ", id = str(item))
btn.bind(on_press = self.btn_pressed)
self.add_widget(btn)

def btn_pressed(self,btn) :

for i in range(1,10) :

if i%2 == 0 :
btn.text = "O"
elif i%2 == 1 :
btn.text = "X"

และได้ผลลัพธ์คือ สามารถใส่ X ลงในตารางได้แล้ว แต่ไม่สามารถใส่ O ลงในตารางได้






วันเสาร์ที่ 22 กันยายน พ.ศ. 2561

สร้าง tic tac toe

หลังจากที่ได้ไปศึกษา tutorials ของ kivy มาก็วางแนวคิดในการทำเกมดังนี้

1 สร้างตาราง
2 ใส่ X หรือ O ได้
3 ตรวจสอบการชนะกัน

และในส่วนรายละเอียดการเล่นเกมวางแผนไว้ดังนี้

1 Start game with  “O”
2 เมื่อเลือกช่อง  ให้ตรวจสอบว่า Text =“ “
3 ถ้าใช่ ให้ใส่ O ลงไปแทนที่
4 สลับมาเป็น “X”
5 Check เรียงตรงกัน 3 ช่อง สัญลักษณ์ที่เรียง 3 ช่องชนะ
6 ถ้าเต็ม 9 ช่องแล้วไม่มีแนวไหนที่เรียงตรงกัน 3 ช่อง เสมอ
7 เคลียร์ทั้งหมดเพื่อเริ่มเกมใหม่

ซึ่งได้ใช้การ import GridLayout มาใช้ในการสร้างตารางด้วย code

class Table(GridLayout):
    def __init__(self,**kwargs) :
        super(Table,self).__init__(**kwargs)
        self.cols = 3
        self.padding = 20
        self.spacing = 2
        self.add_widget(Button(text=" "))
        self.add_widget(Button(text=" "))
        self.add_widget(Button(text=" "))
        self.add_widget(Button(text=" "))
 self.add_widget(Button(text=" "))

ซึ่ง code มีความยาว และแต่ละบรรทัดมีการทำงานที่เหมือนกัน จึงเปลี่ยน code มาเป็นการใช้ loop

class Table(GridLayout) :
   def __init__(self, **kwargs):
         super(Table, self).__init__(**kwargs)
         self.cols = 3
         self.padding = 20
         self.spacing = 2
         for item in range(1,10) :
               btn = Button(text= " ", id = str(item))
               self.add_widget(btn)

ซึ่งหน้าต่างที่ได้จะเป็นลักษณะดังนี้

เมื่อ run โปรแกรม         

เมื่อกดที่ช่องใดช่องหนึ่ง





วันพุธที่ 19 กันยายน พ.ศ. 2561

Install Kivy

            เนื่องจากไม่ได้มีการติดตั้ง python ก่อนการติดตั้ง Kivy จึงต้องทำการติดตั้ง python ก่อน โดยเข้าไปที่ https://www.python.org/ เลือก Download
โดยหากเรากด Download ตรงนี้ไฟล์ที่โหลดไปจะเป็นไฟล์ 32bit ให้เรากดไปที่คำว่า Windows จะได้หน้าต่างแบบนี้

กดที่ Windows x86-64 executable installer และก่อนลงให้ตรวจสอบก่อนว่ามี python เวอร์ชันอื่นอยู่หรือไม่ หากมีก็ให้ uninstall และทำการลงโปรแกรมใหม่ผ่านไฟล์ที่ download มา ซึ่งตอนแรกก็ได้มีปัญหาเนื่องจากไม่ได้ดูว่าไฟล์ที่ download มาเป็นไฟล์ 32 bit ทำให้เมื่อลงโปรแกรมเสร็จแล้วใช่สามารถเรียกใช้งาน pip ได้ ทำให้ต้องลบโปรแกรมและลงใหม่โดยในการลงในให้คลิกเลือก path ด้วย เมื่อลงได้แล้วก็ลง Kivy ต่อ โดยโหลดจาก https://kivy.org/doc/stable/installation/installation-windows.html และลองใช้งานผ่าน jupyter notebook ปรากฏว่าใช้งานได้





อ้างอิง :
https://youtu.be/9ScSKxNoZuM
https://youtu.be/bXWlyOMYpRE

วันอาทิตย์ที่ 16 กันยายน พ.ศ. 2561

Flowchart ของหนู



            จากโค้ด    if(x<0){
                                x=500;
                                }
                              if(x>500){
                                x=0;
                                }
                              if(y>500){
                                y=0;
                                }
                              if(y<0){
                                y=500;
                                }
และได้เขียนเป็น flowchart ออกมาดังรูปด้านล่าง 

ซึ่งจะเห็นได้ว่าเป็นการเขียน flowchart ที่ผิดวิธี ดังนั้น ครั้งนี้เราจะมาพูดถึงการเขียน flowchart ที่ถูกต้อง
ซึ่ง flowchart ที่ดีจะต้องถูกต้อง อ่านและทำความเข้าใจได้ง่าย มีการบอกลำดับขั้นตอนการทำงานด้วยลูกศรจากลำดับก่อนหน้าไปลำดับถัดไป

ตัวอย่างทั่วไปของการเขียน flowchart

Flowchart การต้มบะหมี่กึ่งสำเร็จรูป



Flowchart การต้มบะหมี่กึ่งสำเร็จรูปแบบมีเงื่อนไข



ซึ่ง flowchart ข้างต้นนั้นเป็นแบบ if else คือ หากตรงตามเงื่อนไขก็จะทำงานและหยุดการทำงาน
ซึ่งการใช้ if หรือ if else นั้น จะมีความต่างกันในการเขียน  Flowchart คือ การใช้ if เมื่อเราตรวจสอบเงื่อนไขแล้วไม่ว่าจะเป็นจริงหรือเท็จ ก็จะตรวจสอบเงื่อนไขต่อไปทั้งหมดด้วย ส่วนการใช้ if else นั้น หากเงื่อนไขเป็นจริงแล้ว โปรแกรมจะหยุดการทำงานไม่ตรวจสอบเงื่อนไขต่อไปเช่นตัวอย่างด้านล่างนี้

#การทำงานของ if
X=0                              #x มีค่าเท่ากับ 0
if x>5 :                         #ถ้า x มีค่ามากกว่า 5
    print('x>5')               #print x>5
if x<10:                        #ถ้า x มีค่าน้อยกว่า 10
    print('x<10')             # print x<10

ซึ่ง output ที่ได้คือ x<10 แต่ถ้าหากเปลี่ยนให้ x มีค่าเท่ากับ 6 output ที่ได้จะแสดงทั้ง x>5 และ x<10เนื่องจาก การทำงานของ if จะตรวจสอบทุกเงื่อนไข

#การทำงานของ if else
X=0                              #x มีค่าเท่ากับ 0
if x>5 :                         #ถ้า x มีค่ามากกว่า 5
    print('x>5')               #print x>5
else :                            #นอกจากนั้น 10
    print('x<10')             # print x<10

ซึ่ง output ที่ได้คือ x<10 แต่ถ้าหากเปลี่ยนให้ x มีค่าเท่ากับ 6 output ที่ได้จะแสดง x>5 เพียงอย่างเดียว เนื่องจากเงื่อนไขเป็นจริงแล้ว

และ flowchart ที่ถูกต้องของ code ในตอนแรกนั้นจะมีหน้าตาเป็นดังนี้


วันพฤหัสบดีที่ 13 กันยายน พ.ศ. 2561

Mercurial

            mercurial เป็น version control system รูปแบบหนึ่งที่ทำงานผ่าน command line หรือ terminal
โดยจะเข้ามามีส่วนช่วยในการจัดการ code ในไฟล์ที่เราเลือกเข้าไปให้ mercurial เก็บไฟล์ไว้ และสามารถแชร์ไปให้คนอื่นช่วยกันพัฒนา code ได้ โดยจะมีการเก็บประวัติการแก้ไขต่างๆไว้ให้เรียกดูได้เสมอ ส่วนวิธีการลง mercurial ใน ubuntu นั้น สามารถทำได้ง่ายๆ โดยการเปิด Terminal ชึ้นมาแล้วพิมพ์ลงไปว่า sudo apt-get install mercurial จากนั้นให้ใส่รหัสผ่านเครื่องที่ตั้งไว้ หากขึ้นหน้าจอดังนี้ก็หมายความว่าสามารถใช้งานได้แล้ว


 โดยมีคำสั่งพื้นฐานต่างๆให้ใช้งาน เช่น add commit remove status และคำสั่งอื่นๆอีกมากมาย ซึ่งสามารถศึกษาเพิ่มเติมได้ที่ https://www.mercurial-scm.org/wiki/UsingExtensions

วันศุกร์ที่ 7 กันยายน พ.ศ. 2561

สร้างโปรแกรมเขียน Flowchart

            หลังจากที่ได้รับโจทย์ให้เขียนโปรแกรมที่สามารถรับ code เข้ามาและทำการแสดงผลเป็น Flowchart ทางกลุ่มจึงได้ไปศึกษาเพิ่มเติมในเรื่องของการเขียน Flowchart โดยได้ศึกษาจาก http://share.olanlab.com/th/it/blog/view/211 โดยสัญลักษณ์ที่ใช้ในการเขียนมีดังนี้


    Start / Stop  ใช้เมื่อเริ่มต้นหรือจบ




  Process  ใช้แสดงการกระทำ เช่น การกำหนดค่า


       Input / Output ใช้นำเข้าหรือส่งออกค่าต่างๆ เช่น แสดงผลข้อมูล x


       Decision ใช้สำหรับการตัดสินใจ ผลที่ได้ออกมาเป็น ใช่ หรือ ไม่ เสมอ


        Annotation ใช้เพื่อเขียน comment ให้กับโปรแกรม

   
                     Connector ใช้เชื่อมการทำงาน


   
       Direction Flow ใช้บอกทิศทางการทำงานของโปรแกรม

Update : 09/09/2018

            หลังจากที่ได้ไปศึกษาทำความเข้าใช้ flowchart เพิ่มเติมแล้ว ก็ได้ไปศึกษาเรื่องของการรับค่า code ที่จะใส่เข้ามาในโปรแกรม โดยศึกษาเพิ่มเติมในเรื่องของการ load file จากเว็บไซต์ processing.org ในเรื่องของการเปิดไฟล์มาอ่าน โดยการใช้คำสั่ง  lines = loadString(" ชื่อไฟล์.นามสกุล ") และอ่านไฟล์ทีละบรรทัดและบันทึกลงใน array เพื่อที่จะนำมาใช้งานต่อไป 

Update : 10/09/2018

            สร้างสัญลักษณ์ โดยเริ่มจากการวาดให้อยู่กับที่ก่อน

void setup(){
  size(600,400);
  draw_dimond();
  draw_line();
}
void draw_dimond(){
  fill(255);
  line(40,100,100,50);
  line(40,100,100,150);
  line(100,50,160,100);
  line(100,150,160,100); 
}

void draw_line(){
  line(100,150,100,200);
  fill(0);
  triangle(95,200,105,200,100,205);
}

จะได้รูปออกมาดังนี้