Thomas Hartmann

Qt Quick Designer – The Coffee Machine

Published Wednesday July 5th, 2017
13 Comments on Qt Quick Designer – The Coffee Machine
Posted in Biz Circuit & Dev Loop, Dev Loop, QtCreator | Tags: , , , ,

With Qt Creator 4.3 released a month ago, coming with cool new features for Qt Quick Designer, we decided it is time to create an example that shows the complete intended workflow for Qt Quick Designer and establishes good practices.

We implemented the UI of a Coffee Machine following the reference design of a professional designer. The designer also provided all graphical assets as PNG images. In the screenshot, you can see the Resource Browser containing all the provided graphical assets. You can use these graphical assets by drag and drop.

coffee-screenshot
The example is the UI of a coffee machine.

The emphasis for this example lies in a clean separation between imperative logic and the purely declarative visual design which improves the collaboration between designers and front-end developers. The separation between the declarative UI and the implementation allows us to create the visual UI using just Qt Quick Designer, while ensuring that the final result is matching the original design.

This way Qt Quick and Qt Quick Designer will maximize productivity and maintainability.

We created a video that gives an overview of the workflow and the structure of the example. Starting with a reference video from the original designer, we model the different screens using states and QML components. Each screen can be created directly in the Qt Quick Designer following the original reference design.

As seen in the video, in the property tabs you can bind properties to JavaScript expressions which allows to model behavior in a convenient way. For example we have the sliders which adjust the different coffee ingredients levels and then we bind the anchor margins of the graphical elements to JavaScript expressions.

We can define expressions controlling the active states, based on when conditions.

The animations and application logic are implemented in a single QML file. We use alias properties to define an interface between individual screens and components. Maintaining and integrating changes to the UI becomes a lot easier this way.

The source code of the example can be found in the Qt examples repository.

Contact us to learn more and discuss your needs in more detail.

Do you like this? Share it
Share on LinkedInGoogle+Share on FacebookTweet about this on Twitter

Posted in Biz Circuit & Dev Loop, Dev Loop, QtCreator | Tags: , , , ,

13 comments

Kathleen Culpepper says:

Definitely true that if you’re knowledgeable on what to look for and willing to dig into the fray of used machines out there, that you can snag a decent set-up for a couple hundred. Sadly, the same is not as true for new machines.

Do you still roast your own espresso beans?

Steve says:

“The emphasis for this example lies in a clean separation between imperative logic and the purely declarative visual design” however the example appears to be focused only on qml front-end: no calls to any embedded machinery that might actually perform the brewing.

As I am coming from a lot of experience with C++ & Widgets, I keep hoping for examples which marry C++ application logic (with properties, signals and slots) and a QML user interface.

Thomas Hartmann Thomas Hartmann says:

The emphasize in this example is more how to split the visual UI from the interaction so that designer and front-end developers can easily cooperate. Connecting the working front-end to C++ is a slightly different topic.
The cleanest solution to attach C++ would be a state machine defined in SCXML.
We will update this example with a simple SCXML state machine.

This would be very similar to our traffic light example: (https://doc.qt.io/qt-5/qtscxml-trafficlight-qml-dynamic-example.html).

A good start how to connect C++ to QML would be this example: https://doc.qt.io/qt-5/qtquickcontrols2-contactlist-example.html
This example shows how to connect a QAbstractListModel from C++ to a Qt Quick application and even how to provide a mockup for the designer.

Providing a more sophisticated example that shows how to connect a complex C++ backend to QML is on our todo list.

TheCodingEric says:

Hi! Nice test case of the IDE!
How does one get the source code ?
Using git, the /coffee/ folder isn’t present at the end of the pull.
Using wget, it downloads only parts of the folder.

Thomas Hartmann Thomas Hartmann says:

You have to make sure to checkout the branch. By default, if you clone the branch is .

Ola says:

How much RAM is taken by that simply app?

Ömer Göktaş says:

I appreciate how Qt Company works hard. Thanks guys!

Jason says:

I think QML needs to be using Flux.

It’s not the binding to C++, that is not hard. It’s keeping the separation of UI from the back end logic that is hard. I’ve never successfully kept the two separate in QML land. Using a ate machine would seem to be the way to avoid this, but the binding of the state machine to the QML UI breaks the SOLID principals.
The UI should be a plug in to the state machine. And in an IOT world, the UI should be available on the web. There is no QML web support, therefore QML falls flat on its face.

Jason says:

When don’t an Expresso machine, the state machine, which is bound to the hardware, is built around the hardware. Those features can never change without a hardware change. Then your UI gets layered in *below* (in a top-down view) or above (in terms of abstraction). You will need two UIs. Over for the local LCD display, and one for the remote web display. QML fails here in 2 ways.
1. You cannot have two UI backends in a Qt app.
2. There is no official QML for web support. You need to hire a different developer with web skills to reimplement evening again.

The proper, modern implementation would be a RESTful SCXML web service, which talks to the hardware while the GL and web UIs would talk to the REST service via websockets. While this should be very doable in theory, the Qt toolkit comes up short.
There should be a way to “compile” the SCXML to a binary, a RESTful service using at least HTTP and preferably websockets. The same tool should generate the client JavaScript for those state machine changes. Finally, you can then start on your UI work. Ideally the QML would have a web runtime. I know 5.10 will have WebGL, maybe that counts, but there are technical issues with that approach.
But the key thing here is a service/UI mapping file. If we assume that QML is maintained my designers and the SCXML is maintained by engineers, then when we change either we get breakage. It’s ok if it’s unavoidable because of hardware changes. But it’s not acceptable to have to maintain the calls in either. We need a file (probably QML, or rendered to) that links up an event to the subscibers. This file (or it’s compiled output) is included in both server and client, and maintained by both designers and engineers.

Jason says:

If we assume left is initiator, and right is reactor:
Server events (engineer maintained)
Server.onBrewStateChanged(params): client.handleBrewStateChanged(params)
Server.onWaterLevelChanged(ml): client.handleWaterLevelChanged(ml)
Server.onOverTemperatureAlarm: null — no UI handler, it’s very visible that this is unhandled but probably should be.
client (designer maintained)
client.onBrewOptionChanged(option):server.onBrewOptionChanged
Client.onDisplayUnitsChanged: null — server don’t care about display units

The thing is, with a few tools SCXML and QML could be revolutionary. But there still is way too much unautomated work to be done. Qt has dragged it’s feet in the webified world, just like Microsoft did with the internet and mobile. I’ve been after platform independent desktop/web apps for a decade now. Lack of support for QML on web is glaring. How can anything be considered cross platform if web is not one of those platforms? We live in a world that is shifting to microservices. And Qt could make it trivial, bit it just hasn’t prioritized the right feature set. What’s more important? Vulkan support (how big is that market?) Or being able to use the same code for web? “Code less create more” was the slogan. But what’s been going into Qt lately aren’t features that allow me to code less or create more. Since Qt 5.4 it’s basically been a yawn for me when I read the release notes. Sufficiently good Android support was the last thing that impacted me, which allowed me to target a new platform.

The just posted http://blog.qt.io/blog/2017/07/07/qt-webgl-streaming-merged/ has a lot of good news though.

Danny says:

I completely agree with you. The problem is this obsession with having ‘one platform to rule them all’. Qt is trying to be everything and it fails whereas the web ecosystem is a combination of tools each with their own strengths a weaknesses.

QtQuick is a way to develop *mobile* apps at a faster, higher level than was possible with Qt alone. But’s it’s still Qt and Qt is at it’s core a legacy desktop framework in which ‘The Web’ is seen as a second class citizen.

Joe says:

Qt Quick will be a great platform for CRM\Iot\Bigdata Dashboard app, if QML supports ORM or SQL for MySQL\Oracle\MSSQL.

Kalileo says:

Nice job! I was looking for such a video for a long time. Showing how the tools are meant to be used is saving us developers from wasting a lot of time to find out exactly that.

Please keep such videos coming.

Commenting closed.

Get started today with Qt Download now