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’s or 90’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.
In today’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.
 |
Try Stop Watch Qt Application On eSOMiMX6 | |
| Qt-QML-Setup-Qt-Creator-Steps Application Guide | ||
| Qt-QML-Build-Deploy-Run-Steps Application Guide | ||
| Qt Basics Samples Package Containing Stopwatch Application | ||
We have developed several complex products for our customers using Qt QML on our iMX6 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 www.e-consystems.com.
To showcase how quickly we can develop and run a QML application on eSOMiMX6 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 eSOMiMX6 was less than 1 hour. The output was an intuitive stopwatch watch with an excellent look and feel on our 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 eSOMiIMX6 devices to build and run the stopwatch application on eSOMiMX6 devices .
What should you have ?
- You must have a PC with Qt Creator configured to cross compile for the eSOMiMX6 devices. Refer Getting Started with Qt Creator on eSOMiMX6.
- A working network connection on the eSOMiMX6 device(s).
Note: Make sure your PC and the device are on the same network.
What is QML ?
- 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.
- QML allows developers and designers alike to create highly performing, fluidly animated and visually appealing applications.
- QML elements can be augmented by standard JavaScript both inline and via included .js files.
Lets do some work
- Launch the Qt Creator.
- Click Open Project from the Welcome section.
- Open a QML project.
Lets design quickly
When it comes to UI, you obviously wanted to design rather than code.
You can use the Form Editor or the Text Editor of Qt Quick Designer in the Design mode to develop Qt Quick applications. The UI can be easily modified using the Design Tool.
- The QML Types section contains the QML Components that could be simply dragged and dropped into the form editor.
- The Resource section contains the images and other items in the qrc file.
- Imports section contains the modules imported in the qml file. New modules can be added from this section.
The UI changes made here are automatically reflected in the code.
Lets deploy our UI
The location in which the executable must be deployed on the eSOMiMX6 device(s) could be controlled through the .pro file of the project.
- Double click on the project file (.pro) to open it.
- Add the name to be given to the binary under the TARGET section.
- Mention the remote location of the executable under the target.path section.
- Add the targets that must be put into the remote location under the INSTALLS section.Now the QML application will be running on eSOMiMX6 display.
Please visit our developer website to download the source and detailed instructions to run a the stopwatch application on eSOMiMX6 devices.
For further assistance and queries get in touch with sales@e-consystems.com
Dharmalingam K