{"id":2902,"date":"2019-10-31T06:51:25","date_gmt":"2019-10-31T13:51:25","guid":{"rendered":"https:\/\/visualgdb.com\/w\/?p=2902"},"modified":"2023-09-12T11:15:27","modified_gmt":"2023-09-12T18:15:27","slug":"using-cmake-to-build-qt-projects-for-linux","status":"publish","type":"post","link":"https:\/\/visualgdb.com\/tutorials\/linux\/qt\/cmake\/","title":{"rendered":"Using CMake to build Qt projects for Linux"},"content":{"rendered":"<p>This tutorial shows how to use CMake to create Qt-based projects with VisualGDB. If you don&#8217;t have Qt installed on your Linux machine, install it (e.g. by running &#8220;sudo apt-get install qt5-default&#8221; on Debian-based distros).<\/p>\n<p>Before you begin, install <a href=\"http:\/\/visualgdb.com\/download\/\">VisualGDB<\/a> 5.5 or later.<\/p>\n<ol>\n<li>Start Visual Studio and open VisualGDB Linux Project Wizard:<a href=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2017\/07\/01-newprj.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5351\" src=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2017\/07\/01-newprj.png\" alt=\"\" width=\"1024\" height=\"710\" \/><\/a><\/li>\n<li>Enter the name and location of your project:<a href=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2017\/07\/02-prjname.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5352\" src=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2017\/07\/02-prjname.png\" alt=\"\" width=\"1024\" height=\"710\" \/><\/a><\/li>\n<li>Select &#8220;New Project -&gt; Qt&#8221; and, ensure you are using &#8220;Qt5-based application (CMake)&#8221; as the project template and check the &#8220;Use the advanced CMake Project Subsystem&#8221; checkbox:<a href=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2017\/07\/03-setup.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5353\" src=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2017\/07\/03-setup.png\" alt=\"\" width=\"886\" height=\"693\" \/><\/a><\/li>\n<li>On the next page of the wizard select whether you would like to build the project directly on the target, or use a cross-toolchain:<a href=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2017\/07\/04-qt.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5354\" src=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2017\/07\/04-qt.png\" alt=\"\" width=\"886\" height=\"693\" \/><\/a>If you are new to Qt development, we advise starting with building the project directly on the target. If you are using Raspberry Pi or any other board that is directly supported by VisualGDB, you can choose the corresponding cross-toolchain and VisualGDB will automatically copy the necessary files to it. If you are using a 3rd-party cross-toolchain, follow the toolchain vendor&#8217;s instructions to copy the Qt-related headers and libraries to the location where your Linux distro and the toolchain expects them.<\/li>\n<li>Press &#8220;Finish&#8221; to create the project. VisualGDB will automatically reference the Qt framework from the CMakeLists.txt file and will create a basic Qt window. Note that as the project is not built yet, the generated UI files will be missing:<a href=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2017\/07\/05-error.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5355\" src=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2017\/07\/05-error.png\" alt=\"\" width=\"1197\" height=\"830\" \/><\/a><\/li>\n<li>Build the project by pressing Ctrl-Shift-B. If you reopen the main source file, generated UI headers will be located successfully: <a href=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2017\/07\/06-built.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5356\" src=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2017\/07\/06-built.png\" alt=\"\" width=\"1197\" height=\"830\" \/><\/a><\/li>\n<li>Press F5 to start debugging. VisualGDB will launch the Qt application on the target and will automatically display its GUI on the Windows machine using the SSH X11 forwarding:<a href=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2017\/07\/07-press.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5357\" src=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2017\/07\/07-press.png\" alt=\"\" width=\"1197\" height=\"830\" \/><\/a><\/li>\n<li>You can set the breakpoints, step through the code and use the other debugging functionality:<a href=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2017\/07\/08-bkpt.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5358\" src=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2017\/07\/08-bkpt.png\" alt=\"\" width=\"1197\" height=\"830\" \/><\/a><\/li>\n<li>We will now show how to add resource files to cross-compiled Qt projects. Due to the way Qt 5 handles the resource files, they need to be created manually and registered with CMake by editing CMakeLists.txt. Create a new file called <strong>test.qrc<\/strong> in your project directory with the following contents:\n<pre class=\"\">&lt;!DOCTYPE RCC&gt;\r\n&lt;RCC version=\"1.0\"&gt;\r\n    &lt;qresource&gt;\r\n        &lt;file&gt;test.png&lt;\/file&gt;\r\n    &lt;\/qresource&gt;\r\n&lt;\/RCC&gt;<\/pre>\n<p>Replace <strong>test.png<\/strong> with the relative path of any file you would like to embed as a resource.<\/li>\n<li>Add the following statement to the <strong>CMakeLists.txt<\/strong> file before <strong>add_executable()<\/strong>:\n<pre class=\"\">qt_add_resources(ALL_RESOURCES test.qrc)<\/pre>\n<p>Then, update the <strong>add_executable()<\/strong> statement to add sources from the <strong>${ALL_RESOURCES}<\/strong> variable:<a href=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2019\/10\/a02-all-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-8370\" src=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2019\/10\/a02-all-1.png\" alt=\"\" width=\"1121\" height=\"734\" \/><\/a><\/li>\n<li>You can see how it works by right-clicking on the CMake project item in Solution Explorer and selecting &#8220;Launch CMake Debugger&#8221;. The <strong>qt_add_resources()<\/strong> statement compiles the resources into a C++ file called <strong>qrc_test.cpp<\/strong>, and exports it to the <strong>ALL_RESOURCES<\/strong> variable. Referencing this variable from <strong>add_executable()<\/strong> links the resources directly into the application:<a href=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2019\/10\/a03-qrcf.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-8371\" src=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2019\/10\/a03-qrcf.png\" alt=\"\" width=\"1121\" height=\"734\" \/><\/a><\/li>\n<li>You can load the resources anywhere from the application using the &#8220;:&lt;resource name&gt;&#8221; syntax. E.g. the following code opens <strong>test.png<\/strong> as a regular file and queries its size:\n<pre class=\"\">    QFile file(\":test.png\");\r\n    int len = file.size();<\/pre>\n<p><a href=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2019\/10\/a03-len.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-8372\" src=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2019\/10\/a03-len.png\" alt=\"\" width=\"1121\" height=\"734\" \/><\/a><\/li>\n<li>You can also use the &#8220;<strong>:&lt;path&gt;<\/strong>&#8221; syntax anywhere in the widget properties, e.g. the following code adds the <strong>test.png<\/strong> image to the main window:\n<pre class=\"\">QWidget *frame = new QWidget(this);\r\nframe-&gt;setGeometry(32, 32, 128, 128);\r\nframe-&gt;setStyleSheet(\"background-image: url(:test.png)\");<\/pre>\n<p><a href=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2019\/10\/logo.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-8373\" src=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2019\/10\/logo.png\" alt=\"\" width=\"1121\" height=\"734\" \/><\/a><\/li>\n<li>VisualGDB CMake projects are fully self-contained and can be built on any machine with CMake (all changes made via Visual Studio GUI will be automatically applied to the CMakeLists.txt files). Now we will show how to find out the exact command line used by VisualGDB to configure and build the project using the <strong>VisualGDB Build<\/strong> window. Right-click on the project and select &#8220;Reload CMake Project&#8221;:<a href=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2017\/07\/11-reload.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5361\" src=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2017\/07\/11-reload.png\" alt=\"\" width=\"1197\" height=\"830\" \/><\/a><\/li>\n<li>Go to the VisualGDB Build window, locate the CMake configuration line, right-click on it and select &#8220;Dump Command Line to Batch File&#8221;:<a href=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2017\/07\/12-dump.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5362\" src=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2017\/07\/12-dump.png\" alt=\"\" width=\"1197\" height=\"830\" \/><\/a><\/li>\n<li>Build the project and dump the build command line to a different batch file:<a href=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2017\/07\/13-dump2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5363\" src=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2017\/07\/13-dump2.png\" alt=\"\" width=\"1197\" height=\"830\" \/><\/a><\/li>\n<li>The batch files will contain all the necessary environment setup and command lines required to build the project from scratch, e.g.:\n<pre class=\"\">cd \/d C:\\tutorials\\visualgdb\\Linux\\Qt5CMakeDemo\/VisualGDB\/Debug\r\nset LANG=en_US.UTF-8\r\nset PATH=C:\\SysGCC\\raspberry\\bin;%PATH%\r\nset TOOLCHAIN_ROOT=C:\/SysGCC\/raspberry\r\n\"C:\\Users\\virtual.SYSPROGS\\AppData\\Local\\VisualGDB\\CMake\\bin\\cmake.exe\" ..\/.. -G \"Ninja\" -DCMAKE_BUILD_TYPE=DEBUG -DCMAKE_COLOR_MAKEFILE=OFF -DTOOLCHAIN_ROOT=C:\/SysGCC\/raspberry -DCMAKE_TOOLCHAIN_FILE=C:\/tutorials\/visualgdb\/Linux\/Qt5CMakeDemo\/toolchain.cmake -DCMAKE_MAKE_PROGRAM=\"C:\/Program Files (x86)\/Sysprogs\/VisualGDB\/ninja.exe\"<\/pre>\n<p>You can build the project outside VisualGDB by running the batch files one after another:<a href=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2017\/07\/14-run.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5364\" src=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2017\/07\/14-run.png\" alt=\"\" width=\"979\" height=\"512\" \/><\/a><\/li>\n<li>This will produce the same results as building it from Visual Studio:<a href=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2017\/07\/15-built.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5365\" src=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2017\/07\/15-built.png\" alt=\"\" width=\"979\" height=\"512\" \/><\/a><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial shows how to use CMake to create Qt-based projects with VisualGDB. If you don&#8217;t have Qt installed on<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[77,33,73],"_links":{"self":[{"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/posts\/2902"}],"collection":[{"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/comments?post=2902"}],"version-history":[{"count":5,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/posts\/2902\/revisions"}],"predecessor-version":[{"id":8374,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/posts\/2902\/revisions\/8374"}],"wp:attachment":[{"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/media?parent=2902"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/categories?post=2902"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/tags?post=2902"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}