Project: The 7 GUIs - Pyscript


Since its announcement at PyCon 2022, the Python community has been buzzing about PyScript, a framewok for creating and running Python applications in the browser. Below are implementations of 'The 7 GUIs' UI Challanges in PyScript, which hopefully will hopefully be educational for those looking to get into writing Python for the web. (They were certainly educational to create.)

For source code, a build-log, discussion of the examples and how they work, see the accompanying blog post.

Examples are only tested in Chrome on Desktop. Your experience on mobile/touch devices may vary. If you find a glaring error, or you make something cool with PyScript, I want to hear about it!

Counter

(Spec )

Description: A label which starts at zero and a button labelled "Count." Pressing the button increments the number in the label by 1.

Core Ideas: Basic interactivity, scaffolding, buttons

PyScript/Python Concepts: Basic browser interaction, PyScript.write()

def on_click(event): add_one()

Temperature Converter

(Spec )

Description: Two input boxes, labelled Fahrenheit and Celcius. Typing a number into either immediately updates the other to the corresponding converted temperature. Entering anything other than a number has no effect.

Core Ideas: Bidirectional data flow, user-provided text imput, live-updating in response to input

PyScript/Python Concepts: Atached event listeners to DOM objects, JS proxies, math, function flow

Fahrenheit

Celcius

Flight Booker

(Spec )

Description:Two input boxes, labelled Departure Date and Arrival Date, along with a selector for One-Way or Round-Trip and a Book Flight button. When One-Way is selected, input to the Departure Date field is disabled. When the Book Flight button is pressed, the user is notified that they have booked a flight for one or both dates, as appropriate. (No data validation is done on the Date fields.)

Core Ideas: Constraints on input (inputs affect each other), additional text handling, options-box

PyScript/Python Concepts: Enabling and disabling inputs, changing innerHTML and innerText

Departure Date

Return Date

Flight Info will go here

Timer

(Spec )

Description: When the program starts, a timer begins, which is shown on both a text label and a visual guage, with a slider and reset button for control. The duration of the timer is adjusted by moving the slider, and pressing the reset button sets the ellapsed time back to zero.

Core Ideas: Concurrency, real-time interaction, responsiveness

PyScript/Python Concepts: Asyncio.sleep(), connected control-flow with and without events, input slider, progress bar

Ellapsed Time:

0%

0.0 Seconds

Duration

CRUD

(Spec )

Description: A selection box shows a 'database' of names. Entering a given-name and surname into two text boxes and pressing the 'create' button adds a new entry to the database. Selecting an entry in the database and clicking the 'update' button will change the selected entry to the values currently in the name boxes. Selecting an entry and pressing the 'delete' button will delete that entry. Enterring text into the 'filter-prefix' textbox will filter the presented entries by surname.

Core Ideas: Separating domain and presentation logic, managing mutation, building a non-trivial layout

PyScript/Python Concepts: Managing/sharing state with Python objects, separating data from view, dataclasses

Filter Prefix:

Name:

Surname:

Circle Drawer

(Spec )

Description: A blank drawing canvas is created. Left-clicking on the canvas creates an empty circle of a random size centered on the mouse. The circle nearest the mouse is shaded gray. Right clicking opens a custom menu that presents a slider which changes the radius of the shaded circle in realtime. Undo and Redo buttons step forward and backward through creation and resizing operations.

Core Ideas: Undo/redo. Custom drawing, dialog control, realtime interactivity

PyScript/Python Concepts: Canvas, list and index management, dataclasses, actions-as-objects (undo/redo), hiding/showing/positioning custom elements

Cells

(Spec )

Description: A spreadsheet is presented to the user, which allows for basic mathematical operations. (+ - / *) Referencing of other cells is not yet implemented.

Core Ideas: Change propagation, widget customization, implementing a more involved/authentic GUI application.

PyScript/Python Concepts: Input focus/defocus management (blur), realtime and input-trigger processing combined, data structures.

- paths: - /post/7-guis-pyscript/spreadsheet.py - /post/7-guis-pyscript/formula_parser.py