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).

test.png

widget_tree1.png

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)

widget_tree2.png

widget_tree3.png

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 widget_tree4.png

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

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

Recommended Posts

A story about an amateur making a breakout with python (kivy) ②
A story about an amateur making a breakout with python (kivy) ①
A story about making 3D space recognition with Python
A story about making Hanon-like sheet music with Python
A story about trying a (Golang +) Python monorepo with Bazel
A story about making an x86 bootloader that can boot vmlinux with Rust
A story about installing matplotlib using pip with an error
A story about making a tanka by chance with Sudachi Py
A story about a python beginner stuck with No module named'http.server'
A story about adding a REST API to a daemon made with Python
The story of making a standard driver for db with python.
A story about developing a soft type with Firestore + Python + OpenAPI + Typescript
The story of making a module that skips mail with python
A story about machine learning with Kyasuket
A story about Python pop and append
The story of making a university 100 yen breakfast LINE bot with Python
A story about a beginner making a VTuber notification bot from scratch in Python
[Python] Make a game with Pyxel-Use an editor-
[Python3] A story stuck with time zone conversion
A story about implementing a login screen with django
A story about running Python on PHP on Heroku
A story about modifying Python and adding functions
The story of making a tool to load an image with Python ⇒ save it as another name
A story about building an IDE environment with WinPython on an old Windows OS.
Automatic Zakuzaku, Bitcoin. A story about a Python beginner making a coin check 1-minute chart
A story about a liberal arts programming amateur getting a Python 3 engineer certification basic exam
A story about using Resona's software token with 1Password
A story about how theano was moved with TSUBAME 2.0
A memo about building a Django (Python) application with Docker
A story about an error when loading a TensorFlow model created with Google Colab locally
[Python] A story about making a LINE Bot with a practical manned function on its own without using Salesforce [Messaging API]
A note about hitting the Facebook API with the Python SDK
How to convert an array to a dictionary with Python [Application]
A story about how to specify a relative path in python.
Creating an egg with python
A story about competing with a friend in Othello AI Preparation
Stumble story with Python array
A story about building a PyPI cache server (with Docker) and making me a little happy again
A memorandum about correlation [Python]
[Note] A story about trying to override a class method with two underscores in Python 3 series.
Make a fortune with Python
A story about how to deal with the CORS problem
Machine learning A story about people who are not familiar with GBDT using GBDT in Python
A story about a war when two newcomers developed an app
A memorandum about Python mock
[Python] The first step to making a game with Pyxel
[Python Kivy] How to create an exe file with pyinstaller
Automate sushi making with Python
Create a directory with python
A story about trying to implement a private variable in Python.
Turn an array of strings with a for statement (Python3)
The story of making a question box bot with discord.py
A note about [python] __debug__
A story about a person who uses Python addicted to the judgment of an empty JavaScript dictionary
[Python, Selenium, PhantomJS] A story when scraping a website with lazy load
Try to extract a character string from an image with Python3
How to create a heatmap with an arbitrary domain in Python
[Python] I made an image viewer with a simple sorting function.
A story about trying to run multiple python versions (Mac edition)
[Python] What is a with statement?
Cut out an image with python