Kivy For The Non Computer Scientist – Part 5: Making A Kivy Button Do Something

As stated in Part 2 the goal of this blog series is to produce a simple button, switch and checkbox interface with very simple and complete code examples. While Part 3 provided the background and code related to Kivys Object Oriented Programming (OOP) principles required by Kivy and Part 4 provided the code on simple screen layouts, this blog entry will build upon the code from Part 4 by providing the code to change the text fn the label on the GUI to Hello. world! by mouse clicking or touching the button. The complete code to accomplish this is as follows;

pressgui

The code is as follows (from Part 4 with Button Event code added);


from kivy.app import App # Imports the base App class required for Kivy Apps
from kivy.uix.gridlayout import GridLayout # imports the GridLayout class for use in the app.
from kivy.uix.label import Label # Imports the Label Screen Widget for use in the app.
from kivy.uix.button import Button # Imports the Button Screen Widget for use in the app.
class TwoColumnApp(App): # Creates the instance (copy) of the Kivy App class named TwoColumnApp.
    def build(self): # build is a method of Kivy's App class used to place widgets onto the GUI.
        my_layout = GridLayout() # Creates a GridLayout titled my_layout for use in the app.
        my_layout.cols = 2 # Sets my_layout column property to 2
        self.my_first_button = Button(text="I'm A Button. Press Me", on_press = self.hello_world) # Creates a Button Widget instance and sets its text property to I'm A Button. Press Me.
        self.my_first_label = Label(text="Please Press My Button") # Creates a Label Widget instance and sets its text property to Please Press My Button.
        my_layout.add_widget(self.my_first_button) # Adds the button widget to my_layout
        my_layout.add_widget(self.my_first_label) # Adds the label widget to My_layout
        return my_layout # return calls the build method which in turn builds the GUI.
    def hello_world(self,event):
        self.my_first_label.text = "Hello, world!"
TwoColumnApp().run() # Calls the TwoColumnApp object to run the app.

So Where Is The Code That Makes The Kivy Button Trigger An Event?

The additional code to create the button event is as follows;

  • On Lines 14 and 15 an event function is named and its action defined.
    • Line 14 names the function hello_world.
    • Line 15 instructs the self.my_first_label to change its text to Hello, world!
  • Line 9 adds on_press = self.hello_world to the self.my_first_button code.
    • It is the buttons on_press behavior method that calls an event. In this case it is set to self.hello_world which calls the hello_world function. As shown above the hello_world function changes Kivy’s Label Widget text to Hello, world!.

Here is the final code for Part 5 with each line commented explaining what it does;


from kivy.app import App # Imports the base App class required for Kivy Apps
from kivy.uix.gridlayout import GridLayout # imports the GridLayout class for use in the app.
from kivy.uix.label import Label # Imports the Label Screen Widget for use in the app.
from kivy.uix.button import Button # Imports the Button Screen Widget for use in the app.
class TwoColumnApp(App): # Creates the instance (copy) of the Kivy App class named TwoColumnApp.
    def build(self): # build is a method of Kivy's App class used to place widgets onto the GUI.
        my_layout = GridLayout() # Creates a GridLayout titled my_layout for use in the app.
        my_layout.cols = 2 # Sets my_layout column property to 2
        self.my_first_button = Button(text="I'm A Button. Press Me", on_press = self.hello_world) # Creates a Button Widget instance and sets its text property to I'm A Button. Press Me.
        self.my_first_label = Label(text="Please Press My Button") # Creates a Label Widget instance and sets its text property to Please Press My Button.
        my_layout.add_widget(self.my_first_button) # Adds the button widget to my_layout
        my_layout.add_widget(self.my_first_label) # Adds the label widget to My_layout
        return my_layout # return calls the build method which in turn builds the GUI.
    def hello_world(self,event): # Creates the hello_world function to be used by button as its event.
        self.my_first_label.text = "Hello, world!" # Sets the GUIs label text property to Hello, world! when function is called.
TwoColumnApp().run() # Calls the TwoColumnApp object to run the app.

With these first five blogposts you should now be on your way to start creating your own KIVY interface. You now know the basics of how Kivy’s OOP, screen layouts, screen widgets and button event handling works. You now have a simple straightforward code base (only 16 lines of code) that will help you get started on your own Kivy GUI that uses button and label widgets.

….brad….

Link to the next blog post in this series: Kivy For The Non Computer Scientist – Part 6: Code Cleanup And Kivy Convention.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: