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!
Description: Two input boxes, labelled Fahrenheit and Celsuis. 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
Celsuis
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
Description: When the program starts, a timer begins, which is shown on both a text label and a visual gauge, 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 elapsed 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
Elapsed Time:
0.0 Seconds
Duration
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:
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
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.