Visual Studio Code Qt template

Hi,

I trying to build a Qt app to run on iMX8 module. I’m using the VS code extension. I can create a Qt application and compile and run the template example.

I would like to add qt modules such as qserialport, qwidget, qlabel, etc. How do I bring these in so I can include them in my qt application code.

My code is below. I’m trying to add QWidget, QLabel, and QSerialport.

I have tried to add them to my package list but it does not help.

{
    "deps": [        
        "qt6-serialport-dev",
        "libqt6widgets6"
            
    ],
    "devDeps": [
        "qt6-serialport-dev",
         "libqt6widgets6"
    ]
}

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <iostream>
#include <QDebug>
//#include <QWidget>       <- Where to add  
//#include <QLabel>         <- Where to add
//#include <QtSerialPort/QSerialPortInfo>  <- Where to add

using namespace std;

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    const QUrl url("qrc:/torizonqthdt/QML/main.qml");
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);

    engine.load(url);

    std::cout << "Hello Torizon!" << std::endl;

    return app.exec();
}

Greetings @jojo,

I have tried to add them to my package list but it does help.

Did you mean to say this does "not" help, or is your issue resolved now?

If you’re still having issues could you share the exact errors/logs that show what is wrong.

Off the top of my head, I see you added the packages to the project. But, did you also remember to link the nesscary libraries to your application during compilation?

Best Regards,
Jeremias

Thank you for the reply. I fixed my typo above as it does not help.

I have not done anything other then adding “Qt += widgets serialport” to the .pro file and adding the packages to the .json above.

Do I link the libraries in the qt .pro file with “LIB +=” and “INCLUDPATH +=” as I would on my native linux machine?

I’m new to torizon/toradex so I am not familiar with the process and could not find much documentation regarding this subject other than to add the packages to the .json file.

Here is the error.

[ 13%] Built target torizonqt_tooling
[ 18%] Automatic MOC for target torizonqt
[ 22%] Built target torizonqt_autogen
[ 27%] Running AUTOMOC file extraction for target torizonqt
[ 27%] Built target torizonqt_automoc_json_extraction
Consolidate compiler generated dependencies of target torizonqt
[ 31%] Building CXX object CMakeFiles/torizonqt.dir/main.cpp.o
/home/TorizonQt/torizonqt/main.cpp:6:10: fatal error: QWidget: No such file or directory
    6 | #include <QWidget>
      |          ^~~~~~~~~
compilation terminated.
gmake[2]: *** [CMakeFiles/torizonqt.dir/build.make:157: CMakeFiles/torizonqt.dir/main.cpp.o] Error 1
gmake[1]: *** [CMakeFiles/Makefile2:94: CMakeFiles/torizonqt.dir/all] Error 2
gmake: *** [Makefile:91: all] Error 2

Do I link the libraries in the qt .pro file with “LIB +=” and “INCLUDPATH +=” as I would on my native linux machine?

You’re still compiling a C/C++ application so yeah libraries need to be properly configured and linked. Just installing them is usually not enough. For example look at our project template for Qt. By default It has these includes:

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <iostream>

Now look at the CMakeLists.txt file for the project: vscode-torizon-templates/cppQML/CMakeLists.txt at dev · toradex/vscode-torizon-templates · GitHub

Notice how the basic Qt libraries/components get linked and configured in this file. I imagine you have to do something similar for these new libraries you just added. On the Qt website I see there’s even more info on how to configure these in CMake: QWidget Class | Qt Widgets 6.6.2

Best Regards,
Jeremias

Thank you, this will get me going in the correct direction. Once i get it figured out I will post the solution.

I was able to get “#include ” by modifying my CMakeList.txt like below. I can now build my Gui.

ind_package(Qt6 REQUIRED COMPONENTS Core Gui Qml Quick Widgets)
target_link_libraries(torizonqt PRIVATE
    Qt6::Core
    Qt6::Gui
    Qt6::Qml
    Qt6::Quick
    Qt6::Widgets
)

When I add SerialPort like below I get the following error.

find_package(Qt6 REQUIRED COMPONENTS Core Gui Qml Quick Widgets SerialPort)
target_link_libraries(torizonqt PRIVATE
    Qt6::Core
    Qt6::Gui
    Qt6::Qml
    Qt6::Quick
    Qt6::Widgets
    Qt6::SerialPort
)

CMake Error at CMakeLists.txt:6 (find_package):
  Found package configuration file:

    /usr/lib/x86_64-linux-gnu/cmake/Qt6/Qt6Config.cmake

  but it set Qt6_FOUND to FALSE so package "Qt6" is considered to be NOT
  FOUND.  Reason given by package:

  Failed to find Qt component "SerialPort".

  Expected Config file at
  "/usr/lib/x86_64-linux-gnu/cmake/Qt6SerialPort/Qt6SerialPortConfig.cmake"
  does NOT exist

“/usr/lib/x86_64-linux-gnu/cmake/Qt6SerialPort/”" Does not exist.
My question is how do I bring Qt6SerialPort or any other Qt module into my container/development environment that’s not included in torizon/qt6-wayland?
When I developon a my native machine I just select that module when i download it.

I have tried to add “qt6-serialport-dev” to my docker files and the torizonPackages.json in my vs code project but I see no change.

Thank for you help as I have just started with the torizon extension.

I don’t get the same error as you. Here’s what my files look like:

# CMakeLists.txt
cmake_minimum_required(VERSION 3.16)
project(qttest LANGUAGES CXX C)

set(CMAKE_AUTOMOC ON)

find_package(Qt6 REQUIRED COMPONENTS Core Gui Qml Quick Widgets SerialPort)

qt_add_executable(qttest WIN32
    main.cpp
)

if(CMAKE_BUILD_TYPE STREQUAL "Debug")
    target_compile_definitions(qttest PRIVATE QT_QML_DEBUG)
endif()

set_target_properties(qttest PROPERTIES
    RUNTIME_OUTPUT_DIRECTORY "bin"
    ARCHIVE_OUTPUT_DIRECTORY "lib"
    LIBRARY_OUTPUT_DIRECTORY "lib"
    WIN32_EXECUTABLE TRUE
)

target_link_libraries(qttest PRIVATE
    Qt::Core
    Qt::Gui
    Qt::Qml
    Qt::Quick
    Qt6::Widgets
    Qt6::SerialPort
)

qt_add_qml_module(qttest
    URI qttest
    VERSION 1.0
    QML_FILES
        "QML/main.qml"
        "QML/Scene.ui.qml"
    RESOURCES
        "QML/assets/torizon-logo.png"
)
# torizonPackages.json
{
    "deps": [
        "qt6-serialport-dev",
        "libqt6widgets6"
    ],
    "devDeps": [
        "qt6-serialport-dev",
        "libqt6widgets6"
    ]
}

Also here’s what my includes look like:

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <iostream>
#include <QWidget>
#include <QSerialPort>
#include <QSerialPortInfo

With this my application build just fine without issue. Now what I noticed is your error message here:

Expected Config file at
  "/usr/lib/x86_64-linux-gnu/cmake/Qt6SerialPort/Qt6SerialPortConfig.cmake"
  does NOT exist

Why is it looking for this in x86_64-linux-gnu? Did you configure your build for x86 or something similar, instead of for arm/arm64?

Best Regards,
Jeremias

I have two targets, amd64 and arm64, when I create a Qt project from the Torizon template. I did not do any configuration.

image

I have an order for a Verdin IMX8M plus that is currently being shipped.

I have a Qt project, which includes QSerialPort, that I would like to port to run on the Verdin. I was hoping I could get the project compiled with arm64 in VS Code and be ready to push to the module when it arrives.

Maybe since my target(Verdin) is not connected it is targeting my host machine as you mentioned.

Thank you for your help. I will report back when my module arrives.

Maybe since my target(Verdin) is not connected it is targeting my host machine as you mentioned.

How exactly did you try to build this application? For my test I built it without having a target connected. I just ran the corresponding build task from the “TASK RUNNER”. With this I successfully built the application for arm64 and it was able to process my include statements.

Best Regards,
Jeremias

Hi Jeremias,

Thank you for the reply.

I created a new project and added qserialport to the torizonPackages.json and CMakeFile.txt file like in the above comments.

I built “build-debug-arm64” and it compiled successfully.

I then built “build-debug-arm64” and got the errors above. I had to install the following packages on my native machine to compile in vs code even though it compiles fine in QtCreator. I originally installed Qt through the online installer on my host machine.

sudo apt install libqt6serialport6 libqt6serialport6-dev

I did have to change my includes like below to get it to compile for amd64.

I’m new to running containers so I have found that to gain access to the ports in a container we need to add the uart device to the project, add serial access permission, and add torizon user to the dialout group? From the documentation this is done in the configuration tab in vs code but I do not see it. Is this because I do not have a target(Verdin Module) connected?

#include <QApplication>
#include <QMainWindow>
#include <iostream>
#include <QDebug>
#include <QWidget>
#include <QLabel>        
#include <QtSerialPort/QSerialPort>
#include <QtSerialPort/QSerialPortInfo>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    QMainWindow window;
    window.setWindowTitle("QSerialPort Test Application");
    window.resize(200, 100);

    QLabel *label = new QLabel("QSerialPort Test Application");
    label->setAlignment(Qt::AlignCenter);
    window.setCentralWidget(label);

    window.show();

    // Get a list of available serial ports
    QList<QSerialPortInfo> ports = QSerialPortInfo::availablePorts();
    std::cout << "Available Serial Ports:" << std::endl;
    for (const QSerialPortInfo& portInfo : ports) {
        std::cout << "Name: " << portInfo.portName().toStdString() << std::endl;
        std::cout << "Description: " << portInfo.description().toStdString() << std::endl;
        std::cout << "Manufacturer: " << portInfo.manufacturer().toStdString() << std::endl;
        std::cout << "System Location: " << portInfo.systemLocation().toStdString() << std::endl;
        std::cout << "Serial Number: " << portInfo.serialNumber().toStdString() << std::endl;
        std::cout << "Vendor Identifier: " << QString::number(portInfo.vendorIdentifier(), 16).toStdString() << std::endl;
        std::cout << "Product Identifier: " << QString::number(portInfo.productIdentifier(), 16).toStdString() << std::endl;
        std::cout << std::endl;
    }

    return app.exec();
}

Thank you again for you help.

Now I’m confused you said:

I built “build-debug-arm64” and it compiled successfully.

But then right after you also said this:

I then built “build-debug-arm64” and got the errors above.

Please clarify what is and is not working in your setup.

From the documentation this is done in the configuration tab in vs code but I do not see it. Is this because I do not have a target(Verdin Module) connected?

What documentation are you referring to specifically? Please always link the documentation you are referencing.

Is this because I do not have a target(Verdin Module) connected?

I mean if you don’t have the device yet, then you wouldn’t have any serial ports for your application to access anyways. Or are you talking about locally? You keep switching context between amd64 and arm64, it’s difficult for me to follow which platform you are talking about.

Best Regards,
Jeremias

Sorry for the confusion. My setup is working correctly now after installing the packages above.

I can compile the Qt project both locally(amd64) and arm64. This topic has been solved.

My question about the serial port was more about getting access to the serial port in the vs code project. I only see documentation for python and .net but i figured it would be the same set up for my vs code Qt c++ project. Just wanted to make sure this is all I need to do to get access to the serial port when my board comes in.

https://developer.toradex.com/torizon/application-development/use-cases/peripheral-access/how-to-use-uart-with-torizon-visual-studio-code-extension-net-core

https://developer.toradex.com/torizon/application-development/use-cases/peripheral-access/how-to-use-uart-with-torizon-visual-studio-code-extension-python/

I did find the below example using termios which is interesting. I have always used QSerialPort but this may be good starting point if i have issues with Qt.
https://developer.toradex.com/linux-bsp/application-development/peripheral-access/uart-linux/#rs-485

Thank you again for you help.

This topic has been solved.

Perfect, glad to hear!

I only see documentation for python and .net but i figured it would be the same set up for my vs code Qt c++ project.

Oh I see, the documentation you found is for our old version of the VSCode IDE extension. The interface is completely different now. I would not reference these as they would probably confuse you, since you’re using the new/current IDE extension.

For the current extension, to add a serial port or any device to your project and container you need to modify the docker-compose.yml file in your project. You should add an entry that specifies the file path of the device you want to add access for. For example like this:

   devices:
      - "/dev/snd"

Of course substitute for whatever device you’re trying to add. If you want to learn more about the kinds of configurations you can do in the docker-compose.yml you should refer to the official Docker documentation on this topic: Compose file version 3 reference | Docker Docs

Best Regards,
Jeremias