Lessons Learned from Building 100+ C++/Qt/QML Devices

Lessons Learned
from Building 100+
C++/Qt/QML Devices
Peter Winston,CEO, Integrated Computer Solutions

Peter Winston, Chief Executive Officer
Peter founded Integrated Computer
Solutions, Inc. (ICS)in 1987. Through his
leadership and innovation, the company
has experienced continued growth,
expanded across the globe and today is
focused on helping clients design and
deliver powerful applications on
touchscreen and embedded technology.
About ICS

About ICS
> Inventing the future
• ICS helps companies design, develop, and
productize touch, gesture and voice-enabled
solutionsthat dramatically improve customer
experience
> Qt Software Development Services & Training
• Our average developer has 15 years of Qt experience
> Full Suite of User Experience (UX) Design Services
• Design studio, Boston UX

Our Markets
Automotive
Industrial Consumer
Aerospace & DefenseMedical & Life Sciences
Commercial Kitchen

Why Projects Fail
And how to set them up to succeed

Why It’s Hard to Build a Modern Device

Elements of Modern Devices
> Graphic design
> Standard controls
> Interactive controls
> Animation
> Real Time
> Complex device control
> Sensors and actuators

> Settings
> Wifi, Bluetooth, NFC, GPS
> On screen keyboard
> Charts
> Video
> Voice
> Sound

> Administrative console
> Settings
> Alarms
> Error logging
> Security
> Over the air updates
> Usage analytics

> Websockets- web pages, PDFs
> 2nd screen/mobile/web interface
> Indoor location sensors
> Maps and navigation
> Internal monitoring

> Users- who expect a great interface
> And things should just work
> Back
> Undo
> Preferences

While….
> Running great on cheap hardware

Project Principles
> Find risk early
> Use UX to test and nail down features
> Build simple prototypes for most difficult parts
> Use experienced staff on each component
> Test throughout
> Reuse software wherever possible

Qt UI Principles
> Separate UI from backend of application
• Never put application logic into QML component
• Keep flexibility between layers
> More C++ / Less QML
> Let UX lead, and implement the details
• Pixel perfect, with sound, motion, etc.

Layered Architecture for Qt HMI’s
Name Me
Name Me
Name Me

Layered Software
Device Control and I/O
User interface (C++)
GUI presentation (QML)
Platform & device drivers
Messaging
Framework
&
Rules engine Data
Application
logic
call()
Signal()
> Make layers testable
> State machine for navigation and event
dispatch — flexible yet testable
> Make components reusable

Device Architecture
Messaging
Framework
&
Rules engine Data
Application
logic
Device Control
Display Screen

Device Architecture
Device Control
Display Screen
Messaging
Framework
&
Rules engine Data
Application
logic

Device Architecture
Messaging
Framework
&
Rules engine Data
Application
logic
Display Screen
Over-the-Air Updates
Analytics
Commerce
Support
Data Storage
Voice Control
Mobile interface
Secure
Access
Device Control

Device Architecture
Messaging
Framework
&
Rules engine Data
Application
logic
Device Control
Display Screen
Over-the-Air Updates
Analytics
Commerce
Support
Data Storage
Voice Control
Mobile interface
Secure
Access

Example Project
> Is there a typical HMI?

Platform and Dev Environment
> Platform
> Raspberry Pi 4- 2 Gig Ram
> 10” touchscreen
> OS- up to ICS (Raspbian or Yocto)
> Toolkit - up to ICS Qt/QML (OpenGL?)

Electrical Design
Custom RespiraWorks PCB
Blower
Display +
Alarms
Fuse
12V IN
Pressure
Flow (dP)
Flow (dP)
5V Supply
Humidifier
Sensing
tubes
Flashing
Light/
Alarm
Blower Driver
12V Power
5V Power
Signal
Voltage Monitor
FILTERING
Outlet
Solenoid
Heater Switch
Solenoid Switch
STM-32
Raspberry Pi

> Identify requirements
UX Design

Wireframes Continued
7/23/2020

UX Process
Requirements
User Stories
Wireframes
Graphic design
Flow

UX→ UI
Requirements
User Stories
Wireframes
Graphic design
Flow
User interface
Navigation

The UI Simulator
> Test UX and UI

ICS UI Simulator Architecture
Hardware Software
Update
Display User interface (C++)
Non-target hardware
Web/assembly
Framework to support
navigation, respirator state,
and sample data
{
UI Simulator

UI Simulator
Allows control and display of all parts of the UI without a working device

Alarm Settings- Old vs New
6/15/2020 8/13/2020

Ventilator Settings - Drawer
Collapsed Expanded

The Wave Form
> Identify and move risk forward

The Wave Form- Detail
ProjectRed main screen 8/13/2020
> How fast?
> Real time?
> Overwrite or scroll?
> Signal processing?
> QML, OpenGL, or GPU
odd

> Plan
> Start early
> Test on target HW

Message Driven GUI
> Insulates UI from changes made to MCU interface
• Using“Google Protocol Buffers”framework
- Send messages to MCU to update parameters
- Query MCU for response and update GUI accordingly

Integrated Computer Solutions Inc. www.ics.com
Data connector
Connects QSerialPort data with Qt properties
int tidalVolume
int Peep
int pPeak
int mVI
int Rate
int vti
Qt Signals trigger
screen updated
Data Connector
MCU
Serial data Update every 30ms
everys

Integrated Computer Solutions Inc. www.ics.com
UI - Backend Interface
“GUIMessages” object methods
getConfigurationCmd (query MCU for GUI configuration file)
startTestCmd (request MCU to start test procedure)
getTestStatusCmd (query MCU for tests results)
runFunctionCmd (request MCU to run a function)

Device Simulator
> Unit test the HMI

Plugins Based Backend
> Backend split into two plugins:
• Production code backend that connects to MCU hardware
• Demo backend for development powered by simulator
Allows for fast and easy switch between development and
production code. Share the sameinterface.

Device Simulator
Device simulator stands in for
the MCU, sending and
receiving simulated data
Enables testing of edge cases
and error conditions
In this case it was playback of
recorded data
Testing communications API,
waveform and alerts,
conditions

ICS Device Architecture
Hardware Software
Update
Display
Trigger
Action
Application
logic
Non-target platform
Data
Rules
engine &
Framework
Device Simulator
Replaces hardware I/O

ICS Advantage
> Using layers forces each layer to be independent of the others, which in
turn lets us work in parallel to bring the schedule in.
> Doing many projects this way creates a standard process, toolchain and a
framework which facilities the layers and reusable components.
> This in turn delivers more higher quality projects and enables us to surge
on project when required.

Recap
> Identify risk early
> Use UX to define requirements
> Build a UI prototype and test it with customers
> Build in layers and build up to the application
> Get the hard part working early
> Create components that are both testable and reusable
> Be prepared to surge, or to limit scope

How Can We Help You?
Deliver the best Qt applications for touch, embedded and
desktop with ICS
> New Qt projects benefit from our proven process
> Existing projects finish faster with our Qt expertise
www.ics.com• www.bostonux.com

Questions or Comments
> peter.winston@ics.com
> https://www.linkedin.com/in/peterwinston/

Lessons Learned from Building 100+ C++/Qt/QML Devices

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Lessons Learned from Building 100+ C++/Qt/QML Devices

Similar to Lessons Learned from Building 100+ C++/Qt/QML Devices (20)

More from ICS

More from ICS (20)

Recently uploaded

Recently uploaded (20)

Lessons Learned from Building 100+ C++/Qt/QML Devices