A story about an amateur making a breakout with python (kivy) ②

Too rough synopsis

Following on from Last time, I will explain until I get tired of breaking blocks. Now that we have configured the widget tree, this time we will explain how to make the placed widgets related.

Breakout Load-Let's make a relationship between widgets in the widget tree-

Now, what is the relationship between widgets in the Widget tree in the first place? To give a simple example, when you press a button located in the widget tree, another widget inside the widget tree (for example, the value of the label) changes. Basically, we will configure a GUI with functions in the flow of "configuring a Widget tree using various widgets ⇒ making relationships between each widget".

Make a relationship with the previous widget tree

Now, let's build the relationship between widgets by using the widget tree we created last time. The result and conceptual diagram of the previous Widget tree are shown below. This time, let's try to increase the number displayed on label2 by pressing button1 (children1) and decrease it by pressing button2 (children2).

Display numbers on label2

First, rewrite the build function of the testApp class to display the number on label2. (Since we will create subclasses plusButton and minusButton of Button class later, we have changed the instantiation to match them.)

python

class testApp(App):
	def build(self):
        #Generate Boxlayout, plusButton, minusButton, Label
		layout1 = BoxLayout(orientation='vertical')
		button1 = plusButton(text='children1')
		layout2 = BoxLayout(orientation='horizontal')
		label2 = Label()
		button2 = minusButton(text='children2')
        #Added button2 and label2 as child widgets of layout2
		layout2.add_widget(button2)
		layout2.add_widget(label2)
		#Added button1 and layout2 as child widgets of layout1
		layout1.add_widget(button1)
		layout1.add_widget(layout2)
		#Display of initial value on Label2
		label2.value = 100
		label2.text=str(label2.value)
		return layout1

It is almost the same as the last time, but the initial value of 100 is stored in the variable value given to label2, and the value of value is displayed as a character string in label2.

Change the value of label2 each time you press the button

Next is to create a relationship between widgets, which is the miso of this time. I want to change the value of label2 by pressing Button, but since simple Button does not have such a function, I will create a subclass of Button class and add a function. At this time, the relative position in the widget tree is important. The following is the subclass generation part.

python

#Increase the number of label2 when you press Button
class plusButton(Button):
    def on_press(self):
		#Specifying the position of label2 when viewed from button1
        label = self.parent.children[0].children[0]
		#Change in label value and display
        label.value = label.value+1
        label.text = str(label.value)

#Decrease the number of label2 when you press Button
class minusButton(Button):
    def on_press(self):
		#Specifying the position of label2 when viewed from button2
		#Note the difference from the above
        label = self.parent.children[0]
		#Change in label value and display
        label.value = label.value-1
        label.text = str(label.value)

Basically, on_press, which represents the behavior when the Button is pressed, is defined to behave as desired, but this time the purpose is to change the value of label2, so it is necessary to call label2 during on_press. Here we need the relative positional relationship within the widget tree. If you look closely at the above program, you can see that it is instructing to call label2 and change the value of value from the positional relationship when viewed from the plus button and minus button (self). (See the figure below)

In this way, the parent widget at the top of the widget tree can be specified by parent, and the child widget at the bottom can be specified by children. Also, since children are in list format, individual child widgets can be specified by numerical values.

The final shape. Let's change the value of label2

I'm ready. Let's summarize what we have done so far and change the value of label2. The whole program and execution result are as follows.

main.py

from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.button import Button
from kivy.uix.boxlayout import BoxLayout

#Increase the number of label2 when you press Button
class plusButton(Button):
    def on_press(self):
		#Specifying the position of label2 when viewed from button1
        label = self.parent.children[0].children[0]
		#Change in label value and display
        label.value = label.value+1
        label.text = str(label.value)

#Increase the number of label2 when you press Button
class minusButton(Button):
    def on_press(self):
		#Specifying the position of label2 when viewed from button2
		#Note the difference from the above
        label = self.parent.children[0]
		#Change in label value and display
        label.value = label.value-1
        label.text = str(label.value)

class testApp(App):
	def build(self):
        #Generate Boxlayout, plusButton, minusButton, Label
		layout1 = BoxLayout(orientation='vertical')
		button1 = plusButton(text='children1')
		layout2 = BoxLayout(orientation='horizontal')
		label2 = Label()
		button2 = minusButton(text='children2')
        #Added button2 and label2 as child widgets of layout2
		layout2.add_widget(button2)
		layout2.add_widget(label2)
		#Added button1 and layout2 as child widgets of layout1
		layout1.add_widget(button1)
		layout1.add_widget(layout2)
		#Display of initial value on Label2
		label2.value = 100
		label2.text=str(label2.value)
		return layout1

testApp().run()

The number on the lower right (label 2) of the initial screen is 100

Each time you press each button, the value at the bottom right (label 2) changes.

Summary

This time, by calling other widgets from the relative position of the widget tree, we made the relationship between the widgets and made the GUI function. If you know this, you can make a simple calculator. Next time, I'll talk about events or the KV language. See you next time!

References / web

Kazuya Haraguchi (2018) "Practical Python Library Kivy Programming -Multi-tap App Created with Python-" Mikio Kubo, Asakura Shoten 254-12896-3 /) https://kivy.org/#home