Learn (/learn) / Python GUIs (/learn/python-guis) / Basics of a Tkinter GUI

Search 

Basics of a Tkinter GUI

Topics
Submitted by Jenn Case on Wed, 01/30/2013 - 23:31 Python (/topics/python) (19)
Topics: Python (/topics/python) GUI (/topics/gui) Introduction (/topics/introduction) Ardunio (/topics/ardunio) (0)
(/users/jenn-case) Serial (/topics/serial) (8)
Arduino (/topics/arduino) (45)
Introduction C++ (/topics/c) (8) GUI
(/topics/gui) (11) Introduction
It is often necessary to being to communicate with a robot while it is in use. This can be done simply through a remote
(/topics/introduction) (10)
control or more complexly through a GUI. The GUI can allow the robot to both send an receive information while a
Programming
remote control will only be able to send to the robot. A simple way to make a GUI is through Python Tkinter. Using
(/topics/programming) (13)
Tkinter along with Serial, the code will allow easy communication between the robot.
Environmental Mapping
This tutorial will show how to use various parts of Tkinter and show how to make a GUI look good. (/topics/environmental-
mapping) (3) XBee
Importing Library (/topics/xbee) (2) Wireless
(/topics/wireless) (2) Sensors
At the start of the code, it is necessary to import the necessary libraries:
(/topics/sensors) (20) Timing
from Tkinter import * (/topics/timing) (1) Web
(/topics/web) (6) Projects
Importing the library in this fashion means that when the library is used, it does not have to be called every time. For (/topics/projects) (6)
communication between a robot, it will also be necessary to import the Serial library. To learn more about that, see Electronics
Serial Commands (http://jne.neomenlo.org/learn/serial-commands#). (/topics/electronics) (13)
Physics (/topics/physics) (3)

Making a GUI Linux (/topics/linux) (10) 3D

(/topics/3d) (2) Blender
The Srst thing that must be done is to make the window that the GUI will be in. This is done with the following code: (/topics/blender) (1)

Tk() #Makes the window

root = Tk
root.wm_title("Window Title") #Makes the title that will appear in the top left
Disqus: Recent
root.config(background = "#FFFFFF") #sets background color to white Comments
#put widgets here

root.mainloop() #start monitoring and updating the GUI. Nothing below here runs. (https://disqus.com/by/lindengriesbach/)
Linden Griesbach
This gives a very basic window with a white background. (https://disqus.com/by/lindengriesbach/)
When making a Python GUI, there are several different widgets (http://effbot.org/tkinterbook/tkinter-index.htm) that can Evan, Thanks for creating this
be used. Here, the following widgets will be discussed: simulation. I've used it many
times in the engineering class
Frame that I teach. For some reason,
Label it has recently ceased to
Entry function as it always has.
Button SpeciScally, the...
Canvas Inverted Pendulum Controls
Text (http://robotic-
controls.com/learn/inverted-
Frame pendulum-controls) · 2 days
ago (http://robotic-
Frames are useful for the organization of a GUI. Frames get built into the grid of the window and then in turn each have a controls.com/learn/inverted-
grid of their own. This means that nesting frames may be necessary if the GUI is going to look nice. To add a frame, the pendulum-controls#comment-
following code is needed: 5609743175)

leftFrame = Frame
Frame(root, width=200, height = 600)
leftFrame.grid(row=0, column=0, padx=10, pady=2) (https://disqus.com/by/kajoljagtap/)
The Srst line means that leftFrame will rest in root, which is the name that the window was given. The height and width kajol jagtap
are speciSed, but the frames re-size to what is put inside. The second line places the frame in the Srst grid spot open in (https://disqus.com/by/kajoljagtap/)
root (0,0). how to display RS232 output
on GUI?
Label Tkinter with Serial
(http://robotic-
A label allows either text or a picture to be placed. The text inside the label can be updated later if necessary. To add a
controls.com/learn/python-
label, the following code is needed:
guis/tkinter-serial) · 8 months
ago (http://robotic-
firstLabel = Label
Label(leftFrame, text="This is my first label")
controls.com/learn/python-
firstLabel.grid(row=0, column=0, padx=10, pady=2)
guis/tkinter-serial#comment-
This rests SrstLabel in left frame with the following text in the Srst spot of leftFrame. 5280897584)
To get a picture in the label, the following code is used:

(https://disqus.com/by/mitsupower/)
imageEx = PhotoImage
PhotoImage(file = 'image.gif')
Label
Label(leftFrame, image=imageEx).grid(row=0, column=0, padx=10, pady=2) Mitsu Power
(https://disqus.com/by/mitsupower/)
The image should be in the same folder that the Python Sle is in. Using PhotoImage, the image Sle should be a GIF or this is stupid class !!! because
PGM. does nothing !!! Simle and easy
:
Entry
String sOne = String(5.632398,
The Entry widget is an input widget. It allows the user to type something that can then be read into the program. To use
6);
this widget, the following code is helpful:
Serial.println(sOne);
Entry(leftFrame, width = 10) #the width refers to the number of charac
userInput = Entry Long based Decimals
ters (http://robotic-
userInput.grid(row=0, column=0, padx=10, pady=2) controls.com/learn/arduino/long-
based-decimals) · 9 months
#get the text inside of userInput ago (http://robotic-
userInput.get
get() controls.com/learn/arduino/long-
It may be necessary to get the inside of the entry when a button is pushed or when the user strikes enter. based-decimals#comment-
5263325796)
Button
A button causes a speciSed action to occur. To use a button, the following is needed: (https://disqus.com/by/disqus_uA2dzeJdO0/)
Jay You
newButton = Button
Button(leftFrame, text="Okay", command=btnClicked)
(https://disqus.com/by/disqus_uA2dzeJdO0/)
newButton.grid(row=0, column=0, padx=10, pady=2)
change baudrate
The command speciSed in the button is a function that will be called. The function holds the code that should Sre when Linksprite JPEG Camera
the button is pushed. This function should be above when the button is made. (http://robotic-
controls.com/learn/arduino/linksprite-
Canvas jpeg-camera) · 1 year ago
(http://robotic-
A canvas allows for various shapes and designs to be drawn onto it. These shapes will remain if more are added unless controls.com/learn/arduino/linksprite-
the shape's pixels are completely overwritten. To add a canvas, the following code is used: jpeg-camera#comment-
5126150385)

newCanvas = Canvas
Canvas(leftFrame, width=100, height=100, bg='white')
(https://disqus.com/by/disqus_uA2dzeJdO0/)
newCanvas.grid(row=0, column=0, padx=10, pady=2)
Jay You
This gets the canvas. To draw on the canvas there are a large number of functions (https://disqus.com/by/disqus_uA2dzeJdO0/)
(http://effbot.org/tkinterbook/canvas.htm#Tkinter.Canvas.create_arc-method) available, such as create_arc and sorry im late to the party, but
create_line. im not sure where ive gone
wrong, when i Srst run my
Text python 3 script it mentioned
A Text widget can either be written in or can be written to. To use it, the following is needed: that outputData14.txt doesnt
exist and then i created a blank
newText = Text
Text(leftFrame, width=50, height=8, takefocus=0) Sle with the name....
newText.grid(row=0, column=0, padx=10, pady=2) Linksprite JPEG Camera
(http://robotic-
#write to widget controls.com/learn/arduino/linksprite-
newText.insert(0.0, "Text to insert") #0.0 is beginning of widget
jpeg-camera) · 1 year ago
The Text widget is good for creating logs since the data will remain and the user can look back at it. (http://robotic-
controls.com/learn/arduino/linksprite-

GUI Example
jpeg-camera#comment-
5126147265)

It is often useful to map out what the GUI is going to look like before starting on it so that all the frames can be nested
appropriately. A sketch should be made for the GUI so that it can be visualized, such as the following:
Contents
Introduction
Importing Library
Making a GUI
Frame
Label
Entry
Button
Canvas
Text
GUI Example

(/sites/default/Sles/learn/Example%20GUI.png)
In the above example, only three frames would be necessary: a frame for the left side, a frame for the right side, and a
frame surrounding the color buttons. Using this along with the code that was given previously, the following code can be
made:

from Tkinter import *

 Tk() #Makes the window
root = Tk
root.wm_title("Window Title") #Makes the title that will appear in the top left
root.config(background = "#FFFFFF")

def redCircle():
circleCanvas.create_oval(20, 20, 80, 80, width=0, fill='red')
colorLog.insert(0.0, "Red\n")

def yelCircle():
circleCanvas.create_oval(20, 20, 80, 80, width=0, fill='yellow')
colorLog.insert(0.0, "Yellow\n")

def grnCircle():
circleCanvas.create_oval(20, 20, 80, 80, width=0, fill='green')
colorLog.insert(0.0, "Green\n")

#Left Frame and its contents

leftFrame = Frame
Frame(root, width=200, height = 600)
leftFrame.grid(row=0, column=0, padx=10, pady=2)

Label
Label(leftFrame, text="Instructions:").grid(row=0, column=0, padx=10, pady=2)

Instruct = Label
Label(leftFrame, text="1\n2\n2\n3\n4\n5\n6\n7\n8\n9\n")
Instruct
Instruct.grid(row=1, column=0, padx=10, pady=2)

try
try:
imageEx = PhotoImage
PhotoImage(file = 'image.gif')
Label
Label(leftFrame, image=imageEx).grid(row=2, column=0, padx=10, pady=2)
except
except:
print
print("Image not found")

#Right Frame and its contents

rightFrame = Frame
Frame(root, width=200, height = 600)
rightFrame.grid(row=0, column=1, padx=10, pady=2)

circleCanvas = Canvas
Canvas(rightFrame, width=100, height=100, bg='white')
circleCanvas.grid(row=0, column=0, padx=10, pady=2)

btnFrame = Frame
Frame(rightFrame, width=200, height = 200)
btnFrame.grid(row=1, column=0, padx=10, pady=2)

colorLog = Text
Text(rightFrame, width = 30, height = 10, takefocus=0)
colorLog.grid(row=2, column=0, padx=10, pady=2)

redBtn = Button
Button(btnFrame, text="Red", command=redCircle)
redBtn.grid(row=0, column=0, padx=10, pady=2)

yellowBtn = Button
Button(btnFrame, text="Yellow", command=yelCircle)
yellowBtn.grid(row=0, column=1, padx=10, pady=2)

greenBtn = Button
Button(btnFrame, text="Green", command=grnCircle)
greenBtn.grid(row=0, column=2, padx=10, pady=2)
 root.mainloop() #start monitoring and updating the GUI

This code results in the following GUI:

(/sites/default/Sles/learn/unprettyGUI.png)
This GUI completes all the functions it is intended to do, but does not do so in a very aesthetic fashion.

Book traversal links for Basics of a Tkinter

GUI
‹ Python GUIs (/learn/python-guis) Up (/learn/python-guis)

Making the GUI Attractive › (/learn/python-guis/making-gui-attractive)

Printer-friendly version (/book/export/html/7)

Disqus