Skip to content

Commit

Permalink
updates to example.md
Browse files Browse the repository at this point in the history
  • Loading branch information
andped10 committed Aug 6, 2024
1 parent df04a2e commit 3af9489
Showing 1 changed file with 34 additions and 36 deletions.
70 changes: 34 additions & 36 deletions EXAMPLES.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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)
Expand All @@ -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`._
Expand All @@ -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)

Expand All @@ -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

Expand Down

0 comments on commit 3af9489

Please sign in to comment.