CES_2017_Demo_-_lessons_learned_and_Qt_Compositor_Overview.pdf

https://aglmmwinter2017.sched.com/event/9L7l/ces-2017-demo-lessons-learned-and-qt-compositor-overview-tasuku-suzuki-the-qt-company

1. CES 2017 Demo HMI - lessons learned and Qt Wayland Compositor API Overview Tasuku Suzuki @ The Qt Company tasuku.suzuki@qt.io 9 February 2017
2. ›Born in Kushiro City, Hokkaido in 1979 ›Met Qt in 2001 ›Joined Trolltech in 2006 ›Moved to Nokia in 2008 ›Left Nokia in 2012 ›Had led Japan Qt Users’ Group for 4 years ›Joined The Qt Company in 2016 2 tasuku.suzuki@qt.io
3. ›CES 2017 Demo HMI – lessons learned ›Qt Wayland Compositor API Overview 3 Two topics:
4. ›single process – a monolithic QML application 4 ALS2016 Demo HMI
5. ›We need brand new HMI design for the next demo! ›We want to separate process! ›HomeScreen – system UI ›Dashboard app ›HVAC app ›Radio app ›MediaPlayer app ›Phone app ›… 5 After ALS2016
6. ›multi-process - HomeScreen + apps 6 CES2017 Demo HMI
7. ›multi-process - HomeScreen + apps 7 CES2017 Demo HMI
8. ›How long did it take? ›How many people had worked on it? 8 We rewrote DEMO HMI for CES 2017
9. ›How long did it take? ›Graphics for 1 month + Coding for 1 month! ›How many people had worked on it? 9 We rewrote DEMO HMI for CES 2017
10. ›How long did it take? ›Graphics for 1 month + Coding for 1 month! ›How many people had worked on it? ›One designer and two engineers did most! 10 We rewrote DEMO HMI for CES 2017
11. CES 2017 Demo HMI lessons learned
12. ›Done by the web design team in Linux Foundation ›First Specification for the team: 12 Graphic Design
13. ›Done by the web design team in Linux Foundation ›First Specification for the team: 13 Graphic Design
14. 14 The designer knew ALS2016?
15. ›made ALS2016 Demo HMI run on Mac and sent it 15 We solved it in a smart way
16. ›It took one month ›A zip archive - 1.4GB ›Half of them were in a directory called “_old” ›Heavy SVGs ›Same font files in 7 app directories ›What I needed was minimal SVGs… 16 Got new design on 30th Nov. 2016
17. 1. convert to png ›HMI_AppLauncher_Phone_Active-01.svg 1.1MB -> 30KB ›HMI_AppLauncher_Navigation_Inactive-01.png 1.1MB -> 32KB 2. Removed unnecessary elements in SVG data ›HMI_HVAC_AirDown_Active.svg 765KB -> 4.8KB ›HMI_HVAC_Circulation_Active.svg 768KB -> 7.6KB ›69 pngs (to be replaced with svgs) + 162 svgs 17 Reducing SVG file size
18. New HomeScreen
19. ›Developed by Mentor Graphics ›First commit was pushed on 1st June 2016 ›UI was written in Qt/C++ & stylesheets ›https://wiki.automotivelinux.org/homescreen 19 New HomeScreen
20. ›I replaced its UI with new QML one ›“WIP: add Qt Quick HomeScreen UI” 2nd Dec. ›Jens integrated the new UI in the next week! 20 New HomeScreen
21. HomeScreen/HomeScreen/qml $ wc -l *.qml 53 Home.qml 57 MediaArea.qml 29 MediaAreaBlank.qml 85 MediaAreaMusic.qml 24 MediaAreaRadio.qml 63 ShortcutArea.qml 54 ShortcutIcon.qml 105 StatusArea.qml 43 TopArea.qml 91 main.qml 604 total ( – 17 * 10 = 434) 22 New HomeScreen UI
22. New AGL demo applications
23. ›New feature in Qt 5.7 ›Control set for embedded UI ›Buttons ›Input Controls ›Indicators… ›Easy to use ›Easy to customize ›Good performance 24 Qt Quick Controls 2
24. ›/AGL/DemoApps/CES2017/imports/ qtquickcontrols2aglstyle/ ›Apply style ›export QT_QUICK_CONTROLS_STYLE=AGL ›QQuickStyle::setStyle("AGL"); ›./app –style AGL 25 Qt Quick Controls 2 – AGL Style
25. ›Separated from ALS2016 repo ›Almost re-written from scratch ›With new graphic design ›Minimal Qt/C++ to run Qt Quick ›Some apps with its binding ›libhomescreen integrated ›$ make generates .wgt 26 New AGL demo applications
26. Application C++ (LOC) QML/JavaScript (LOC) SVG (files) apps/controls (not for demo, for devleopers) 55 110 2 AGL/DemoApps/CES2017/Dashboard 46 381 7 AGL/DemoApps/CES2017/Phone 46 410 35 apps/hvac 84 383 22 apps/mediaplayer 344 254 33 apps/radio 62 232 10 apps/settings (ALPS did most of functionalities) 494 1439 25 apps/mixer 369 93 1 (Navi) (POI) 27 New AGL demo applications
27. ›Replace png files in HomeScreen with SVGs ›Move AGL/DemoApps/CES2017/* to /apps/ ›Fix bug: ›SPEC-395: Multimedia app does not proceed to next song … ›Virtual Keyboard integration ›MediaArea at the bottom of HomeScreen 28 TODO list:
28. ›New graphic design ›New multi process architecture ›We completed it in a month 29 Summary: CES 2017 Demo HMI
29. ›designers and developers can work together! 30 We can do it more efficiently if
30. ›we can use more advanced technology like… 31 We can do it more efficiently if
31. Qt Wayland Compositor API
32. ›A new feature in Qt 5.8 just released last month ›Write your own compositor in Qt/QML ›No reference implementation ›Qt provides 10+ examples ›Easy to add animations/graphical effects ›Easy to extend wayland protocol 33 Qt Wayland Compositor API
33. import QtQuick 2.6 import QtQuick.Window 2.2 import QtWayland.Compositor 1.0 WaylandCompositor { id: wlcompositor WaylandOutput { compositor: wlcompositor window: Window { width: 1024; height: 768; visible: true Rectangle { id: surfaceArea anchors.fill: parent } } } Component { id: chromeComponent ShellSurfaceItem { onSurfaceDestroyed: destroy() } } WlShell { onWlShellSurfaceCreated: chromeComponent.createObject(surfaceArea, { "shellSurface": shellSurface } ); } } Minimal example
34. ›WaylandCompositor {…} ›For a compositor ›WaylandOutput {…} ›For a screen output ›ShellSurfaceItem {…} ›For a client surface shell ›WlShell {…} , XdgShellV5{…}, … ›Shell interface to generate ShellSurfaceItem with wayland surface 35 Qt Wayland Compositor API
35. ›Represents the compositor ›Usually the root object in qml file ›Needs to have an output and a shell extension to be useful WaylandCompositor { id: root WaylandOutput {…} WlShell {…} } 36 WaylandCompositor Element
36. ›Manages a rectangular part of the compositor’s geometry that can be used for displaying content. ›Required properties: compositor and window WaylandOutput { compositor: root window: Window { width: 1024; height: 768; visible: true Rectangle { id: surfaceArea; anchors.fill: parent } } } 37 WaylandOutput Element
37. ›Standard desktop-like implementation for ShellSurfaces ›Maximization, fullscreen, resizing, moving, etc. ›Needs to handle the onSurfaceDestroyed signal Component { id: chromeComponent ShellSurfaceItem { onSurfaceDestroyed: destroy() } } 38 ShellSurfaceItem Element
38. ›Describes how surfaces should be shown and managed ›WlShell, XdgShellV5 and IviApplication are supported ›Only one signal you need to handle: ›Create a ShellSurfaceItem when a ShellSurface is created WlShell { onWlShellSurfaceCreated: { chromeComponent.createObject(surfaceArea, {“shellSurface”: shellSurface }) } } 39 *Shell extension Elements
39. MorphChrome { onDestroyAnimationFinished: { destroy() } } Make it fun!
40. ›Show fullscreen ›Remove window decoration ›Add task bar ›Thumbnail ›Close button Make it useful
41. ›Reuse QML files in HomeScreen ›Compositor-ized ›Add animations ›Add graphical effects Make it AGL
42. ›Allows you to write wayland compositor in QML ›Multi process, Multi view and/or Multi screen ›Build next generation UX w/ animations and effects ›Super easy, fast and fun! 43 Summary: Qt Wayland Compositor API
43. Thank you! Debugging CES2017 demo with our CTO on Shinkansen 44 tasuku.suzuki@qt.io