Who we are
basysKom
Located in Darmstadt & Nürnberg
Software Engineering Services (Consulting, Training, Coaching & Development)
Myself
Software Engineer
torsten.rahn@basyskom.com
4
Our Background
Software Engineering Services (Consulting, Training, Coaching & Development)
Focused on industrial applications
A great deal of experience with Application/
HMI development (Qt & HTML5) and
connectivity (OPC UA/MQTT/REST)
5
OpenCV
Open Source Computer Vision Library
Website: opencv.org
Platforms: Windows, Linux, Mac OS, iOS and Android
Current Version: 4.0.1
License: BSD
Languages: C++ (native), Java, Python
2D and 3D feature toolkits
Human–Computer Interaction
Segmentation and recognition
Egomotion estimation
Mobile robotics
Structure from motion (SFM)
Facial recognition system
Motion understanding
Motion tracking
Gesture recognition
Object identification
Augmented Reality
7
Qt
Cross-platform software development for embedded & desktop
Website: qt.io
Cross Platform
Current Version: 5.12
License: Dual-License – Commercial & Open Source
“Classical” Qt Framework Qt Quick
language: native C++ / Bindings
language: QML (Javascript / CSS / JSON)
QObject
compiled
interpreted (compiling optional)
imperative
declarative
8
Qt Quick and OpenCV
Computer Vision meets modern HMI-Development
Advantage:
• OpenCV’s computer vision algorithms
• fast and fluid Qt Quick User Interface on embedded
Challenge:
• Qt and OpenCV are using different
• API patterns
• data structures
Let’s bridge the gap …
9
Qt and OpenCV: Image Format Conversion
Qt and OpenCV are using different storage data types for images
OpenCV uses a matrix cv::Mat with data stored in GBR channel order in columns and rows
Channel order for QImage depends on Endianess – except for RGB888 format where it’s always RGB
GBR → RGB via RGB via QImage::rgbSwapped()
10
Introduction to QML
Concept
Elements
ids
Properties
Property-Bindings
11
Qt Quick Scenegraph
Concept
Optimized for requirements
of modern graphics hardware
Uses OpenGL commands
Transform nodes encode
affine Transformations as 4x4
matrices
Geometry nodes ...
• manage geometry buffer
• define material
12
Combining OpenCV with QML
13
CVMat - Implementing a QQuickItem using OpenCV
Inheritance from QQuickItem
Don’t forget to set the flag ItemHasContents in the ctor
14
CVContours - Finding Contours with OpenCV
Using findContours()
For preparation we need to convert the image into a binary black-and-white image:
Alternatively we could call Canny() instead of threshold()
Afterwards we could call drawContours() or ...
15
Application Example
Live Demo
Our demo application additionally uses
Qt Quick Controls 2
Qt Quick Shape API (available since 5.10)
16
LiveCV http://livecv.dinusv.com/
17
Conclusion
Combination of Qt Quick and OpenCV provides a solid foundation for Computer Vision HMIs
Differences regarding APIs should be taken into account right from the start
Qt Quick provides flexible means for interaction and UI rendering
LiveCV provides a great environment for interactive prototyping
19
Weblink Recommendations
Tutorials, Documentation and Examples:
https://www.elektroniknet.de/design-elektronik/embedded/opencv-und-qt-quick-ein-einstieg-161630.html
https://www.youtube.com/watch?v=2zTY6CFhP_A
https://doc.qt.io/qt-5.11/qml-QtQuick-shapes-shape.html
https://opencv.org/
https://www.basyskom.com/download/cvqml.zip
20