custom modern qtquick_components qt japan summit
TRANSCRIPT
Adeneo Embedded Seattle 3150 Richards Road, Suite 210 Bellevue, WA 98005, USA Phone : +1 425 749-4335 Fax : +1 425 818-1911
Headquarters 2 chemin du Ruisseau 69134 Ecully, France Phone : +33 4 26 49 25 39 Fax : +33 4 72 18 08 41
Adeneo Embedded Paris 3 rue Galvani 91300 Massy, France Phone : +33 1 80 75 01 52
Adeneo Embedded Frankfurt Pfingstweide 51 61169 Friedberg Phone : +49 6031 693 707 0
Embedding Success
Custom Modern Qt Quick components
About me
• Speaker • Sébastien Ronsse (US office)
• Solutions Architect
• Adeneo Embedded • Headquarters in Lyon, France
• Application development, mobile expertise (Qt Company partner)
• BSPs and OS porting (Linux, Android, Windows, QNX)
• Embedded software architecture and development
Agenda
• Expectations
• Qt Quick introduction
• Multitouch and gestures
• Hardware acceleration
• Graphical effects
• Conclusion
Expectations
• People expect the best out of UIs • Common, natural gestures
• Smooth interactions
• Eye-candy, animations
• Connected applications
• How can Qt help?
Adeneo Embedded Seattle 3150 Richards Road, Suite 210 Bellevue, WA 98005, USA Phone : +1 425 749-4335 Fax : +1 425 818-1911
Headquarters 2 chemin du Ruisseau 69134 Ecully, France Phone : +33 4 26 49 25 39 Fax : +33 4 72 18 08 41
Adeneo Embedded Paris 3 rue Galvani 91300 Massy, France Phone : +33 1 80 75 01 52
Adeneo Embedded Frankfurt Pfingstweide 51 61169 Friedberg Phone : +49 6031 693 707 0
Embedding Success
Qt Quick introduction
Qt Quick introduction
• Qt is cross-platform and offers much more: • Qt Creator is an amazing development environment
• Qt is now targeting mobile platforms (iOS, Android, etc.)
• No-brainer for recommending it to customers
• The Qt Quick module is extremely powerful and easy to grasp
• What is Qt Quick?
Qt Quick introduction
• What is Qt Quick? • Standard library for writing QML applications
• Works alongside Qt QML module
• Provides basic types necessary for creating user interfaces
• Allows components creation from QML or C++
• QML file: collection of QML components • Quick & easy
• Limited to existing components [MyComponent.qml] Rectangle { width: 100 height: 100 color: “blue” MouseArea { anchors.fill: parent onPressed: { log.message(“Pressed!”); } } }
Qt Quick introduction
[mycomponent.h] class MyComponent : public QQuickItem { Q_OBJECT public: MyComponent(); mousePressEvent(QMouseEvent*); };
Qt Quick introduction
• Custom Item C++ class
• More effort
• More possibilities
• Custom painting
• Custom events handling
• Demo time!
• Decomposing static input • Brick wall
• Light switch
• Using QML basic shapes
• Loading external image
Qt Quick introduction
Adeneo Embedded Seattle 3150 Richards Road, Suite 210 Bellevue, WA 98005, USA Phone : +1 425 749-4335 Fax : +1 425 818-1911
Headquarters 2 chemin du Ruisseau 69134 Ecully, France Phone : +33 4 26 49 25 39 Fax : +33 4 72 18 08 41
Adeneo Embedded Paris 3 rue Galvani 91300 Massy, France Phone : +33 1 80 75 01 52
Adeneo Embedded Frankfurt Pfingstweide 51 61169 Friedberg Phone : +49 6031 693 707 0
Embedding Success
Handling multitouch & gestures
• Gestures part of everyday UIs
• Slide, pinch, rotate
• Now a natural way to interact
• Qt provides different ways to handle multi-touch
• More involving than single touch
Multi-touch
• MouseArea • Single touch
• Handles tap, press, release
• Flickable • Single touch
• Scroll content
• PinchArea • Easy handling of drag, scale and
rotate
Multi-touch
• MultiPointTouchArea
• Manual handling of single touch points and behavior
• Custom QQuickItem class
• setAcceptedMouseButtons
• event / touchEvent handlers
• Demo time!
• Flick light switch
• Update ambient light
Multi-touch
Adeneo Embedded Seattle 3150 Richards Road, Suite 210 Bellevue, WA 98005, USA Phone : +1 425 749-4335 Fax : +1 425 818-1911
Headquarters 2 chemin du Ruisseau 69134 Ecully, France Phone : +33 4 26 49 25 39 Fax : +33 4 72 18 08 41
Adeneo Embedded Paris 3 rue Galvani 91300 Massy, France Phone : +33 1 80 75 01 52
Adeneo Embedded Frankfurt Pfingstweide 51 61169 Friedberg Phone : +49 6031 693 707 0
Embedding Success
Hardware acceleration
• Fluidity and responsiveness are critical
• Challenging on embedded devices
• Since Qt 5, full OpenGL acceleration for QtQuick
HW acceleration
HW acceleration
• Qt Quick 1 • QDeclarativeItem • QDeclarativeItem inherited QGraphicsItem
• paint() method with QPainter
• Qt Quick 2 • QQuickItem • QQuickItem inherits QObject
• No paint() method !
HW acceleration
• How to draw QtQuick2 items?
• Option 1 - Stick with QML
• Easier to set up
• Relies on basic shapes
• ShaderEffect
HW acceleration
• How to draw QtQuick2 items?
• Option 2 - QQuickPaintedItem (QQuickItem)
• Implement paint() method (QPainter drawing)
• Convenience class
• Suited for light components
HW acceleration
• How to draw QtQuick2 items?
• Option 3 - Scene graph • Relies on OpenGL / OpenGLES
• Best option for advanced items
Scene
HW acceleration
• Scene graph nodes • Each item is internally a node
• Each node contains all its children
• A node can be a visible item, or provide functionality • Opacity, transformation
Scene
HW acceleration
• oldNode holds the previous state of the node
• NULL until initialized
• Contains its type and hierarchy
• Set its color and geometry
QSGNode *MyItem::updatePaintNode(QSGNode *oldNode, UpdatePaintNodeData *) { QSGSimpleRectNode *n = static_cast<QSGSimpleRectNode *>(oldNode); if (!n) { n = new QSGSimpleRectNode(); n->setColor(Qt::red); } n->setRect(boundingRect()); return n; }
HW acceleration
QSGNode QSGTransformNode QSGOpacityNode QSGClipNode QSGGeometryNode
Text text text
• setMatrix()
• setOpacity()
• setClipRect()
• setMaterial() • setGeometry()
HW acceleration
QSGNode QSGGeometryNode
- Base class of visual elements - Holds geometry and materials
QSGSimpleRectNode - Rectangle, color
QSGSimpleTextureNode - Rectangle, texture
HW acceleration
• Summary • Use QML when possible as it requires less work
• Use QQuickPaintedItem when porting old components
• Fully leveraging OpenGL acceleration require some work • Needs knowledge of OpenGL (vertices, textures, shaders)
HW acceleration
Adeneo Embedded Seattle 3150 Richards Road, Suite 210 Bellevue, WA 98005, USA Phone : +1 425 749-4335 Fax : +1 425 818-1911
Headquarters 2 chemin du Ruisseau 69134 Ecully, France Phone : +33 4 26 49 25 39 Fax : +33 4 72 18 08 41
Adeneo Embedded Paris 3 rue Galvani 91300 Massy, France Phone : +33 1 80 75 01 52
Adeneo Embedded Frankfurt Pfingstweide 51 61169 Friedberg Phone : +49 6031 693 707 0
Embedding Success
Polishing with effects
• Effects can provides final polish, or be part of the full experience
• Animating, to improve user-friendliness
• Blurring UI to strengthen focus
• Aesthetics and behavior
Polishing with effects
• Animations from QML • Behavior
• PropertyAnimation
• State/Transition animations
MyButton { width: 100 height: 100 color: “blue” Behavior on x { NumberAnimation { duration: 500 easing.type: Easing.OutQuad } } }
Polishing with effects
• Qt Graphical Effect • import QtGraphicalEffects 1.0
• GaussianBlur, FastBlur, RecursiveBlur
• Fade part of the UI, focus on important parts
• DropShadow, Glow, RectangularGlow
• Makes components stand out
Click me !
Polishing with effects
Polishing with effects
• Shaders • Not reserved to C++!
• ShaderEffect
• Can reference QML properties
• Freedom to produce advanced effects
• Check out www.shadertoy.com!
• Demo time!
• Implement bump mapping
• Add dynamic point light
Polishing with effects
• QML allows developers to design rich user interfaces
• Components can be developed in QML or C++
• Qt Quick can fully leverage your GPU through OpenGL
• Good luck in your projects!
Conclusion
Questions?
Thank you!