Witekio custom modern qt quick components
0 likes•1,050 views
This document discusses creating custom Qt Quick components for modern user interfaces. It covers creating custom components as QML files or C++ classes, handling multi-touch input, adding animations and effects, leveraging OpenGL for performance, and accessing sensors like the accelerometer. The presentation aims to show developers how to build polished UIs that meet users' expectations for touch, graphics acceleration and responsiveness.
![4
• Reminder: custom components can
be QML files or C++ classes
• QML file: collection of QML
components
• Quick & easy
• Limited to existing components
Your own components
[MyComponent.qml]
Rectangle {
width: 100
height: 100
color: “blue”
MouseArea {
anchors.fill: parent
onPressed: {
log.message(“Pressed !”);
}
}
}
Your own components](https://image.slidesharecdn.com/witekiocustommodernqtquickcomponents-160915052255/85/Witekio-custom-modern-qt-quick-components-4-320.jpg)
![5
• Custom Item C++ class
• More effort
• More possibilities
• Custom painting
• Custom events handling
Your own components
[mycomponent.h]
class MyComponent : public QQuickItem {
Q_OBJECT
public:
MyComponent();
mousePressEvent(QMouseEvent*);
};](https://image.slidesharecdn.com/witekiocustommodernqtquickcomponents-160915052255/85/Witekio-custom-modern-qt-quick-components-5-320.jpg)
![28
QSGGeometryNode
• Geometry (vertices)
• QSGGeometry
• Points, lines, triangles
Geometry node
QSGGeometry *geometry = new QSGGeometry(QSGGeometry::defaultAttributes_Point2D(), 2);
geometry->setDrawingMode(GL_LINES);
geometry->setLineWidth(3);
geometry->vertexDataAsPoint2D()[0].set(0, 0);
geometry->vertexDataAsPoint2D()[1].set(width(), height());
QSGGeometryNode *node = new QSGGeometryNode;
node->setGeometry(geometry);
node->setFlag(QSGNode::OwnsGeometry);](https://image.slidesharecdn.com/witekiocustommodernqtquickcomponents-160915052255/85/Witekio-custom-modern-qt-quick-components-28-320.jpg)
Witekio custom modern qt quick components
- 1. Custom Modern Qt Quick 2 components
- 2. 2 • Presentation • Adrien Leravat (France) • Embedded software engineer • Adeneo Embedded • France, Germany (Franckfurt), USA • BSPs and OS porting to ARM (Linux, Windows, Android, QNX) • Embedded software architecture and development • Mobile expertise (cloud, internet of things) Introduction
- 3. 3 Today’s UIs People expect the best out of UIs Sensors Animations Effects Graphical acceleration Touch Gestures Modern feeling
- 4. 4 • Reminder: custom components can be QML files or C++ classes • QML file: collection of QML components • Quick & easy • Limited to existing components Your own components [MyComponent.qml] Rectangle { width: 100 height: 100 color: “blue” MouseArea { anchors.fill: parent onPressed: { log.message(“Pressed !”); } } } Your own components
- 5. 5 • Custom Item C++ class • More effort • More possibilities • Custom painting • Custom events handling Your own components [mycomponent.h] class MyComponent : public QQuickItem { Q_OBJECT public: MyComponent(); mousePressEvent(QMouseEvent*); };
- 6. Plugins and events Handling Plugings and events
- 7. 7 • 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
- 8. 8 • Requirements • Screen with multi-touch capability (ex: capacitive screen) • Appropriate driver • Qt plugin handling multi-touch events for Linux (EvdevTouch) • Enjoy multi-touch events in Qt ! Multi-touch
- 9. 9 Demo hardware and OS • Freescale Sabre SDP, i.MX6 DualLite • eGalax 10” capacitive touchscreen • Yocto 1.5, kernel 3.x Qt side • EvdevTouch plugin • -plugin EvdevTouch:/dev/input/touchscreen0 • PinchArea and custom components Multi-touch /dev/input/touchscreen0, evtest, run options
- 10. 10 • MouseArea • Single touch • Handles tap, press, release • Flickable • Single touch • Scroll content Multi-touch • PinchArea • Easy handling of drag, scale and rotate • MultiPointTouchArea • Manual handling of single touch points and behavior • Custom QQuickItem class • setAcceptedMouseButtons • event / touchEvent handlers
- 11. 11 A few tips Touch events converts to mouse events if not handled • PinchArea / filters may interfere with MouseArea “clicked” signal • Use “pressed” signal setFiltersChildMouseEvents • Catch all children events, then filter or let go grabTouchPoints, setKeepTouchGrab Multi-touch
- 12. Polishing with effects Animations and shaders Polishing with effects
- 13. 13 • 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
- 14. 14 • Animations from QML • Behavior • PropertyAnimation • State / Transition animations Polishing with effects MyButton { width: 100 height: 100 color: “blue” Behavior on x { NumberAnimation { duration: 500 easing.type: Easing.OutQuad } } }
- 15. 15 • Animations from C++ Item class • QPropertyAnimation • Same parameters as QML animations • Needs corresponding Q_PROPERTY Polishing with effects QPropertyAnimation *anim = new QPropertyAnimation(); anim->setTargetObject(this); anim->setPropertyName(“x”) anim->setDuration(500); anim->setEndValue(newXValue); anim->start();
- 16. 16 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 Multitouch Click me !
- 17. OpenGL drawings Make it faster !
- 18. 18 • Fluidity and responsiveness are critical • Challenging on embedded devices • Since Qt 5, full OpenGL acceleration for QtQuick • Backend provides graphical acceleration • Eglfs is the common choice on linux • MyApp –platform eglfs Context Context
- 19. 19 • Qt Quick 1 • QDeclarativeItem • QDeclarativeItem inherited QGraphicsItem • paint() method with QPainter • Qt Quick 2 • QQuickItem • QQuickItem inherits QObject • No paint() method ! Qt Quick item class
- 20. 20 • How to draw QtQuick2 item ? • QQuickPaintedItem (QQuickItem) • Implement paint() method (QPainter drawing) • Convenience class, don’t fully leverage Scene Graph and OpenGL • Suited for light components QQuickPaintedItem
- 21. 21 • Scene graph • Relies on Opengl / Opengl ES • State aware to minimize overhead • Render thread • Performs optimizations • Material sorting • Ignore obstructed items Scene graph Scene
- 22. 22 • 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 graph Scene
- 23. 23 How to leverage Qt Quick2 performances? • Inherit QQuickItem • setFlag, ItemHasContents • Implement updatePaintNode method • Use Scene Graph classes (QSG*) • update() to trigger updatePaintNode when needed Qt Quick 2 item class
- 24. 24 • oldNode holds the previous state of the node • Null until initialized • Contains its type and hierarchy • Set its color and geometry First accelerated item 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; }
- 25. 25 • Draw exclusively in the render thread, avoid classes other than QSG* • Main thread is blocked during rendering, access to items data is safe • Newly created QObject-based classes are running on rendering thread • Signals targeting main thread will be queued Caveats
- 26. 26 QSGNode QSGTransformNode QSGOpacityNode QSGClipNode QSGGeometryNode Node Class Text text • setMatrix() • setOpacity() • setClipRect() • setMaterial() • setGeometry()
- 27. 27 QSGNode QSGGeometryNode - Base class of visual elements - Holds Geometry and materials QSGSimpleRectNode - Rectangle, color QSGSimpleTextureNode - Rectangle, texture Node Class
- 28. 28 QSGGeometryNode • Geometry (vertices) • QSGGeometry • Points, lines, triangles Geometry node QSGGeometry *geometry = new QSGGeometry(QSGGeometry::defaultAttributes_Point2D(), 2); geometry->setDrawingMode(GL_LINES); geometry->setLineWidth(3); geometry->vertexDataAsPoint2D()[0].set(0, 0); geometry->vertexDataAsPoint2D()[1].set(width(), height()); QSGGeometryNode *node = new QSGGeometryNode; node->setGeometry(geometry); node->setFlag(QSGNode::OwnsGeometry);
- 29. 29 QSGGeometryNode • Material (shader) • QSGMaterial, QSGFlatColorMaterial, QSGSimpleMaterialShader • Vertex and fragment shaders • Attributes, uniforms Geometry node QSGFlatColorMaterial *material = new QSGFlatColorMaterial; material->setColor(QColor(255, 0, 0)); QSGGeometryNode *node = new QSGGeometryNode; node->setMaterial(material); node->setFlag(QSGNode::OwnsMaterial);
- 30. 30 • Fully leveraging OpenGL acceleration require some work • Needs some basic knowledge of OpenGL (vertices, textures, shaders) • QQuickPaintedItem when performance is not critical Sum up
- 31. Polishing with effects Accelerometer Sensors to adapt to user
- 32. 32 • Platform / hardware specific Qt Sensor plugin • Support of your sensor may require creating a new sensor plugin • Direct access to drivers data • Handling accelerometer • QAccelerometer, QAccelerometerReading (based on QSensor) Accelerometer
- 33. 33 • Create your own • Duplicate one of the existing Qt sensor plugin (qtbase/plugins/sensors) • Composed of • Sensor factory: QSensorPluginInterface, QSensorBackendFactory • Sensor: QSensorBackend • Reimplement start/stop/poll methods • Open your driver, read and parse Accelerometer
- 34. 34 • Reports x, y, z accelerations • Commonly used to adapt display to device orientation • Set accelerationMode to “Gravity” • Rotate root item, load alternative UI, … Accelerometer
- 35. 35 • Qt let you create modern application • Only needs your finger skills ! • Possibilities aren’t always visible to marketing and designers… Final words Enlight them Enjoy your work !