Graphical User Interface: Qt or Altia?

Homepage Graphical User Interface: Qt or Altia?

Embedded systems are becoming increasingly complex over time and are gaining new functionalities. Among those Graphical User Interface becomes more and more important.

It is then necessary to provide a synthetic overview of all relevant information to the final user. Moreover, since the “iPhone” revolution, customers are now expecting ergonomic and well-designed Human Machine Interfaces (HMI) for mass-market electronic devices (and even in the industrial market too).  As an example, car manufacturers are continuously increasing the automotive display size and resolution, creating the need for more advanced software Graphical User Interface (GUI) than traditional segment LCDs used for decades.

What would you choose for your Graphical User Interface: Qt or Altia?

Qt, a framework to build your system

Qt is a framework for developing cross-platform applications. To simplify, Qt can be divided into two parts:

C++An object-oriented API developed in C++. It contains several components that allow for example easy access to the network, as well as several graphic components for graphical interfaces.

 

 

qml_creator_icon512-128x128

Qt Quick, which allows you to create a fluid and dynamic graphical user interface, by including a declarative scripting language, QML. The syntax of this language is somehow similar to JavaScript.

Altia, a toolbox for developing your UI

Altia is a set of software tools mainly dedicated to the creation of graphical user interfaces. It consists of three main components.

adobe_photoshopAltia PhotoProto is a PhotoShop add-on that converts a PhotoShop project into an interactive interface prototype, which can then be imported into Altia Design.

 

 

package_graphics (1)Altia Design is the main tool in which the designer creates his graphic interface (from scratch or the one that came from PhotoProto). It defines the animations as well as the states associated with each graphic object in a few clicks. It is also possible to test the interface using the built-in programming language or by using an API to communicate with external code.

 

 

cpuAltia DeepScreen can convert the graphic model to fully compliant ANSI C source code, ready to be deployed on the target.

What’s the difference for your Graphical User Interface (GUI)?

There is a main difference between Altia and Qt GUI, which can be found in the tool concept itself. Qt is an application framework that goes beyond the graphical aspects while Altia is a pure GUI tool. In Qt, you have a lot of C++ classes that help you get a cross-platform application that can be deployed on Windows or Linux for example. In Altia, you are more system-dependent, it does not contain a network helper, it will be up to you to write code to access the network or use a standalone library, etc.

Another difference comes with the Graphical User Interface part of each tool. In Altia, you can design your animations, and transitions really easily, using Altia Design and your mouse. For example, you just have to select an item in the tool, define its initial state (say state 0), and move this item with the mouse to its final position (say state 100), and Altia will interpolate automatically all the needed intermediate states. In Qt with Qt Quick, you need to use QML code to define your animations and all corresponding transitions.

Both tools are more complex than what is briefly described here, but to summarize, in a typical Model View Controller architecture, Altia can be seen as the View, whereas Qt is a Model View.

Choose your Graphical User Interface: an automotive digital dashboard experience

My goal is not to say one is better than the other, but I had the opportunity to work with both technologies for the creation of a Graphical User Interface (GUI) for an automotive digital dashboard.

example of a graphical user interface developed with Altia for an automotive dashboard

On the first dashboard, using Altia was a customer requirement. Because Altia is the “View”, the choice of the Model and Controller can basically be anything. In our case, it was C code generated from a MATLAB / Simulink model that communicates directly with Altia using its API. This architecture is really modular, as two teams can work separately, after a common interface was described.

example of a graphical user interface developed with Qt for an automotive dashboard

The second dashboard was made with Qt Quick, by using C++ and QML. Like the first project, this is also a modular architecture, the designer can work on the QML files while the software team can write the C++ part.

If today I had to make an automotive digital dashboard and choose between Qt and Altia, on the pure graphics side, I would go with Altia. This tool is really powerful for creating a GUI that doesn’t change a lot and has simple animations. If I had to make a more “dynamic” application, with a lot of custom animations, I would choose Qt as QML is really nice and flexible to make specific animations.

So both technologies are great, the choice for your own Graphical User Interface will depend on your objectives.

Free tip: how to rotate a needle on your GUI?

Qt: with your keyboard

Rectangle {
    width: 100; height: 100
    color: "blue"
    transform: Rotation { origin.x: 25 ; origin.y: 25; angle: 45}
}

 

With Qt, elements that can be transformed contain a property named « transform ». Add a « Rotation » to it and define your rotation origin and angle easily. Depending on your needle size, you may need to define the rotation point outside of your rectangle.

Here « angle » is fixed, but it can be a variable linked to your model/controller.

Altia: with your mouse

As Altia is a graphical tool, you cannot set precisely the rotation axis within the code. You can only choose a predefined axis between the edges, the corners or the center of your image as indicated with the squares below:

alta with your mouse

A little trick in order to set a custom axis (outside the image in our case) is to put a second needle at the opposite of the first one, define your movement using the two assembled needles and then delete the second one. Altia will keep the animation of the first one.

The animation below summarizes the steps.

Altia_rotate

You might also like...
ACOEM: Smart Data Collector App Architecture And Development

ACOEM: Smart Data Collector App Architecture And Development

Read more
Baptiste Merle - Software Engineer
21 July 2017