{"id":1942,"date":"2017-11-17T20:19:44","date_gmt":"2017-11-17T14:49:44","guid":{"rendered":"http:\/\/localhost:8081\/system-on-module-som\/?p=1942"},"modified":"2025-03-26T13:33:37","modified_gmt":"2025-03-26T08:03:37","slug":"accelerated-embedded-gui-development","status":"publish","type":"post","link":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/accelerated-embedded-gui-development\/","title":{"rendered":"Accelerated Embedded GUI development"},"content":{"rendered":"<p>Embedded devices have taken a major leap in the recent years. Most embedded devices have so much raw power that we did not see even in the most powerful computers of the 80&#8217;s or 90&#8217;s. With the explosion of the internet and smart devices the user expectations in terms of graphics and time to market has gone to new highs that no one imagined.<\/p>\n<div style=\"width: 100%; float: left;\">\n<!--\n\n\n<div style=\"width: 50%; float: left;\">--><\/p>\n<p>In today&#8217;s market even those factories that ran with line and terminal interfaces for generations are demanding touch screen based modern User Interface experiences. Which are more intuitive and ergonomically safe. With the advent of UI frameworks from companies like Qt, high-end graphics is no more a sophistication and high expense. Rich UX experiences were restricted in the past to run on the web servers and desktops no one imagined such high-end graphics could be realised on such small form factor devices like eSOMiMX6.<\/p>\n<p><!--<\/div>\n\n\n\n\n<div style=\"width: 50%; float: right;\">\n\n\n<table style=\"width: 400px; margin: 0px auto; border: 1px solid #FFBC7D;\" align=\"center\">\n\n\n<tbody>\n\n\n<tr style=\"border: 1px solid #FFBC7D;\">\n\n\n<td align=\"center\" width=\"24%\"><img decoding=\"async\" loading=\"lazy\" style=\"vertical-align: middle;\" src=\"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-content\/uploads\/2018\/01\/QT-Series.jpg\" alt=\"Adobe Spark\" width=\"100\" height=\"125\" \/><\/td>\n\n\n\n\n<td width=\"1%\"><\/td>\n\n\n\n\n<td style=\"text-align: center; background: #FF7D01; margin: 0px auto; border-spacing: 0px; color: #ffffff; font-size: 18px;\" align=\"center\" width=\"75%\"><strong>Try Stop Watch Qt Application On eSOMiMX6<\/strong><\/td>\n\n\n<\/tr>\n\n\n\n\n<tr style=\"width: 100%; height: 25px; text-align: left; background: #FFBC7D; margin: 0px auto; border-spacing: 0px; color: #000000; font-size: 15px;\">\n\n\n<td colspan=\"3\" align=\"left\"><a href=\"https:\/\/developer.e-consystems.com\/Downloads?key=eHXS6SCPs08yz6FWgn2e2846FoGXHA2gsAukFj7YZgcp7haRxVfadSi6%2FYZSjdwKpn2rCG8guswNiX86G%2F7Sp9rD9MHV0Q5Kw%2BKP%2Fr9Xu%2BRXjNTubmNj%2F1DK4xBrC54ug%2BvFRlHVlgCeJAiNY2x0adJiGx55kjsyLzCvYajrOosMfvgT2bLs7szQwpTfidpT%2BAtyORXy0cjKRG1z3j%2FbEbms%2F1qP7IEG7w9fe4xjv%2BiStfW%2BlXzHmci86nbLRtGsai00prwBiarLjsdSb4960607jAdQitU7mlgHG7iZajVfwxYdMz4cQT7ii%2FA%2FG%2BPx\" target=\"_blank\" rel=\"noopener noreferrer\"> Qt-QML-Setup-Qt-Creator-Steps Application Guide <\/a><\/td>\n\n\n<\/tr>\n\n\n\n\n<tr style=\"width: 100%; height: 25px; text-align: left; background: #FFFFFF; margin: 0px auto; border-spacing: 0px; color: #000000; font-size: 15px;\">\n\n\n<td colspan=\"3\" align=\"left\"><a href=\"https:\/\/developer.e-consystems.com\/Downloads?key=eHXS6SCPs08yz6FWgn2e25WyQNMV%2Flu%2B8SruZF9XsgsURCOnY4UQCTQ%2Fccm%2BduqHayYfHxF9aECVTI8V%2FRV6OTxW%2FAZxO1e28vGLW3lOoFSxXgvDUY31lteU%2FNu7qX2lukW2PVob%2FdYt6tPb%2BcKYnI24L3JonmitxIOoarFqmBnf1jaeVYn45YYWcfUrPY5P3Qi8mH33qu4dvWkbQKP9C6UVNSczNx91Nwk5JreQroHa%2BZVqQgTHU0bR5LyJ3On%2FeELBunO67jcOyeEpBoyW%2FQ7tFxzVLtXoDVsH68KLl14QemXgturpayLPQ3E17O63\" target=\"_blank\" rel=\"noopener noreferrer\"> Qt-QML-Build-Deploy-Run-Steps Application Guide<\/a><\/td>\n\n\n<\/tr>\n\n\n\n\n<tr style=\"width: 100%; height: 25px; text-align: left; background: #FFBC7D; margin: 0px auto; border-spacing: 0px; color: #000000; font-size: 15px;\">\n\n\n<td colspan=\"3\" align=\"left\"><a href=\"https:\/\/developer.e-consystems.com\/Downloads?key=eHXS6SCPs08yz6FWgn2e25hMbOYF5lyOfsmMASBDm%2BIv6f8jKnXQOzihBXuc%2F3Cgy8T0w6kh%2BpOC2D8js%2BKTj1mci0t%2BWuW6QUtHAP9jsiGofVeF7iDOUqJ2eHyOCoC%2BwFKnV0l7JwH1okctnx3hMc9BcDGhTRXgvrPwyMDKjo7hL9PkQ9gVahrMY1MLYOMPj2EkexXMPtH%2FC3gAfb1j7E0mgpk2qb9v7ZvOA7IYmJWbn1VaER7WwOqUS2xBE%2BmAPRlwLaCxIVpI2%2Bqf6N59gwx6H8w8ZOaxfRzHzGRHNoA%3D\" target=\"_blank\" rel=\"noopener noreferrer\"> Qt Basics Samples Package Containing Stopwatch Application<\/a><\/td>\n\n\n<\/tr>\n\n\n<\/tbody>\n\n\n<\/table>\n\n\n<\/div>\n\n\n--><\/div>\n<p>We have developed several complex products for our customers using Qt QML on our <span style=\"color: #000080;\"><span lang=\"zxx\"><u><a href=\"https:\/\/www.e-consystems.com\/iMX6-som-system-on-module.asp\">iMX6<\/a><\/u><\/span><\/span> platforms with great performance. So in this article we would like to quickly show you how to build your first QML application. This we expect will launch you into embedded GUI development for ARM based platforms. We have included free samples below which you can download for free by just registering yourself on our website <a href=\"https:\/\/www.e-consystems.com\">www.e-consystems.com.<\/a><\/p>\n<p>To showcase how quickly we can develop and run a QML application on <span style=\"color: #000080;\"><span lang=\"zxx\"><u><a href=\"https:\/\/www.e-consystems.com\/iMX6-som-system-on-module.asp\">eSOMiMX6<\/a><\/u><\/span><\/span> device, we developed a stopwatch application. This application was developed using pure QML components such as Rectangle, Timer, Text, Column, etc. The result was amazing !!! The time taken to develop, build, deploy and run the application on <span style=\"color: #000080;\"><span lang=\"zxx\"><u><a href=\"https:\/\/www.e-consystems.com\/iMX6-som-system-on-module.asp\">eSOMiMX6<\/a><\/u><\/span><\/span> was less than 1 hour. The output was an intuitive stopwatch watch with an excellent look and feel on our <span style=\"color: #000080;\"><span lang=\"zxx\"><u><a href=\"https:\/\/www.e-consystems.com\/iMX6-som-system-on-module.asp\">eSOMiMX6<\/a><\/u><\/span><\/span> device.<\/p>\n<p>Please refer our previous articles on <a href=\"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/getting-started-with-qt-creator-on-esomimx6\/\">How to setup Qt creator for eSOMiMX6 devices<\/a> and <a href=\"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/build-deploy-and-run-qt-application-on-esomimx6\/\">How to build, deploy and run Qt applications on eSOMiIMX6 devices<\/a> to build and run the stopwatch application on <span style=\"color: #000080;\"><span lang=\"zxx\"><u><a href=\"https:\/\/www.e-consystems.com\/iMX6-som-system-on-module.asp\">eSOMiMX6<\/a><\/u><\/span><\/span> devices .<\/p>\n<p><strong>What should you have ?<br \/>\n<\/strong><\/p>\n<ul>\n<li>You must have a PC with Qt Creator configured to cross compile for the eSOMiMX6 devices. Refer <a href=\"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/getting-started-with-qt-creator-on-esomimx6\/\">Getting Started with Qt Creator on eSOMiMX6<\/a>.<\/li>\n<li>A working network connection on the eSOMiMX6 device(s).<\/li>\n<\/ul>\n<p style=\"margin-left: 48.0px;\"><strong>Note<\/strong>: Make sure your PC and the device are on the same network.<\/p>\n<p><strong>What is QML ?<br \/>\n<\/strong><\/p>\n<ul>\n<li>Qt Meta Language or Qt Modeling Language (QML) is a Qt-specific declarative language which separates the declarative UI design and the imperative programming logic.<\/li>\n<li>QML allows developers and designers alike to create highly performing, fluidly animated and visually appealing applications.<\/li>\n<li>QML elements can be augmented by standard JavaScript both inline and via included .js files.<\/li>\n<\/ul>\n<p><strong>Lets do some work<\/strong><\/p>\n<ul>\n<li>Launch the Qt Creator.<\/li>\n<li>Click<strong> Open Project<\/strong> from the Welcome section.<\/li>\n<li>Open a QML project.<\/li>\n<\/ul>\n<p><strong>Lets design quickly<\/strong><\/p>\n<p>When it comes to UI, you obviously wanted to design rather than code.<\/p>\n<p>You can use the <strong>Form Editor<\/strong> or the <strong>Text Editor<\/strong> of Qt Quick Designer in the Design mode to develop Qt Quick applications. The UI can be easily modified using the Design Tool.<\/p>\n<ul>\n<li>The <strong>QML Types<\/strong> section contains the QML Components that could be simply dragged and dropped into the form editor.<\/li>\n<li>The <strong>Resource <\/strong>section contains the images and other items in the <strong>qrc<\/strong> file.<\/li>\n<li><strong>Imports <\/strong>section contains the modules imported in the qml file. New modules can be added from this section.<\/li>\n<\/ul>\n<p>The UI changes made here are automatically reflected in the code.<\/p>\n<p><strong>Lets deploy our UI<\/strong><\/p>\n<p>The location in which the executable must be deployed on the eSOMiMX6 device(s) could be controlled through the <strong>.pro<\/strong> file of the project.<\/p>\n<ul>\n<li>Double click on the project file (.<strong>pro<\/strong>) to open it.<\/li>\n<li>Add the name to be given to the binary under the <strong>TARGET<\/strong> section.<\/li>\n<li>Mention the remote location of the executable under the <strong>target.path<\/strong> section.<\/li>\n<li>Add the targets that must be put into the remote location under the <strong>INSTALLS<\/strong> section.Now the QML application will be running on eSOMiMX6 display.<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-2440 size-full\" src=\"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-content\/uploads\/2020\/05\/fqml.png\" alt=\"StopWatch\" width=\"800\" height=\"480\" \/><\/p>\n<p>Please visit our <a href=\"https:\/\/www.e-consystems.com\/auth\/Account\/login\">developer website<\/a> to download the source and detailed instructions to run a the stopwatch application on <a href=\"https:\/\/www.e-consystems.com\/iMX6-micro-som-system-on-module.asp\">eSOMiMX6<\/a> devices.<\/p>\n<p>For further assistance and queries get in touch with <a href=\"mailto:sales@e-consystems.com\">sales@e-consystems.com<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Embedded devices have taken a major leap in the recent years. Most embedded devices have&#8230;<\/p>\n","protected":false},"author":17,"featured_media":2137,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[212,213,195,343,127,340,341],"tags":[133,113,207,129,121,139],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/posts\/1942"}],"collection":[{"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/comments?post=1942"}],"version-history":[{"count":14,"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/posts\/1942\/revisions"}],"predecessor-version":[{"id":3072,"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/posts\/1942\/revisions\/3072"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/media\/2137"}],"wp:attachment":[{"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/media?parent=1942"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/categories?post=1942"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/tags?post=1942"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}