Creating advanced GUI for STM32

Homepage Creating advanced GUI for STM32

Our Experience with Qt for MCUs

Qt has long been known as one of the premier toolkits for developing graphical user interfaces (GUIs) and cross-platform applications. Dozens of the best-known consumer and industry applications are built with Qt including Google Earth, Adobe Photoshop Elements, VLC Media Player, and the secure messaging application Telegram.

Qt is equally popular on embedded systems too, and recently Witekio took on the challenge of using Qt to develop a GUI for a contactless sales portal of a coffee machine, running on a microcontroller unit (MCU).

So, did we manage to create a modern embedded UI on an MCU, despite its limited capabilities?

We set out to prove that the answer is Yes – read on!

Qt for MCUs: Starting guide

Before getting down to the specifics of this Witekio project, let me go over the basics of Qt for MCU.

As the Qt Company explains, Qt for MCUs is a complete graphics framework and toolkit with everything you need to design, develop, and deploy GUIs on MCUs. You can use the same tools that you are used to, to create a graphical application on a bara-metal or on a real-time operating system. It’s versatile, lightweight, and fully documented, making it easy for you to build GUIs and applications for microcontrollers in any number of domains.

Long story short, Qt for MCUs supports now GUIs without an operating system

If you have experience using Qt on other platforms, Qt for MCU is familiar and let you use and reuse the same technology and approach for entire product family. If you’re new to Qt, Qt for MCU has a smooth learning curve and is accessible thanks to the tutorials, video walkthroughs, and technical documentation provided by the Qt Company. These resources cover a wide range of use cases and solutions for your project.

Thanks to their low cost, and small size, MCUs can be used in virtually any product where software can make a difference. And because Qt for MCUs can run even on small microcontrollers, the possibilities are almost limitless!

Our discussion here uses Qt for MCU in a way that speaks to every coffee-fueled embedded software developer.

The System Architecture of a Hands-Free Cup of Coffee

The challenge that we took on was to develop a graphical interface to purchase a cup of coffee from a vending machine without the user touching the machine. Proposing a hands-free or contactless shopping experience is important nowadays, and vending machines are a good example of this trend in retail. With the increasing focus on personal hygiene and the increased use of cash alternatives such as contactless and mobile phone payments, it is only natural for a vending machine to support these use cases, and offer the chance to collect a cup of coffee without the need for physical interaction.

So how to design and support this touchless experience?

We started with basic system architecture.

The MCU used is an STM32F769i, and it is the base for our contactless coffee experience. Our goal being to order our coffee from a mobile application, we naturally relied on BLE with an nRF52840 over SPI. This module is responsible for managing the Bluetooth Low Energy (BLE) communication with our mobile application. BLE is the standard for most direct and local device-to-device communication, with low power and resources requirements, and used for the mobile payment.

With the hardware being selected, the next step was focus on the application-level protocol to communicate between the vending machine and the mobile application. Here we used Qt for both the STM32 (Qt for MCU), and the mobile application, to allow code reuse, and faster prototyping.

The communication is relatively straightforward:

  1. The mobile application requests the list of the available drinks from the Qt for MCU application;
  2. The Qt for MCUs application responds with the list of drinks available;
  3. When the user made its decision, the mobile application orders the selected drink;
  4. The Qt for MCU application confirms the order; and,
  5. The Qt for MCU application notifies the mobile application when the drink is ready.

Let’s now look at the implementation of the above solution.

The Coffee Tastes Quite Good

While Qt is a standard and popular framework for Embedded at Witekio, Qt for MCU remains relatively new. And there are still teething problems integrating it on low-power, low-resource microcontrollers.

Developing the mobile application with our team was not an issue. We quickly built a prototype GUI, drawing on our experience with vending machine software and GUIs from our customers’ projects. From their smartphone, users where rapidly able to query the drinks from a vending machine, swipe through choices and select the drink they are in the mood for.

The BLE connectivity and communication was also relatively simple to implement, and rapidly ready. Yet another industry-standard we commonly support at both an application-level and low-level.

Qt for MCUs- Right choice for embedded Microcontrollers ?

Thanks our experience with Qt on STM32 we were able to develop the application for a microcontroller that they set out to, there is a lot to look forward to.. Being one of the industry standard for embedded Graphical User Interfaces, Qt for MCU builds on this strong legacy. If you want more feedback on our experience with this technology, don’t hesitate to contact us.

You might also like...
We Tried Squish: An Automated GUI Testing Tool

We Tried Squish: An Automated GUI Testing Tool

Read more
Adrien Leravat - Embedded & Digital Application Architect
08 April 2021