Meet Qt (Embedded) Yu-Chen Hsueh Sales Engineer Digia USA September 2013 1 © 2013 Digia Agenda • A brief overview of Qt • Platform Integration • UI possibilities • Qt Quick! • Multi-screen approaches with Qt • What’s new in Qt 5.1 • The Road Ahead • Qt and Embedded • Boot To Qt • Boot To Qt – Hands On 3 © 2013 Digia Plc What is Qt? C++ CROSS-PLATFORM APPLICATION AND UI FRAMEWORK Cross- Integrated Cross- Platform Development Platform IDE Class Library Tools 4 © 2013 Digia Plc Qt Powers Industry Leading Software on Desktop ... ADOBE PHOTOSHOP ELEMENTS SKYPE GOOGLE EARTH 5 © 2013 Digia Plc … and embedded Devices ADVANCED INFO CENTERS NETWORK ANALYZERS MEDICAL DEVICES SECURITY AUTOMATION DIGITAL PHOTO FRAMES REFRIGERATORS SET TOP BOXES INDUSTRIAL/UMPCS & COFFEE MACHINES And many, many more ... 6 © 2013 Digia Plc Qt Applications Are Native Applications Qt Application Qt APIs QtGui QtCore QtNetwork QtWebkit QtSql QtMultimedia Qt/Windows Qt/Mac Qt/X11 Qt/Android Windows GDI Cocoa X11 Android NDK Windows Kernel Mac Linux Kernel Android Kernel PC HW Mac HW PC HW Android HW 7 The Qt/Embedded Stack Application QtGui QtCore Qt/Embedded QPA Wayland Windows linuxfb EGL QPA X11 Plugins OS Windows GDI X11 Windows Kernel Linux Kernel HW PC HW PC HW 8 Supported Platforms Desktop Embedded Mobile Windows Embedded Android (5.2, beta 5.1) Windows (Standard/Compact 7) Linux Embedded Linux iOS (5.2, alpha 5.1) Mac OS X INTEGRITY Win8 on ARM (WinRT) Solaris QNX BB10 (5.0) Enterprise UNIX VxWorks Jolla Sailfish 9 © 2013 Digia Qt Cross-Platform Developer Offering: Not just a GUI Toolkit Presentation QtGui QtSVG Qt Quick QtOpenGL QtWebkit QtMultimediaKit Engine QtMobility QtCore APIs QtNetwork Data QtSql QtXML 10 © 2013© 2013 Digia Digia Plc Amazing UI Possibilities 11 © 2013© 2013 Digia Digia Plc 9/17/2013 Match the Purpose Qt provides a set of UI tools and technologies for developers to choose from Different UI approaches are provided to best fit each different UI use case and development environment C++, Cool UI C++, traditional Qt/ C++ QML Qt/ C++ JS, Web C++, customized Java Script Qt/ QML Qt/ C++ C++ QML 12 Match the Purpose Qt provides a set of UI tools and technologies for developers to choose from Different UI approaches are provided to best fit each different UI use case and development environment C++, Cool UI C++, traditional Qt/ C++ QML Qt/ C++ JS, Web Qt Quick C++, customized Java Script Qt/ QML Qt/ C++ C++ QML 13 Build Advanced User Interfaces, Qt Quick • Complete UI creation Kit for developers and designers • Ideal for iterative development of expressive, animated, modern UIs with high performance • QML - CSS & JavaScript like language, same code base for UI designers & developers • Qt Quick UI runtime - Direct access to native APIs, performance boost with C++ 14 © 2012 Digia Plc 15 © 2012 Digia Plc Accessing Hardware Qt Quick UI Qt/C++ Backend Other C++ Code HW Peripherals HW Peripherals 17 © 2013 Digia Plc Enabler for Easy Customization QML t e x t t e x t Declarative UI Design t e x t Qt/C++ Engine / Imperative Logic Data Access 18 N-Screen Approaches – Scalable UI QML t e x t t e x t t e x t Qt/C++ Engine / Data Access 19 N-Screen Approaches – Different UI Designs Mobile Layout Desktop Layout Tablet Layout Car Layout t t t e t e e x e x x t x t t t t e t t e e t x e t x x t t x t t t t e t e e x e x x t x t t t Tablet Layout v.2 t e x t t e x Qt/C++ t t Engine / e x t Data Access Allows incremental development, dynamic replacement of UIs 20 N-Screen Approaches – Mass-Customization Car MF 1 branded t Generic Automotive Layout e x t t e x t t e x t t e x t t e x t Mass-customization by Qt customer Car MF 2 branded t e x t t e x t Qt/C++ t e x Engine / t Data Access 21 Platform Specific Functionality Mobile Layout Desktop Layout Tablet Layout t e t t x e e t x x t t t e t t x e e t x x t t t e t t x e e t x x t t Qt/C++ Engine / Android Data Access functionality Hardware adaptation/optimization, Bindings to native services, Embedded Extra platform specific features Linux on ARM functionality 22 Structure of an N-screen App Blackberry Android iOS Desktop <5% Small screen Medium screen Large screen <5% Common UI (Qt Quick) 20-50% Application logic (C++ or JS) 50-80% Qt 25 Summary • Qt is widely adopted across industries, use cases and platforms • One technology for all the platforms • Level of customization can vary case-by-case • Technical enablers are in place also for taking a true multi-screen approach • Can be adopted in different levels, from one device to a product line or to a whole service across different devices • If targeting a high quantity of different screens, the declarative UI design allows particularly effective software process • Write Once, Deploy Everywhere • Desktop, Embedded, Mobile 26 Qt 5.1 27 © 2013 Digia Qt Quick Controls and Layouts • A UI control library for QML language (Qt Quick) • Toolbox of premade, re-usable UI components. • 5.1 has desktop controls with native look-and-feel • 5.2 will have more, like touch controls, industry specific controls 28 Qt for Android • Qt 5.1: Technology preview • Already very usable • Most of Qt 5.1 working • Exceptions: Parts of Qt Multimedia (Camera), Qt WebKit and Qt Quick Controls • Tooling & Deployment • X86 and ARM tool-chains • Remote debugging • Packaging and signing • Fully supported in Qt 5.2 29 © 2013 Digia Qt for iOS • Qt 5.1: Technology preview • Current status • Qt Core, Qt Gui, Qt Network, Qt Widgets, Qt Sensors, Qt Quick 1 working • Tooling and deployment via XCode • Restrictions • Platform limitations compared to Mac OS X • Currently does not fully support native iOS look & feel • No QtWebKit support, but possible to use native web component instead • Fully supported in Qt 5.2 30 © 2013 Digia Qt Charts 1.3.0 • Charting library completely compatible with Qt 4 and Qt 5 • QWidgets, Qt Quick 1, Qt Quick 2 • Basic chart types • Line, Spline, Area, Bar, Donut • Static and dynamic • New additional chart types • Polar, Boxplot (box-and-whiskers) 31 © 2013 Digia The Road Ahead 32 © 2013 Digia Support More Add-On Modules in 5.x Releases • Qt Location • Qt Compositor (Wayland server) • Qt System Information • Qt NFC • Qt Bluetooth • Qt Feedback • Qt 3D • Qt Quick Controls for Touch • Commercial Qt Quick Controls 33 © 2013 Digia Cloud – Engin.io • Engin.io – Simple way to set up your own cloud • Works well with all major Cloud providers (Amazon AWS, Microsoft Azure, ….) • Create the server with a few clicks • Qt client API • Available September 2013 34 © 2013 Digia Qt Creator • Debugging improvements • New debugging backend (lldb) • CDB stability and performance • Extended Android support • Multi-Window • Stable integration for: • QBS • Diff Viewing 35 © 2013 Digia Plc Qt Quick Designer • Drag & Drop Qt Quick items and components • Support for Qt Quick Controls Available with Qt 5.1 37 © 2013 Digia Enterprise Add-Ons for QML Designer • Property Editor • Signal/Slot connection Editor • Binding Editor • QML Profiler • Spline Editor for PathView 38 © 2013 Digia Plc Visual Studio Add-In • Qt Visual Studio Add-In allows use of Visual Studio for Qt application development • Wizards for creating new Qt C++ projects and classes • Automated build setup for the Meta-Object Compiler(moc), the User Interface Compiler (uic), and the Resource Compiler (rcc) • Import and export of Qt Project {.pro} and Project Include {.pri} files • Integrated Qt resource management • Integrated Qt documentation • Debugging extensions for Qt data types • Enterprise version of the Add-In provides also • Wizards for creating new Qt Quick projects and classes • Qt Quick Application Wizard • QML highlighting in the Visual Studio editor • QML preview directly from Visual Studio 39 © 2013 Digia Plc This Is What It’s All About! Freescale i.MX 6 board running QNX iPad BlackBerry Z10 Two different Android devices with different OS versions 41 © 2013 Digia Plc Qt and Embedded 42 © 2013 Digia Plc 9/17/2013 Tools Integration Qt Project qmake App GCC in Makefile [Linux compiler] Linux [Linux/X11] Qt/C++Qt/C++ codeQt/C++ .pro codecode filesfiles file files qmake App Makefile Cross compiler in [Embedded Target HW Linux] qmake App .gpj MULTI in Other [INTEGRITY] Target HW IDE / Code Editor Native tool chains Qt Creator 43 © 2013 Digia Plc Embedded Options • Cross compilation / integrated tool-chains • Boot To Qt 44 © 2013 Digia Boot To Qt 45 © 2013 Digia Plc Technology preview Boot To Qt - Qt Embedded Development Out-of-the-Box Software stack Google Nexus 7 Android kernel Pre-built Image SDK Qt Creator Qt Software stack Freescale i.MX 6 Installer Cross-compilers Android kernel (Boundary Devices SABRE Lite) Build tools Pre-built Image Qt Qt Embedded Android Software stack Beagle Board xM Android kernel Android kernel Emulator Pre-built Image 46 Why Boot To Qt? 1. Ease of use in getting started with creating embedded devices • Up and running with deployment from day 1 • Out-of-Box build environment • Focus on Qt application creation, not on selecting/setting up software stack • Our light-weight stack is optimized for running Qt! • Professional, enterprise level tooling around Qt libraries • Digia as sole source software/OS provider for your hardware 2. Embedded Android and Embedded Linux supported 47 © 2013 Digia Plc Thank You! qt.digia.com Blog: blog.qt.digia.com Twitter: @Qtcommercial [email protected] © 2012 Digia Plc 9/17/2013 Boot To Qt – Hands On 53 © 2013 Digia Plc What to Bring for Boot to Qt For the full workshop experience, please bring your laptop, Android Nexus 7 and a Micro USB Cable.