Building Cutting-Edge User Interface with Qt

1. Qualcomm Developer Network Presents
Developing for Industrial IoT with
Embedded Linux OS on DragonBoard™ 410c
by Timesys University
Co-sponsored by Qualcomm Technologies, Inc. and
Arrow Electronics

2. www.timesys.com ©2017 Timesys Corp.
Session 3
Building a Cutting-Edge User Interface with Qt®
Maciej Halasz, Vice President of Technology
Timesys Corporation
Maurice Kalinowski, Principal Software Engineer
Qt Company

3. www.timesys.com ©2017 Timesys Corp.
3 Webinar Series
 Session 1: Introduction to DragonBoard 410 SoC and Starting Development of Your
Embedded Linux based “Industrial Internet of Things” (IIoT) Device
• Setup for designing IIoT products
• How to assemble and deploy initial BSP
 Session 2: Application Development for Embedded Linux
• Application development environment setup
• How to reflect product requirements in the BSP
• Communication in the IIoT system
 Session 3: Building a Cutting-Edge User Interface with Qt®
• Developing modern, rich UIs for factory terminals
 Session 4: Embedded Products Security
• Designing security-rich devices

4. www.timesys.com ©2017 Timesys Corp.
4 Session 2 recap
 What we did
• Reflected API requirements in OpenEmbedded RPB Linux BSP
• Talked about BSP customizations
– New meta-layer
– New recipe
– Modified image
 Application Development
• SDK setup on a host
• Used IDE to develop/deploy/debug code on DragonBoard 410c
• We looked briefly at a BLE protocol
• Programmed an application that received info from a sensor board
– Temperature, Luminosity, FreeFall
 Key takeaways
• It’s very straight forward to develop C/C++ application code for the DragonBoard 410c
• IDEs accelerate development process
• When working with Linaro™ BSP, customers can leverage meta layer library on OpenEmbedded
https://layers.openembedded.org

5. www.timesys.com ©2017 Timesys Corp.
5 Session 3 — Agenda
 Sharing information in an IoT system
 Introduction to the Qt Software
 Integrating Qt in the OpenEmbedded RPB Linux BSP
 The Qt Software structure
• Qt for Application Development
• Qt for Device Creation
 Qt Development Environment setup
 Writing first Qt application
• Programing language options
 Qt for Automation
 Licensing considerations
 Q & A
CLICK HERE TO VIEW WEBINAR RECORDING

6. www.timesys.com ©2017 Timesys Corp.
6
How to share/publish information?

7. www.timesys.com ©2017 Timesys Corp.
7 Publishing information
 Why need for sharing information?
• System can have multiple Hubs collecting data
 Information may be needed to make a wider scope decision
HUB/Concentrator
Autonomous Decision
Humidity &
Temperature
Accelerometer
& Gyroscope
Luminosity &
Color Detection
Pressure
Sensing
Magnetic
Sensor
HUB/Concentrator
Autonomous Decision
Humidity &
Temperature
Accelerometer
& Gyroscope
Luminosity &
Color Detection
Pressure
Sensing
Magnetic
Sensor

8. www.timesys.com ©2017 Timesys Corp.
8 Publishing, energy efficient protocol
 MQTT is a lightweight publish/subscribe protocol
• reliable bi-directional message delivery.
 Invented by Andy Stanford-Clark (IBM®) and Arlen Nipper in 1999
 Why is MQTT gaining popularity?
• Runs on top of TCP/IP
– Both client and server (aka broker) leverage TCP/IP stack
• Can handle high volumes of data even in low bandwidth networks
• Small code footprint
• Event oriented.
• Implementation of the protocol provides publish/subscribe and also recovery
• Wide use
– POS
– Asset tracking
– Automation
– more

9. www.timesys.com ©2017 Timesys Corp.
9 MQTT mechanism
 Implements publish <-> subscribe mechanism
• Server – Broker – has subscribed clients connected at all time
• Clients can be both subscribers and publishers
• A client sends a message (publisher role)
• One or more clients can receive the posted message (subscriber role)
• MQTT protocol uses “topics” to determine which message is routed to which client
– Client must be subscribed to a “topic”
• A topic is a “hierarchical structured string”
Temperature
Station 1
57°C
Subscribe to topic
Temperature
Station 1
MQTT
Broker
Publish to topic
Temperature
Station 1

10. www.timesys.com ©2017 Timesys Corp.
10 MQTT Software
 Client
• Small code base API
• Available in C, C++, Go, Java®, JavaScript™
 Broker
• Handles authorization of clients
• Scalable
• Easy to integrate
• Several options available
– Mosquitto
 Recipe available in meta-oe
 Broker can be installed on
• HUB
– Smart sensors
• Cloud Server
– Messages submitted from HUBs

11. www.timesys.com ©2017 Timesys Corp.
11
What is Qt?

12. www.timesys.com ©2017 Timesys Corp.
12 Quick introduction
 Qt is a cross-platform application framework
• Supports development of applications for desktop, embedded (including headless) and mobile
 Qt is versatile and feature rich
• Qt 5.7, 5.9 includes Qt 3D, Qt Quick UI Controls 2.0 for embedded and mobile, modern C++ 11 support,
graphics improvements for embedded (EGLFS and Wayland), and HTML5/hybrid user interfaces with the Qt
WebEngine module.
– https://www.qt.io/qt5-7/
• New licensing options – 5.6 LTS with LGPLv2; 5.7, 5.9 with commercial, LGPLv3 or GPLv3
– http://doc.qt.io/qt-5/licensing.html
– http://doc.qt.io/qt-5/licensing.html#licenses-used-in-qt
– http://doc.qt.io/qt-5/qtwebengine-licensing.html
 The features and different licensing options available with Qt 5.7/5.9 creates many questions in
developers’ minds such as:
• What Qt modules (Essentials, Qt Quick, Add-Ons, Value-Add, …) do I need for my application development?
• How do I install Qt in my BSP?
• Should I choose Qt 5.6 with LGPLv2, or should I first develop with Qt 5.9 GPL, and based on the
requirements, choose GPL or commercial or LGPLv3?
• Which package should I start with?
– Boot to Qt, Qt for Application Development, Qt for Device Creation

13. www.timesys.com ©2017 Timesys Corp.
13
Adding Qt Software to the
OpenEmbedded RPB BSP for the DragonBoard 410c

14. www.timesys.com ©2017 Timesys Corp.
14 Qt in OpenEmbedded RPB
 Qt software availability
• Recipes are already present in the OpenEmbedded RPB BSP
– meta-qt5 fetched with the RPB BSP
• BSP image definition
– Part of meta-rpb
– Contains qt-5.7
– Demos
 Cinematic experience
 Standard QtDemos
• Options to build in desktop environment
– Wayland, X11
 Possible modifications
• Newer Qt version
• SDK with Qt libraries for application development

15. www.timesys.com ©2017 Timesys Corp.
15 OpenEmbedded RPB customizations
 Modifications
• Extended further the rpb-qt5-image
recipe
– custom-qt5-image.bb
– Added X11 package groups
– Sato Desktop
 Build
• Custom image
• QT SDK
• Installed SDK under /opt/rpb-qt5
$ bitbake custom-qt5-image
$ bitbake meta-toolchain-qt5

16. www.timesys.com ©2017 Timesys Corp.
16 LAB 1 — Getting ready for the Qt Development
 Generate deployment images with Qt5
 Generate Qt SDK
 Install Qt SDK on a host PC
 Download Qt software
• IDE – QtCreator
• Qt5 software stack

17. Qt
and Qt for Automation

18. The Qt Company at a Glance
32,4M€
2016 Revenue
20%
2016 YoY Growth
21years company
history
1995
>250
Professionals
in ten countries
>8000
Customers
>70
Industries
>1M
Developers
2006 2008 2011 2012 2015 2016
Trolltech IPO
to Oslo exchange
First public version
of Qt released by
Trolltech (Norway)
Trolltech
acquired by Nokia
Digia acquired Qt
Commercial licensing
business from Nokia
Digia acquired
”All rights to Qt”
from Nokia
”The Qt Company”
becomes its own entity,
a subsidiary of Digia
Qt Group Plc demerger from
Digia, listed independently in
NASDAQ Helsinki

19. The Leading C++ Cross-Platform Framework
19
Cross-Platform
Class Library
One Technology for All
Platforms
Integrated
Development
Tools
Shorter Time-to-Market
Cross-Platform
IDE, Qt Creator
Productive development
environment

20. 20
Qt is Used for…
Application
Development
on Desktop,
Mobile and Embedded
Creating
Powerful Devices
Device GUIs,
Ecosystems and whole SDKs

21. Target All Your End Users with One
Technology
Embedded:
• Embedded Linux, Windows
Embedded, Windows 10 IoT
• RTOS: QNX, VxWorks, INTEGRITY
Desktop:
• Windows, UWP, Linux, Mac OS X
• Solaris, Enterprise UNIX
Mobile:
• Android, iOS, Windows 10 Mobile,
Blackberry, Jolla
21
My Software
Service

22. Qt for Application Development Developer Offering
22
Essentials
Add-Ons Development Tools
Qt Creator
Cross-platform IDE
Qt Designer
GUI Designer
Qt Linquist
I18N Toolset
Qt Assistant
Documentation Tool
moc, uic, rcc
Build Tools
Multimedia
Multimedia
Widgets
Network QML
Quick
Quick Controls
SQL Test
Quick Layouts
Active Qt
Concurrent
D-Bus
Graphical Effects
Image Formats
Qt 3D
Print Support
WebChannelSVG
WebSockets
XML & XML
Patterns
WebEngine
Widgets
Core
GUI
Bluetooth
NFC
Positioning Serial PortAndroid Extras
Location
X11, Windows,
Mac Extras
Sensors
Data VisualizationCharts Purchasing
Desktop & mobile platforms
Windows Linux DesktopMac Android iOS WinRT
Qt Quick 2D
renderer
Quick Dialogs
qmake
Cross-platform
Build Tool
Canvas 3D
Qt Quick
Compiler
Qt Quick Profiler
Autotest integration
CPU usage analyzer
GPU Profiler
Clang static analyzer

23. Qt for Device Creation Developer Offering
6 December 2017 Qt Product Structure and Licensing23
Qt Toolkit
Embedded Platforms
QNX WEC/W10IoTeLinux
Qt Essentials
Development
tools
VxWorks
Embedded tooling
Build your own stack
Device emulator
Remote debugging
Embedded solutions
Virtual keyboard
Qt Quick 2D Renderer
Utils, Wifi, etc.
Software Stack
Boot to Qt stack
OTA solution
Qt Add-ons
New Qt Add-ons
(Charts, Data Visualization)

24. Industry Automation
Smart Factory
Service Automation
Customer Touchpoint
Building Automation
Control Units/Gateways
Qt for Automation – The PlaygroundWhere
Design/Development Creation/Deployment Distribution/Maintenance
Enablement Flexibility Opportunities
Interoperability Pressure Evolving Use-Cases
Business
Model Transformation
DrivingFactors
Growing UX Expectations
SW-Development
Bandwidth & Expertise
Increasing Number
of Devices

25. Because of Qt Serial Bus API it is simpler and easier to
integrate devices and peripherals using industrial serial
buses and protocols.
Control and monitor your industrial peripherals directly from Qt
APIs
› CAN Bus – Widely used in Automotive and Medical
› ModBus – Common in Industrial Automation
What’s new in Qt 5.9 ?
› Added CAN FD Bitrate Switch (BRS) and Error State Indicator (ESI) flags to
QCanBusFrame
› Added QCanBusDeviceInfo for information about available CAN interfaces
› Added plugin to support SYS-TEC electronic CAN adapters on Windows
6 December 201725
Qt SerialBus
Meet Qt 5.9

26. › Protocol level 3.1 and 4 (resp. 3.1.1)
› All QoS levels
› Wildcards
› Authentication
› SSL connections
› Last Will support
› Available under GPL v3
6 December 2017 Qt Automotive Suite [CONFIDENTIAL]26
Qt MQTT - Lightweight, Reliable, Secure
MQTT

27. Qt MQTT
› MQTT Client implementation, no broker / server / cloud solution
› Focus on
› Device Creation
› Telemetry Applications
› Fully specification compliant
› MQTT 3.1
› MQTT 3.1.1 (resp 4)
› No external dependencies
› Runs on all supported Qt platforms
27
Broker
(Device)
Client 2 Client 3Client 1

28. Hands On / Demo - Time
28

29. › First Version: All functionalities
to build a client application
(discover servers, retrieve
device info, access devices)
› Next: Build KNX Servers
› Available under GPL v3
6 December 2017 Qt Automotive Suite [CONFIDENTIAL]29
Qt KNX - Home Automation Made Easy

30. 6 December 2017 Qt Automotive Suite [CONFIDENTIAL]30
Access to Headless Devices w/ VNC and WebGL
VNC Server WebGL Streaming (5.10)
Use-Case Cloning/Mirroring Exclusively Streaming
Information Sent Compressed Images GL Drawing calls
Client
Any VNC Client (even
Browser)
Browser only
Quality Lossy Lossless
Content Rendering Server Client/Browser
User Single User Multi-User
Optimization to
Highly Dynamic Image
Based Content
Native Qt Applications

31. Qt for Automation
Qt for
Application
Development
Qt for Device
Creation
5.9.x
Qt for Device
Creation
5.10
Add-on
Qt for
Automation
1.0
(2017)
Add-on
Qt for
Automation
2.0
(2018)
Qt SerialBus     
Qt VNC     
Qt WebGL Streaming     
OPC/UA     +
QtMqtt (NEW)    + +
QtKNX (NEW)    + +
Industry Services (NEW)    + +

32. www.timesys.com ©2017 Timesys Corp.
32
Questions?
Source code, deployment images and SDK can be downloaded from
linuxlink.timesys.com
developer.qualcomm.com 96boards.org arrow.com timesys.com

33. Thank you
All data and information contained in or disclosed by this document is confidential and proprietary information of Qualcomm Technologies, Inc. and/or its affiliated
companies and all rights therein are expressly reserved. By accepting this material the recipient agrees that this material and the information contained therein is to
be held in confidence and in trust and will not be used, copied, reproduced in whole or in part, nor its contents revealed in any manner to others without the express
written permission of Qualcomm Technologies, Inc. Nothing in these materials is an offer to sell any of the components or devices referenced herein.
©2017 Qualcomm Technologies, Inc. and/or its affiliated companies. All Rights Reserved.
Qualcomm and DragonBoard are trademarks of Qualcomm Incorporated, registered in the United States and other countries. Other products and brand names
may be trademarks or registered trademarks of their respective owners.
References in this presentation to “Qualcomm” may mean Qualcomm Incorporated, Qualcomm Technologies, Inc., and/or other subsidiaries or business units within
the Qualcomm corporate structure, as applicable. Qualcomm Incorporated includes Qualcomm’s licensing business, QTL, and the vast majority of its patent
portfolio. Qualcomm Technologies, Inc., a wholly-owned subsidiary of Qualcomm Incorporated, operates, along with its subsidiaries, substantially all of Qualcomm’s
engineering, research and development functions, and substantially all of its product and services businesses, including its semiconductor business, QCT.
Follow us on:
For more information, visit us at:
www.qualcomm.com & www.qualcomm.com/blog