Kivy(Screen manager)

  Screen manager ตามชื่อก็คือ ตัวจัดการหน้าจอ ในหัวข้อนี้จะพูดถึงการเลือกสีสำหรับตัวที่เราสร้างขึ้นมาโดยตัวคลาส ScreenManager นั้นจะช่วยให้เราจัดการหน้าจอที่ขนาดต่างกันแต่อยุ่บนหน้าต่างเดียวกันใน Kivy จะให้ความสำคัญกับหน้าจอมากกว่าหน้าต่างที่ใช้ตอนรันโค้ดเพราะต้องเขียนลงไปในหลายอุปกรณ์
  ตัวที่เราสร้างขึ้นมานั้นมีอยู่สีเดียวซึ่งเราจะมีวิธีเปลี่ยนสี โดยใช้ widget ที่เรียกว่า ColorPicker ตัวนี้เป็น widgets ที่ทาง Kivy มีมาให้ซึ่งหน้าตาจะประมาณนี้

(ภาพจากหนังสือ Kivy interacrive application in python)

 จะเห็นได้ว่าตัว widget นั้นมีขนาดออกไปทางแนวกว้างซึ่งมันจะยากที่จะบรรจุลงไปใน interface ที่เราใช้ปกติซึ่งจุดนี้จะมีตัว ScreenManager เข้ามาช่วยแก้ปัญหาโดยมีพื้นฐานหลักง่ายๆเลยคือมันจะยอมให้เราให้ได้หลายหน้าต่างหรือก็คือมันจะเปลี่ยนมาที่หน้าต่างนี้เพื่อให้เราปรับสีโดยให้เราสร้างไฟล์ Kv ขึ้นมาใหม่โดยให้มีคลาส ScreenManager อยู่ด้วย

โค้ดในไฟล์ .kv 

# File name: comicscreenmanager.kv
#:kivy 1.7.0
#:import FadeTransition kivy.uix.screenmanager.FadeTransition
<ComicScreenManager>:
    transition: FadeTransition()
    color_picker: _color_picker#สร้าง Attibute เพื่อนำไปใช้
    ComicCreator:
    Screen:#ไม่ได้เรียกใช้ Colorpicker ตรงๆแต่ว่าฝังเข้ามากับ ScreenWidget แล้วนำไปใช้
        name: 'colorscreen'
        ColorPicker:
            id: _color_picker#คือการนำตัว Attibute มาใช้งานนั้นเอง
            Button:
                text: "Select"
                pos_hint: {'center_x': .75, 'y': .05}
                size_hint: None, None
                size: 150, 50
                on_press: root.current = 'comicscreen'

ตัว ScreenManager นั้นมีควรจะมี widget ของ screen เป็นคลาสหลักไม่สามารถมีพวก Label,Button,layouts ใส่ลงไปได้

และเราต้องทำการแก้ส่วนหัวของไฟล์ comiccreator.kv เพื่อให้สามารถใช้งานในส่วนของ Screen

<ComicCreator@Screen>:
    name: 'comicscreen'

  การที่เราตั้งชื่อเป็นการทำเพื่อระบุว่าเป็น Screen ตัวไหนโดยชื่อนี้นั้นได้ถูกใช้ในส่วนด้านบนตรง Button ไปแล้วซึ่งเราได้ทำการเรียกใช้ฟังก์ชั่น on_press ซึ่ง root.current ตอนนี้ก็คือ ScreenManager นั้นเองพอเรากดลงไปก็จะเรียกตัว comicscreen มาใช้งาน

  ในส่วนต่อไปเราต้องทำการแก้ในส่วนของ generaloption เพื่อให้กด color แล้วเด้งหน้าต่าง colorpicker ออกมาโดยไปทำการเพิ่มฟังก์ชั่นในไฟล์ generaloptions.py 

def color(self, instance):

  self.comic_creator.manager.current = 'colorscreen'

แล้วท้ายสุดในหัวข้อนี้เราต้องทำการไปเพิ่มในไฟล์ comiccreator.py เพื่อให้มันทำการใช้งานออกมาได้นั้นเอง

from kivy.uix.screenmanager import ScreenManager#เพิ่มส่วนของ ScreenManager เข้ามา
class ComicScreenManager(ScreenManager):#สร้างคลาสที่สือทอดตัวScreenManager
    pass
class ComicScreenManagerApp(App):
    def build(self):
        return ComicScreenManager()
#ให้รีเทิร์นตัวมันเองกลับไปเวลาเรียกใช้คลาสนี้โดยส่วนนี้จะไปทำงานในไฟล์ .kv
โดยในส่วนของ python นั้นเราสามารถใช้คำสั่ง Builder String ในการเขียนโค้ดของ Kivy ลงไปได้
ตัวอย่างเช่น

โค้ดตัวอย่าง

from kivy.app import App
from kivy.uix.gridlayout import GridLayout
from kivy.lang import Builder

Builder.load_string("""
<GridLayout>:
    cols:2
    Label:
        color: 1,0,0,1
        canvas:
            Line:
                points: self.x, self.y, self.x + self.width, self.y + self.height
    Widget:
        canvas:
            Line:
                points: self.x, self.y, self.x +self.width, self.y + self.height
""")

class LabelApp(App):
    def build(self):
        return GridLayout()

if __name__=="__main__":

    LabelApp().run()

จะเห็นว่าก็สามารถรันได้เหมือนพิมไฟล์ .kv เพียงแค่เป็นการโหลดตัว String เข้ามานั่นเองผลลัพท์ที่ได้จากโค้ดด้านบน

(ภาพจากหนังสือ KivyInteractiveinpython)

  และจากผลลัพธ์ที่ได้ด้านบนเราจะสังเกตได้อีกอย่างเราได้ทำการเปลี่ยนสีเป็นสีแเดงในส่วนของ Label แต่ว่าพอเราเรียกในส่วนของ widget(เส้นที่ 2)จะเห็นได้ว่าก็ยังเป็นสีแดงเหมือนกัน

  โดยเมื่อเราต้องการนำไปเรียกใช้เราต้องทำการเพิ่มโค้ดส่งไปในส่วนที่มันใช้วาดรูปขึ้นมาคือในส่วนของ ToolStickman,draw (class ToolFigure )Tool,widgetize (class ToolFigure )

โค้ดที่เพิ่มคือ

screen_manager = self.parent.comic_creator.manager

color_picker = screen_manager.color_picker

โดยโค้ดนี้คือมีการสร้าง Screenmanager ขึ้นเพิ่อเราทำการเลือกสีแล้วให้ตัว color picker เก็บสีที่เราเลือกไว้แล้วให้เราทำการไปเพิ่มส่งในส่วนที่ใช้วาดแต่ละตัว