Lesson 1:
Labels
- Introductory window setup.
- How to use labels.
- Positioning widgets.
Lesson 2:
Buttons
- How to use buttons.
- Calling functions with buttons.
- Different widget methods.
Practice: Stopwatch
- Create a stopwatch GUI program.
- Put labels and buttons to practice.
Lesson 3:
Fields/Scroll
- How to use entry fields.
- Implement and use a scrollbar.
- Customize entry fields.
Lesson 4:
Listboxes
- How to use listboxes.
- Manage input data.
- Change listbox appearance.
Practice: Calculator
- Create a functional calculator GUI program.
- Put entry fields to practice.
Lesson 5:
Utilities
- Utilize radio and check buttons.
- Customize appearance.
- Perform actions with scale widgets.
Lesson 6:
Frames/Windows
- Stay organizized using frames.
- Create new windows.
- Adding widgets to frames.
Practice: To-Do List
- Create a functional to-do list GUI program.
- Put listboxes to practice.
Lesson 7:
Menus/Spins
- Using/interacting with option menus.
- Configuring spinboxes.
- Manipulating spinbox entries.
Lesson 1: Labels
General notes:
Note: I will always include some notes of what I went over during the screen recording so that you can reference to them if you forget anything.
Import tkinter by using: from tkinter import *
root = Tk() initialises the window.
root.geometry("WIDTHxLENGTH") can be used to resize the window.
root.resizable(False, False) can be used to restrict users from resizing the window.
root.mainloop() loops the whole program.
Create a Label by using: variable = Label()
Parameters for Label():
• text=""
• fg="" (Font color)
• bg="" (Background/highlight color)
• font="" (e.g. font="Times 26 bold italic underline")
• justify= (LEFT, RIGHT, CENTER)
• padx="" (I forgot to mention, but if you just type in a number, it will signify character spaces, not pixels, you can also use other units such as: c for centimeter, m for millimeter and i for inch).
• pady=""
• relief= (FLAT, RAISED, SUNKEN, GROOVE, RIDGE, SOLID)
• bd="" (Border width)
• image=variable
Call the label/make it show up on screen by using: variable.pack() or variable.grid()
Parameters for .pack():
• side="" (LEFT, RIGHT, TOP, BOTTOM)
• fill="" (X, Y)
Parameters for .grid():
• column= (Columns start from 0, i.e. the first column is column 0)
• row= (Rows start from 0, i.e. the first row is column 0)
• columnspan= (Number of columns the element/widget spans)
• rowspan= (Number of rows the element/widget spans)
• padx="" (Padding applied outside of the element/widget boundary)
• pady="" (Padding applied outside of the element/widget boundary)
• ipadx="" (Padding applied inside of the element/widget boundary, same as the padx in Label parameters, except it can only be used in .grid())
• ipady="" (Padding applied inside of the element/widget boundary, same as the pady in Label parameters, except it can only be used in .grid())
• sticky= (N, S, E, W, N+S, S+E, N+S+E+W, etc)
Adding images:
Images can be added to labels by using the image parameter and PhotoImage widget, to add an image to a label, you first need to create a variable that stores the image by using: imageVariable = PhotoImage(file="filename.gif"). Then, you can use the parameter (image=imageVariable) in the Label widget to add it.
Questions:
If you need any help or have any questions, feel free to message me on Discord at RussianFlipFlop#0.
Lesson 2: Buttons
Parameters for Button():
• text="" (The text in the button.)
• activeforeground="" (Color of foreground when button is pressed.)
• activebackground="" (Color of background when button is pressed.)
• state= (NORMAL, DISABLED, ACTIVE)
• command=function (The function that the button runs when pressed.)
• command=lambda: function() (Can be used to pass arguments or parameters to the function.)
Most of the formatting options/parameters that we used for Labels can also be used for Buttons.
Methods:
• .invoke() ("Clicks" a button even though the button isn't clicked by anyone. It basically just runs the command that the specific button runs.)
• .config() (Can be used to configure/change the parameters in a widget.)
• .grid_configure() (Can be used to configure/change the parameters in the .grid() method.)
• .after(milliseconds, function) (Can be used to run a function after a given amount of time.)
Practice: Stopwatch
General notes:
In this class we worked on a simple stopwatch program which uses both buttons and labels as well as the various methods we learned in the previous classes.
Lesson 3: Entry Fields
Parameters for Entry():
• width="" (Changes the width of the entry widget.)
• justify="" (Changes the position where the text is entered. By default it is set to LEFT, but can be changed to CENTER or RIGHT.)
• selectforeground="" (Changes the color of selected text.)
• selectbackground="" (Changes the background color of selected text.)
• show="" (Changes what the characters are shown as. For example, it can be set to "*", which is useful for password entry fields.)
• xscrollcommand= (Is used to attach/link the scrollbar to the entry field.)
Parameters/Methods for Scrollbar():
• command= (Is used to attach/link the scrollbar to the entry field.)
• .xview (Is used together with the command parameter for attach/link the scrollbar to the entry field. E.g. command=entry_field_1.xview)
• width="" (Changes the width of the scrollbar.)
• jump= (Makes the entry field "jump" when letting go of the scrollbar. By default it is set to 0, but can be set to 1 to enable the "jump" feature.)
• orient= (Changes the orientation of the scrollbar. Can be set to VERTICAL or HORIZONTAL.)
Methods for Entry():
• .delete(INDEX, INDEX) (Deletes the text within the two given indexes, inclusive of the first index.) (.delete(0, END) can be used to delete everything in an entry field.)
• .get() (Gets/retrieves the text that is in the entry field.)
• .insert(INDEX, "text") (Inserts text at a given index in the entry field. Variables can be used.)
• .icursor(INDEX) (Inserts the cursor at a given index.)
• .select_clear() (Clears the selection. It does not delete the selected text, it just de-selects what is selected.)
• .select_present() (Returns a boolean based off of whether anything is selected inside of the entry field.)
• .select_range(INDEX, INDEX) (Selects the text within the two given indexes, inclusive of the first index.)
• .select_to(INDEX) (Selects up until the given index from where the cursor is currently inserted.)
• .set (Is used together with the xscrollcommand parameter to attach/link the scrollbar to the entry field. E.g. xscrollcommand=scrollbar1.set)
Lesson 4: Listboxes
General notes:
Note: I forgot to go over the .curselection() method. I added it to the methods list, so make sure to take note of it!
Parameters for Listbox():
• highlightcolor="" (Changes the highlight color of the whole listbox widget.)
• highlightthickness= (Changes the highlight thickness of the whole listbox widget.)
• selectbackground="" (Changes the background color of the currently selected entries.)
• selectmode= (Changes the mode of selection. The various modes are: BROWSE, SINGLE, MULTIPLE, EXTENDED.)
• xscrollcommand= (Used to attach a scrollbar to the listbox widget on the x axis.)
• yscrollcommand= (Used to attach a scrollbar to the listbox widget on the y axis.)
Methods for Listbox():
• .insert(INDEX, <to be inserted>) (Inserts a new entry at a given index containing the given text.)
• .get(INDEX) (Gets the text present in the entry that is at the given index.)
• .curselection() (Gets the index/es of the currently selected entries. It is usually paired with the .get() method to get the text in entries selected by the user.)
• .delete(INDEX, INDEX) (Deleted the entries present between the given indexes. The first given index is inclusive.)
• .see(INDEX) (Scrolls the listbox widget to a point that the entry at the given index is visible.)
• .yview_moveto(FRACTION) (Scrolls the listbox widget vertically based on the given fraction ranging from 0 to 1. 0 would make it scroll to the very top, while 1 would make it scroll to the very bottom. Any number between 0 and 1 can be used.)
• .yview_scroll(NUMBER, <units>) (Scrolls the listbox widget vertically based off of the given number of units. The units include UNITS (which are basically lines) and PAGES.)
• .xview_moveto() (Same as yview_moveto() except it scrolls horizontally.)
• .xview_scroll() (Same as yview_scroll() except it scrolls horizontally.)
Practice: Calculator
General notes:
In this class we worked on a calculator program which after being completed, was able to add and subtract numbers.
Lesson 5: Utilities
Radiobutton parameters:
• variable= (Sets the variable that gets changed when the radiobutton is selected.)
• value= (Changes the value that the variable is set to when the radiobutton is selected.)
• indicatoron= (Removes the "indicator" circle, giving the button a different look.)
Radiobutton methods:
• .deselect() (Deselects the given radiobutton.)
• .select() (Selects the given radiobutton.)
Checkbutton parameters:
• variable= (Sets the variable that gets changed when the radiobutton is selected.)
• onvalue= (Changes the value that the variable is set to when the checkbutton is selected.)
• offvalue= (Changes the value that the variable is set to when the checkbutton is not selected.)
Checkbutton methods:
Same as the methods for radiobuttons.
Scale widget parameters:
• from_= (Specifies the starting point for the scale widget.)
• to= (Specifies the ending part for the scale widget.)
• resolution= (Changes the the amount that the number gets incremented by.)
• tickinterval= (Creates labels with the multiples of the specified number next to the scale widget.)
• sliderlength= (Changes the length of the slider.)
• troughcolor= (Changes the color of the trough.)
• command= (Specifies the function that gets run every time the slider is moved.)
Scale widget methods:
• .get() (Gets the number that the scale widget is set to.)
• .set() (Moves the slider to the specified number.)
Lesson 6: Frames
General notes:
Note: The audio quality is a bit worse because I don't have my microphone with me.
Using frames:
Frames can be used to divide up a window into different sections so that the whole program can be a bit more organized. To create a frame, you first need to create a variable, and have it set to Frame(), for example: frame1 = Frame().
To add a widget to a frame, the first parameter has to be the variable name of the frame, so for example: button1 = Button(frame1, text="Button").
Using windows:
New windows can be created by having a new variable set to Tk(), for example: new_window = Tk().
To have a widget in a certain window, the first parameter has to be the variable name of the window, for example entry1 = Entry(new_window). The same thing has to be done if you want a frame in a certain window.
If you want to add a widget to a frame which is already in another window, you do not need to specify which window it has to be added to. You only need to specify the frame.
Practice: To-Do List
General notes:
In this class we worked on a To-Do List program which allowed us to add certain things that need to get done in the future, as well as mark them done once they are completed.
Lesson 7: Option Menus
General notes:
Format for OptionMenus: OptionMenu(root, variable, "option", "option", ...)
Make sure that the variable is either set to StringVar(), IntVar(), or DoubleVar().
Methods for OptionMenu():
• .get() (Used for "getting" the value that is selected.)
• .set() (Used for setting the value in the option menu.)
Parameters for Spinbox():
• from_= (Used with the "to" parameter to set the range of numbers for the spinbox.)
• to= (Used with the "from_" parameter to set the range of numbers for the spinbox.)
• values=<tuple variable> (Used to assign the values/options for the spinbox. It can't be used with to and from_.)
• increment= (Used to change by how much the value should increment. E.g. by 0.1 or by 3.)
Methods for Spinbox():
• .delete(INDEX, INDEX) (Used to delete whatever is present in the "entry field" based off of the given indexes.)
• .insert(INDEX, <to insert>) (Used to insert text into the "entry field" based off of the given index.)
• .get() (Used to "get" the value that is currently in the "entry field".)
Cursor formatting options:
Lesson 8: Canvases
General notes:
Canvases can be used to draw or plot various shapes. To create a canvas you have to create a variable and set it to Canvas(), e.g. mycanvas = Canvas().
Shape syntax:
• Lines: mycanvas.create_line(x1, y1, x2, y2)
• Ovals: mycanvas.create_oval(x1, y1, x2, y2)
• Arcs: mycanvas.create_arc(x1, y1, x2, y2)
• Polygons: mycanvas.create_polygon(x1, y1, x2, y2, ... xn, yn)
Parameters for the shapes:
• fill="" (Changes the color of the shape.)
Useful tip:
I forgot to go over this in the screen recording, so make sure you take note of this:
Instead of writing all of the coordinates in the parentheses, you can create a variable and set it to a list of numbers. (Not a python list, just a normal list.)
E.g: coords = 0, 0, 150, 200
line1 = mycanvas.create_line(coords, fill="blue")
Deleting shapes:
To delete a shape from the canvas, you can utilise the .delete() method. E.g: mycanvas.delete(line1)