Custom modern qt quick components

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*);};





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





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


14

• 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 } }}

15

• Animations from C++ Item class

• QPropertyAnimation• Same parameters as QML animations

• Needs corresponding Q_PROPERTY


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 !





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





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…

Technology

Custom modern qt quick components