Adeneo Embedded Seattle3150 Richards Road, Suite 210 Bellevue, WA 98005, USAPhone : +1 425 749-4335Fax : +1 425 818-1911
Headquarters2 chemin du Ruisseau69134 Ecully, FrancePhone : +33 4 26 49 25 39Fax : +33 4 72 18 08 41
Adeneo Embedded Paris3 rue Galvani91300 Massy, FrancePhone : +33 1 80 75 01 52
Adeneo Embedded FrankfurtPfingstweide 5161169 FriedbergPhone : +49 6031 693 707 0
EmbeddingSuccess
Custom Modern Qt Quick 2 components
https://www.youtube.com/watch?v=TaMoH0ldu7I
Introduction
• 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)
3
• People expect the best out of UIs
Today’s UIs
Sensors
Animations Effects
Graphical acceleration
Touch Gestures
Modernfeeling
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 !”); } }}
5
• Custom Item C++ class• More effort
• More possibilities• Custom painting• Custom events handling
Your own components
[mycomponent.h]
class MyComponent : public QQuickItem { Q_OBJECTpublic: MyComponent(); mousePressEvent(QMouseEvent*);};
Adeneo Embedded Seattle3150 Richards Road, Suite 210 Bellevue, WA 98005, USAPhone : +1 425 749-4335Fax : +1 425 818-1911
Headquarters2 chemin du Ruisseau69134 Ecully, FrancePhone : +33 4 26 49 25 39Fax : +33 4 72 18 08 41
Adeneo Embedded Paris3 rue Galvani91300 Massy, FrancePhone : +33 1 80 75 01 52
Adeneo Embedded FrankfurtPfingstweide 5161169 FriedbergPhone : +49 6031 693 707 0
EmbeddingSuccess
Handling multitouch
Plugins and events
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
• 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
• 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
• MouseArea• Single touch• Handles tap, press, release
• Flickable• Single touch• Scroll content
Multitouch• 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
• 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
Adeneo Embedded Seattle3150 Richards Road, Suite 210 Bellevue, WA 98005, USAPhone : +1 425 749-4335Fax : +1 425 818-1911
Headquarters2 chemin du Ruisseau69134 Ecully, FrancePhone : +33 4 26 49 25 39Fax : +33 4 72 18 08 41
Adeneo Embedded Paris3 rue Galvani91300 Massy, FrancePhone : +33 1 80 75 01 52
Adeneo Embedded FrankfurtPfingstweide 5161169 FriedbergPhone : +49 6031 693 707 0
EmbeddingSuccess
Polishing with effects
Animations and shaders
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
• 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
• 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
• 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 !
Adeneo Embedded Seattle3150 Richards Road, Suite 210 Bellevue, WA 98005, USAPhone : +1 425 749-4335Fax : +1 425 818-1911
Headquarters2 chemin du Ruisseau69134 Ecully, FrancePhone : +33 4 26 49 25 39Fax : +33 4 72 18 08 41
Adeneo Embedded Paris3 rue Galvani91300 Massy, FrancePhone : +33 1 80 75 01 52
Adeneo Embedded FrankfurtPfingstweide 5161169 FriedbergPhone : +49 6031 693 707 0
EmbeddingSuccess
Make it faster !
OpenGL drawings
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
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
• 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
• 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
• 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
Scene graph
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
• 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;}
First accelerated item
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
QSGNodeQSGTransformNode
QSGOpacityNode
QSGClipNode
QSGGeometryNode
Text text text
• setMatrix()
• setOpacity()
• setClipRect()
• setMaterial()• setGeometry()
Node classes
27
QSGNode QSGGeometryNode
- Base class of visual elements- Holds Geometry and materials
QSGSimpleRectNode- Rectangle, color
QSGSimpleTextureNode- Rectangle, texture
Node classes
28
• QSGGeometryNode• Geometry (vertices)
• QSGGeometry• Points, lines, triangles
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);
Geometry node
29
• QSGGeometryNode• Material (shader)
• QSGMaterial, QSGFlatColorMaterial, QSGSimpleMaterialShader• Vertex and fragment shaders• Attributes, uniforms
QSGFlatColorMaterial *material = new QSGFlatColorMaterial;material->setColor(QColor(255, 0, 0));
QSGGeometryNode *node = new QSGGeometryNode;node->setMaterial(material);node->setFlag(QSGNode::OwnsMaterial);
Geometry node
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
Adeneo Embedded Seattle3150 Richards Road, Suite 210 Bellevue, WA 98005, USAPhone : +1 425 749-4335Fax : +1 425 818-1911
Headquarters2 chemin du Ruisseau69134 Ecully, FrancePhone : +33 4 26 49 25 39Fax : +33 4 72 18 08 41
Adeneo Embedded Paris3 rue Galvani91300 Massy, FrancePhone : +33 1 80 75 01 52
Adeneo Embedded FrankfurtPfingstweide 5161169 FriedbergPhone : +49 6031 693 707 0
EmbeddingSuccess
Sensors to adapt to user
Accelerometer
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
• 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
• 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
• Qt let you create modern application• Only needs your finger skills !
Final words
Enlight them Enjoy your work !
• Possibilities aren’t always visible to marketing and designers…
Top Related