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 and reach the market quickly.
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.
This article will guide you on how to develop User Interface products that include fluid animations on eSOMiMX6 device.
At e-con we have developed several visually appealing and intuitive user interfaces for our customers using Qt QML. eSOMiMX6 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.
For this article, to showcase how to use Qt-QML animations on eSOMiMX6 device, we attempted to develop a image viewer application. The end-result is a rich image viewer application on the eSOMiMX6 device.
Please refer our previous articles on How to setup Qt creator for eSOMiMX6 devices and How to build, deploy and run Qt applications on eSOMiMX6 devices to build and run the image viewer application on eSOMiMX6 devices .
How to achieve QML animation?
The Qt QML module provides components like Flipable. 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 – Rotation, State and Transition 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.
e-con’s image viewer, supports the following image formats.
Features of the Image Viewer application
- Images can be navigated with a swipe.
- The images in any specified folder can be viewed.
- The image can be zoomed-in, zoomed-out and reset with the controls provided or with pinch gesture.
- Images can be panned.
- View image properties
For further assistance and queries get in touch with email@example.com