[Kivy] Popupの設定②　Popupで色を選択するダイアログを作成する

Popupで色を選択するダイアログの作成

　PopupとFileChooserを使用してファイル選択のダイアログを作成するサンプルが、公式のページにあります。これを参考にしてPopupとColorPickerを使用した色選択のダイアログを作成してみました。

　サンプルプログラムでは、Popup上のColorPickerのcolorの値をPopupを閉じる処理の関数に引数として渡しています。また、Popupを閉じる処理の関数は、メイン画面のクラス内の関数と紐付けており、紐付けた関数内でメイン画面のクラスの変数self.color_dataに取得したcolorの値を入れることで、メイン画面のクラスの他の関数でも、colorの値を使用できるようにしています。

今回紹介する内容
　・　関数の引数として、Popup上のWidgetの値を取得する
　・　Popup上で取得した色情報を使用する

kivy.uix.popupの設定②

関数の引数として、Popup上のWidgetの値を取得する

　Kv Languageで、Popup上のWidgetの値を関数の引数にするには、colorpicker.colorのようにid.プロパティのように記入します。以下では、’ok’ボタンのon_release()の関数において、colorpicker.colorを送っています。

<ColorPickerDialog>:
    BoxLayout:
        size: root.size
        pos: root.pos
        orientation: "vertical"

        ColorPicker:
            id: colorpicker

        BoxLayout:
            size_hint_y: None
            height: 30
            Button:
                text: "Cancel"
                on_release: root.cancel()

            Button:
                text: "Ok"
                on_release: root.select_color(colorpicker.color)

Popup上で取得した色情報を使用する

　関数に送った値は、以下のように引数(color)に入ります。以下では、取得した値を変数self.color_dataに入れています。こうすることにより、別の関数（ここではon_buttton2_press）内でcolorの値を使用することができます。

    def select_color(self, color):
        self.color_data = color
        self._popup.dismiss()

    def on_button2_press(self):
        if self.color_data is not None:
            print(
                f'R: {round(self.color_data[0]*255)},  '
                + f'G: {round(self.color_data[1]*255)},  '
                + f'B: {round(self.color_data[2]*255)},  '
                + f'A: {round(self.color_data[3]*255)}'
            )

サンプルプログラム

　下記の２つのファイルを同じフォルダに保存して、プログラムを実行すると左図の画面が表示されます。その中の’set color data’ボタンを押すと、右図の画面が表示されます。右図の画面で色を設定して’ok’ボタンを押すと、内部で色情報を保存します。
　色情報の保存後、左図の画面の’print color data’ボタンを押すと、選択した色情報がターミナルに表示します。

#:kivy 2.0


<ColorPickerTestWidget>:
    BoxLayout:
        size: root.size
        orientation: 'vertical'
        padding: 20
        canvas.before:
            Color:
                rgba: 0.7, 0.7, 0.7, 1
            Rectangle:
                size: self.size
                pos: self.pos

        Button:
            id: button1
            text: 'set color data'
            on_press: root.on_button1_press()

        Button:
            id: button2
            text: 'print color data'
            on_press: root.on_button2_press()

<ColorPickerDialog>:
    BoxLayout:
        size: root.size
        pos: root.pos
        orientation: "vertical"

        ColorPicker:
            id: colorpicker

        BoxLayout:
            size_hint_y: None
            height: 30
            Button:
                text: "Cancel"
                on_release: root.cancel()

            Button:
                text: "Ok"
                on_release: root.select_color(colorpicker.color)

# -*- coding: utf-8 -*-

import os
import kivy

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.floatlayout import FloatLayout
from kivy.lang import Builder
from kivy.config import Config
from kivy.properties import ObjectProperty
from kivy.uix.popup import Popup

kivy.require('2.2.0')

# 画面サイズの指定
Config.set('graphics', 'width', '600')
Config.set('graphics', 'height', '500')

Builder.load_file(os.path.dirname(__file__) + "/interface.kv")


class ColorPickerDialog(FloatLayout):
    select_color = ObjectProperty(None)
    cancel = ObjectProperty(None)


class ColorPickerTestWidget(Widget):
    color_data = None

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

    def on_button1_press(self):
        content = ColorPickerDialog(
            select_color=self.select_color, cancel=self.dismiss_popup)
        self._popup = Popup(title="Color Select", content=content,
                            size_hint=(0.9, 0.9))
        self._popup.open()

    def select_color(self, color):
        self.color_data = color
        self._popup.dismiss()

    def dismiss_popup(self):
        self._popup.dismiss()

    def on_button2_press(self):
        if self.color_data is not None:
            print(
                f'R: {round(self.color_data[0]*255)},  '
                + f'G: {round(self.color_data[1]*255)},  '
                + f'B: {round(self.color_data[2]*255)},  '
                + f'A: {round(self.color_data[3]*255)}'
            )


class ColorPickerTestApp(App):
    def __init__(self, **kwargs):
        super(ColorPickerTestApp, self).__init__(**kwargs)
        self.title = 'ColorPicker Test'

    def build(self):
        return ColorPickerTestWidget()


if __name__ == '__main__':
    app = ColorPickerTestApp()
    app.run()