Transcription
Accessing Middleware fromQt, QML or HTML5
basysKom. introducing ourselvesl Embedded Software Engineering—Partner for the development of innovative quality productsl Expertise in.Embedded R&D— Embedded architecture design, middleware, HMI— Open source standards & Linux stack—l Located in Germany, Darmstadt Nürnbergl Our Offering:—consulting—solution deliveryon strategic and operational selection and architecture ofembedded technology and development processesR&D including delivery of full components or servicesrequiring specialist knowhowMiddleware Access from Qt, QML, HTML5Eva Brucherseifer14.11.20122/33
The new digital lifestyle is changing user demand.This affects the software stackI High demand for new digital lifestyle features in HMII Head unit needs to interact with other devices––SmartphoneCloudI Software features as a business model– Pay per useMiddleware Access from Qt, QML, HTML5– Apps3
New Requirements to Software Architecturel 1 – Reduce time to marketl 2 – Increase flexibilityOS independency— Device independency— UI independency—l 3 – Improve quality of softwareUsability— Security— Stability— Scalability—l Sustainable Software ArchitectureMiddleware Access from Qt, QML, HTML5Eva Brucherseifer14.11.20124/33
Solution: Reuse of Softwarel Human Machine InterfaceCustom User Functionality— Application Logic— Design—Featuresl Middleware / Backends—Access to Custom System Functionalityl Standard Components—UI Framework, backends, OS, drivers, etc.l Middleware is the Glue!Middleware Access from Qt, QML, HTML5Eva Brucherseifer14.11.20125/33
Requirements to Middlewarel Technology Choice MiddlewareC/C — Via IPC—UserInterface?l How to access Middleware?Little coding overhead— Speed— Robust, Type safety— Reusable, maintainable—Middleware Access from Qt, QML, HTML5Eva BrucherseiferMiddleware14.11.20126/33
Alternative Technologies for Embedded HMIl Access to middleware depends on HMI technologyl Alternatives:1Qtapplication2QMLapplication3Plain HTML5application4Extended HTML5application?Qt QML WebKitCustom Middleware BackendEmbedded LinuxMiddleware Access from Qt, QML, HTML5Eva Brucherseifer14.11.20127/33
Middleware Access fromQt & QMLMiddleware Access from Qt, QML, HTML58
Middleware Access from Qt UIl About QtC Development Framework— Many libraries and modules—l C Straightforward Middleware IntegrationQt applicationThrough function calls— Signals & slots— IPC, e.g. DBUS—QtCustomMiddlewareLinuxMiddleware Access from Qt, QML, HTML5Eva Brucherseifer14.11.20129/33
Example - MiddlewarelllllSmall LibraryInherits from QObjectTriggers actionsSets values, notifies about changesAbstracts backendMiddleware Access from Qt, QML, HTML5Eva Brucherseifer14.11.201210/33
Example – Qt UIl Uses Our Middleware Libraryl Creates GUIl Access MiddlewareMiddleware Access from Qt, QML, HTML5Eva Brucherseifer14.11.201211/33
Evaluation Qtl High-quality, stable and well-tested framework APIsTouchscreen/animation complicated— More suited for conventional desktop applications—l ProsVery flexible connectivity— Frontend and backend can be managed in the same programming language— One-stop shop—l ConsCumbersome touch support— Imperative UI 'design' (or use Designer)— Only 'conventional' UI paradigms implemented— Classic UI design, not very design centric—Middleware Access from Qt, QML, HTML5Eva Brucherseifer14.11.201212/33
Middleware Access from QMLl About QMLDesign 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)—QML appsJavaScriptQtCustomMiddlewareLinuxMiddleware Access from Qt, QML, HTML5Eva Brucherseifer14.11.201213/33
Example – QML UIl On the C side:———Use Qt's MetaObject system to configure middlewareProperties to set and read valuesFinal properties to read statesl Expose actions with Q INVOKABLEMiddleware Access from Qt, QML, HTML5Eva Brucherseifer14.11.201214/33
Example – QML UIl Don't forget to emit signals whenever your underlying model changes:—Get property bindings for freeMiddleware Access from Qt, QML, HTML5Eva Brucherseifer14.11.201215/33
Example – QML UIl Expose middleware as a pluginl Use qmlRegisterType Type () to make your api visible in QMLl Use QmlDir to export module:Middleware Access from Qt, QML, HTML5Eva Brucherseifer14.11.201216/33
Example – QML UIl Example QML filel Import the modulel The formerly designed classesact as an interfaceto the middlewareMiddleware Access from Qt, QML, HTML5Eva Brucherseifer14.11.201217/33
Modelsl 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:Middleware Access from Qt, QML, HTML5Eva Brucherseifer14.11.201218/33
Modelsl The other way around:Export your models as context properties— attach them to your global namespace——Use it in QML.Middleware Access from Qt, QML, HTML5Eva Brucherseifer14.11.201219/33
Evaluation QMLl ProsUses 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 ConsMore languages means a more complex technology stack (QML, JavaScript, C )— Higher minimum requirements (OpenGL ES 2.0)—Middleware Access from Qt, QML, HTML5Eva Brucherseifer14.11.201220/33
Middleware Access fromHTML5Middleware Access from Qt, QML, HTML521
Middleware Access from HTML5 – An Overviewl About HTML5QtWebKit 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.—HTML5 AppsQtWebKitQtCustomMiddlewareLinuxMiddleware Access from Qt, QML, HTML5Eva Brucherseifer14.11.201222/33
Plain HTML5 – Middleware Accessl Today: XMLHttpRequestHigh level/high latency— No persistent connections—HTML5 Appsl Tomorrow: WebsocketsWeb EngineFix XMLHttpRequest shortcomings— Might come to QML (QTBUG-26298)—HTTPServer/Wrapperl How To Use A Custom Embedded Middleware—CustomMiddlewareMiddleware uses HTTP server (or wrapper)LinuxMiddleware Access from Qt, QML, HTML5Eva Brucherseifer14.11.201223/33
Plain HTML Example - XMLHttpRequestl Daily bread of a web developerl Noone uses XMLHttpRequestl Everyone uses libraries (jQuery/YUI/.)Middleware Access from Qt, QML, HTML5Eva Brucherseifer14.11.201224/33
Extended HTML5 – Middleware Accessl Extended Runtime using QtWebKitUse 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—HTML5 AppsQtWebKitQtCustomMiddlewareLinuxMiddleware Access from Qt, QML, HTML5Eva Brucherseifer14.11.201225/33
Extended HTML Example – Triggering A Qt Functionl Middleware C libraryl Own Qt appwith QWebViewl HTML Filel Add middleware object to JS contextl Call Q INVOKABLEsMiddleware Access from Qt, QML, HTML5Eva Brucherseifer14.11.201226/33
Extended HTML Example 2 – QStringListModel Knockout.jsl What about more complex data?—Qt models are not directly usablel Example with a QStringListModell Use Knockout.js (http://knockoutjs.com/)—Model-View-View-Model JavaScript libraryl FunctionalityChanges on a web-page get immediately propagated to the C backend— This could be used to e.g. directly edit system settings—Middleware Access from Qt, QML, HTML5Eva Brucherseifer14.11.201227/33
Extended HTML Example 2 – QstringListModel Knockout.jsl Web runtime exposes middleware stub into JS contextl Stub provides access to model and update functionl Data is automatically converted to/from JavaScriptMiddleware Access from Qt, QML, HTML5Eva Brucherseifer14.11.201228/33
Extended HTML Example 2 – QstringListModel Knockout.jsl The HTML side: Initialize Knockout with modell Whenever entries are added/removed, Knockout tells the stubl Reverse direction can be implemented by connecting signals in JavaScript (e.g. dataChanged)Middleware Access from Qt, QML, HTML5Eva Brucherseifer14.11.201229/33
Evaluation HTML5 On QtWebKitl It is possible to write interesting HMI using HTML5l ProsExisting HTML5 apps will run out-of-the-box— Access to Qt/middleware functions is possible (runtime modification)—l ConsLots of mixed technologies (HTML/CSS/JavaScript/C )— Direct access to Qt/middleware functions requires runtime modification———Leads to non-portable appsTranslation layer for more complex models required—No direct usage of Qt modelsMiddleware Access from Qt, QML, HTML5Eva Brucherseifer14.11.201230/33
I Conclusion–––Qtstraight forward C integration of middlewarenot suitable for touch UIQMLvery quick creation of custom HMImiddleware integration through Qt mechanismsHTML5broad developer basemore complicated to connect to middlewareMiddleware Access from Qt, QML, HTML531
I Conclusion–Big advantage of Qt: Hybrid use Native Qt QML HTML5–Clear Middleware – HMI separation enables software reuse Quick HMI creation Fast time-to-market of new use casesMiddleware Access from Qt, QML, HTML532
I Dr. Eva BrucherseiferI basysKom GmbHManaging Director & r. 764293 DarmstadtGermanysales@basyskom.com 49 (6151) 870 589 101I Berthold KrevertSoftware comI Sumedha WidyadharmaSenior Embedded Engineersumedha.widyadharma@basyskom.comMiddleware Access from Qt, QML, HTML533
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 —
