Let’s push that button!

Originally, the plan for this tutorial was to continue talking about layouts and the different layout managers in Tkinter. I was also going to include the Button widget. But then I started writing the tutorial and it was so jam-packed that I decided to separate them to make things much easier. So today let’s learn about a new and important widget, the Button widget.

By the end of this tutorial, you will be able to include Buttons in your GUI, know how to modify them to better fit your window, and learn a few ways to use them in your projects.


Create a Button Widget

With any button in real-life, the purpose of pushing it is to perform some action, to actually do something. Push the button on the TV remote, the TV turns on. The buttons on the elevator? Select a floor to go to in the building. Click the ‘X’ button at the top-corner of this window and you will close it.

It’s the same for buttons in Tkinter. Push the button and maybe display some text, or maybe call another function and perform some action. We can use the Button widget to create a very basic TV remote in the following code.

Please refer to creating the root window or how to create Labels for help with the above code. Creating a Button widget is super simple. Here we create four buttons and one label. The order in which they are created in the code is the order they will appear in the window. In line 6, we make a button using the Button function. Its first parameter is the main window and that is followed by the the text we want to display on the button, “ON”. Then in line 7 we pack the button in the root window.

We create the turn_off, vol_up, and vol_down buttons in similar fashions and pack them in the window. However, only one of these buttons, turn_off, does anything at the moment. We can use the keyword command to make the button call a function. root.quit closes the root window. From here we can look at adding functions to each of our buttons and learning how to alter their appearances.

TV remote.

NOTE: If you are developing your own GUI and have a few buttons that don’t yet do anything, then there is also a way to make the button inactive. Just add state=DISABLED as one of the parameters and the button cannot be clicked.

Pushing those Buttons

Above we have 3 buttons that don’t do anything… yet. I want to begin by showing a simple example of creating a function and then use a button to call it.

The function volumeUp is called whenever the vol_up button is clicked in the GUI. Now that we have a basic understanding of how to use the Button widget, the next step is to add more functionality to our TV remote. For turn_on let’s create a window that opens up and displays an image. Then for vol_down let’s also print out a message to keep things simple for now. The following displays the code and each button has a command parameter.

Lines 6-12 are functions to prove that the vol_up and vol_down buttons work properly. Look at lines 34 and 37 to see that the buttons are calling the functions using command. When the turn_on button in line 25 is clicked it calls the turnOnTV function in lines 15-23. A new window will be appear and display a picture, much like turning on the TV. The TopLevel widget is still part of the root window, however our image (which is a Label) is part of the TopLevel widget.

Show how a Button widget can display a new window
Turning the TV window “on” with the click of a button.

When the volume buttons are clicked, the following will display as output in the terminal. This can be very useful for testing if your buttons are working properly or to get feedback from the function calls.

Changing the volume with our buttons.

Other Button Parameters

The Button widget also has some other options. I will cover some of the more basic or more useful ones. Many of these parameters can help to create buttons that look nicer or fit better into the style of our GUI. I have noticed since I am using Mac, that many of these parameters don’t work at all. In a later tutorial, I will go over using the tkinter.ttk module. If you are interested now then check out this link on ttk.

  1. active background & activeforeground – set the background or foreground colors when the cursor is over the button.
  2. bd – set border width of button in pixels.
  3. bg & fg – set background and foreground colors.
  4. font – choose the text font for the button.
  5. height & width – set height and width sizes.
  6. image – use an image on the button rather than text.

Display an image on the button

This tutorial is already a little long, but I would like to finish by showing how to add an image to our buttons. Using the “ON” button from above, the following code with place an image on the button rather than text.

In line 2, we load the image using PhotoImage, then resize the image using subsample. Then, we change the text=”ON” parameter from before to image=photo.

ON button.

Summary

That was a lot to cover. After reading this tutorial, I hope you realize that we can use Buttons to do many things in Tkinter. Here we show how to create Buttons and place them in our GUI. Then, we show how we can use them to display text, open a new window, or even edit them to be more aesthetically pleasing by changing their look or adding images.

Even though the basics of Buttons were taught here, we will continue to use them in future tutorials. Understand and practice using them to make your own projects.

References

effbot.org – Definitely refer to this tutorial if you want to learn even more about the other Button parameters.

Python Course – Has a really cool example of how you can use Buttons for dynamic projects, not just static ones.

Twitter
Visit Us
Facebook
LinkedIn

Leave a Reply

Your email address will not be published. Required fields are marked *