{"id":2014,"date":"2017-12-11T11:08:38","date_gmt":"2017-12-11T05:38:38","guid":{"rendered":"http:\/\/localhost:8081\/system-on-module-som\/?p=2014"},"modified":"2025-03-26T13:13:50","modified_gmt":"2025-03-26T07:43:50","slug":"fluid-animation-with-qt-on-esomimx6","status":"publish","type":"post","link":"https:\/\/www.e-consystems.com\/blog\/system-on-module-som\/fluid-animation-with-qt-on-esomimx6\/","title":{"rendered":"Fluid Animation with Qt on eSOMiMX6"},"content":{"rendered":"

The embedded product competition demands to develop highly differentiated products with visually appealing – intuitive and fluid user interfaces. We want our products to have UIs that Standout from the Crowd<\/b> and reach the market quickly.<\/span><\/p>\n

\n<\/p>\n

With the advent of UI frameworks from companies like Qt, high-end graphics is no more a sophistication or high expenditure. 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 realized on such small form factor devices like eSOMiMX6<\/a><\/u>.<\/span><\/p>\n

This article will guide you on how to develop User Interface products that include fluid animations on eSOMiMX6<\/a> device.<\/span><\/p>\n

<\/div>\n

At e-con we have developed several visually appealing and intuitive user interfaces for our customers using Qt QML. eSOMiMX6<\/a> <\/u><\/span>platforms were able to run them with great performance. So, in this article we would like to show you how to build a QML application with fluid animation. One can download free samples free by just registering on our website www.e-consystems.com.<\/a><\/p>\n

For this article, to showcase how to use Qt-QML animations on <\/span>eSOMiMX6<\/a> device, we attempted to develop a image viewer application. The end-result is a rich image viewer application on the eSOMiMX6<\/a> device.<\/p>\n

Please refer our previous articles on How to setup Qt creator for eSOMiMX6 devices<\/a> and How to build, deploy and run Qt applications on eSOMiMX6 devices<\/a> to build and run the image viewer application on eSOMiMX6<\/a> devices .<\/span><\/p>\n

How to achieve QML animation?<\/span><\/b><\/p>\n

The Qt QML module provides components like Flipable.<\/b> Flipable is an item that can be visibly “flipped” between its front and back sides, like a card. It is used together with other classes like – <\/span>Rotation<\/a><\/span>, <\/span>State<\/a><\/span> and <\/span>Transition<\/a><\/span> to produce a flipping effect. Many cool applications can be developed using components like these from QML module. We have used it in the image viewer application.<\/span><\/p>\n

Image Formats Supported by <\/a>Image viewer<\/span><\/b><\/b><\/p>\n

e-con\u2019s image viewer, supports the following<\/span> image fo<\/span>rmats.<\/span><\/p>\n