1. Noritake-Itron Avatar Noritake-Itron
  2. TX-BSP
  3. itron-bsp-manual

Wiki

Clone wiki

itron-bsp-manual / qt5-and-the-qt-creator-for-yocto

View History

TX SOFTWARE PLATFORM MANUAL

QT5 AND THE QT CREATOR FOR YOCTO

######<< back to Home

Index

###### << . 1 . >>

The Yocto Qt toolchain

Note: Qt Creator should be used in a linux OS, click here to setup a linux OS on a virtual machine.

In order to compile the required libraries, a full OpenEmbedded build environment needs to first be in place. In order to build Qt applications targeted for the embedded Yocto image, we need to have a full Qt toolchain which provides (besides cross GCC and GDB) the Qt headers to include and libraries to link against. The toolchain can be built using sources and a bitbake recipe included the yocto repository. If you've closed your terminal since building Yocto, you may need to first run the setup_environment.sh script. From the Yocto build output directory (eg: 'build_fb', 'build_x11' or 'build_wayland'), the bitbake target providing the toolchain is: 

$ bitbake meta-toolchain-qt5
After building the bitbake target, run the script to install the SDK: 
$ <BUILD_DIR_PATH>/tmp/deploy/sdk/poky-glibc-x86_64-meta-toolchain-qt5-cortexa9hfvfp-neon-toolchain-2.0.sh
Assuming you accept the default settings, the SDK will be installed in /opt/poky/2.0. The toolchain is updated from time to time and may need to be rebuilt and reinstalled using these same steps.

Before Qt creator can be used to build projects targeted for our embedded Yocto images, the Qt5 toolchain must be built and installed on your development machine.

Pre Requisites: LINK TO YOCTO MANUAL PAGE "BUILD YOCTO LINUX" STEPS 2 AND 3

Build toolchain LINK TO YOCTO MANUAL PAGE "BUILD YOCTO LINUX" STEPS 5 to 7

###### << . 2 . >>

Setup the QtCreator

QTCreator installation

Please note that for each QT5 version a minimum Qt Creator version is required

Yocto QT5 QtCreator:

Fido = 5.4 3.3.1

Jethro = 5.5 3.3.1

Krogoth = 5.6 3.5.1

Morty = 5.7 3.5.1

An Ubuntu 16.04 LTS host PC can satisfy this requirement: bundled QtCreator version is 3.5.1. For previous Ubuntu versions, the Ubuntu SDK team periodically provide QtCreator backporting for LTS releases and currently provide version 4.1.0. If you have the old SDK installed, the default QtCreator from the archive will be replaced with a more recent version. However apt refuses to automatically remove the packages from the archive, so that is something that needs to be done manually, best before the upgrade: 

$ sudo apt-get remove qtcreator qtcreator-plugin*

Sometimes the settings of QtCreator (the Qt application of the Ubuntu SDK IDE) break when switching back and forth between different version. When you see broken or ghost Kits, or possible misconfigured devices, or in general anything what is weird it is possible that pushing the reset button on Qtcreator helps. Note, that it is a rather radical fix. It can be easily done with a single command: 

$ rm -rf ~/.config/QtProject/qtcreator ~/.config/QtProject/QtC*

Ubuntu SDK installation

Next step is to add the ppa and get the package installed 

$ sudo add-apt-repository ppa:ubuntu-sdk-team/ppa
$ sudo apt-get update
$ sudo apt-get upgrade
$ sudo apt-get install ubuntu-sdk-ide
The LXD install process should take care of configuring the necessary group membership, but sometimes it fails. Make sure the current user is part of the lxd group ruinning this command: 
$ sudo useradd -G lxd `whoami`
After that please logout and login to make the new user group (created by the installation) known to the login session.

Official QtCreator Installation

From Pyro onwards, you can download and install a suitable version of QtCreator from 

$ wget http://download.qt.io/official_releases/qtcreator/4.5/4.5.2/qt-creator-opensource-linux-x86_64-4.5.2.run
$ chmod +x qt-creator-opensource-linux-x86_64-4.5.2.run
$ ./qt-creator-opensource-linux-x86_64-4.5.2.run

QtCreator Configuration

To configure QtCreator, the environment must be configured according to QT5 toolchain settings: 

$ source /opt/poky/2.x/environment-setup-cortexa9hf-vfp-neon-poky-linux-gnueabi
$ qtcreator

Device configuration

  • Go to Tools => Options.
  • In the left panel, click on Devices
  • Add a new device representing the target "mydevice":
  • Press Add and choose Generic Linux Device
  • Specify a name (e.g. mydevice)
  • Fill in the device's IP address. Please consider using fixed IP addresses: DHCP server lease timeout could lead to unreachable devices.
  • Authentication on our modules by default: Password, User "root", empty password

Debugger Configuration

  • Go to Tools => Options
  • In the left panel, click on Build&Run.
  • Click on the Debuggers tab
  • Press Add
  • Specify a name (e.g. mydevice GDB)
  • Specify the path: /opt/fslc-x11/2.4.1/sysroot/x86_64-fslcsdk-linux/usr/bin/arm-fslc-linux-gnueabi/arm-fslc-linux-gnueabi-gdb

GCC Compiler Configuration

  • Go to Tools => Options
  • In the left panel, click on Build&Run.
  • Click on the Compilers tab
  • Press Add
  • Specify a name (e.g. mydevice GCC)
  • Specify the path: /opt/fslc-x11/2.4.1/sysroot/x86_64-fslcsdk-linux/usr/bin/arm-fslc-linux-gnueabi/arm-fslc-linux-gnueabi-gcc

G++ Compiler Configuration

  • Go to Tools => Options
  • In the left panel, click on Build&Run.
  • Click on the Compilers tab
  • Press Add
  • Specify a name (e.g. mydevice G++)
  • Specify the path: /opt/fslc-x11/2.4.1/sysroot/x86_64-fslcsdk-linux/usr/bin/arm-fslc-linux-gnueabi/arm-fslc-linux-gnueabi-g++

CMAKE Configuration (only for QtCreator > 4.1)

  • Go to Tools => Options
  • In the left panel, click on Build&Run.
  • Click on the CMake tab
  • Press Add
  • Specify a name (e.g. mydevice CMake)
  • Specify the path: /opt/fslc-x11/2.4.1/sysroot/x86_64-fslcsdk-linux/usr/bin/cmake

QT Version Configuration

  • Go to Tools => Options
  • In the left panel, click on Build&Run.
  • Click on the QT Version tab
  • Press Add
  • Specify a name (e.g. mydevice QT 5.x)
  • Specify the path: /opt/fslc-x11/2.4.1/sysroot/x86_64-fslcsdk-linux/usr/bin/qt5/qmake

Kit Configuration

  • Go to Tools => Options
  • In the left panel, click on Build & Run.
  • Click on the Kits tab
  • Press Add
  • Name: mydevice
  • Device: mydevice
  • Sysroot: /opt/fslc-x11/2.4.1/sysroot/armv7at2hf-neon-fslc-linux-gnueabi
  • Compiler: mydevice GCC
  • Debugger: mydevice GDB
  • Qt version: mydevice QT 5.x
  • Qt mkspec: leave empty or set to linux-oe-g++ if cross-compilation fails*

###### << . 3 . >>

Creating a new Qt Quick Application

Startup QTCreator from the terminal using: 

$ source /opt/fslc-fb/2.4.1/environment-setup-armv7at2
$ qtcreator

Creating the Project

  • Select File > New File or Project > Application > Qt Quick * Application - Empty > Choose.
  • In the Name field, enter a name for the application.
  • In the Create in field, enter the path for the project files, and then select Next (or Continue on macOS).
  • In the Build system field, select the build system to use for building and running the project: qmake, CMake, or Qbs.
  • Select Next.
  • Select the Qt version to develop within the Minimal required Qt version field. The Qt version determines the Qt Quick imports that are used in the QML files.
  • Select the Use Qt Virtual Keyboard checkbox to add support for Qt Virtual Keyboard to the application.
  • Select Next.
  • Select kits for running and building your project, and then click Next.
  • Note: Kits are listed if they have been specified in Tools > Options > Build & Run > Kits.
  • Review the project settings, and click Finish (on Windows and Linux) or Done (on macOS) to create the project.

Qt Creator generates two UI files, Page1Form.ui.qml and Page2Form.ui.qml, and a QML file, main.qml. You can modify Page1Form.ui.qml in the Form Editor to create the application main view and main.qml in the Text Editor to add the application logic. For the purposes of this example, you can ignore Page2Form.ui.qml.

Creating the Main View

The main view of the application displays a Qt logo in the top left corner of the screen and two empty rectangles.

To use the qt-logo.png image in your application, you must copy it from the Qt examples directory to the project directory (same subdirectory as the QML file). The image appears in Resources. You can also use any other image or a QML type, instead.

  • In the Projects view, double-click the Page1Form.ui.qml file to open it in Qt Quick Designer.
  • In the Navigator, select Label and press Delete to delete it.
  • Select Page in the navigator, and enter page in the Id field.
  • In Library > Resources, select qt-logo.png and drag and drop it to the page in the navigator.
    • In the Id field, enter icon.
    • In the Position field, set X to 10 and Y to 20.
  • Right-click the resource file, qml.qrc, in the Projects view, and select Add Existing File to add qt-logo.png to the resource file for deployment.
  • Drag and drop a Rectangle to page in the navigator and edit its properties.
    • In the Id field, enter topLeftRect.
    • In the Size field, set W to 55 and H to 41, for the rectangle size to match the image size.
    • In the Colour field, click the Transparent button to make the rectangle transparent.
    • In the Border colour field, set the border colour to #808080.
    • Click Layout, and then click the top and left anchor buttons to anchor the rectangle to the top left corner of the page.
    • In the Margin field, select 20 for the top anchor and 10 for the left anchor.
  • Drag and drop a Mouse Area type from the Library to topLeftRect in the navigator.
  • Click Layout, and then click the (Fill to Parent) button to anchor the mouse area to the rectangle.
  • In the Navigator, copy topLeftRect (by pressing Ctrl+C) and paste it to the page in the navigator twice (by pressing Ctrl+V). Qt Creator renames the new instances of the type topLeftRect1 and topLeftRect2.
  • Select topLeftRect1 and edit its properties:
    • In the Id field, enter middleRightRect.
    • In Layout, select the vertical center anchor button and then the right anchor button to anchor the rectangle to the middle right margin of the screen.
    • In the Margin field, select 10 for the right anchor and 0 for the vertical center anchor.
  • Select topLeftRect2 and edit its properties:
    • In the Id field, enter bottomLeftRect.
    • In Layout, select the bottom and left anchor buttons to anchor the rectangle to the bottom left margin of the screen.
    • In the Margin field, select 20 for the bottom anchor and 10 for the left anchor.
  • In the Navigator, select the (Export) button for each type to export all types as properties. This enables you to use the properties in the main.qml file.
  • Press Ctrl+S to save the changes.

To check your code, you can view Page1Form.ui.qml in the Text Editor and compare it with the Page1Form.ui.qml example file.

The new project wizard adds boilerplate code to the Page1.qml file to create menu items and push buttons. Modify the boilerplate code by removing obsolete code. You removed the push buttons from the UI form, so you also need to remove the corresponding code from Page1.qml (or the application cannot be built).

The UI is now ready and you can switch to editing the main.qml file in the Text Editor to add animation to the application.

Application Deploying

When you run the application, Qt Creator copies the necessary files to the device and starts the application on it.

In your .pro file, remember to add the following lines to allow QT creator knowing where executable will be deployed: 

target.path = /home/root
INSTALLS += target

Debugging Problems

In case you experience debugging problems with messages as "Debugging has failed", please try the following steps:

  • Go to Tools => Options
  • In the left panel, click on Build&Run.
  • Click on the Debuggers tab
  • Press Add
  • Specify a name (e.g. Multiarch GDB)
  • Specify the path: /usr/bin/gdb-multiarch
  • Click on the Kits tab
  • Select your device tab
  • Update the debugger with the new one.

If the file /usr/bin/gdb-multiarch is missing, you can install it running 

sudo apt-get install gdb-multiarch

######<< back to Top

######<< back to Home

Updated