PJ03 - GUI


Overview

In this open-ended project you will design and implement a windowed, graphical user interface app. In this project you will practice structuring applications using object-oriented techniques and making use of object-oriented 3rd party libraries.

You will encounter things you want to include in your application, such as other widgets or different Tk layouts besides pack-based layouts, that were not discussed in lecture. Likely even things none of the course staff has ever tried since the application is your brainchild! Fear not, this is a common experience in the world of software engineering.

The universe of software library capabilities is much wider than is worth attempting to memorize. After this course ends, when you want to write a program on your own without the safety net of UTAs and Professors, being comfortable with self-directed exploration can take you far. In fact, it’s often all the difference in future hiring decisions in industry and graduate school acceptances.

Learning how to Google-around for documentation, tutorials, or sample code along the lines of what you are hoping to accomplish is thus an important skill. Note that much of what you find will not be appropriate for your particular problem. Thinking critically about what is or is not applicable and being sure any inspiration you take actually makes sense in the context of your program is important. If you use more than a line of code of inspiration from other source, be sure to cite the source via URL and a brief description of how you found it above the relevant lines of code.

Getting Started

Create a directory named gui in your comp110/projects directory.

Add a __main__.py file to serve as the entrypoint to your application. This special file enables the package comp110.projects.gui to be runnable, meaning you should be able to begin your application with the following command:

python -m comp110.projects.gui

You are encouraged to write your project’s classes in their own files, as demonstrated in the Lesson 36 tutorial. Further, you are encouraged to attempt the separation of your application’s logic & state, the “model”, from its view and control, the graphical user interface and user input events.

Application Ideas

Developing applications and organizing your code has a learning curve! Our suggestion is to start with a simple goal and, if you find it was too easy, iterate. Some example applications that would be of appropriate difficulty to implement well:

  • A typing speed game with a GUI (convert/extend your command-line version)
  • A simple game like Tic-tac-toe or Connect-4
  • A countdown timer that can be set, paused, customized
  • A Microsoft Paint-like application with a pencil tool and eraser (check out Canvas widget)
  • A simple text editor that allows you to load/save plaintext files (check out Text widget)
  • A BuzzFeed-style quiz that shows only one question at a time
  • A conversion calculator application (such as F to C) that allows going in both directions of conversion

Any other idea that appeals to you and feels of comparable difficulty to any of the above ideas is also fair game. If you’re worried your alternate idea is too simple, then make a private Piazza post and we can help navigate. This kind of project is much more enjoyable if you’re moving in the direction of something you want to create.

Resources to Consider

Python GUI Programming with Tkinter - good examples on how to use layouts besides pack for arranging widgets within a Pane. Also has examples of different kinds of widgets.

Basic Widgets - reference to many kinds of widgets. Be warned that the Tk library is used in many different programming languages. This page gives code examples from four different programming languages so you should focus only on the Python examples denoted by the Python icon (the blue and yellow snakes).

Google - search around! Especially when you get stuck, see an error, or want an example or demo of how to do something. Often searching for the set of related keywords, like “mouse button click event tk canvas python”, will take you far.

Requirements

  1. 5pts - Has a __main__.py file in the project directory that starts your application. Organizes other classes into their own .py files.
  2. 30pts - Makes use of at least 3 classes you design, each with at least one meaningful attribute, constructor, and method.
  3. 30pts - Makes use of at least three different kinds of widgets (ex: Button, Entry, Pane)
  4. 10pts - Handles at least two different user interactions. (ex: in the lesson 36 example, the Enter button in the guess field was an interaction and the clicking of the Reset button was another)
  5. 5pts - Uses at least one different layout style besides pack (see the Resource Python GUI Programming with Tkinter above for examples)
  6. 5pts - Static Type Checking
  7. 10pts - Lint / Style Checking / Documentation
  8. 5pts - Attempted separation of “model” logic into class(es) and “view/controller” user-interface code into other classes. A simple example of this was demonstrated in Lesson 36. This is a software design challenge and it will force you to grapple with the challenges of object-oriented thinking.

Make Backup Checkpoint Commits

You are encouraged to make commits at any point you’ve made progress in your project. That way if you need to go back to find work you did, you can easily look it up based on your commit messages.

Hand-in

In your __main__.py file’s docstring, add description of the following:

  • The intended purpose of the application you built. What is it?
  • What user interactions are possible and what should the graders try?
  • If you were to have more time on the project, what future extensions would you have attempted?

Since your project is made of many files in the gui directory, your build command will look as follows:

python -m tools.submission comp110/projects/gui

Deadline

Due Monday, 7/20 at 11:59pm