Kivy公式サイトのKivy Crash Course 6 – Kivy propertiesを作ってみた!

<<<関連記事>>

Kivyというライブラリを使ってPythonでアプリを作って行く

Python自作サンプル集
Swiftでアプリ開発される方向け
これからプログラミングを始める方へ
プログラミングと資格について

Pythonでマルチタッチアプリを作るために、こちらの本で学んでいます。

Kivyの公式サイトは英語ばかりで泣きそうでしたが、この本を読んで行ったら公式サイトのサンプルアプリも作れるようになりました。

上の本の、4章を終えた所までで類題として作れるアプリです。

Video(YouTube)

この動画では、前回PythonとKV言語で作ったプログラムを、

Kivy公式サイトのKivy Crash Course 5 – Kivy languageで作った所までです。

前回のコード

「main.py」

from kivy.app import App
from kivy.uix.scatter import Scatter
from kivy.uix.label import Label
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.textinput import TextInput
from kivy.uix.boxlayout import BoxLayout
import random


class ScatterTextWidget(BoxLayout):
    def change_label_colour(self,args):

        colour=[random.random()
        for i in range(3)]+[1]
        label=self.ids[‘my_label’]
        label.color=colour
class TutorialApp(App):
    def build(self):
        return ScatterTextWidget()
    def some_function(args):
        print(‘text changed’)

if name == “main”:
TutorialApp().run()

「tutorial.kv」

<ScatterTextWidget>:
    orientation:’vertical’
    TextInput:
        id:my_textinput
        font_size:150
        size_hint_y:None
        height:200
        text:’dafault’
        on_text:root.change_label_colour()

    FloatLayout:
        Scatter:
            Label:
                id:my_label
                text:my_textinput.text
                font_size:150

これを今回用に改変していきます。

エディタ Visual Studio Codeに書いていってターミナルで実行します。

前回の「crash5」というフォルダの内容「main.py」と「tutorial.kv」を、今回の「crash6」というフォルダに保存して動作を確認しました。

では、今回の動画(全部英語で泣きそう)をみながら食らいついてコードを書きました。

動画の3分5秒あたりまでの内容です。

文字を入力したり消したりすると、色が変わるのは前回と同じで、今回は文字の分身が現れます。

文字列が「default」だと分かりにくいので、「abcdefg」とした場合のスクショを掲載します。

「main.py」

from kivy.app import App
from kivy.uix.scatter import Scatter
from kivy.uix.label import Label
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.textinput import TextInput
from kivy.uix.boxlayout import BoxLayout
import random


class ScatterTextWidget(BoxLayout):
    def change_label_colour(self,args):

        colour=[random.random()
        for i in range(3)]+[1]
        label=self.ids[‘my_label’]
        label.color=colour

class TutorialApp(App):
    def build(self):
        return ScatterTextWidget()

def some_function(args):
print(‘text changed’)
if name == “main”:
TutorialApp().run()

「tutorial.kv」

<ScatterTextWidget>:
    orientation:’vertical’
    TextInput:
        id:my_textinput
        font_size:150
        size_hint_y:None
        height:200
        on_height:do_someting()
        text:’dafault’
        on_text:root.change_label_colour()
    FloatLayout:
        Scatter:
            Label:
                id:my_label
                text:my_textinput.text
                font_size:150
    BoxLayout:
        orientation:’horizontal’
        size_hint_y:None
        height:150
        Label:
            text:my_textinput.text[:3][::-1]
            font_size:100
        Label:
            text:my_textinput.text[-3:][::-1]
            font_size:100

スライサーの所のコードを見ながら確認します。

左側の文字はabcdefgの最初から3文字分の「abc」が「cba」になっています。

右側の文字はabcdefgの後ろから3文字分の「efg」が「gfe」になっています。

次に、4分5秒の所のコードです。

このコードでは、色が分身ラベルの左右両方に反映されています。

「main.py」

from kivy.app import App
from kivy.uix.scatter import Scatter
from kivy.uix.label import Label
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.textinput import TextInput
from kivy.uix.boxlayout import BoxLayout
import random


class ScatterTextWidget(BoxLayout):
    def change_label_colour(self,args):

        colour=[random.random()
        for i in range(3)]+[1]
        label=self.ids[‘my_label’]
        label.color=colour
        label1=self.ids.label1
        label2=self.ids.label2
        label1.color=colour
        label2.color=colour

class TutorialApp(App):
    def build(self):
        return ScatterTextWidget()
def some_function(args):
    print(‘text changed’)

if name == “main”:
TutorialApp().run()

「tutorial.kv」

<ScatterTextWidget>:
    orientation:’vertical’

    TextInput:
        id:my_textinput
        font_size:150
        size_hint_y:None
        height:200
        on_height:do_someting()
        text:’dafault’
        on_text:root.change_label_colour()
    FloatLayout:
        Scatter:
            Label:
                id:my_label
                text:my_textinput.text
                font_size:150
    BoxLayout:
        orientation:’horizontal’
        size_hint_y:None
        height:150
        Label:
            id:label1
            text:my_textinput.text[:3][::-1]
            font_size:100
        Label:
            id:label2
            text:my_textinput.text[-3:][::-1]
            font_size:100


最後に、8分35秒の所のコードです。

Python側をシンプルにして、プロパティを使っています。

「main.py」

from kivy.app import App
from kivy.uix.scatter import Scatter
from kivy.uix.label import Label
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.textinput import TextInput
from kivy.uix.boxlayout import BoxLayout
from kivy.properties import ListProperty
import random


class ScatterTextWidget(BoxLayout):
    text_colour=ListProperty([1,0,0,1])
    def change_label_colour(self,args):

        colour=[random.random()
        for i in range(3)]+[1]
        self.text_colour=colour
class TutorialApp(App):
    def build(self):
    return ScatterTextWidget()

def some_function(args):
print(‘text changed’)

if name == “main”:
TutorialApp().run()

「tutorial.kv」

<ScatterTextWidget>:
    orientation:’vertical’

    TextInput:
        id:my_textinput
        font_size:150
        size_hint_y:None
        height:200
        on_height:do_someting()
        text:’dafault’
        on_text:root.change_label_colour()

    FloatLayout:
        Scatter:
            Label:
                id:my_label
                text:my_textinput.text
                font_size:150
                color:root.text_colour
    BoxLayout:
        orientation:’horizontal’
        size_hint_y:None
        height:150
        Label:
            id:label1
            text:my_textinput.text[:3][::-1]
            font_size:100
            color:root.text_colour
        Label:
            id:label2
            text:my_textinput.text[-3:][::-1]
            font_size:100
            color:root.text_colour

Kivyというライブラリを使ってPythonでアプリを作って行く

Python自作サンプル集
Swiftでアプリ開発される方向け
これからプログラミングを始める方へ
プログラミングと資格について

Kivy公式サイトのKivy Crash Course 5 – Mixing python and kivy languageを作ってみた!

Kivyというライブラリを使ってPythonでアプリを作って行く

Python自作サンプル集
Swiftでアプリ開発される方向け
これからプログラミングを始める方へ
プログラミングと資格について

Pythonでマルチタッチアプリを作るために、こちらの本で学んでいます。

Kivyの公式サイトは英語ばかりで泣きそうでしたが、この本を読んで行ったら公式サイトのサンプルアプリも作れるようになりました。

上の本の、4章を終えた所までで類題として作れるアプリです。

Video(YouTube)

この動画では、前回PythonとKV言語で作ったプログラムを、文字の色をランダムに改変していきます。

前回の内容 Kivy公式サイトのKivy Crash Course 4 – Kivy language

前回のコードです。
これを今回用に改変していきます。

エディタ Visual Studio Codeに書いていってターミナルで実行します。

前回の「crash4」というフォルダの内容「main.py」と「tutorial.kv」を、今回の「crash5」というフォルダに保存して確認しました。

そのコードです。

「main.py」

from kivy.app import App
from kivy.uix.scatter import Scatter
from kivy.uix.label import Label
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.textinput import TextInput
from kivy.uix.boxlayout import BoxLayout


class ScatterTextWidget(BoxLayout):
    pass

class TutorialApp(App):
    def build(self):
        return ScatterTextWidget()

def some_function(*args):
    print(‘text changed’)

if name == “main”:
    TutorialApp().run()

「tutorial.kv」

<ScatterTextWidget>:
    orientation:’vertical’
    TextInput:
        id:my_textinput
        font_size:150
        size_hint_y:None
        height:200
        text:’dafault’
    FloatLayout:
        Scatter:
            Label:
                text:my_textinput.text
                font_size:150

無事動かせました。

では、動画(全部英語で泣きそう)をみながら食らいついてコードを書きました。

「main.py」

from kivy.app import App
from kivy.uix.scatter import Scatter
from kivy.uix.label import Label
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.textinput import TextInput
from kivy.uix.boxlayout import BoxLayout


import random

class ScatterTextWidget(BoxLayout):
    def change_label_colour(self,args):

        colour=[random.random() for i in range(3)]+[1]
         label=self.ids[‘my_label’]
        label.color=colour class TutorialApp(App):
def build(self):
return ScatterTextWidget()

def some_function(args):
print(‘text changed’)

if name == “main”:
    TutorialApp().run()

「tutorial.kv」

<ScatterTextWidget>:
    orientation:’vertical’
    TextInput:
        id:my_textinput
        font_size:150
        size_hint_y:None
        height:200
        text:’dafault’
        on_text:root.change_label_colour()
    FloatLayout:
        Scatter:
            Label:
                id:my_label
                text:my_textinput.text
                font_size:150

では、動作を見てみます。

文字を入力したり消したりすると、色が変わります。

Kivyというライブラリを使ってPythonでアプリを作って行く

Python自作サンプル集
Swiftでアプリ開発される方向け
これからプログラミングを始める方へ
プログラミングと資格について

Kivy公式サイトのKivy Crash Course 4 – Kivy languageを作ってみた!

Kivyというライブラリを使ってPythonでアプリを作って行く

Python自作サンプル集
Swiftでアプリ開発される方向け
これからプログラミングを始める方へ
プログラミングと資格について

Pythonでマルチタッチアプリを作るために、こちらの本で学んでいます。

Kivyの公式サイトは英語ばかりで泣きそうでしたが、この本を読んで行ったら公式サイトのサンプルアプリも作れるようになりました。

上の本の、4章を終えた所までで類題として作れるアプリです。

Video(YouTube)

この動画では、前回Pythonで作ったプログラムを、PythonとKV言語(ファイル拡張子が.kv)で、作ってよりPythonのコードがシンプルになることを学べる内容になっています。

Kivy Crash Course 3 – More interesting widget interactions
で作ったコードを改変して、好きな文字を入力して動かせるようにしたアプリです。

前回のコードが書いてあるファイルを開いて、これを今回用に改変していきます。

エディタ Visual Studio Codeに書いていってターミナルで実行します。

前回の「crash3」というフォルダの内容「main.py」を、今回の「crash4」というフォルダに保存して確認しました。

そのコードです。

from kivy.app import App

from kivy.uix.scatter import Scatter
from kivy.uix.label import Label
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.textinput import TextInput
from kivy.uix.boxlayout import BoxLayout

class TutorialApp(App):
    def build(self):
        b=BoxLayout(orientation=’vertical’)
        t=TextInput(font_size=150,
        size_hint_y=None,
        height=200,
        text=’default’)
        f=FloatLayout()
        s=Scatter()
        l=Label(text=’default’,font_size=150)
        t.bind(text=l.setter(‘text’))
        f.add_widget(s)
        s.add_widget(l)
        b.add_widget(t)
        b.add_widget(f)
        return b


def some_function(*args):
print(‘text changed’)

if name == “main”:
TutorialApp().run()

無事動かせました。

では、動画(全部英語で泣きそう)をみながら食らいついてコードを書きました。

Crash4フォルダの中にはmain.pyの他に「tutorial.kv」と言うファイルを作ります。

main.pyのAppのところが、何々Appだった場合、「何々.kv」と言うファイル名になります。

まずは、「main.py」

from kivy.app import App

from kivy.uix.scatter import Scatter
from kivy.uix.label import Label
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.textinput import TextInput
from kivy.uix.boxlayout import BoxLayout

class ScatterTextWidget(BoxLayout):
    pass

class TutorialApp(App):
    def build(self):

return ScatterTextWidget()

def some_function(*args):
    print(‘text changed’)

if name == “main”:
TutorialApp().run()

とてもコードがシンプルになりましたね。

次に、「tutorial.kv」です。

<ScatterTextWidget>:
    orientation:’vertical’
    TextInput:
        id:my_textinput
        font_size:150
        size_hint_y:None
        height:200
        text:’dafault’
    FloatLayout:
        Scatter:
            Label:
                text:my_textinput.text
                font_size:150

では、動作を見てみます。

好きな文字を動かしてみます。

「I love cat!!」

<2>

動かせました。

次に、同じフォルダに日本語フォントを入れてカスタマイズします。

私は志村けんさんが好きなので、最後に「default」を「なんだチミは」と表示されるようにカスタマイズします。

同じフォルダ「crash4」の中に日本語フォントを置いてみます。

Googleフォントから好きな日本語フォントを持ってきて、フォントファイルの名前をわかりやすく変えて実行してみます。

やり方はNRさんという方の動画が分かりやすいです。

このようになりました。

Kvファイルを動かしても、ちゃんと日本語フォントが出たことにホッとしました。

Kivyというライブラリを使ってPythonでアプリを作って行く

Python自作サンプル集
Swiftでアプリ開発される方向け
これからプログラミングを始める方へ
プログラミングと資格について