How to use Python Kivy ① ～ Basics of Kv Language ～
Summary
Kivy (https://kivy.org/#home) creates a Python GUI library, but it is not very well known in Japan. The most common reason is that it is good to install it, but there is not much information in Japanese, and I often hear people say that they do not know how to use it. Also, when writing a layout in Kivy, you can create a layout using Kivy's own language similar to CSS called Kv Language separately from the code input by Python, but it takes time to get used to it because there is little information. .. Here, we will introduce a simple program that uses Kv Language and introduce the basic usage of Kv Language.
About the program to be created this time
The program to be created this time is as follows.
Left edge of the image is the state immediately after start-up, the underlying "morning", "noon", respectively, by clicking the button of "night", "good morning", "Hello", the character of "Good evening" will be displayed. The content is an introduction of how to lay out in Kv Language and how to execute the function when the button is clicked.
Reference material
Although it is a document, the contents are from "Kivy Basics" to "Kv Language" from the Programming Guide of Kivy's official manual (https://kivy.org/docs/). However, since it is written in English and difficult to understand, I will quote the unofficial * translated Japanese (https://pyky.github.io/kivy-doc-ja/) translated by volunteers.
- We have contacted the original website in advance to confirm that there is no problem with the translation work itself.
Postscript: I translated "Kv Language" of API reference, so I recommend you to read this as well.
I explained the code when I took the stage at Pycon JP 2017. This is an overall explanation of Kivy, so it's a good reference for what you can do with Kivy.
Added in December 2017: I will introduce a very good introductory article written in Japanese. It's a good idea to read it once when you start Kivy.
Added in October 2018: There was a person who made an application with Kivy, so I will introduce it
Introducing the process and source code of creating a desktop application for file selection over half a year. Since it is also implemented using RecycleView, I think that it will be a reference for what kind of application you can do with Kivy, so I recommend you to read it.
About the program
There are various ways to write code using Kivy. This is just an example. Also, the source code used when writing this article is listed on Github. However, materials such as fonts and images are not placed, so please prepare and place them yourself if necessary.
Verification environment
The verification environment is as follows.
- OS: Windows10 64bit
- Kivy:1.9.1
- Python3.4※
- Although the code can be executed in Python2 series, an error will occur at the part displayed in Japanese. In that case, try changing the code. (Example:'Japanese' → u'Japanese')
About the editor
There is an extension for the Kv language in Visual Studio code.
https://marketplace.visualstudio.com/items?itemName=BattleBas.kivy-vscode
List of how to use Python Kivy
I am posting the following as a continuation. It will be how to make an actual application.
- How to use Python Kivy ②-Create a calculator-
- How to use Python Kivy ③-Linkage with WebAPI (from sending and receiving requests to displaying results)-
- How to use Python Kivy ④ ~ Execution on Android ~
Actual explanation
Below, I will actually post the code and results.
1. 1. Show an empty screen
Execution result
code
main.py
#-*- coding: utf-8 -*-
from kivy.app import App
App().run()
Kv file
Not used this time
Commentary
Please refer to [Programming Guide (translated) »Kivy Basics (translated)" (https://pyky.github.io/kivy-doc-ja/guide/basic.html) for the basic mechanism of Kivy. ..
Here, the App class is the basic class for creating Kivy apps. The basic usage is to remember that when you create your own app, you inherit the App class, create a subclass, and add its labels, buttons, etc.
2. Displaying apps and labels
Execution result
code
main.py
#-*- coding: utf-8 -*-
from kivy.app import App
from kivy.uix.label import Label
class TestApp(App):
def build(self):
return Label(text='Hello World')
TestApp().run()
Kv file
Not used this time
Commentary
I created the TestApp class by inheriting the App class. I also ran the build function to return Label () when it was created. When executed, a label with the characters "Hello world" displayed in the center of the screen will be created on the entire screen. Label () is one of Kivy's widgets (component elements that make up a graphical user interface and their collection). Kivy creates a GUI by combining widgets such as parts and layouts.
Also, "Test" is displayed in the title at the top right of the window. In kivy, the title is the name of the subclass that inherits the App class before the App. (Example: TestApp → Test is displayed)
If you want to know more details, please refer to the API reference (English).
3. 3. App and label display (using Kv Language)
Execution result
code
main.py
#-*- coding: utf-8 -*-
from kivy.app import App
class TestApp(App):
pass
if __name__ == '__main__':
TestApp().run()
Kv file
test.kv
Label: # add comment
text: "Hello World"
Commentary
The difference from 2 is that the main.py side only created the subclass TestApp, and nothing is done internally. Instead, I am creating a new Kv (Kivy language) file called test.kv. Although it is a Kv file, in kivy, the title corresponds to the same ** file name with a lowercase letter ** as before the App among the names of the subclasses that inherit the App class. Here, the subclass name is TestApp, so test.kv corresponds.
Although it is a Kivy language, it has the following features.
- Very similar to html CSS.
- As for the writing method, write
: for the value to be added and the class. Although it is ":", ** Do not open a space between it and the previous **. - Like Python, it can be indented with spaces or tabs. Note that the indentation is ** determined by the number of spaces or tabs first found from the beginning of the file **. For example, if you insert one half-width space character at the beginning of the kv file and start a new line, the indent will be set to one half-width space character thereafter, so adding an indent with four half-width spaces will result in an error.
- You can add a comment with "#". Like python,'''
'''is not possible
This time, in test.kv
Label: # add comment
text: "Hello World"
By declaring, it is the same as executing (Label (text ='Hello World')) with "Hello world" specified in the text argument of the Label () function in the Python file.
I will explain about Kv Language here as well, but see [Programming Guide (translated) »Kv language (translated)" (https://pyky.github.io/kivy-doc-ja/guide/lang.html). We recommend that you read it.
reference
[Note] About using Kv Language
It is possible to write code in Python to create layouts like other GUI libraries without using Kv Language. Some people in Japan also write only Python code.
However, you can use Kv Language to ** separate layout and feature descriptions **. This makes it easier to understand the code if you want to add features or change the layout. For example, if you create an app and distribute it to users, and you want to change the layout without changing the function, the user can directly change the kv file and change the layout to your liking.
[Note] About the file to write Kv Language
Although it is Kv Language, you can choose from three patterns depending on which file you write in.
- Write directly to a Python file
- Create and describe a kv file (extension .kv) corresponding to the subclass name of the App
- Specify the corresponding Kv file in the Python file and describe the Kv file.
It is a method to write directly to the Python file of 1, but it is described by importing the Builder class. The way to write is as follows.
from kivy.lang import Builder
Builder.load_string("""
<App name>:
Contents
""")
Method 2 has already been covered, so I will omit it. It is a method to specify the corresponding Kv file in the Python file of 3, but the writing method is as follows.
from kivy.lang import Builder
Builder.load_file('file.kv')
In this case file.kv is the Kv file that corresponds to that Python file. Usually, it is often described using one or two methods. I think it is case by case which is better, 1 or 2.
reference
~~ Also, although not covered this time, it seems that it is possible to divide the Kv file into multiple files by creating a kv file with the same name as the widght. (Unverified) ~~ (It was a mistake)
It seems that it can be split by using "#: include [force]
[Note] About Kv Language preview tool
2017/07 / 14t added
I think it takes a lot of time to write a Kv file, execute the result, and check it. From 1.10, a tool called "kviewer" has been added to reflect changes in kv files in real time. Please refer to the following articles for how to install and how to use it in detail.
reference
Four. Display of multiple labels
Execution result
code
(There is no change from the contents of 3.)
Kv file
The Kv Language is as follows.
test.kv
BoxLayout:
Label:
text: "Good Morning"
Label:
text: "Hello"
Label:
text: "Good Evening"
Commentary
This time, I created three Labels and arranged them horizontally at equal intervals. I am using ** "Box Layout" ** to set the layout. kivy has several layouts for arranging widgets. "Box Layout" is a ** layout for arranging multiple widgets vertically or horizontally **.
Reprinted from the official manual
Kivy creates layouts by using one or more of these layouts. Although there are layout types other than BoxLayout, there are "FloatLayout", "RelativeLayout", "GridLayout", "PageLayout", "ScatterLayout", and "StackLayout", but it is recommended to create a layout with "BoxLayout" first. ..
reference
- Getting Started »Layouts
- Programming Guide (translated) »Widgets (translated)
- Box Layout(API Reference)
5. Display of multiple labels (vertically)
Execution result
code
(There is no change from the contents of 3.)
Kv file
The Kv Language is as follows.
test.kv
BoxLayout:
orientation: 'vertical' # 'horizontal'Then one row
Label:
text: "Good Morning"
Label:
text: "Hello"
Label:
text: "Good Evening"
Commentary
In the case of 4, the labels were lined up horizontally at equal intervals, but this time three labels are lined up vertically. The difference from the previous one is that the Kv file has a description of orientation:'vertical'.
orientation is one of the options of BoxLayout and sets the order of widgets. There are two types of values. ** "horizontal" sets the widget in a horizontal row, and "vertical" sets the widget in a vertical row **. In the case of 4, even though there is no description of orientation, they are lined up in a horizontal row because the default setting of orientation is "horizontal".
[Note] About Kivy's coordinate system
As you can see from the lineup this time, the origin coordinates of Kivy are ** lower left **. This is one of Kivy's hard-to-reach points. There is no problem once you get used to it, but remember that unlike most GUI software, Kivy has its origin at the bottom left.
6. Size adjustment
Execution result
code
(There is no change from the contents of 3.)
Kv file
The Kv Language is as follows.
test.kv
BoxLayout:
orientation: 'vertical' # 'horizontal'Then one row
Label:
text: "Good Morning"
size_hint_y: 0.5
Label:
text: "Hello"
size_hint_y: 1
Label:
text: "Good Evening"
size_hint_y: 2
The execution result is as follows.
Commentary
size_hint_y: <value> is newly added to the parameter. As a result, the position of the Label has changed. Adding a value to ** size_hint_x ** changes the size in the x direction, and adding a value to ** size_hint_y ** changes the size in the y direction. By default both are set to 1.
The size is the ratio of the size of the entire screen.
As an example, in this case it is the size of the label "Good Morning",
Y-direction ratio = (Good Morning value) / (all size_hint values) = 0.5 / (0.5 + 1 + 2) = 14%
Will be 14% of the size of the entire screen.
In addition to size_hint, there is also a setting called pos_hint that sets the coordinates from the screen ratio. By the way, Kivy allows you to specify coordinates by coordinates instead of ratios, but it is not recommended. The reason is that the screen size can be changed freely, so if you specify the widget with coordinates, the position will be fixed and it will not be displayed neatly.
There are various ways to specify the position in Kivy, but basically there is no problem if you set it using ** size_hint and pos_hint **. I won't cover pos_hint this time, so if you are interested, please try writing the code.
Although it is a valid value of hint, 0.1 to 1 is a valid range when looking at the manual, but as you can see by actually writing the code, even if you enter a value of * 10 or 100, it works effectively. It seems that either the manual or Kivy's internal implementation is missing.
7. 7. Size adjustment 2
Execution result
code
(There is no change from the contents of 3.)
Kv file
The Kv Language is as follows.
test.kv
BoxLayout:
orientation: 'vertical' # 'horizontal'Then one row
Label:
text: "Good Morning"
size_hint_y: 0.5
Label:
text: "Hello"
size_hint_y: 1
Label:
text: "Good Evening"
size_hint_y: 0.5
Commentary
I changed the value from the case of 6.
8. Change text color and label color
Execution result
code
main.py
#-*- coding: utf-8 -*-
from kivy.app import App
class TestApp(App):
def __init__(self, **kwargs):
super(TestApp, self).__init__(**kwargs)
self.title = 'greeting' #Rename window
if __name__ == '__main__':
TestApp().run()
Kv file
test.kv
BoxLayout:
Label:
text: "Good Morning"
color: 1,0,1,1
size_hint_x: 0.5
Label:
text: "Hello"
color: 0,1,0,1 # rgba
size_hint_x: 1
canvas.before:
Color:
rgba: 0, 1, 1, 1
Rectangle:
pos: self.pos
size: self.size
Label:
text: "Good Evening"
color: 0,0,1,1 # rgba
size_hint_x: 0.5
Commentary
On the Python side, the following command is inserted when initializing the TestApp class.
self.title = 'greeting' #Rename window
By doing this, you can change the title name displayed in the upper left of the window at startup.
reference
Also, although it is a Kv file, a new parameter of "color" is added to Label. "Color" is a character color parameter. The values to be taken are a list structure of [r (red), g (yellow), b (blue), a (transparency)]. The range of valid values is 0 to 1. In Kivy, there are several other ways to specify a color, such as HSV mode. It's enough to remember that ** use color to display colors **. I also change the background color of Label, which is realized by the following code
canvas.before: #①
Color: #②
rgba: 0, 1, 1, 1
Rectangle: #③
pos: self.pos
size: self.size
① Color with the canvas command. before is not explained in detail here, for canvas, see [Programming Guide (translated) »Graphics (translated)" (https://pyky.github.io/kivy-doc-ja/guide/graphics.html). Please read. For ②, color with (R, G, B, A) = (0,1,1,1). Note that the opening C is uppercase, unlike the Label. ③ Rectangle is a command to display a rectangle (quadrangle). The pos parameter specifies the coordinates to display, and size specifies the width and height of the drawing range. I'm using self for the pos and size values here, but ** self is the reserved word for Kv and I use it to get that widget **. This time it is in the Label that displays Hello, so self.pos points to the xy coordinates of the Label and self.size points to the width and height values of that Label. This allows you to draw a (0.1.1.1.1) color rectangle for the coordinates, width and height of the Label displaying Hello. In addition to rectangles, you can draw triangles, circles, and lines.
reference
[Note] About reserved words of Kv
Kivy Language has some reserved words that are pre-determined to be used on the system. The following are typical ones.
- self ・ ・ ・ Get the widget
- root ・ ・ ・ Get rootWidget
- app ・ ・ ・ Get App
- Quoted from Reserved words for Kv files
reference
9. Add button
Execution result
code
~~ (There is no change from the contents of 8.) ~~ 2018/02/03 Added: There was an indication on the net. 8. If it is left as it is, an error will occur.
main.py
#-*- coding: utf-8 -*-
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.properties import StringProperty
class TextWidget(Widget):
pass
class TestApp(App):
def __init__(self, **kwargs):
super(TestApp, self).__init__(**kwargs)
self.title = 'greeting'
def build(self):
return TextWidget()
if __name__ == '__main__':
TestApp().run()
Kv file
The Kv Language is as follows.
test.kv
TextWidget:
<TextWidget>:
BoxLayout:
orientation: 'vertical'
size: root.size
#label
Label:
id: label1
font_size: 68
text: "Hello World"
Button:
id: button1
text: "OK"
font_size: 48
Commentary
A new Button has been added. Button is a subclass of Label, so you can use the parameters used in Label. Even if I start this program and click the OK button, nothing happens, only the color of the button changes when I click it. What I was able to do here was just a layout using Label and Button, and I did not register the operation when some action (Event) was triggered for the button. The registration of the operation is explained in the next item. Also, font_size is the size of the displayed characters. The default is 15, but since the display size was small, I increased it.
Also, a new parameter called id is added for each widget, but this time I will not touch it. The usage is explained in the reference item.
2018/02/03 Addition: This time, we have added a custom widget, TextWidget, and added an existing widget such as Button to it. Just adding a custom widget in a Kv file will result in an error. The reason is that Kivy can't solve what the TextWidget is. Therefore, it is necessary to declare the TextWidget class that inherits the widget class on the Python file side.
Ten. Addition of functions when a button is pressed
Execution result
code
The code is below.
main.py
#-*- coding: utf-8 -*-
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.properties import StringProperty
class TextWidget(Widget):
text = StringProperty() #Add property
def __init__(self, **kwargs):
super(TextWidget, self).__init__(**kwargs)
self.text = ''
def buttonClicked(self): #When clicking the button
self.text = 'Hello World'
class TestApp(App):
def __init__(self, **kwargs):
super(TestApp, self).__init__(**kwargs)
self.title = 'greeting'
def build(self):
return TextWidget()
if __name__ == '__main__':
TestApp().run()
Kv file
The Kv Language is as follows.
test.kv
TextWidget: #Add to route
<TextWidget>:
BoxLayout:
orientation: 'vertical'
size: root.size
#label
Label:
id: label1
font_size: 68
text: root.text # root(TextWidget)Get the value of the variable text of
Button:
id: button1
text: "OK"
font_size: 68
on_press: root.buttonClicked() #Call a function on the python side when the button is clicked
Commentary
When I run the program, nothing is displayed on the label at startup, but when I click the OK button, the words "Hello World" are displayed on the label. First of all, the command on the python side
from kivy.properties import StringProperty
Is importing StringProperty from kivy.properties.
Kivy properties is a mechanism to execute when there is a change in the value of the object attribute when an event such as when a button is pressed is executed. This time it is used to change the text on the label when the button is pressed. Although it is a property, there is a type for each character string, number, and dictionary type. The types are as follows.
- StringProperty
- NumericProperty
- BoundedNumericProperty
- ObjectProperty
- DictProperty
- ListProperty
- OptionProperty
- AliasProperty
- BooleanProperty
- ReferenceListProperty
Please refer to [Programming Guide (translated) »Events and Properties (translated)" (https://pyky.github.io/kivy-doc-ja/guide/events.html) for the details of the property. In the actual code, after this, the class variable text is declared in the TextWidget class, and StringProperty () is assigned there. After that, in the "init" method, a blank is assigned to text, a buttonClicked () function is created, and the character "Hello World" is assigned to text in it.
class TextWidget(Widget):
text = StringProperty() #Add property
def __init__(self, **kwargs):
super(TextWidget, self).__init__(**kwargs)
self.text = ''
def buttonClicked(self): #When clicking the button
self.text = 'Hello World
On the other hand, although it is a kv file, it has the following label and button.
#label
Label:
id: label1
font_size: 68
text: root.text # root(TextWidget)Get the value of the variable text of
Button:
id: button1
text: "OK"
font_size: 68
on_press: root.buttonClicked() #Call a function on the python side when the button is clicked
First, root.text is set in the text parameter of Label. root is a reserved word in Kv Language that refers to the root widget. So here we are pointing to the TextWidget class variable text.
In addition, Button has an additional parameter called on_press. on_press is an event prepared in Kivy in advance and is executed when Button is pressed. In this case, set root.buttonClicked (), which will execute TextWiget's buttonClicked () when the OK button is pressed.
In addition to this, there is "on_release" in the Button event, which is the event that is executed when the button is released.
reference
11. If you add multiple buttons
Execution result
At startup
Click morning
Click day
Click night
code
The code is below.
main.py
#-*- coding: utf-8 -*-
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.properties import StringProperty
class TextWidget(Widget):
text = StringProperty()
def __init__(self, **kwargs):
super(TextWidget, self).__init__(**kwargs)
self.text = ''
def buttonClicked(self):
self.text = 'Good morning'
def buttonClicked2(self):
self.text = 'Hello'
def buttonClicked3(self):
self.text = 'Good evening'
class TestApp(App):
def __init__(self, **kwargs):
super(TestApp, self).__init__(**kwargs)
self.title = 'greeting'
if __name__ == '__main__':
TestApp().run()
Kv file
The Kv Language is as follows.
test.kv
#-*- coding: utf-8 -*-
TextWidget: #Add to route
<TextWidget>:
BoxLayout:
orientation: 'vertical'
size: root.size
#label
Label:
id: label1
font_size: 68
text: root.text
BoxLayout:
Button:
id: button1
text: "morning"
font_size: 68
on_press: root.buttonClicked() #When you click the button
Button:
id: button2
text: "day"
font_size: 68
on_press: root.buttonClicked2() #When you click the button
Button:
id: button3
text: "night"
font_size: 68
on_press: root.buttonClicked3() #When you click the button
Commentary
First of all, on the python file side, I will omit the explanation because the function when multiple buttons are pressed is only added from the previous content.
Although it is Kv Language, the operation when the button is pressed was explained last time, so I think that there is no problem. The problem is the layout, this time it has the following structure
<TextWidget>:
BoxLayout: #①
orientation: 'vertical'
size: root.size
Label:
~ Omitted ~
BoxLayout: #②
Button:
~ Omitted ~
Button:
~ Omitted ~
Button:
~ Omitted ~
BoxLayout is used twice, but first of all, the orientation setting is "vertical" in BoxLayout of ①. This creates a layout in which the screen is divided into upper and lower parts. After that, add a Label and it will be placed at the top of the split screen. The problem is at the bottom of the screen. BoxLayout will be placed in ② when placing. There is no orientation parameter set, but orientation is set to "horizonal" by default. As a result, the bottom of the screen has a side-by-side layout, and this time three Buttons have been added, resulting in a layout with three buttons side by side. By combining two BoxLayouts, the upper half of the screen can be laid out in one and the lower half can be laid out horizontally in three parts. ** Kivy makes it possible to install complex layouts by combining multiple Layouts. ** **
12. Change layout
Execution result
The execution result is as follows.
At startup
Click morning
Click day
Click night
code
There is no change from 11.
Kv file
The Kv Language is as follows.
test.kv
<TextWidget>:
BoxLayout:
orientation: 'vertical'
size: root.size
#label
Label:
size_hint_y: 0.7 #Adjusted to display 70% of the entire screen
id: label1
font_size: 68
text: root.text
BoxLayout:
size_hint_y: 0.3 #Adjusted to display 30% of the entire screen
Button:
id: button1
text: "morning"
font_size: 68
on_press: root.buttonClicked() #When you click the button
Button:
id: button2
text: "day"
font_size: 68
on_press: root.buttonClicked2() #When you click the button
Button:
id: button3
text: "night"
font_size: 68
on_press: root.buttonClicked3() #When you click the button
Commentary
The size is adjusted using size_hint_y on the Kv file side. The vertical size of the label in the upper half is larger, and the size of the button in the lower half is smaller.
13. Added function when clicking (changes text color)
Execution result
The execution result is as follows.
At startup
Click morning
Click day
Click night
code
The code is below.
main.py
#-*- coding: utf-8 -*-
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.properties import StringProperty, ListProperty
class TextWidget(Widget):
text = StringProperty()
color = ListProperty([1,1,1,1])
def __init__(self, **kwargs):
super(TextWidget, self).__init__(**kwargs)
self.text = 'start'
def buttonClicked(self):
self.text = 'Good morning'
self.color = [1, 0, 0 , 1]
def buttonClicked2(self):
self.text = 'Hello'
self.color = [0, 1, 0 , 1 ]
def buttonClicked3(self):
self.text = 'Good evening'
self.color = [0, 0, 1 , 1 ]
class TestApp(App):
def __init__(self, **kwargs):
super(TestApp, self).__init__(**kwargs)
self.title = 'greeting'
if __name__ == '__main__':
TestApp().run()
Kv file
The Kv Language is as follows.
test.kv
#-*- coding: utf-8 -*-
TextWidget: #Add to route
<TextWidget>:
BoxLayout:
orientation: 'vertical'
size: root.size
#label
Label:
size_hint_y: 0.7
id: label1
font_size: 68
text: root.text
color: root.color
BoxLayout:
size_hint_y: 0.3
padding: 20,30,20, 10
Button:
id: button1
text: "morning"
font_size: 68
on_press: root.buttonClicked() #When you click the button
Button:
id: button2
text: "day"
font_size: 68
on_press: root.buttonClicked2() #When you click the button
Button:
id: button3
text: "night"
font_size: 68
on_press: root.buttonClicked3() #When you click the button
Commentary
The function to change the color of the characters displayed on the label with the code up to the previous time has been added. As for the contents, on the Python side, the class variable is newly declared with ListProperty in the TextWidget class to realize the value. color uses ListProperty to store multiple values of rgba.
14. Japanese display (addition of font)
Execution result
The execution result is as follows.
At startup
Click in the morning
Click noon
Click at night
code
The code is below.
main.py
#-*- coding: utf-8 -*-
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.properties import StringProperty, ListProperty
from kivy.core.text import LabelBase, DEFAULT_FONT
from kivy.resources import resource_add_path
#Change the default font
resource_add_path('./fonts')
LabelBase.register(DEFAULT_FONT, 'mplus-2c-regular.ttf') #Specify a Japanese font so that Japanese can be used
class TextWidget(Widget):
text = StringProperty()
color = ListProperty([1,1,1,1])
def __init__(self, **kwargs):
super(TextWidget, self).__init__(**kwargs)
self.text = 'start'
def buttonClicked(self):
self.text = 'Good morning'
self.color = [1, 0, 0 , 1]
def buttonClicked2(self):
self.text = 'Hello'
self.color = [0, 1, 0 , 1 ]
def buttonClicked3(self):
self.text = 'Good evening'
self.color = [0, 0, 1 , 1 ]
class TestApp(App):
def __init__(self, **kwargs):
super(TestApp, self).__init__(**kwargs)
self.title = 'Greeting'
if __name__ == '__main__':
TestApp().run()
Kv file
The Kv Language is as follows.
test.kv
TextWidget:
<TextWidget>:
BoxLayout:
orientation: 'vertical'
size: root.size
#label
Label:
size_hint_y: 0.7
id: label1
font_size: 68
text: root.text
color: root.color
BoxLayout:
size_hint_y: 0.3
padding: 20,30,20, 10
Button:
id: button1
text: "Morning"
font_size: 68
on_press: root.buttonClicked()
Button:
id: button2
text: "Noon"
font_size: 68
on_press: root.buttonClicked2()
Button:
id: button3
text: "Night"
font_size: 68
on_press: root.buttonClicked3()
Commentary
Although it is Kivy, in windows there is font data under ** Python34 \ Lib \ site-packages \ kivy \ data \ fonts **, but the default character code is ** Roboto, and Roboto is a European font, so it is Japanese as it is Is not displayed correctly **. So in order to display Japanese, you need to use a font that displays Japanese yourself. On the Python code side
from kivy.core.text import LabelBase, DEFAULT_FONT
from kivy.resources import resource_add_path
#Change the default font
resource_add_path('./fonts')
LabelBase.register(DEFAULT_FONT, 'mplus-2c-regular.ttf') #Specify a Japanese font so that Japanese can be used
However, resource_add_path specifies the read path in kivy. Next, LabelBase.register specifies the font that can display Japanese as the standard font. This time, I created a "fonts" folder in the same hierarchy as the python file and placed the "mplus-2c-regular.ttf" file there. The "mplus-2c-regular.ttf" file is specified as the font for displaying characters.
I think there are roughly two ways to display Japanese.
- Specify a font that can display Japanese in the system font for each OS.
- Prepare a font and prepare a default font at startup.
It is a method to specify a font that can display Japanese in the system font for each OS, but kivy has a function called platform. You can use it to get the OS at runtime. You can use this to change the default font displayed for each OS. There are people who are actually doing it in Japan as well.
reference
However, with this method, the font specified for a model with many customizations for each model such as an unknown OS or Android may not exist.
To prepare a font and prepare a default font at startup, prepare a font file (.ttf), enclose it with the program, and set it to be used at startup. This time I'm using this method. The font uses a license-free font called M +. There are various ways to specify the font, and some of them are introduced, so if you are interested, please take a look at the following.
2019/7/30 update I would like to introduce a person who created a package for displaying Japanese.
Python: I made japanize-kivy that allows Kivy to display Japanese just by importing it
reference
- Display Japanese in Kivy app
- Display in Japanese with kivy
- Use Japanese in Kv files
- Kivy recipe: connecting font file
Note About the character code of Kv file
In Windows, the kv file will not be displayed correctly unless it is saved as "shift-jis" in Python 3 series and "utf-8" in case of 2 series.
Note About App title
~~ If it is Python2 system, an error will occur even if you enter "u'Japanese'". The error message is as follows. If you know what to do, please contact us. ~~
File "c:\Python27\lib\site-packages\kivy\core\window\window_sdl2.py", line 332, in set_title
self._win.set_window_title(title)
TypeError: Argument 'title' has incorrect type (expected str, got unicode)
2017/2/4 postscript I was able to display it with the content you told me in the comments. After displaying "title" as "u'Japanese'", you can execute it by changing "main" as follows.
import sys
if __name__ == '__main__':
reload(sys)
sys.setdefaultencoding('utf-8')
TestApp().run()
reference http://d.hatena.ne.jp/shu223/20111201/1328334689 http://blog.livedoor.jp/kaz0215/archives/51124286.html
15. 15. About changing the resolution at startup and reusing parameters
Execution result
The execution result is as follows.
At startup
The code is below.
main.py
#-*- coding: utf-8 -*-
from kivy.config import Config
Config.set('graphics', 'width', '640')
Config.set('graphics', 'height', '480')
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.properties import StringProperty, ListProperty
from kivy.core.text import LabelBase, DEFAULT_FONT
from kivy.resources import resource_add_path
#Change the default font
resource_add_path('./fonts')
LabelBase.register(DEFAULT_FONT, 'mplus-2c-regular.ttf') #Specify a Japanese font so that Japanese can be used
class TextWidget(Widget):
text = StringProperty()
color = ListProperty([1,1,1,1])
def __init__(self, **kwargs):
super(TextWidget, self).__init__(**kwargs)
self.text = 'start'
def buttonClicked(self):
self.text = 'Good morning'
self.color = [1, 0, 0 , 1]
def buttonClicked2(self):
self.text = 'Hello'
self.color = [0, 1, 0 , 1 ]
def buttonClicked3(self):
self.text = 'Good evening'
self.color = [0, 0, 1 , 1 ]
class TestApp(App):
def __init__(self, **kwargs):
super(TestApp, self).__init__(**kwargs)
self.title = 'Greeting'
if __name__ == '__main__':
TestApp().run()
The Kv Language is as follows.
test.kv
TextWidget:
<MyButton@Button>:
font_size: 68
<TextWidget>:
BoxLayout:
orientation: 'vertical'
size: root.size
#label
Label:
size_hint_y: 0.7
id: label1
font_size: 68
text: root.text
color: root.color
BoxLayout:
size_hint_y: 0.3
padding: 20,30,20, 10
MyButton:
id: button1
text: "Morning"
#font_size: 68
on_press: root.buttonClicked()
MyButton:
id: button2
text: "Noon"
#font_size: 68
on_press: root.buttonClicked2()
MyButton:
id: button3
text: "Night"
#font_size: 68
on_press: root.buttonClicked3()
Commentary
It is difficult to understand if it is an image, but when you start it, you can see that the screen size is smaller.
from kivy.config import Config
Config.set('graphics', 'width', '640')
Config.set('graphics', 'height', '480')
The following commands have been added at the beginning of the Python file. The default setting of Kivy immediately after installation is to start with a resolution of 800x600. It is written in [Programming Guide (translated) »Configure Kivy (translated)" (https://pyky.github.io/kivy-doc-ja/guide/config.html), but Kivy says "config. The basic settings are listed there in a file called "ini". On Windows, it is under * C: \ Users \ <username \ .kivy *. The contents of "config.ini" are as follows.
[kivy]
keyboard_repeat_delay = 300
keyboard_repeat_rate = 30
log_dir = logs
log_enable = 1
log_level = info
log_name = kivy_%y-%m-%d_%_.txt
window_icon =
keyboard_mode =
keyboard_layout = qwerty
desktop = 1
exit_on_escape = 1
pause_on_minimize = 0
config_version = 14
[graphics]
display = -1
fullscreen = 0
height = 600
left = 0
maxfps = 60
multisamples = 2
position = auto
rotation = 0
show_cursor = 1
top = 0
width = 800
resizable = 1
borderless = 0
window_state = visible
minimum_width = 0
minimum_height = 0
[input]
mouse = mouse
wm_touch = wm_touch
wm_pen = wm_pen
[postproc]
double_tap_distance = 20
double_tap_time = 250
ignore = []
jitter_distance = 0
jitter_ignore_devices = mouse,mactouch,
retain_distance = 50
retain_time = 0
triple_tap_distance = 20
triple_tap_time = 375
[widgets]
scroll_timeout = 250
scroll_distance = 20
scroll_friction = 1.
scroll_stoptime = 300
scroll_moves = 5
[modules]
Of these, the height and width values of the "graphics" item are the resolution at startup. It is possible to rewrite the contents of this config.ini and change it, but if it is distributed, it will depend on the setting of config.ini for each user, so change it temporarily like this Is also possible.
reference Try making a simple app with Kivy
Alternatively, you can use windw () to change the resolution.
from kivy.core.window import Window
#Window.size = (450, 600)
However, if you display it on a mobile device such as Android by this method, the resolution will be strange, so if you want to display it on mobile, do not use window () or use the platform explained earlier and do not display it depending on the OS type Processing such as is required.
It is also a Kv file, but it is as follows
<MyButton@Button>: # ①
font_size: 68
<TextWidget>:
~ Omitted ~
MyButton: #②
id: button1
text: "Morning"
#font_size: 68
on_press: root.buttonClicked()
MyButton:
id: button2
text: "Noon"
#font_size: 68
on_press: root.buttonClicked2()
MyButton:
id: button3
text: "Night"
#font_size: 68
on_press: root.buttonClicked3()
The difference from the last time is The widget "MyButton @ Button" is declared in ①, and the place where "Button" was set until the last time in ② is set to "MyButton". In kivy, you can inherit the type of widget after @ by declaring ** widget @ type of widget ** when declaring widget. This time, I created a "MyButton" widget that inherits the "Button" widget by declaring the "Button" widget. By setting font_size in MyButton, it is not necessary to specify font_size individually for each Button until the last time, and the same value can be used. For more information, please read [Programming Guide (translated) »Kv language (translated)" (https://pyky.github.io/kivy-doc-ja/guide/lang.html).
16. Image display
Execution result
The execution result is as follows.
At startup
code
The code is below.
main.py
#-*- coding: utf-8 -*-
from kivy.config import Config
Config.set('graphics', 'width', '640')
Config.set('graphics', 'height', '480')
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.properties import StringProperty, ListProperty
from kivy.core.text import LabelBase, DEFAULT_FONT
from kivy.resources import resource_add_path
#Change the default font
resource_add_path('./fonts')
LabelBase.register(DEFAULT_FONT, 'mplus-2c-regular.ttf') #Specify a Japanese font so that Japanese can be used
class TextWidget(Widget):
text = StringProperty()
def __init__(self, **kwargs):
super(TextWidget, self).__init__(**kwargs)
pass
def buttonClicked(self):
pass
def buttonClicked2(self):
pass
def buttonClicked3(self):
pass
class TestApp(App):
def __init__(self, **kwargs):
super(TestApp, self).__init__(**kwargs)
self.title = 'Image display'
if __name__ == '__main__':
TestApp().run()
The Kv Language is as follows.
test.kv
TextWidget:
<TextWidget>:
BoxLayout:
orientation: 'vertical'
size: root.size
Image:
source: './image/sample2.jpg'
BoxLayout:
size_hint_y: 0.3
padding: 20,30,20, 10
Button:
id: button1
text: "Sample 1"
font_size: 30
on_press: root.buttonClicked()
Button:
id: button2
text: "Sample 2"
font_size: 30
on_press: root.buttonClicked2()
Button:
id: button3
text: "Sample 3"
font_size: 30
on_press: root.buttonClicked3()
Commentary
Images can be displayed in Kivy.
python
Image:
source: './image/sample2.jpg'
You can display the image by specifying. You can also change the display size by using the size parameter. This time, clicking the button does not switch the image. Image switching by clicking a button is explained in the next item.
reference
17. Image display (image switching with buttons)
Execution result
The execution result is as follows.
At startup or when clicking sample 1
When clicking sample 2
When clicking sample 3
code
The code is below.
main.py
#-*- coding: utf-8 -*-
from kivy.config import Config
Config.set('graphics', 'width', '640')
Config.set('graphics', 'height', '480')
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.properties import StringProperty
from kivy.core.text import LabelBase, DEFAULT_FONT
from kivy.resources import resource_add_path
#Change the default font
resource_add_path('./fonts')
LabelBase.register(DEFAULT_FONT, 'mplus-2c-regular.ttf') #Specify a Japanese font so that Japanese can be used
resource_add_path('./image')
class ImageWidget(Widget):
source = StringProperty('./image/sample.jpg')
#source = StringProperty(None)
def __init__(self, **kwargs):
super(ImageWidget, self).__init__(**kwargs)
pass
def buttonClicked(self):
self.source= './image/sample.jpg'
def buttonClicked2(self):
self.source = 'sample2.jpg'
def buttonClicked3(self):
self.source = 'sample3.jpg'
class TestApp(App):
def __init__(self, **kwargs):
super(TestApp, self).__init__(**kwargs)
self.title = 'Image display'
if __name__ == '__main__':
TestApp().run()
Kv file
The Kv Language is as follows.
test.kv
ImageWidget:
<ImageWidget>:
BoxLayout:
orientation: 'vertical'
size: root.size
Image:
source: root.source
BoxLayout:
size_hint_y: 0.3
padding: 20,30,20, 10
Button:
id: button1
text: "Sample 1"
font_size: 30
on_press: root.buttonClicked()
Button:
id: button2
text: "Sample 2"
font_size: 30
on_press: root.buttonClicked2()
Button:
id: button3
text: "Sample 3"
font_size: 30
on_press: root.buttonClicked3()
Commentary
Although it is an explanation, I think that you can understand the contents roughly if you read the contents up to the last time, so I will omit the detailed explanation, but create a class variable source using StringProperty on the Python side, and when you click the button, there The path is switched and displayed.
- Added 2017/5/16, If None is specified when declaring "None" in StringProperty, a blank screen will be displayed because no image is specified at startup.
This time, the image is a processed image, but in the processing of buttonClicked (), an image file is generated by filtering using an image library such as Pillow or OpenCV, and the image file is generated. I think it can be processed. It is also possible to read directly as a byte string without generating an image file. In that case, you can do it by using Texture's blit_buffer ().
2017/10/09 update In another article, I wrote an article on how to display images read by OpenCV or Pillow with blit_buffer ().
How to display images with Opencv and Pillow with Python Kivy
reference
Summary
So far, I have explained the basic layout and the execution of the operation when the button is clicked, so I think that it is possible to implement a simple application. If you read the contents so far and reread the "Programming Guide" of Official Manual Translation Site, you will find various discoveries. , It is recommended to read it once.
Also, Kivy's sample program, but Kivy's under example has various samples, so I think you should take a look. I will. See [Gallery of Examples (translated) »Gallery (translated)" (https://pyky.github.io/kivy-doc-ja/examples/gallery.html) and Getting Started »Examples has a description of the content.
Kivy itself has a lot of features, but I hope you read this and find something useful. Volunteers are also doing Translation of official manual, so if you are interested, please join us. In 2017, I'm thinking of focusing on API.
Reference: Select a file
You can use File Chooser to open a file selection dialog when selecting a file in Kivy.
Although it is the actual usage, please refer to the following site as other people have published the actual usage with the code.
reference
Reference: Japanese input (Caution)
In the following, enter characters in the text box and click the "OK" button to display the characters entered in the label.
Execution result
The execution result is as follows.
code
The code is below.
main.py
#-*- coding: utf-8 -*-
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.properties import StringProperty
from kivy.core.text import LabelBase, DEFAULT_FONT
from kivy.resources import resource_add_path
#Change the default font
resource_add_path('./fonts')
LabelBase.register(DEFAULT_FONT, 'mplus-2c-regular.ttf') #Specify a Japanese font so that Japanese can be used
class TextWidget(Widget):
text = StringProperty()
def __init__(self, **kwargs):
super(TextWidget, self).__init__(**kwargs)
self.text = ''
def buttonClicked(self):
self.text = self.ids["text_box"].text
class TestApp(App):
def __init__(self, **kwargs):
super(TestApp, self).__init__(**kwargs)
def build(self):
return TextWidget()
if __name__ == '__main__':
TestApp().run()
Kv file
The Kv Language is as follows.
test.kv
TextWidget: #Add to route
<TextWidget>:
BoxLayout:
orientation: 'vertical'
size: root.size
#label
Label:
id: label1
font_size: 68
text: root.text
BoxLayout:
TextInput:
id: text_box
size_hint_x: 70
font_size: 68
focus: True
on_text_validate: root.buttonClicked()
Button:
id: button1
size_hint_x: 30
text: "OK"
font_size: 68
on_press: root.buttonClicked() #When you click the button
Commentary
You can use Textinput to enter text.
However, there is a problem. Japanese input itself can be done by specifying the font for Japanese. You can also paste by copy and paste. The problem is that ** depending on the OS, IME does not open, so double-byte characters are not displayed until the characters are confirmed **. Officially it is Problem, but the background of the problem is that Kivy originally relied on a library called pygame for character input, and pygame's There was a known issue where IME was not displayed. Since then, Kivy itself has stopped relying on pygame and rewrote various features based on SDL to avoid using pygame. However, Kivy does not have any processing to receive the "SDL_TEXTEDIT" event issued by SDL during input (IME). Therefore, the Japanese you are typing is not displayed.
Be careful when you want to actively use Japanese input. At present, IME for each OS is like this.
** [Addition] In July 2018, the latest version (1.10.1) of Kivy was released. Here is the IME display The content pull request has been adopted, and IME is operating and the Japanese being input is displayed. ** **
As of July 2018, the situation has changed since the PR regarding Japanese input was adopted.
- windows: Yes, IME opens
- MacOS: Yes, IME opens
- Linux: Not possible (?).
- Android: Yes, I tried it on Nexus 5 and I can input Japanese without any problem.
- iOS: No, IME doesn't open. (Unverified)
I wrote an article about the reason why IME while inputting Japanese does not open, how to open it, and how to build an environment, so please refer to the following.
-
[How to input Japanese with Kivy (execution)] (https://qiita.com/dario_okazaki/items/815cdebe91211f2b3826)
About Japanese input in windows
Regarding windows, it is unofficial, but there is a person who made a DLL by writing code that even candidates for conversion.
- github: https://github.com/Naotonosato/MilletPie --The DLL is here.
--Created by: https://weekly.ascii.jp/elem/000/000/436/436756/
Entering the text when the button is clicked will be explained in the following reference.
Reference: How to get the value of the kv file on the Python side
Looking at the code for "Japanese input (Note)", TextInput is the following code.
test.kv
<TextWidget>:
BoxLayout:
TextInput:
id: text_box #★ Attention
What should be noted here is that "text_box" is entered for "id". On the other hand, although it is the code on the Python side, the function buttonClicked () that is called when the button is pressed is as follows.
python.py
def buttonClicked(self):
self.text = self.ids["text_box"].text
Kivy manages all widgets tagged with id and location in one place with a dictionary-type property called ** self.ids **. By doing so, you can get the value of each parameter of the widget by using the id name as a key. For more information, see "Programming Guide (translated) »Kv language (translated)" (https://pyky.github.io/kivy-doc-ja/guide/lang.html) "From Python code inside Kv lang" It is described in the item "Accessing the defined widgets". However, according to the manual on the official website, it is better to learn the value using ObjectProperty. The explanation of how to get the value using ObjectProperty is a little complicated and not for beginners, so I will explain it in another article.
Reference: How to call a function in a Python file on the Kivy side
Up to this point, the methods (functions) of the class on the Python side can be used on the Kv file side by using reserved words such as "self" and "root". Then, on the contrary, how can I call and use the method written on the Python side? As a method, there is a method of importing and using a Python file in a Kv file.
Execution example
The execution result is as follows.
code
The python file (main.py) is as follows.
main.py
#-*- coding: utf-8 -*-
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.properties import StringProperty
def buttonClicked(): #Call this function
print("call def")
text = 'Hello World'
return text
class TextWidget(Widget):
def __init__(self, **kwargs):
super(TextWidget, self).__init__(**kwargs)
self.text = ''
def buttonClicked(self):
self.text = 'Hello World'
class TestApp(App):
def __init__(self, **kwargs):
super(TestApp, self).__init__(**kwargs)
self.title = 'greeting'
def build(self):
return TextWidget()
if __name__ == '__main__':
TestApp().run()
The Kv Language is as follows.
test.kv
#: import main main
# ↑①main.Import py.
TextWidget: #Add to route
<TextWidget>:
BoxLayout:
id: input
orientation: 'vertical'
size: root.size
l_text:'aa'
#label
Label:
id: label1
font_size: 68
text: input.l_text #After clicking from aa'Hello World'The display changes to
Button:
id: button1
text: "OK"
font_size: 68
on_press: input.l_text = main.buttonClicked() # ②main.Call a function in py.
Commentary
test.kv
#: import main main
# ↑①main.Import py.
<TextWidget>:
BoxLayout:
~ Omitted ~
Button:
id: button1
text: "OK"
font_size: 68
on_press: input.l_text = main.buttonClicked() # ②main.Call a function in py.
I am importing main.py in ①. The detailed usage is as follows
python
#: import <The name you want to use in the Kv file> <Library or file name you want to import>
By writing this way, you can call a specific library or file name on the Kv file side. This time, after importing main.py with the name main in ①, buttonCliced () of main.py is called when the OK button of ② is clicked.
reference
Reference: How to use GridLayout
I saw an article that I could not use GridLayout with Kivy, so I actually wrote the code so I will post it.
reference
Execution example
The execution result is as follows.
Perhaps this is what the author wanted to do.
code
Although it is the actual code, it is an implementation, but I prepared two plans
Proposal 1
The python file is as follows.
buttonlauncher.py
# -*- coding: utf-8 -*
import kivy
from kivy.app import App
from kivy.config import Config
from kivy.uix.widget import Widget
from kivy.uix.gridlayout import GridLayout
from kivy.uix.label import Label
#from kivy.lang import Builder
#Builder.load_file('buttonlauncher.kv')
class MyWidget(GridLayout):
def __init__(self):
super(MyWidget, self).__init__()
class ButtonLauncherApp(App):
def build(self):
return MyWidget()
if __name__ == '__main__':
ButtonLauncherApp().run()
The Kv Language is as follows.
buttonlauncher.kv
<MyWidget>:
rows: 2
cols: 2
Button:
text: 'button1'
Button:
text: 'button2'
Button:
text: 'button3'
Button:
text: 'button4'
Proposal 2
The python file is as follows.
buttonlauncher2.py
# -*- coding: utf-8 -*-
import kivy
kivy.require('1.9.0')
from kivy.app import App
from kivy.config import Config
from kivy.uix.widget import Widget
from kivy.uix.label import Label
from kivy.lang import Builder
Builder.load_file('buttonlauncher2.kv')
class MyWidget(Widget):
def __init__(self ,**kwargs):
super(MyWidget, self).__init__()
class ButtonLauncher2App(App):
def build(self):
return MyWidget()
if __name__ == '__main__':
ButtonLauncher2App().run()
The Kv Language is as follows.
buttonlauncher2.kv
<MyWidget>
GridLayout:
rows: 2
cols: 2
size: root.size #★ Get the value of the entire screen
Button:
text: 'button1'
Button:
text: 'button2'
Button:
text: 'button3'
Button:
text: 'button4'
Commentary
The reason why only a part of the lower right part of the screen is displayed unless "root.size" is set for size is that MyWidget inherits Widget, but the initial value of Widget is 100 x 100 (pixels). All Kivy UIs have a Widget class as a base class, so if you place it without specifying any size, it will be 100x100. By the way, I personally think this is fairly important, but it is not specified in the official tutorial. GridLayout itself is a bit quirky, and I think it's probably a layout that's supposed to be used inside BoxLayout. Regarding the layout, I think it's a good idea to use BoxLayout first and then assemble the layout from there.
Reference setting screen
In Kivy, if you press the F1 key at runtime, the config screen will be displayed. This allows you to change the Log level and much more.
reference
Reference startup option
I didn't know, but Kivy has a mode that allows you to see the hierarchical structure of the widget and check the value of Property just by giving parameters at startup. We recommend that you read the reference links.
reference
- Convenient tools that can be used just by giving arguments when running the Kivy app
- Modules（API Reference）
App suitable for creating using Kivy
It is suitable for apps that switch to a few screens by pressing a button from the startup screen. I personally think that it is not suitable for apps that frequently transition screens and retain values.
Also, I don't think apps that display high-definition 3D models are suitable. Since it uses OpenGL ES, some people may think that it is suitable for 3D games, but as mentioned in the official API reference, the index can only display up to 65535. If you want to create a crunchy 3D game, I think you should use a game engine such as Unity or UE4.
reference
Continuation of this content
I gave you how to make a calculator app. How to use Python Kivy (2) -Create a calculator-
Recommended Posts