Using Python Graphics

Last updated 7 months ago

How to build lessons for Python that require a GUI.

Python GUI projects allow your users to generate images using the turtle and processing Python libraries to generate graphics. This is accomplished using a JavaScript implementation of Python, so while it's ideal for GUI use cases, it doesn't support all the core functionality of the Python language.

Click here to view a completed example of a Python GUI lab!

Initial Setup

Stack

To get started, create a new lesson and pick the Python GUI stack from the list of stacks.

Interface

Configure your interface based on your needs, but make sure you've selected Python GUI from the dropdown from the Arrangement section. This is where the graphical output will be displayed.

Once you're done, click Get Started to load your coding environment.

User Interface

The Python GUI interface is extremely simple to use. When the user clicks Run Code the result will be shown in the output box (which you can change the background color for, see below).

There are two controls in the top right corner:

  • The lightning bolt allows the user to choose if they want the image to generate instantly, or be built "live" in front of them.

  • The stop icon will pause the execution of the program, allowing a user to inspect the current progress.

How to Test

‚ÄčPython GUI tests allow you to verify that the student has generated the same image as the solution, with an optional tolerance.

Test results will display the image generated by the user, the solution image, and the result image with the difference highlighted by a red box.

Python GUI tests can take a few seconds to run. As such, it's best to tie individual tests to interactive instructions on the sidebar instead of requiring the student to run multiple tests at once using the Test button.

Final Touches

There are a few other settings you may want to configure:

  • Testing > Advanced > Require Test File should be enabled if you have tests, so that the system knows which file to use to generate the GUI output when running tests.

  • The sliders at the bottom right of the Python GUI component will allow you to enable a basic terminal for program output and change the background color for the generated images.

If you have any questions, don't hesitate to get in touch!