Creating GUI App for the Ultra96 with Qt

Some time ago I wanted to create application with graphical user interface (GUI) for Xilinx Ultra96 development board but it wasn't so simple as I thought. I started searching for tutorials and help but there wasn't much information on how start developing these kind of applications. After a lot hours of reading and watching videos I finally created my first application with GUI using Qt Creator. Today I will show you how to set up Qt environment and how to create simple application with Qt Creator.

Requirements

If you are new to Xilinx Ultra96 development board and PetaLinux environment I highly recommend you to take a look at Hackster Workshops section and take Ultra96 Introductory Courses.

For this tutorial you will need computer with Ubuntu operating system or Virtual Machine running Ubuntu. In this tutorial I used Ubuntu 16.04 operating system. You will also need internet connection and at least of 200GB of free space available in your hard disk.

Creating PetaLinux project and building SDK

First things first in order to create application with graphical user interface we need PetaLinux image with Qt support. For this project I used PetaLinux 2018.3 and same version board support package (BSP) for Ultra96 development board which is available here. Download BSP and create new PetaLinux project using command:

petalinux-create -t project -n ultra96_qt -s {path to downloaded BSP file}

Change directory to created project:

cd ultra96_qt

Supply hardware definition file.hdl for PetaLinux tools:

petalinux-config --get-hw-description=./hardware/ULTRA96V1_2018_3/ultra96v1_petalinux.sdk/

Add Qt binaries and other required files for rootfs and sysroot by running command:

petalinux-configure -c rootfs

Go to Petalinux Package Groups ---> packagegroup-petalinux-qt and select packagegroup-petalinux-qt and populate_sdk_qt5. First option includes Qt binaries to our image which will be used on Ultra96 development board and the second option includes required files for Qt to enable cross-compilation on your computer. Save everything and quit.

Now let's build PetaLinux project with Qt support. This will take a while depending on your internet speed. In order to build project run command:

petalinux-build

After completing building process package PetaLinux image files by entering files location and then by executing package command:

cd images/linux/ 
petalinux-package --boot --fsbl zynqmp_fsbl.elf --u-boot u-boot.elf --pmufw pmufw.elf --fpga system.bit

Set up your SD card and copy BOOT.bin and image.ub files to boot partition and untar rootfs.tar.gz file to rootfs partition. You can now install SD card with freshly created image to Ultra96 development board. Go back to the main project location by entering:

cd ../..

Now it is time to build Software Development Kit (SDK) which will be used in Qt environment. This will require a lot of free space on your hard disk and will take time to complete. Run command:

petalinux-build --sdk

After completing building process for SDK unpack it by using command:

petalinux-package --sysroot

Congratulations! You have just completed first part in which you created PetaLinux image with Qt support and SDK with files which will be used by Qt in cross-compilation process later. Lets move on to the next part.

Downloading and setting up Qt environment

PetaLinux v2018.3 will include Qt 5.9.6 binaries to our created image so I highly recommend to install same version Qt Creator to your computer which is available here. Install Qt and open it. We will now create new Kit which will be used by Qt to cross-compile our app with GUI. Go to Tools -> Options, new window will pop-up. Select Build & Run tab from vertical menu and then Qt Versions tab from horizontal menu. Press Add and another window will pop-up. Navigate to Ultra96 project location and then to /images/linux/sdk/sysroots/x86_64-petalinux-linux/usr/bin/qt5 and select qmake file. You can change version name if you want. After this press Apply.

Go to Compiler tab and click Add -> GCC -> C. I renamed this compiler to ZynqMPSoC_C because it is generic and could be used for other Xilinx Zynq Ultrascale+ projects. Now set-up Compiler path by clicking Browse and navigating to PetaLinux tools installation location and then to /tools/linux-i386/aarch64-linux-gnu/bin/ and select aarch64-linux-gnu-gcc file. Click Apply and add another compiler for C++ by pressing Add -> GCC -> C++. I named this compiler similarly to previous one but with different ending ZynqMPSoC_C++. Set-up Compiler path by clicking Browse and navigating to PetaLinux tools installation location and then to /tools/linux-i386/aarch64-linux-gnu/bin/ and select aarch64-linux-gnu-g++ file. Don't forget to click Apply.

Let's go to another tab Debuggers. Now here's a deal. Xilinx provided GDB debugger does not support Python scripting and it cannot be used in Qt Creator. Worry not Multiarch GDB will help us this time. Open your terminal and download Multiarch GDB by running:

sudo apt-get install gdb-multiarch

Now let's go back to Qt Creator and add our new GDB debugger. Click Add. I named this debugger Multiarch_GDB. Click Browse to set Path to debugger. It will be located at /usr/bin/ with name gdb-multiarch. After this click Apply.

In the left menu click on tab Devices. We will now add our Ultra96 development board information. Before this turn on your Ultra96 development board and connect it to the internet. Click Add and select Generic Linux Device. You will be asked to input Device name, IP address and log in information. I named my device Ultra96. If you haven't changed anything while creating PetaLinux project then log in username and password should be root.

Click Next and then Finish. If everything is correct Qt will display that test connection to device was successful. Click Close and don't forget to click Apply.

Now go back to Build & Run tab from vertical menu and select tab Kits from horizontal menu. We will now add kit for Qt Creator by pressing Add. Name your kit, I named mine Ultra96. Select Device type Generic Linux Device, select Device which we just created from the drop-down list. Set up Sysroot path by clicking Browse and navigate to your Ultra96 project location and then to /images/linux/sdk/sysroots. From drop-down lists select Compilers, Debugger and Qt Version. Once again don't forget to click on Apply button.

Close Options window and close Qt Creator. We now have working Kit which will be used by Qt to build and debug applications for our Utra96 development board. Our next step - Creating simple application and running it on Ultra96.

Creating application with Qt

Here is the very important step which you will have to do every time you want to create application with Qt Creator for Ultra96 development board. Before running Qt Creator you must first source environmental variables from your Ultra96 project directory.You can do this by running command:

source ./images/linux/sdk/environment-setup-aarch64-xilinx-linux  

After this you must open Qt Creator from the same terminal. You can do this by typing this command to terminal:

{installation directory of Qt}/Tools/QtCreator/bin/qtcreator

We now can create application with GUI using Qt Creator. Connect display to your Ultra96 development board and turn it on. In Qt Creator click Projects -> New Project, select Application and Qt Widgets Application, press Choose.

You will be asked to fill project information like name and location which are not important to us this time, press Next. In Kit Selection window select kit created for Ultra96 development board and press Next.

Don't change anything in other windows and press Next and then Finish. Your freshly created project will be opened. In the left menu expand folder Forms and double click on file mainwindow.ui. Graphical user interface created for this project will be opened. From the left panel drag and drop Push Button and Line Edit. You can double click on the button and change text displayed on the button.

Press right key of your mouse on button and select Go to slot. Select signal clicked() and press Ok.

mainwindow.cpp file will be opened and new function will be created for button click event. Edit this function by entering:

ui->lineEdit->setText("Hello Ultra96!");

This line will print text "Hello Ultra96!" to the GUI component Line Edit when you press the button.

Now we need to complete last steps. Qt Creator doesn't know where to transfer executable file so we must tell this by editing.pro file. Open it and add these line below TARGET =... line:

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

These lines will tell Qt Creator where to put and how to name executable file in our Ultra96 development board. Click File -> Save All.

From left menu select Projects. We will add Arguments and new Run Environment variable. In the Arguments field add -qws this will start Qt services on Ultra96 board when we want to run project. Now add Run Environment variable DISPLAY with value =0.0. Without this variable nothing will be displayed on screen if you click Run button.

Now you should have complete Qt environment ready to cross-compile applications for your Ultra96 development board. Press green play button Run and our created application should be displayed on Ultra96 display. Enjoy!

I hope that in this tutorial you learned how to set up Qt environment and that in future you will be able to create even more greater projects for your Xilinx Ultra96 development board with graphical user interface.

This is my first tutorial so please comment and tell me if something is wrong and how can I improve my work. Thank you and until next project or tutorial!