Search by Tags

Qt C++ Application Development on Torizon Using Visual Studio Code

 

Article updated at 30 Nov 2020
Compare with Revision


Select the version of your OS from the tabs below. If you don't know the version you are using, run the command cat /etc/os-release or cat /etc/issue on the board.



Remember that you can always refer to the Torizon Documentation, there you can find a lot of relevant articles that might help you in the application development.

Torizon 5.0.0

Introduction

The Visual Studio Code Extension for Torizon can be used to build, debug and deploy C and C++ applications.
This, of course, includes also applications using the Qt libraries. On the other side, Qt provides not just C++ libraries but also a rich set of tools to design user interfaces using widgets or QML language and specific build tools, as qmake, that use an ad-hoc project format.

To orchestrate those tools, Qt provides a fully integrated IDE named QtCreator and, at the moment, it is not fully integrated with Torizon. To overcome that we make it easier for you to use Visual Studio Code to work on the code and leverage Qt's design tools to design user interfaces. See a comparison below between development on Torizon and other platforms as Boot to Qt and Yocto:

Design Workflow Development Workflow
Torizon Qt Design Studio
✔ Enhanced UI design
Visual Studio Code
✔ Write Code
✔ Build and debug
✘ UI design
Boot to Qt / Yocto Qt Design Studio
✔ Enhanced UI design
Qt Creator
✔ Write Code
✔ Build and debug
✔ UI design

To simplify integration between design tools and code editor Toradex provides the QtDesignStudio support for Torizon projects extension. When this extension is installed you can simply right-click on any .ui or .qml file inside your Qt application folder on VS Code and open it in Qt Design Studio.

If you are looking to using Python with Qt, refer to the article How to build a GUI with Qt for Python and TorizonCore.

This article complies to the Typographic Conventions for Torizon Documentation.

Prerequisites

Create a New Qt5 Project

The video below illustrates the process of creating and deploying to a module a Qt project using the Visual Studio Code Extension for Torizon.

  • Creating and Deploying Qt Project

To create a new project you should:

  • Press F1 to open the command bar
  • Select Torizon C/C++: Create C/C++ application
  • Set the name of your new application and choose the folder where it will be created

  • Torizon extension command bar

    Torizon extension command bar

  • Choose one of the Qt-based templates, three templates are provided:

    • Qt Core Sample: for console applications not using any UI or generating UI elements from code
    • Qt Widgets Sample: for graphical applications that use QtWidgets
    • Qt QML Sample: for applications using QtQuick/QML-based UI

  • Qt templates provided by the extension

    Qt templates provided by the extension

Import an Existing Qt5 Project

There is a generic article on How to Import a C/C++ Application to Torizon, and in addition to the tips below, it is highly recommended that you read it.

To import an existing project you will have to:

  • Press F1 to open the command bar
  • Select Torizon C/C++: Import existing application"
  • Navigate to the folder where the ".pro" file is stored
  • Select the right template, depending on the kind of UI implemented by the application

  • Importing a Qt Project

    Importing a Qt Project

You can also read the blog post from May, 2021 Importing a Qt Project Into Torizon Using VS Code.

Considerations When Migrating Your Project to Torizon

Existing projects may need to be modified to work on Torizon. Some points you need to consider:

  • The extension works on a single folder, if you have multiple ".pro" files you should group them together and use a project with SUBDIRS on the top level to build them in the right order.
  • After the build, binaries and data files should be deployed to a folder that is synchronized with the target, this can be done by adding: DESTDIR = $$(QMAKE_DESTIDIR) directive to the project file.
  • Torizon UI implementation is based on Wayland. Qt does a very good job wrapping platform-specific aspects, but you may experience some differences in the aspect of some UI elements or the way they are rendered on screen in terms of speed or other effects.

Edit QML Files on Qt Design Studio

To open a QML file you can right-click on the file in the explorer bar or on the file itself when it is open in the VS Code editor, and select Open QML file in Qt Design Studio. This will start an instance of Qt Design Studio ready to edit your file.

Learn more about how to use Qt Design Studio in the official documentation.

Edit UI Files on Qt Design Studio

To open a UI file you can right-click on the file in the explorer bar or on the file itself when it is open in the VS Code editor, and select Open UI file in QtDesigner. This will start an instance of QtDesigner ready to edit your file.

User interface definition files are processed during build time. This processing generates header files that can then be used to reference the UI elements.
When you finish editing your UI file, you must run the build command - Ctrl + Shift + B in Visual Studio Code - to ensure that changes you made in the user interface layout are reflected in the generated header files.

Learn more about how to use Qt Design Studio in the official documentation.

Qt Integration "Under the Hood"

Qt integration uses Qt5 packages provided by Debian and licensed using the Qt open source license.

Version of the Qt Framework

Currently, Debian Bullseye provides Qt version 5.14.

How to Add Qt Packages to a Project

The provided templates include only a minimal subset of Qt feature's, those features have been split by Debian into multiple packages, to reduce the overall footprint of Qt and allow users to install only the features they actually need.
If a component required by your application is not found at build time or at runtime you can check packages built from Qt source code and add them to devpackages (build time) or extrapackages (runtime) configuration parameters.

Notice that for many of the components you have:

  • A runtime component (usually named libqt5*) that must be added to extrapackages
  • A development component (named in the same way with "-dev" suffix)that must be added to devpackages since it provides headers and libraries used at build time.

Webinars and Videos

This section has on-demand webinars and videos to help you through development.

Importing a Qt Project Into Torizon Using VS Code

Torizon 4.0.0

Update to a Newer Debian Container Version

Debian Containers for Torizon are subject to updates, including major updates to newer versions of Debian. Learn more about it, including how to update your VS Code project:

Introduction

The Visual Studio Code Extension for Torizon can be used to build, debug and deploy C and C++ applications.
This, of course, includes also applications using the Qt libraries. On the other side Qt provides not just C++ libraries but also a rich set of tools to design user interfaces using widgets or QML language and specific build tools, as qmake, that use an ad-hoc project format.

To orchestrate those tools, Qt provides a fully integrated IDE named QtCreator and, at the moment, it is not fully integrated with Torizon. To overcome that we make it easier for you to use Visual Studio Code to work on the code and leverage Qt's design tools to design user interfaces. See a comparison below between development on Torizon and other platforms as Boot to Qt and Yocto:

Design Workflow Development Workflow
Torizon Qt Design Studio
✔ Enhanced UI design
Visual Studio Code
✔ Write Code
✔ Build and debug
✘ UI design
Boot to Qt / Yocto Qt Design Studio
✔ Enhanced UI design
Qt Creator
✔ Write Code
✔ Build and debug
✔ UI design

To simplify integration between design tools and code editor Toradex provides the QtDesignStudio support for Torizon projects extension. When this extension is installed you can simply right-click on any .ui or .qml file inside your Qt application folder on VS Code and open it in Qt Design Studio.

This article complies to the Typographic Conventions for Torizon Documentation.

Prerequisites

Create a New Qt5 Project

To create a new project you should:

  • Press F1 to open the command bar
  • Select Torizon C/C++: Create C/C++ application
  • Set the name of your new application and choose the folder where it will be created
  • Choose one of the Qt-based templates

Three templates are provided:

  • Qt Core Sample: for console applications not using any UI or generating UI elements from code
  • Qt Widgets Sample: for graphical applications that use QtWidgets
  • Qt QML Sample: for applications using QtQuick/QML-based UI

Import an Existing Qt5 Project

To import an existing project you will have to:

  • press F1 to open the command bar
  • select Torizon C/C++: Import existing application"
  • navigate to the folder where the ".pro" file is stored
  • select the right template, depending on the kind of UI implemented by the application

Considerations When Migrating Your Project to Torizon

Existing projects may need to be modified to work on Torizon. Some points you need to consider:

  • The extension works on a single folder, if you have multiple ".pro" files you should group them together and use a project with SUBDIRS on the top level to build them in the rigth order.
  • After build, binaries and data files should be deployed to a folder that is the syncronized with the target, this can be done by adding: DESTDIR = $$(QMAKE_DESTIDIR) directive to the project file.
  • Torizon UI implementation is based on Wayland. Qt does a very good job wrapping platform specific aspects, but you may experience some differences in the aspect of some UI elements or the way they are rendered on screen in terms of speed or other effects.

Edit QML Files on Qt Design Studio

To open a QML file you can right-click on the file in the explorer bar or on the file itself when it is open in the VS Code editor, and select Open QML file in Qt Design Studio. This will start an instance of Qt Design Studio ready to edit your file.

Edit UI Files on Qt Design Studio

To open a UI file you can right-click on the file in the explorer bar or on the file itself when it is open in the VS Code editor, and select Open UI file in QtDesigner. This will start an instance of QtDesigner ready to edit your file.

User interface definition files are processed during build time. This processing generates header files that can then be used to reference the ui elements.
When you finish to edit your UI file, you must run the build command - Ctrl + Shift + B in Visual Studio Code - to ensure that changes you made in the user interface layout are reflected in the generated header files.

Qt Integration "Under the Hood"

Qt integration uses Qt5 packages provided by Debian and licensed using the Qt open source license.

Version of the Qt Framework

Currently Debian Buster provides Qt version 5.11.

How to Add Qt Packages to a Project

The provided templates include only a minimal subset of Qt feature's, those features have been splitted by Debian into multiple packages, to reduce the overall footprint of Qt and allow users to install only the features they actually need.
If a component required by your application is not found at build time or at runtime you can check packages built from Qt source code and add them to devpackages (build time) or extrapackages (runtime) configuration parameters.

Notice that for many of the components you have:

  • A runtime component (usually named libqt5*) that must be added to extrapackages
  • A development component (named in the same way with "-dev" suffix)that must be added to devpackages since it provides headers and libraries used at build time.