{"id":1508,"date":"2016-03-11T15:13:54","date_gmt":"2016-03-11T23:13:54","guid":{"rendered":"http:\/\/visualgdb.com\/w\/?p=1508"},"modified":"2016-03-11T15:13:54","modified_gmt":"2016-03-11T23:13:54","slug":"developing-graphical-applications-for-raspberry-pi-with-qt5","status":"publish","type":"post","link":"https:\/\/visualgdb.com\/tutorials\/raspberry\/qt5\/","title":{"rendered":"Developing graphical applications for Raspberry Pi with Qt5"},"content":{"rendered":"<p>This tutorial shows how to create graphical applications for Raspberry Pi running the Debian Jessie distro using the Qt5 package provided by the official repository.<\/p>\n<p>Before you begin, install VisualGDB 5.1 or later.<\/p>\n<ol>\n<li>Start Visual Studio. Select File-&gt;New Project-&gt;VisualGDB Linux Project Wizard:<a href=\"http:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/01-prjname.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1509\" src=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/01-prjname.png\" alt=\"01-prjname\" width=\"786\" height=\"577\" srcset=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/01-prjname.png 786w, https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/01-prjname-300x220.png 300w\" sizes=\"(max-width: 786px) 100vw, 786px\" \/><\/a><\/li>\n<li>On the first page of the wizard select &#8220;Application -&gt; Use Qt&#8221;:<a href=\"http:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/02-qtprj.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1510\" src=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/02-qtprj.png\" alt=\"02-qtprj\" width=\"759\" height=\"641\" srcset=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/02-qtprj.png 759w, https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/02-qtprj-300x253.png 300w\" sizes=\"(max-width: 759px) 100vw, 759px\" \/><\/a><\/li>\n<li>Then select &#8220;Build the project locally&#8221; and choose the Raspberry Pi cross-toolchain from the list. If the toolchain is not installed, VisualGDB will install it automatically. Then select your Raspberry Pi connection in the &#8220;Deployment computer&#8221; field and click the &#8220;configure Qt settings&#8221; link:<a href=\"http:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/03-host.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1511\" src=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/03-host.png\" alt=\"03-host\" width=\"822\" height=\"641\" srcset=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/03-host.png 822w, https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/03-host-300x234.png 300w\" sizes=\"(max-width: 822px) 100vw, 822px\" \/><\/a><\/li>\n<li>Ensure Qt 5.x is selected and press OK:<a href=\"http:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/04-qt5.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1512\" src=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/04-qt5.png\" alt=\"04-qt5\" width=\"536\" height=\"347\" srcset=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/04-qt5.png 536w, https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/04-qt5-300x194.png 300w\" sizes=\"(max-width: 536px) 100vw, 536px\" \/><\/a><\/li>\n<li>Press &#8220;Finish&#8221;. VisualGDB will begin testing your setup. If you have not installed Qt5 on your Raspberry Pi, it will detect it and suggest installing it automatically:<a href=\"http:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/05-qtauto.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1513\" src=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/05-qtauto.png\" alt=\"05-qtauto\" width=\"821\" height=\"641\" srcset=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/05-qtauto.png 821w, https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/05-qtauto-300x234.png 300w\" sizes=\"(max-width: 821px) 100vw, 821px\" \/><\/a><\/li>\n<li>When you click &#8220;yes&#8221; the Qt installation process will begin. Note that it may take more than 30 minutes to install depending on the speed of your Internet connection:<a href=\"http:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/06-qtinst.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1514\" src=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/06-qtinst.png\" alt=\"06-qtinst\" width=\"736\" height=\"547\" srcset=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/06-qtinst.png 736w, https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/06-qtinst-300x223.png 300w\" sizes=\"(max-width: 736px) 100vw, 736px\" \/><\/a><\/li>\n<li>As the default Raspberry Pi cross-toolchain does not include the Qt binaries, VisualGDB will suggest synchronizing the sysroot to download them. Click &#8220;Yes&#8221;:<a href=\"http:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/07-sysroot.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1515\" src=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/07-sysroot.png\" alt=\"07-sysroot\" width=\"821\" height=\"642\" srcset=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/07-sysroot.png 821w, https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/07-sysroot-300x235.png 300w\" sizes=\"(max-width: 821px) 100vw, 821px\" \/><\/a><\/li>\n<li>The sysroot synchronization may take a while. Ensure that you are synchronizing all the directories suggested by VisualGDB:<a href=\"http:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/08-syncdirs.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1516\" src=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/08-syncdirs.png\" alt=\"08-syncdirs\" width=\"821\" height=\"642\" srcset=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/08-syncdirs.png 821w, https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/08-syncdirs-300x235.png 300w\" sizes=\"(max-width: 821px) 100vw, 821px\" \/><\/a><\/li>\n<li>Once the synchronization is done, your project will be created. Build it by pressing Ctrl-Shift-B: <a href=\"http:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/09-build.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1517\" src=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/09-build.png\" alt=\"09-build\" width=\"1026\" height=\"662\" srcset=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/09-build.png 1026w, https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/09-build-300x194.png 300w, https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/09-build-1024x661.png 1024w\" sizes=\"(max-width: 1026px) 100vw, 1026px\" \/><\/a><\/li>\n<li>Once the build is complete, simply hit F5 to start debugging it or F10 to step into main(). VisualGDB will automatically deploy it and start all the necessary tools:<a href=\"http:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/10-stepin.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1518\" src=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/10-stepin.png\" alt=\"10-stepin\" width=\"1026\" height=\"662\" srcset=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/10-stepin.png 1026w, https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/10-stepin-300x194.png 300w, https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/10-stepin-1024x661.png 1024w\" sizes=\"(max-width: 1026px) 100vw, 1026px\" \/><\/a><\/li>\n<li>In order to display the Qt windows on your Windows machine, VisualGDB will suggest automtaically installing the XMing server. Proceed with the installation:<a href=\"http:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/11-xming.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1519\" src=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/11-xming.png\" alt=\"11-xming\" width=\"523\" height=\"286\" srcset=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/11-xming.png 523w, https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/11-xming-300x164.png 300w\" sizes=\"(max-width: 523px) 100vw, 523px\" \/><\/a><\/li>\n<li>Once the XMing is installed, VisualGDB will launch it automatically and you will see your application&#8217;s windows as if it was running locally:<a href=\"http:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/12-hello.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1520\" src=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/12-hello.png\" alt=\"12-hello\" width=\"1026\" height=\"662\" srcset=\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/12-hello.png 1026w, https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/12-hello-300x194.png 300w, https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2016\/03\/12-hello-1024x661.png 1024w\" sizes=\"(max-width: 1026px) 100vw, 1026px\" \/><\/a>Now that the debugging is working, you can edit the .ui file to change the GUI layout or the .cpp files to change its logic. Each time you want to test your changes, simply hit F5 and VisualGDB will automatically build and deploy your application and will start a debugging session.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial shows how to create graphical applications for Raspberry Pi running the Debian Jessie distro using the Qt5 package<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[72,85],"_links":{"self":[{"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/posts\/1508"}],"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=1508"}],"version-history":[{"count":1,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/posts\/1508\/revisions"}],"predecessor-version":[{"id":1521,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/posts\/1508\/revisions\/1521"}],"wp:attachment":[{"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/media?parent=1508"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/categories?post=1508"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/tags?post=1508"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}