SLIDE 1
Accessing Middleware from Qt, QML or HTML5
SLIDE 2 Middleware Access from Qt, QML, HTML5 Eva Brucherseifer 14.11.2012 2/33
basysKom... introducing ourselves
l Embedded Software Engineering
— Partner for the development of innovative quality products
l Expertise in...
— Embedded R&D — Embedded architecture design, middleware, HMI — Open source standards & Linux stack
l Located in Germany, Darmstadt + Nürnberg l Our Offering:
— consulting
- n strategic and operational selection and architecture of
embedded technology and development processes
— solution delivery
R&D including delivery of full components or services requiring specialist knowhow
SLIDE 3 Middleware Access from Qt, QML, HTML5 3
The new digital lifestyle is changing user demand... This affects the software stack
I High demand for new digital lifestyle features in HMI I Head unit needs to interact with other devices
–
Smartphone
–
Cloud
I Software features as a business model
–
Pay per use
–
Apps
SLIDE 4 Middleware Access from Qt, QML, HTML5 Eva Brucherseifer 14.11.2012 4/33
New Requirements to Software Architecture
l 1 – Reduce time to market l 2 – Increase flexibility
— OS independency — Device independency — UI independency
l 3 – Improve quality of software
— Usability — Security — Stability — Scalability
l Sustainable Software Architecture
SLIDE 5 Middleware Access from Qt, QML, HTML5 Eva Brucherseifer 14.11.2012 5/33
Solution: Reuse of Software
l Human Machine Interface
— Custom User Functionality — Application Logic — Design
l Middleware / Backends
— Access to Custom System Functionality
l Standard Components
— UI Framework, backends, OS, drivers, etc.
l Middleware is the Glue!
Features Features
SLIDE 6 Middleware Access from Qt, QML, HTML5 Eva Brucherseifer 14.11.2012 6/33
Requirements to Middleware
l Technology Choice Middleware
— C/C++ — Via IPC
l How to access Middleware?
— Little coding overhead — Speed — Robust, Type safety — Reusable, maintainable
Middleware User Interface
?
SLIDE 7
Middleware Access from Qt, QML, HTML5 Eva Brucherseifer 14.11.2012 7/33
Alternative Technologies for Embedded HMI
l Access to middleware depends on HMI technology l Alternatives:
Embedded Linux 1 Qt application Custom Middleware + Backend 2 QML application 3 Plain HTML5 application 4 Extended HTML5 application Qt + QML + WebKit
?
SLIDE 8
Middleware Access from Qt, QML, HTML5 8
Middleware Access from Qt & QML
SLIDE 9 Middleware Access from Qt, QML, HTML5 Eva Brucherseifer 14.11.2012 9/33
Middleware Access from Qt UI
l About Qt
— C++ Development Framework — Many libraries and modules
l C++ => Straightforward Middleware Integration
— Through function calls — Signals & slots — IPC, e.g. DBUS
Linux Qt Qt application
Custom Middleware
SLIDE 10
Middleware Access from Qt, QML, HTML5 Eva Brucherseifer 14.11.2012 10/33
Example - Middleware
l Small Library l Inherits from QObject l Triggers actions l Sets values, notifies about changes l Abstracts backend
SLIDE 11
Middleware Access from Qt, QML, HTML5 Eva Brucherseifer 14.11.2012 11/33
Example – Qt UI
l Uses Our Middleware Library l Creates GUI l Access Middleware
SLIDE 12 Middleware Access from Qt, QML, HTML5 Eva Brucherseifer 14.11.2012 12/33
Evaluation Qt
l High-quality, stable and well-tested framework APIs
— Touchscreen/animation complicated — More suited for conventional desktop applications
l Pros
— Very flexible connectivity — Frontend and backend can be managed in the same programming language — One-stop shop
l Cons
— Cumbersome touch support — Imperative UI 'design' (or use Designer) — Only 'conventional' UI paradigms implemented — Classic UI design, not very design centric
SLIDE 13 Middleware Access from Qt, QML, HTML5 Eva Brucherseifer 14.11.2012 13/33
Middleware Access from QML
l About QML
— Design centric — Simple And Fast — Low Barrier To Entry — Animations come at no cost — Next generation QML uses modern GPU acceleration — As QML is part of Qt it can be extended with classic Qt technologies (C++,
QMetaObject system)
Linux Qt QML apps
Custom Middleware JavaScript
SLIDE 14 Middleware Access from Qt, QML, HTML5 Eva Brucherseifer 14.11.2012 14/33
Example – QML UI
l On the C++ side:
— Use Qt's MetaObject system to configure middleware — Properties to set and read values — Final properties to read states
l Expose actions with Q_INVOKABLE
SLIDE 15 Middleware Access from Qt, QML, HTML5 Eva Brucherseifer 14.11.2012 15/33
Example – QML UI
l Don't forget to emit signals whenever your underlying model changes:
— Get property bindings for free
SLIDE 16
Middleware Access from Qt, QML, HTML5 Eva Brucherseifer 14.11.2012 16/33
Example – QML UI
l Expose middleware as a plugin l Use qmlRegisterType<Type>() to make your api visible in QML l Use QmlDir to export module:
SLIDE 17
Middleware Access from Qt, QML, HTML5 Eva Brucherseifer 14.11.2012 17/33
Example – QML UI
l Example QML file l Import the module l The formerly designed classes act as an interface to the middleware
SLIDE 18
Middleware Access from Qt, QML, HTML5 Eva Brucherseifer 14.11.2012 18/33
Models
l Easy integration of Qt's data structures and models (QList, QAbstractItemModel) l Example: Declare a Q_PROPERTY as part of your QML object: l Use it in QML:
SLIDE 19 Middleware Access from Qt, QML, HTML5 Eva Brucherseifer 14.11.2012 19/33
Models
l The other way around:
— Export your models as context properties — attach them to your global namespace
— Use it in QML
... ...
SLIDE 20 Middleware Access from Qt, QML, HTML5 Eva Brucherseifer 14.11.2012 20/33
Evaluation QML
l Pros
— Uses Qt's meta object system — Access to all Qt + middleware functions — Easy integration via signal and slots — Properly designed middleware can be shared between Qt and QML frontends
l Cons
— More languages means a more complex technology stack (QML, JavaScript, C++) — Higher minimum requirements (OpenGL ES 2.0)
SLIDE 21
Middleware Access from Qt, QML, HTML5 21
Middleware Access from HTML5
SLIDE 22 Middleware Access from Qt, QML, HTML5 Eva Brucherseifer 14.11.2012 22/33
Middleware Access from HTML5 – An Overview
l About HTML5
— QtWebKit is an essential module of Qt5 — Development in HTML/CSS/JavaScript — Very large HTML5 designer/developer community — Modern UI features (e.g. multitouch/accelerated animation) — HTML5 apps are usable on standard devices like tablets/mobiles/etc.
Linux Qt HTML5 Apps
Custom Middleware QtWebKit
SLIDE 23 Middleware Access from Qt, QML, HTML5 Eva Brucherseifer 14.11.2012 23/33
Plain HTML5 – Middleware Access
l Today: XMLHttpRequest
— High level/high latency — No persistent connections
l Tomorrow: Websockets
— Fix XMLHttpRequest shortcomings — Might come to QML (QTBUG-26298)
l How To Use A Custom Embedded Middleware
— Middleware uses HTTP server (or wrapper)
Web Engine
HTTP Server/Wrapper
Linux HTML5 Apps
Custom Middleware
SLIDE 24
Middleware Access from Qt, QML, HTML5 Eva Brucherseifer 14.11.2012 24/33
Plain HTML Example - XMLHttpRequest
l Daily bread of a web developer l Noone uses XMLHttpRequest l Everyone uses libraries (jQuery/YUI/...)
SLIDE 25 Middleware Access from Qt, QML, HTML5 Eva Brucherseifer 14.11.2012 25/33
Extended HTML5 – Middleware Access
l Extended Runtime using QtWebKit
— Use full Qt capabilities to connect middleware — Provide APIs to JavaScript context — Directly interact with Apps (Call JavaScript code from Qt) — Connect signals/slots in your JavaScript code
Linux Qt HTML5 Apps
Custom Middleware QtWebKit
SLIDE 26
Middleware Access from Qt, QML, HTML5 Eva Brucherseifer 14.11.2012 26/33
Extended HTML Example – Triggering A Qt Function
l Middleware C++ library l Own Qt app with QWebView l HTML File l Add middleware object to JS context l Call Q_INVOKABLEs
SLIDE 27 Middleware Access from Qt, QML, HTML5 Eva Brucherseifer 14.11.2012 27/33
Extended HTML Example 2 – QStringListModel + Knockout.js
l What about more complex data?
— Qt models are not directly usable
l Example with a QStringListModel l Use Knockout.js (http://knockoutjs.com/)
— Model-View-View-Model JavaScript library
l Functionality
— Changes on a web-page get immediately propagated to the C++ backend — This could be used to e.g. directly edit system settings
SLIDE 28
Middleware Access from Qt, QML, HTML5 Eva Brucherseifer 14.11.2012 28/33
Extended HTML Example 2 – QstringListModel + Knockout.js
l Web runtime exposes middleware stub into JS context l Stub provides access to model and update function l Data is automatically converted to/from JavaScript
SLIDE 29
Middleware Access from Qt, QML, HTML5 Eva Brucherseifer 14.11.2012 29/33
Extended HTML Example 2 – QstringListModel + Knockout.js
l The HTML side: Initialize Knockout with model l Whenever entries are added/removed, Knockout tells the stub l Reverse direction can be implemented by connecting signals in JavaScript (e.g. dataChanged)
SLIDE 30 Middleware Access from Qt, QML, HTML5 Eva Brucherseifer 14.11.2012 30/33
Evaluation HTML5 On QtWebKit
l It is possible to write interesting HMI using HTML5 l Pros
— Existing HTML5 apps will run out-of-the-box — Access to Qt/middleware functions is possible (runtime modification)
l Cons
— Lots of mixed technologies (HTML/CSS/JavaScript/C++) — Direct access to Qt/middleware functions requires runtime modification
— Leads to non-portable apps
— Translation layer for more complex models required
— No direct usage of Qt models
SLIDE 31
Middleware Access from Qt, QML, HTML5 31
I Conclusion
– Qt
straight forward C++ integration of middleware not suitable for touch UI
– QML
very quick creation of custom HMI middleware integration through Qt mechanisms
– HTML5
broad developer base more complicated to connect to middleware
SLIDE 32 Middleware Access from Qt, QML, HTML5 32
I Conclusion
– Big advantage of Qt: Hybrid use
– Clear Middleware – HMI separation enables
- software reuse
- Quick HMI creation
- Fast time-to-market of new use cases
SLIDE 33
Middleware Access from Qt, QML, HTML5 33
I Dr. Eva Brucherseifer
Managing Director & Sales eva.brucherseifer@basyskom.com
I Berthold Krevert
Software Engineer berthold.krevert@basyskom.com
I Sumedha Widyadharma
Senior Embedded Engineer sumedha.widyadharma@basyskom.com
I basysKom GmbH
Robert-Bosch-Str. 7 64293 Darmstadt Germany sales@basyskom.com +49 (6151) 870 589 101 www.basyskom.com
