Python UI: A PyQt6 MDI HTTP Client Application

An experimental HTTP client desktop application built using the PyQt6 GUI library, version 6.8.0, released on December 13, 2024.

The server is the existing FastAPI Learning server, with the repository available at https://github.com/behai-nguyen/fastapi_learning.


Python UI: A PyQt6 MDI HTTP Client Application

❶ This post utilises the HTTP libraries and the Qt Designer Application discussed in the following posts:

If readers are not yet familiar with these topics, it might be beneficial to read the above posts first.

❷ We will not discuss the implementation in detail. Instead, we will list some specific features and implementations of the application. It is up to the readers to explore further, as the code is fairly simple. We will also provide a video showing the application in action.

Application Features

⓵ Runtime Environment File: .env

● We configure where the server is running and the list of endpoints.

● We also have a Boolean DEVELOPMENT_MODE entry. When True, we attempt to load a cached JSON Web Token (JWT) from:

Windows 10: C:\Users\behai\AppData\Local\Temp\qt6_desktop_app\qt6_desktop_app.txt
Ubuntu: /tmp/qt6_desktop_app/qt6_desktop_app.txt

To remove this cached JWT file, use the following script:

Windows 10: remove_stored_token.bat
Ubuntu: remove_stored_token.sh

⓶ Theme File: theme.toml

We take advantage of PyQt6 Cascading Style Sheets (CSS) support to implement a simple background color feature for the application. This is an experimental attempt, setting a foundation for future expansion.

Application Implementation Specifics

⓵ We are using the QT Designer application to create the application screens. To convert the designed screens into Python modules as discussed, use the provided script:

Windows 10: convert_ui_to_py.bat
Ubuntu: convert_ui_to_py.sh

The designed screens are in the src/qt6_desktop_app/templates directory of the repository. The Python modules and their subclass modules are in the src/qt6_desktop_app/ui directory.

⓶ We use the QT Designer QT Designer layout feature to layout the screens. I have found that this layout feature can be a bit hard to get right.

⓷ Unlike the web application, where we can optionally disable UIs based on the logged-in user's scope assignment, in this application the UIs are always enabled. Permissions are checked at the server end only. The logged-in user's assigned scopes are in the payload of the JWT. To get the scopes, this application must decode the JWT token, which is rather messy. It is better to implement a separate API to query users' assigned scopes. We might implement this in the future.

⓸ We take full advantage of PyQt6's Signals, Slots, and Events features to reduce interdependency between functionalities. I have found that it is similar to traditional Windows messaging.

⓹ The module server_api.py under the src/qt6_desktop_app/middleware provides all HTTP wrapper methods which submit requests to the server.

⓺ The component which displays the logged-in user information in HTML is the PyQt6-WebEngine - Python Bindings for the Qt WebEngine Framework library. In fact, it displays the same HTML page as the web application.

Since we are using a self-signed certificate, this component generates the following error. I understand what it is, but I don't yet know how to address it:

[5832:5708:0226/110010.891:ERROR:cert_verify_proc_builtin.cc(874)] CertVerifyProcBuiltin for 192.168.0.16 failed:
----- Certificate i=0 (emailAddress=behai_nguyen@hotmail.com,CN=DESKTOP-7BA02KU,OU=Development,O=Personal,L=Melbourne,ST=Victoria,C=AU) -----
ERROR: No matching issuer found


[5832:19644:0226/110010.892:ERROR:ssl_client_socket_impl.cc(970)] handshake failed; returned -1, SSL error code 1, net_error -202
[5832:19644:0226/110010.916:ERROR:ssl_client_socket_impl.cc(970)] handshake failed; returned -1, SSL error code 1, net_error -202

❸ And finally, this is the video showing the application running on both Windows 10 and Ubuntu 24.04:

❹ I want to understand PyQt6 better, so I wrote this little application. I hope you find it interesting too.

Thank you for reading. I hope you find the information in this post useful. Stay safe, as always.

✿✿✿

Feature image sources: