From 3af9489142ccf4f812e44c4d757fa49570a92780 Mon Sep 17 00:00:00 2001 From: Andreas Pedersen Date: Tue, 6 Aug 2024 07:01:13 +0200 Subject: [PATCH] updates to example.md --- EXAMPLES.md | 70 ++++++++++++++++++++++++++--------------------------- 1 file changed, 34 insertions(+), 36 deletions(-) diff --git a/EXAMPLES.md b/EXAMPLES.md index d20a3d3..3058135 100644 --- a/EXAMPLES.md +++ b/EXAMPLES.md @@ -11,14 +11,27 @@ Different types of examples are provided. All examples have a frontend implement | BasicC++ | IV | QML | Mock QML | need to be compiled | -## How to run +## Python environment and IDE -### Type I Examples: BasicQml (QML runtime with QML backend) +### Python environment +* Install the Qt `PySide6` module in the desired python environment +***macOS and Linux*** + + ```sh + $ python3.11 -m venv .venv # create new python environment '.venv' + $ source .venv/bin/activate # activate '.venv' + $ pip install PySide6 # install Qt for Python + ``` -This example consists of a graphical QML frontend and a "mock" QML backend. By a mock backend is meant that it only returns hardcoded values rather than providing the required functionality. The resulting application will be displayed using Qt `qml` viewer. +***Windows*** -#### Preparation + ```sh + $ python3.11 -m venv .venv # create new python environment '.venv' + $ .venv\Scripts\activate # activate '.venv' + $ pip install PySide6 # install Qt for Python + ``` +### QT Creator * Download Qt Online Installer from [qt.io](https://www.qt.io/download-qt-installer-oss). More info at [doc.qt.io](https://doc.qt.io/qt-6/qt-online-installation.html). * Install Qt for desktop development using a custom installation that includes the following components: * Qt @@ -31,9 +44,22 @@ This example consists of a graphical QML frontend and a "mock" QML backend. By a * [ ] Developer and Designer Tools * [x] Qt Creator x.y.z +### VSCode +* Download an install VSCode +* Add the python extension +* Rename the folder `vscode` to `.vscode`. The `launch.json` file will then be read by VSCode +* Select any python file in the repo and choose the desired python environment + + +## How to run + +### Type I Examples: BasicQml (QML runtime with QML backend) + +This example is located in `examples/BasicQml` and the source code is in the subfolder `src/BasicQml`. The example consists of a graphical QML frontend (`Gui/Application.qml`) and a QML backend (`Logic/Mock/BackendProxy.qml`). It is considered a mock backend as it only returns hardcoded values rather than providing the required functionality. The entry point for Qt is `main.qml`, whcih can be displayed using Qt `qml` viewer. + #### Qt Creator IDE (QML Runtime) * Run Qt Creator -* Open the qml project file `*.qmlproject` from the example folder from `examples/BasicQml/src/BasicQml.qmlproject` +* Open the qml project file `*.qmlproject` from the example folder from `src/BasicQml.qmlproject` * Click Run (Green play button) #### Run from the terminal (QML Runtime) @@ -50,7 +76,6 @@ This example consists of a graphical QML frontend and a "mock" QML backend. By a ``` #### How to edit GUI elements in live mode - * In Qt Creator, select the `.qml` file to be edited in live mode * Click the `Design` button at the top of the left sidebar of `Qt Creator` * _Note: If this button is disabled, find and click `About plugins...` in the `Qt Creator` menu, scroll down to the `Qt Quick` section and enable `QmlDesigner`._ @@ -60,41 +85,16 @@ This example consists of a graphical QML frontend and a "mock" QML backend. By a ### Type II Examples: BasicMinimalPy (Python runtime with QML backend) -This example serves to demonstrate how an application with a QML frontend and a QML "mock" backend can be executed from Python. - -Most examples can be run via Python, even if they only have a mock backend in QML (the Python backend is not implemented). The minimum configuration requires a base `main.py` file. To execute this one needs to the following: - -#### Preparation - -* Download and install the Qt Framework following the instruction above for the Type I example -* Install the Qt PySide6 module in the desired python environment - -***macOS and Linux*** - - ```sh - $ python3.11 -m venv .venv # create new python environment '.venv' - $ source .venv/bin/activate # activate '.venv' - $ pip install PySide6 # install Qt for Python - ``` - -***Windows*** - - ```sh - $ python3.11 -m venv .venv # create new python environment '.venv' - $ .venv\Scripts\activate # activate '.venv' - $ pip install PySide6 # install Qt for Python - ``` +This example is located in `examples/BasicMinimalPy` with the source code in `src/BasicMinimalPy`. This example serves to demonstrate how an application with a QML frontend and a QML backend (similar to the Type I example) can be executed from Python. The entry point for the Python program is `main.py` file. To execute this do the following: #### QtCreator IDE (Python Runtime) * Run Qt Creator * Open the python project file `*.pyproject` from the example folder from `examples/BasicMinimalPy/src/BasicMinimalPy.pyproject` -* Select the desired python environment with the Qt PySide6 module installed +* Select the desired python environment with the Qt `PySide6` module installed * Click Run (Green play button) #### VSCode IDE (Python Runtime) * Open the repo in VSCode -* Rename the folder `vscode` to `.vscode`. The `launch.json` file will then be read by VSCode -* Select any python file in the repo and choose the desired python environment * Click on the debug extension and select which example to execute ![Debug dropdown window](.\resources\images\vscode_debug.jpg) @@ -112,9 +112,7 @@ Most examples can be run via Python, even if they only have a mock backend in QM ### Type III Examples: BasicPy and IntermediatePy (Python runtime with Py backend) -These examples demonstrate how to use a Python runtime to execute the QML frontend and a Python backend. - -These examples can be run through Python in the same way as Type II described above. These examples have a Python-based backend (proxy object), which is created in `main.py` and then get exposed to QML. Communication between the Qt QML frontend and the Python backend occurs through this python proxy. +These examples demonstrate how to use a Python runtime to execute the QML frontend and the Python backend located in `Logic/Py/backend_proxy.py`. These examples can be run through Python in the same way as Type II described above. These examples have a Python-based backend (proxy object), which gets created in `main.py` and then exposed to QML. The Qt QML frontend then acceses the backend by calling methods exposed by the proxy object in the `Py` folder. #### Possible Issues