Introduction to Graphics

2. INTRODUCTION TO TKINTER
• UP TO THIS POINT WE HAVE BEEN CREATING CONSOLE BASED APPLICATIONS.
• NOW WE ARE GOING TO COMBINE THAT KNOWLEDGE WITH THE OBJECTS WE
STUDIED IN APPINVENTOR.
• WE WILL BE USING THE MODULE TKINTER
• THE TKINTER MODULE IS COMPRISED OF NUMEROUS CLASSES TO CREATE GUI
WIDGETS.
• CODE: FROM TKINTER IMPORT *

3. CREATING A GRAPHICAL ENVIRONMENT
• THERE ARE 2 MAIN COMPONENTS TO A GUI.
• 1. THE WINDOW/CONTAINER
• 2. THE WIDGETS
• LABELS, BUTTONS, TEXT BOXES, RADIO BUTTONS, IMAGES, ETC.

4. CREATING A WINDOW AND LABEL
• LET’S BEGIN BY CREATING THE WINDOW, WHICH IS NOTHING MORE THAN A
CONTAINER FOR OUR WIDGETS.
• THE EQUIVALENT TO A SCREEN IN APPINVENTOR
• CODE: WINDOWNAME = TK()
• HOWEVER, THIS WINDOW WILL NOT DO MUCH FOR US UNLESS WE PACK IT WITH
SOME CONTENT.

5. CREATING A LABEL
• A LABEL IS A WIDGET THAT DISPLAYS INFORMATION. JUST LIKE IN APPINVENTOR.
• CODE: LABELNAME = LABEL(WINDOWNAME, OPTIONS,…)
• OPTIONS INCLUDE:
• TEXT, IMAGES, COLORS, FONT, JUSTIFY, ETC…
• EX.
LBLPROMPT = LABEL(WIND, TEXT =“ HEY”, BG = “RED”)
• AFTER YOU CREATE THE LABEL YOU HAVE TO PUT/PACK IT IN THE WINDOW.
• CODE: LABELNAME.PACK()
• NOTE: THERE ARE NUMEROUS OPTIONS TO EXPLORE

6. THE EVENT LOOP AND PROCESSING EVENTS
• GUI’S ARE EVENT DRIVEN, MEANING THEY RUN WHEN SOME INTERACTION FROM THE
USER OCCURS.
• TO DETERMINE WHEN AN INTERACTION OCCURS YOU HAVE TO CREATE A LISTENER
FOR EVERY PROGRAMMABLE ACTION THERE IS.
• PYTHON MAKES THIS A BIT EASIER BY USING AN EVENT LOOP TO LISTEN FOR ANY
INTERACTION.
• CODE: WINDOWNAME.MAINLOOP()

7. EXAMPLE
• QUESTION: HOW CAN WE MODIFY THE BELOW PROGRAM TO PROMPT THE USER TO
ENTER A NAME AND THEN DISPLAY A WELCOME MESSAGE.
IMPORT TKINTER
WIND = TK()
LBLNAME = LABEL(WIND, TEXT = “HEY YOU!”, FG = “BLUE”, FONT =(“HELVETICA, 16))
LBLNAME.PACK()
WIND.MAINLOOP()

8. THE WIDGET CLASSES
• WHEN CREATING A WIDGET THERE ARE
SPECIFIC PARAMETERS FOR EACH TO SPECIFY.
• WHERE TO PLACE IT
• PROPERTIES
• VARIABLES TO SET, ETC.
Widget Class Description
Button A simple button, used to execute a command.
Checkbutton Clicking a check button toggles between the values.
Radiobutton Clicking a radio button sets the variable to that value,
and clears all other radio buttons associated with the
same variable.
Entry A text entry field, a.k.a a text field or a text box.
Frame A container widget for containing other widgets.
Menu A menu pane, used to implement pull down and popup menus.
Menubutton A menu button, used to implement pull down menus.
Label Displays a text or an image.
Message Displays a text. Similar to the label widget, but can
automatically wrap text to a given width or aspect ratio.
Text Formatted text display. Allows you to display and edit
text with various styles and attributes. Also supports
embedded images and windows.
Scale Allows you to set a numerical value by dragging a
"slider".
Canvas Structured graphics, used to draw graphs and plots,
create graphics editors, and to implement custom widgets.
Toplevel A container widget displayed as a separate, top-level
window.

9. CHANGING PROPERTIES OF WIDGETS
• COLOR AND FONT
• TO SPECIFY A COLOR, YOU CAN EITHER USE A COLOR NAME SUCH AS RED, YELLOW, GREEN, BLUE, WHITE, BLACK, PURPLE, ETC, OR EXPLICITLY SPECIFY THE RED, GREEN, AND BLUE
(RGB) COLOR COMPONENTS USING A STRING #RRGGBB, WHERE RR, GG, BB ARE HEXADECIMAL REPRESENTATIONS OF THE RED, GREEN AND BLUE VALUES, RESPECTIVELY.
• "TIMES 10 BOLD"
• "HELVETICA 10 BOLD ITALIC"
• "COURIER NEW 20 BOLD ITALIC"
• "COURIER NEW 20 BOLD ITALIC OVER STRIKE UNDERLINE"
• TEXT PROPERTIES
• THE TEXT IN A LABEL AND A BUTTON IS CENTERED
BY DEFAULT. YOU CAN CHANGE IT BY USING THE JUSTIFY
OPTION WITH VALUES LEFT, CENTER, OR RIGHT. YOU
CAN ALSO DISPLAY THE TEXT IN MULTIPLE LINES BY
INSERTING THE NEWLINE CHARACTER N TO SEPARATE TEXTS.
• MOUSE CURSOR
• YOU CAN SET A MOUSE CURSOR BY USING THE CURSOR OPTION WITH VALUES SUCH AS "ARROW" (DEFAULT), "CIRCLE", "CROSS" "PLUS", ETC.
• CODE: WIDGETNAME["PROPERTYNAME] = NEWPROPERTYVALUE

10. EXAMPLE
import tkinter
def btnNameProcess(name):
lblName["text"]= "Hey " + name
wind = tkinter.Tk()
wind.title("GUI Test Program")
wind.minsize(200,200)
lblName = tkinter.Label(wind, text ="Hey You", fg ="blue", bg = "#fff")
enterName = tkinter.StringVar() entName = tkinter.Entry(wind,text = "Me")
btnName = tkinter.Button(wind, text = "Press Me", command = lambda: btnNameProcess(entName.get()))
lblName.pack()
entName.pack()
btnName.pack()
wind.mainloop()