CSE 111: Programming with Functions

W06 Code-along Activity: Graphical Input

Code-along Activity Overview

For this activity, you will code along with an instructor video that walks you through each step of the activity below. Make sure that you pause the video, or watch sections over if you need to, so that you are able to complete the entire activity.

Your instructor will post a link to the video in Microsoft Teams.

Background

Almost all of the programs that you wrote for this course receive input from and print results to a terminal window. However, most users prefer to interact with a program through a graphical user interface (GUI) that contains icons, text fields, drop-down lists, buttons, etc. Within a GUI, the individual components (icons, text fields, etc.) are called widgets. Most libraries for creating GUIs use object oriented programming because each widget is an object with attributes and methods.

Program

Write a Python program named gui.py that gets user input from a GUI, performs a simple calculation, and displays the result in a GUI.

Requirements

  1. Your program must include a GUI that opens when you run your program.
  2. The GUI must allow a user to enter input.
  3. When the user enters valid input, your program must compute correct results and display those results in the GUI.

Enhancements

Here is a list of enhancements that you could make to the program. Your instructor will walk you through at least one of them. Feel free to complete others.

  1. Add a Clear button to your GUI that clears all inputs and outputs when the user selects it.
  2. Add a label that acts as a status bar at the bottom of your GUI. Your program should display an error message in the status bar when the user enters invalid input. Your program should clear the status bar when the user enters valid input.

Instructions

  1. Create a folder for this week's code-along program.
  2. Open the folder you just created in VSCode.
  3. Download these two Python files: heart_rate.py and number_entry.py and save them in the folder you just created.
  4. Create a new file named gui.py.
  5. Find the video that your instructor has posted for this assignment and code along with them to complete each of the requirements. Work through the requirements in order with the instructor rather than jumping ahead to more complicated steps to ensure you do not miss any concepts.
Alternative Video Link and Transcript

In addition to the link that your instructor posted, you are also welcome to watch the following code walkthrough or use its transcript:

Additional Resources

You may use these additional resources for further study.

Sample Solution

In addition to the instructor video, you can also view this solution. (This solution may be slightly different than the final code that you and your instructor created.)

Helpful Documentation
Testing Procedure

Run your program and enter various inputs, including invalid values. Verify that your program doesn’t crash, behaves as expected, and displays correct results.

Ponder

After you finish your program, examine the code in the populate_main_window function and realize that you wrote object oriented code when you used objects such as lbl_age, lbl_width, txt_age, and txt_width and the dot operator to call methods such as grid, config, get, and clear.

Submission

Please pause and re-watch any sections of the instructor video necessary until you have completed the entire activity and your program runs the same as the instructor's. When you are finished:

Useful Links: