{"id":1853,"date":"2017-09-15T22:56:08","date_gmt":"2017-09-15T17:26:08","guid":{"rendered":"http:\/\/localhost:8081\/system-on-module-som\/?p=1853"},"modified":"2025-03-21T19:20:17","modified_gmt":"2025-03-21T13:50:17","slug":"build-intuitive-hmi-using-qt-use-esomimx6-rdk-ankaa","status":"publish","type":"post","link":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/build-intuitive-hmi-using-qt-use-esomimx6-rdk-ankaa\/","title":{"rendered":"Build intuitive HMI using Qt &#8211; Use eSOMiMX6 RDK Ankaa"},"content":{"rendered":"<p class=\"western\"><span style=\"color: #00000a;\">This article will guide you why Qt is preferred for HMI development.<\/span><\/p>\n<p align=\"left\"><strong><span style=\"color: #000000;\">What are the common requirements put forward by customers while designing a HMI ?<\/span><\/strong><\/p>\n<div style=\"width: 100%; float: left;\">\n<!--\n\n\n<div style=\"width: 50%; float: left;\">--><\/p>\n<ul>\n<li>\n<p class=\"western\">Outstanding user experience (UX)<\/p>\n<\/li>\n<li>\n<p class=\"western\">Faster time to market<\/p>\n<\/li>\n<li>\n<p class=\"western\">Internationalization Support<\/p>\n<\/li>\n<\/ul>\n<p class=\"western\">Lets dive in and check what Qt provides us with to meet the above mentioned customer requirements.<\/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 HMI Sample 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=eHXS6SCPs08yz6FWgn2e22vNnDqXmUZLghhHOqh3DfwQO6V41%2FXOD%2FdtS5N0DrvNNWdZmFc2fjtRGxNLjlbOTLCwE5BC7rtPsZnIakApMzLh3ucPRMNmpc2Mz%2FFbGVzJbmKM7cs0M4s9bNuynaxYIIW96HbgXyP5HYbmHJgCJUd6Sd1aooKKCTmTVwss6z3BRbcjSDvD%2Bm%2FtaGrQTbODlpSvXhkVvHrdnF93m50aXjRMd%2BFPvn3V0MwGO9bEtuDBhOf8FsHrplrs2dmABhAiG4MWW7E5qsR8ZW5dH8Jto7EWUFewvQqDOBTk5Sd2KQe%2B\" 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=eHXS6SCPs08yz6FWgn2e20Xf3vIoDl0vF4Tatb58piPNfwvSz7rS%2BQiDBbcpL5f3CmFYnTh6ph9mKmjGFQAz1rQgeVBBjvs%2BwhbO53BpzZ3ofbLkq6YQJYkh%2FWo7eQsqYfQwTf04BBq8B4J11tKjBaqu%2BhfivyEG59ifa1o0xJHhXKt4hhv66zKcMRAnlXtRBcRIhm5XoEkE3tpQFG4b4lH8WjS1AZsEH9BcvIPJkDvPc6gkyvrJHsu%2BzTCaigjWRtZMelOdlrh3Dg2v2m8ZzwvHKkYMGP4PGUFyYNZ0plyuYC%2FCGRYj%2FxU7PegEkZEZ\" 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:\/\/www.e-consystems.com\/blog\/system-on-module-som\/qt-vs-gtk-vs-wxwidgets-a-comparative-study\/\" target=\"_blank\" rel=\"noopener noreferrer\"> Qt Basics Samples Package Containing Poky Toolchain<\/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=eHXS6SCPs08yz6FWgn2e27aXrUKsRClbddUo2e45jXheKzLHJRrl2lvYvTpFybxJr7cNbhTDNl%2F%2BKdEEr1nuZtxUGqCVPGlQUUTRF5ZyeUhJDENhqzcDA1Flt%2FNXf27iuSD15p2LY%2Bk%2FT7mjgBbeX95dW7Kq%2FhJT2BuaVkhj%2FdjGee53N9b14v2Mw3WZyeHWC2%2BJApcYXxw5K3atuvunEOc%2F4bkM58Kd%2B9nKESjBDYhMQQuAj0QGh7m6kQRBZRSS46uQNZ8q%2FBCkkHiaLnwGef8DzIrHjHQEei%2FLYxfRBqg%3D\" target=\"_blank\" rel=\"noopener noreferrer\"> Qt-Intermediate Samples Package Containing Sensor Dashboard 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 align=\"left\"><strong><span style=\"background-color: #2e86c1; color: white;\"><img decoding=\"async\" class=\"emoticon emoticon-light-on\" src=\"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-content\/uploads\/2017\/09\/lightbulb_on.png\" alt=\"(lightbulb)\" \/> Outstanding user experience (UX)<\/span><\/strong><\/p>\n<p class=\"western\">Requirement specifications for HMIs have become pretty demanding and modern these days.<\/p>\n<p class=\"western\">People are used to &#8220;<strong>Rich Graphics<\/strong>&#8220;, &#8220;<strong>Intuitive Buttons, controls<\/strong>&#8220;, &#8220;<strong>Captivating Animations<\/strong>&#8220;, etc. in the products they use on a daily basis.<\/p>\n<p class=\"western\">Take the phone for example. Not long back, we had simple physical buttons and practically no display on fixed line phones. But now the user interface on the latest iPhone or Android is a complete contrast.<\/p>\n<p>So expectations of HMI have gone up too.<\/p>\n<p class=\"western\" style=\"text-align: left;\">For implementing a good user interaction design with rich graphics support, Qt supports <strong>QML.<\/strong><\/p>\n<p class=\"western\" style=\"text-align: left;\"><strong>QML<\/strong> is a lightweight declarative language built on top Qt. QML allows a pair of a UI designer and an application developer to develop a GUI very quickly. The design gets implemented almost instantly and can be tried immediately on the target board. We can even ask some users to try out a feature. Based on the users\u2019 feedback, the GUI can be changed on the spot. QML makes it easy and quick to turn a great design into a great HMI.<\/p>\n<p class=\"western\" style=\"text-align: left;\"><strong>QtCreator<\/strong> \u2013 an IDE for developing software with QML, Qt and C++ that includes a designer for QML. So, it supports the work of both the UI designer and the application developer.<\/p>\n<p align=\"left\"><strong><span style=\"background-color: #2e86c1; color: white;\"><img decoding=\"async\" class=\"emoticon emoticon-light-on\" src=\"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-content\/uploads\/2017\/09\/lightbulb_on.png\" alt=\"(lightbulb)\" \/> Faster time to market<\/span><\/strong><\/p>\n<p class=\"western\"><strong>Qt SDK<\/strong> provides <strong>APIs<\/strong> for multimedia, network, connectivity, navigation, etc. These APIs make it easy for the application developers to implement the HMI which allow us to bring our products to market faster.<\/p>\n<p class=\"western\">Using <strong>QML,<\/strong> the design gets implemented instantly and can be tried out immediately on the target hardware. Changes can also be done on the spot based on the users feedback. Knowing early what works and seeing alternatives allow us to bring our products to market faster.<\/p>\n<p class=\"western\"><strong>Qt creator<\/strong> allows the developers to work on their PCs and then try out their work on the actual hardware \u2013 right from the beginning of the project which again allow us to bring our product to market faster.<\/p>\n<p class=\"western\">Since Qt can run on <strong>multiple platforms<\/strong>, it also saves us a lot of development time and allows us to bring our products to the market faster.<\/p>\n<p align=\"left\"><strong><span style=\"background-color: #2e86c1; color: white;\"><img decoding=\"async\" class=\"emoticon emoticon-light-on\" src=\"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-content\/uploads\/2017\/09\/lightbulb_on.png\" alt=\"(lightbulb)\" \/> Internationalization Support<\/span><\/strong><\/p>\n<p class=\"western\">A common requirement from most of our customers is that the HMI needs to support multiple languages. Most people feel more comfortable using applications in their native language for which we need to localize the software to the languages spoken by the users. Qt makes this easy by providing tools for localizing C++ and Qt Quick apps into local languages.<\/p>\n<p align=\"left\"><strong><span style=\"background-color: #2e86c1; color: white;\"><img decoding=\"async\" class=\"emoticon emoticon-light-on\" src=\"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-content\/uploads\/2017\/09\/lightbulb_on.png\" alt=\"(lightbulb)\" \/> Conclusion<\/span><\/strong><\/p>\n<p class=\"western\"><span lang=\"zxx\">We strongly support Qt for its merits to design HMI on our embedded platforms.<\/span><\/p>\n<p class=\"western\">Are you looking to develop one such HMI using QML ? Then, the e-con Systems\u2122 <span style=\"color: #000080;\"><span lang=\"zxx\"><a href=\"https:\/\/www.e-consystems.com\/iMX6-micro-som-system-on-module.asp\">eSOMiMX6<\/a><\/span><\/span> based Ankaa kit might be a good solution for you.<\/p>\n<p class=\"western\">Please visit our <span style=\"color: #000080;\"><span lang=\"zxx\"><a href=\"https:\/\/www.e-consystems.com\/auth\/Account\/login\">developer website<\/a><\/span><\/span> to download various articles and sample programs on Qt.<\/p>\n<p class=\"western\">For further assistance and queries please get in touch with <span style=\"color: #000080;\"><span lang=\"zxx\"><a href=\"mailto:sales@e-consystems.com\">sales@e-consystems.com<\/a><\/span><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article will guide you why Qt is preferred for HMI development. What are the&#8230;<\/p>\n","protected":false},"author":17,"featured_media":2700,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[212,213,127],"tags":[251,332,259,207,129,121],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/posts\/1853"}],"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=1853"}],"version-history":[{"count":12,"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/posts\/1853\/revisions"}],"predecessor-version":[{"id":3046,"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/posts\/1853\/revisions\/3046"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/media\/2700"}],"wp:attachment":[{"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/media?parent=1853"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/categories?post=1853"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/wp-json\/wp\/v2\/tags?post=1853"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}