Microcontrollers, often referred to as MCUs, are used in a growing array of systems and devices, including vehicles, robots, medical devices, industrial automation and home appliances. MCU hardware is introducing touchscreens to more devices with great low-cost electronics. But building rich graphical user interfaces on MCUs can be challenging, especially when given limited development time and resources. This webinar is for software teams considering to develop and design UIs for MCUs. We will cover: User experience tips in an MCU world Visual design tricks to allow you to optimize early Software development in Qt for MCUs and how to make it all reality From UX designers to software developers, everyone will learn some tricks to avoid pitfalls that will slow your product development.

1. Integrated Computer Solutions Inc.
Improving User Experience with Ubiquitous QuickBoot
Jeff Tranter, ICS
Andrew McNaughton, Ubiquitous AI

2. Integrated Computer Solutions Inc.
Harrison Donahue
2
Harrison is a Business Development Manager for
The Qt Company focused on the growth and
development of Qt for MCUs.
He’s spent the last 6 years developing IoT products
for consumer markets, focused on home
automation, energy awareness and connected
security.
He holds a Bachelor’s in Electrical Engineering from
the University of Massachusetts - Lowell

3. Integrated Computer Solutions Inc.
Matthew Ellis
3
Matthew Ellis is a Senior Software Architect
at ICS.
For the last decade he has been bringing
customers' UX visions into reality across
multiple industries.
Matthew holds a Bachelor of Electrical
Engineering from the University of Victoria.

4. Integrated Computer Solutions Inc. 4

5. Integrated Computer Solutions Inc. 5

6. Integrated Computer Solutions Inc. 6
The Qt Framework
What’s Inside...

7. Integrated Computer Solutions Inc.
Ultimate Performance. Tiny Footprint.
Qt for MCUs
›Declarative UI and OOP – the best of both worlds
›Re-use and deploy same QML based UI while implementing Application logic in
standard C/C++
›Ultimate Performance. Tiny Footprint.
›A new rendering engine uses HW 2D accelerators to achieve good graphical
performance. The runtime itself has a very small footprint (starting from ~80KB)
›Qt supports a wide range of platforms
›MCUs from ST, NXP, Rensas, Cypress/Infineon, Xilinx UltraScale+, Espressif,
Nordic Semi
›Bare Metal or FreeRTOS (on selected MCUs)
7

8. Integrated Computer Solutions Inc.
The Qt Advantage
8

9. Integrated Computer Solutions Inc. 9
›Variety of libraries for quick
implementation
›QtQuick API facilitates code re-use
›Large developer base
›Accelerated time-to-market puts you
ahead of schedule and eases time lost
to unexpected changes
›Platform agnostic means never
starting from scratch

10. Integrated Computer Solutions Inc.
About ICS and Boston UX
Design-Driven Development
10
ICS’ design studio
specializes in intuitive
touchscreen and
multimodal interfaces for
high-impact embedded and
connected devices.
Established in 1987, ICS provides expert
software development, UX design and
related product development services across
many high-performance industries from
medical to manufacturing, helping our
customers develop their products on a
variety of technologies. ICS and Boston UX
are headquartered in Waltham, Mass. with
offices in California, Canada and Europe.

11. Integrated Computer Solutions Inc.
● Low cost of hardware
● Competitors all have a touch screen
● Need to differentiate product line
11
Why are you looking to develop a GUI on an MCU?

12. Integrated Computer Solutions Inc.
User Experience
Have you given thought on how the customer will use the
device?
12

13. Integrated Computer Solutions Inc. 13
Development process
UX Visual
Design
Software
Dev

14. Integrated Computer Solutions Inc.
UX Design
● Understand the task(s) the user is trying to
accomplish with the device
● How the interface will allow the user to
accomplish the task
User experience design is the foundation of a
good product
14

15. Integrated Computer Solutions Inc.
New to User Experience design?
Recommended Reading
15

16. Integrated Computer Solutions Inc.
User Experience for MCUs
● Device location
● Smaller screen sizes and resolutions
● Existing product
● Performance
16

17. Integrated Computer Solutions Inc.
Product Ecosystem
● Companion Applications
● Web application
● Cloud integration
17

18. Integrated Computer Solutions Inc.
Use-case
18
Start/Stop
350 F 350 F
Start Stop
Start/Stop
Units
Time
Support
Units
Time
Support
Reset
Main
Screen
Menu
Screen

19. Integrated Computer Solutions Inc.
UX best practices
● Share design concepts early with engineering
● Create low-fidelity prototypes of concern areas
● Get prototypes in front of users early
19

20. Integrated Computer Solutions Inc.
Visual design meets hardware constraints
● Flash (storage)
● Ram
● Performance
20

21. Integrated Computer Solutions Inc.
Visual design: collapse images or seperate
21

22. Integrated Computer Solutions Inc.
Visual Design: Removing transparency
22
Remove Transparency (alpha channel)
For background images or opaque
images

23. Integrated Computer Solutions Inc.
Visual Design: Blurs!
23

24. Integrated Computer Solutions Inc.
Visual Design: 16 bit display considerations
24
Gradients (Color Banding)
● Avoid gradients
● Apply gaussian noise filter
Note: Hardware dithering may be
available, but these techniques may
be desired for performance

25. Integrated Computer Solutions Inc.
Visual Design-best practices
● Understanding key element of design
● Prioritize what is important in case changes are need due to engineering
25

26. Integrated Computer Solutions Inc.
Development
● Images handling
● Fonts
26

27. Integrated Computer Solutions Inc.
Images
Native vs decompressed
● Compressed images save flash space but use ram
● Uncompressed use more flash but saves RAM
CMake:
and/or per file basis:
27
set_source_files_properties(background.png PROPERTIES QUL_COMPRESSION ON)
qul_add_resource(myapp FILES spinner.png background.png)
set(QUL_DEFAULT_COMPRESSION ON)

28. Integrated Computer Solutions Inc.
Images
Copy to RAM control
● Never
● On Demand
● Start up
CMake:
set_source_files_properties(background.png PROPERTIES QUL_COMPRESSION ON)
qul_add_resource(myapp FILES spinner.png background.png)
28
set(QUL_DEFAULT_COPY_TO_RAM "OnDemand")
set_source_files_properties(background.png PROPERTIES QUL_COPY_TO_RAM
“OnStartup”)
qul_add_resource(myapp FILES spinner.png background.png)

29. Integrated Computer Solutions Inc.
Optimize for rotation or scaling
Two compiler hints for optimizations.
29
set_source_files_properties(images/my_image.png
PROPERTIES QUL_OPTIMIZE_FOR_ROTATION ON)
set_source_files_properties(images/my_image.png
PROPERTIES QUL_OPTIMIZE_FOR_SCALING ON)

30. Integrated Computer Solutions Inc.
Fonts
30
● Build-time and low-overhead runtime rasterization
● Ram Caching with Optional Cache Priming for faster application boot-up
● Two types of font hinting
● Several font types supported - .TTF, .TTC, .PFA, .PFB, .OTF, CCC Compressed, and Fontmaps
● Complex Font Layout (CTL) - bidirectional and context sensitive (Arabic script)
● Dynamic Text supported
● Dynamic Font properties in QML

31. Integrated Computer Solutions Inc.
Hardware layers
● Reduce memory footprint and CPU or
GPU utilization
● Explicitly divide your application by
component “layer”
● Set the performance (FPS) and
color-depth per component.
● Load static background images
directly from Flash minimizing
framebuffer size in RAM
● Update areas where you need the
smoothest performance
● Reduce bits per pixel and shrink
framebuffer where minimal colors are
needed.
31

32. Integrated Computer Solutions Inc.
Thank you!
32
Any questions?