Application & connectivity

Graphical User Interface : Qt or Altia ?

Homepage Graphical User Interface : Qt or Altia ?

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 really ergonomic and well-designed Human Machine Interfaces (HMI) for mass-market electronic devices (and in fact even in the industrial market too).  As an example, car manufacturers are continuously increasing the automotive display size and resolution, creating the need to more advanced software Graphical User Interface (GUI) than traditional segment LCD displays as used for decades.

 

Qt, a framework to build your system

Qt is a framework for developing cross-platform applications. To simplify, Qt can be divided in 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-128x128Qt Quick, which allows you to create 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 interface. 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?

There is a main difference between Qt and Altia, which can be found in the tool concept by itself. Qt is an application framework which 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 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, 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), 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.

Make a choice! A feedback from 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 an automotive digital dashboard.

cluster altia inc

Example from www.altia.com

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 communicate directly with Altia using its API. This architecture is really modular, as two teams can work separately, after a common interface was described.

cluster Qt

Example from www.qt.io

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 to choose between Qt and Altia, on the pure graphics side, I would go with Altia. This tool is really powerful to create 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, choice will depend on your objectives.

Tips corner: how to rotate a needle?

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

Want to read more about Qt/Altia? Read our Qt Case study for ACOEM

Baptiste Merle - Software Engineer
21 July 2017