Kivy For The Non Computer Scientist – Part 16: Reading Text From Kivy Buttons Created In KV Language For Use In Python Code.

When I wrapped up writing Kivy For The Non Computer Scientist – Part 15: Interacting With Python, one thing that eluded me was that I could not read and use the text from a button that was created in KV Language. This blog post comes with complete working Kivy code that will allow one to print the text on a Kivy button to its Python console.

In this instance the text is read and copied into a Kivy TextInput Widget when appropriate buttons are pressed. When the Print To Console button is pressed, the text displayed in the TextInput widget is passed to python as a string through an event and printed on the Python console. The app looks and works as follows;untitled-presentation

The complete working Kivy code to accomplish this (with comments) is as follows

import kivy
kivy.require("1.9.1") # used to alert user if this code is run on an earlier version of Kivy.
from kivy.app import App # imports Kivy App
from kivy.uix.gridlayout import GridLayout # imports GridLayout for use in app
from kivy.lang import Builder  # Imports the KV language builder that provides the layout of kivy screens

Builder.load_string(""" # KV Language string.
<ReadButtonTextGridLayout>: # Identifies layout/interactivity for the App.
    id: pad # ID's GridLayout as pad
    rows: 1 # Sets GridLayout row property to 1.
    GridLayout: # Row 1 layout
        rows: 3 # Sets GridLayout row property to 1.
        Button: # Creates a Buttin widget instance
            id: button1 # ID's Button as button 1
            text: "Hello, world!" # Text for above button.
            on_press:
                pad.my_buttons_text(button1.text)# on_press is a Kivy mouse release event.
        Button: # Creates a Buttin widget instance
            id: button2 # ID's Button as button 2
            text: "Hello, world! I'm here!" # Text for above button.
            on_press:
                pad.my_buttons_text(button2.text)# on_press is a Kivy mouse release event.
        Button: # Creates a Buttin widget instance
            id: button3 # ID's Button as button 3
            text: "Goodbye, world! I'm gone!" # Text for above button.
            on_press:
                pad.my_buttons_text(button3.text)# on_press is a Kivy mouse release event.
""")

class ReadButtonTextGridLayout(GridLayout): # Houses event handlers and directs a GridLayout for the <ReadButtonTextGridLayout> class.

    def my_buttons_text(self, my_text): # my_button_text event handler code
        print(str(my_text)) # my_text printed to Python console.

class ButtonReadingApp(App): # Creates the instance (copy) of the Kivy App class named ButtonReadingApp

    def build(self):# build is a method of Kivy's App class used to place widgets onto the GUI.
        return ReadButtonTextGridLayout() # return calls the build method which in turn builds the GUI.

ButtonReadingApp().run() # Runs ButtonReadinApp

There is not much new to the code here that has not been covered in previous posts so let me get to the highlights.

  • Line 8 – This is the first kv Language code that defines the class in KV Language that does not start immediately with it’s GridLayout designation. The GridLayout is called on Line 41 when a GridLayout is applied as the ReadButtonTextGridLayout class is initiated.
  • Line 9 – The entire GUI is id’d as pad. That pad id is used on the event called on Line 36 to identify the text to be sent to the event handler that ultimately prints the text to Pythons console.
  • Lines 12 and 13 – You may notice that the overall GUI is slightly more attractive than those in previous posts. That’s because BoxLayouts (Lines 13, 18 and 29) are used on the rows and they offer different positioning options over GridLayouts and in the overall GUI padding and spacing are applied by both the GridLayout and BoxLayout to achieve the better look.
  • Line 14 – TextInput widget is placed in row 1 of GUI.
  • Line 15 – TextInput is id’d as entry. It’s from entry’s text property that Python ultimately gets the button text. (Line 36)
  • Line 17 – multiline is a method of TextInput. This sets a text entry to a single line.
  • Line 19 – spacing is set to 10 for the BoxLayout. Spacing is the amount of space between each button on the row .
  • Line 20 – on_press is a Kivy mouse release event. It calls my_button_text event handler class and sends it the entry.text property.
  • Line 42 – my_button_text function receives entry.text as my_text.
  • Line 43 – my_text is printed as a string to Pythons console output.

Simpler Version

A much simpler version of the above that avoids the TextInput window looks and works as follows,untitled-presentation-1

The complete working Kivy code is as follows;


import kivy
kivy.require("1.9.1") # used to alert user if this code is run on an earlier version of Kivy.
from kivy.app import App # imports Kivy App
from kivy.uix.gridlayout import GridLayout # imports GridLayout for use in app
from kivy.lang import Builder  # Imports the KV language builder that provides the layout of kivy screens

Builder.load_string(""" # KV Language string.
<ReadButtonTextGridLayout>: # Identifies layout/interactivity for the App.
    id: pad # ID's GridLayout as pad
    rows: 1 # Sets GridLayout row property to 1.
    GridLayout: # Row 1 layout
        rows: 3 # Sets GridLayout row property to 1.
        Button: # Creates a Buttin widget instance
            id: button1 # ID's Button as button 1
            text: "Hello, world!" # Text for above button.
            on_press:
                pad.my_buttons_text(button1.text)# on_press is a Kivy mouse release event.
        Button: # Creates a Buttin widget instance
            id: button2 # ID's Button as button 2
            text: "Hello, world! I'm here!" # Text for above button.
            on_press:
                pad.my_buttons_text(button2.text)# on_press is a Kivy mouse release event.
        Button: # Creates a Buttin widget instance
            id: button3 # ID's Button as button 3
            text: "Goodbye, world! I'm gone!" # Text for above button.
            on_press:
                pad.my_buttons_text(button3.text)# on_press is a Kivy mouse release event.
""")

class ReadButtonTextGridLayout(GridLayout): # Houses event handlers and directs a GridLayout for the <ReadButtonTextGridLayout> class.

    def my_buttons_text(self, my_text): # my_button_text event handler code
        print(str(my_text)) # my_text printed to Python console.

class ButtonReadingApp(App): # Creates the instance (copy) of the Kivy App class named ButtonReadingApp

    def build(self):# build is a method of Kivy's App class used to place widgets onto the GUI.
        return ReadButtonTextGridLayout() # return calls the build method which in turn builds the GUI.

ButtonReadingApp().run() # Runs ButtonReadingApp

Here are the changes to the code worth noting;

  • Line 14 – The first instance of the Button widget is given an id of button1
  • Line 17 – The buttons on_press event calls an event handler function called my_buttons_text and sends button1’s text property to the function.
  • Line 19 – The second instance of the Button widget is given an id of button2
  • Line 22 – The buttons on_press event calls an event handler function called my_buttons_text and sends button2’s text property to the function
  • Line 24 – The third instance of the Button widget is given an id of button3
  • Line 27 – The buttons on_press event calls an event handler function called my_buttons_text and sends button3’s text property to the function.
  • Line 32 – my_buttons_text function receives the buttons text property as my_text
  • Line 33 – Prints my_text string to the Python console.

Again my assumption here is that Python programmers will know what to do with any strings that come back from a Kivy interface such as adding them to a Python list (as in Part 15) or write code specific to their application based on the text that is returned from the GUI.

That wraps things up  for this blog post. The next blog post Kivy For The Non Computer Scientist – Part 17: Making Natural Looking GUI’s Using Kivy’s Float Layout. will focus on more natural looking Kivy GUI design.

Happy developing.

….brad….

Advertisements

One Response

  1. […] Here’s the link to the next instalment in this blog post series, Kivy For The Non Computer Scientist – Part 16: Reading Text From Kivy Buttons For Python Code Mani…. […]

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: