วันพุธที่ 16 กันยายน พ.ศ. 2558

Kivy(Button&Widgets)

  ในส่วนของ Kivy จะมองเป็นเหมือน library เพิ่มขึ้นมาใน python ไว้ให้เรา import เข้ามาแล้วให้เราเรียกใช้งานมันได้โดย Kivy นั้นจะทำให้เราสามารถวาดรูปหรือสิ่งต่างๆออกมาได้โดยในปกติแล้วpython ไม่สามารถวาดรูปได้ แต่ถ้ามีการ import เข้ามาก็จะสามารถใช้งานได้โดยเราต้องทำการติดตั้ง Kivy ลงไปใน ระบบปฏิบัจิการของเราก่อนโดยถ้าใช้งานใน ubuntu เราก็สามารถติดตั้งได้โดยใช้คำสั่งตามนี้

  sudo add-apt-repository ppa:kivy-team/kivy

  sudo apt-get update

  sudo apt-get install python3-kivy

เมื่อทำการเรียกใช้คำสั่งทั้งหมดเสร็จแล้วเราก็สามารถเรียกใช้งานตัว Kivy ได้โดยจะมีตัวอย่างให้ดูโดยเราต้องทำการเรียกใช้ คำสั่ง นี้

  sudo apt-get install kivy-examples

โดยเมื่อทำการติดตั้งเรียบร้อยแล้วจะมีตัวอย่างให้เราสามารถมาดูได้เยอะพอสมควร

 
ละจากการศึกษา Kivy จากหนังสือ Kivy-Interactive-Applications-in-Python นั้น
เรื่องแรกจะเป็นเรื่องเกี่ยวกับ การใช้งาน Kivy เบื้องต้นโดยจะมีตัวอย่างโค้ดมาให้โดยตัวอย่างโค้ดแรกนั้นก็คือ

from kivy.app import App#ดึง kivy มาใช้โดยให้เหมือนเป็นคลาสแม่
from kivy.uix.button import Label#ดึงส่วนนึงของ kivy มาใช้เป็นตัวแสดงผลในชื่อ Label


class HelloApps(App):#สร้างคลาสโดยสร้างเป็นคลาสลูกของ App
    def build(self):#เรียกใช้เมทอดเพื่อสร้างหน้าต่างแสดงผล
        return Label(text = 'Hello world')#คืนค่าตัวแสดงผลโดยให้แสดงคำว่า'Hello World!'


HelloApps().run()

  กล่าวต่อไปคือ kivy นั้นไม่ได้เป็นแค่ library ของ python ทั้งหมดเรายังสามารถเพิ่มเติมคำสั่งเข้าไปเองได้โดยใช้การสร้างไฟล์ .kv ขึ้นมาแล้วทำการตั้งชื่อเหมือนกันกับไฟล์ .py และอยู่ในพื้นที่เดียวกันกับไฟล์ .py เพื่อให้คำสั่งมาเรียกใช้เพิ่มเติมจากไฟล์.kvได้อีกด้วย(เราสามารถสร้างไฟล์.kyโดยใช้notepad ใน window หรือ texteditor ใน ubuntu)
จากนั้นก็จะมีโค้ดตัวอย่างมาให้คือ

from kivy.app import App
from kivy.uix.button import Label

class HelloApps2(App):
    def build(self):
        return Label()#ต่างกับอันแรกแค่ไม่มีการส่งค่าเข้าไป


HelloApps2().run() 

และให้เราสร้างไฟล์ .kv ขึ้นมาโดยให้ตัวอย่างโค้ดมาดังนี้

<Label>:
   text = 'Hello World!'

ให้เรานำทั้ง 2 ไฟล์ไปไว้ใน directory เดียวกันและทำการเรียกใช้โดยผลลัพท์ที่ได้จะได้เหมือนกับในตัวอย่างที่ 1 เพียงแต่เราสามารถแก้ไขคำที่เราจะแสดงได้ในไฟล์ .kv ไม่จำเป็นต้องไปแก้ในโค้ด
(หากเราต้องการลดหน้าต่างการแสดงผลให้เล็กลงสามารถไปเรยกใช้ใน terminal(ubuntu)หรือ commandline(window)เพื่อทำการเลือกไซส์แสดงผลเองได้โดยให้เราใช้คำสั่ง python <name>.py --size=(width)x(height) จะแสดงผลออกมาให้เราเลยแต่ไซส์จะเท่าที่เรากำหนดไว้)

ตัวอย่างต่อมาจะเป็นการสร้าง widgets แบบพื้นฐานโดยในตัวอย่างที่แล้ว Label ก็เป็น widgets ตัวนึงที่ Kivy นั้นมีให้เราใช้และยังมีอีกหลายตัวยกตัวอย่างเช่น button,label,checkboxes โดยตัว widgets นั้นจะเป็นการสร้างเพื่อทำเป็น interface ติดต่อกับผู้ใช้งาน
โดยตัวอย่างโค้ดที่ได้เป็นดังนี้

from kivy.app import App
from kivy.uix.widget import Widget#ดึงในส่วนwidgetsมาใช้

class MyWidget(Widget):
    pass

class widgets(App):
    def build(self):
        return MyWidget()

widgets().run() 


โดยเราต้องทำการสร้างไฟล์ .kv มาอีกไฟล์เพื่อทำการเขียน widgetsของเราเองโดยในหนังสือให้ตัวอย่างโค้ดที่ต้องนำมาเขียนในไฟล์ .kv คือ

<MyWidget>:#ในคลาส widgets จะให้เรามาเขียนเองตรงนี้

  Button:#เป็นการสร้างส่วนแสดงผลแบบเป็นปุ่ม
    text:'Hello'#แสดงผลคำว่า Hello
    pos: 0, 100#แสดงในตำแหน่ง x = 0, y = 100
    size: 100,50#กำหนดขนาด
    color: .8,.9,0,1#กำหนดสี
    font_size: 32#กำหนดขนาดตัวอักษร


  Button:
    text:'World!'
    pos: 100, 50
    size: 100, 50
    color: .8,.9,0,1
    font_size: 32


และให้เราตั้งชื่อไฟล์ทั้ง 2 ไฟล์เป็นชื่อเดียวกันแต่นามสกุลต่างกันนมาไว้ในที่เดียวกันเมื่อเรียกใช้จะได้ผลลัพท์ที่ได้คือ


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

<Mybutton@Button>:
  color: .8,.9,0,1
  font_size: 32
  size: 100, 50

<MyWidget>:


  Mybutton:
    text: 'Hello'
    pos: root.x, root.top-self.height


  Mybutton:
    text: 'World!'
    pos: root.right - self.width , root.y
 


จากตัวอย่างโค้ดอันนี้จะเห็นได้ว่าค่าตำแหน่งถูกแทนด้วยตัวแปรของระบบซึ่งจะลองดูผลลัพท์ที่ได้คือ 


 Size = 200x150

 

Size = 400x300



จะเห็นไดว่าถึงขนาด size จะใหญ่ขึ้นหรือเล็กลงตัว widgets ของเรานั้นก็จะยังอยู่ที่เดิมต่างจากตัวอย่างโค้ดอันแรกที่ตัวwidgetsจะไม่เปลี่ยนตามขนาดไซส์


ไม่มีความคิดเห็น:

แสดงความคิดเห็น