QML OPENCV 연동 예제

app.zip

filecapture.h

#ifndef FILECAPTURE_H
#define FILECAPTURE_H
 
#include <QObject>
#include <opencv2/core.hpp>
#include <opencv2/imgproc.hpp>
#include <opencv2/highgui.hpp>
 
using namespace cv;
 
class FileCapture : public QObject
{
    Q_OBJECT
 
    VideoCapture *videoCapture;
    QString url;
    bool stopVideo;
 
 
public:
    explicit FileCapture(QObject *parent = nullptr);
    void setUrl(QString &value);
 
signals:
    void newFrameCaptured(Mat frame);
 
public slots:
 
    bool openVideo();
 
 
};
 
#endif // FILECAPTURE_H
 

frame.h

#ifndef FRAME_H
#define FRAME_H
 
#include <QObject>
#include <QQuickPaintedItem>
#include <QImage>
#include <QPainter>
#include <QDebug>
 
#include <opencv2/core.hpp>
#include <opencv2/core/utility.hpp>
#include <opencv2/imgproc.hpp>
#include <opencv2/highgui.hpp>
 
using namespace cv;
 
class Frame : public QQuickPaintedItem
{
    Q_OBJECT
 
    // passing frame as Qimage and writh with setFrame function and so on..
    Q_PROPERTY( QImage frame READ getFrame WRITE setFrame NOTIFY frameChanged )
 
    Mat rawFrame;
    QImage frame;
 
public:
    Frame(QQuickItem *parent = nullptr );
    void paint(QPainter *painter);
 
 
    Mat getRawFrame() const;
    QImage getFrame() const;
    void setFrame(const QImage &value);
 
    Q_INVOKABLE void setRawFrame(const Mat &value);
    Q_INVOKABLE void openImage(QString url);
 
 
signals:
    void frameChanged();
 
public slots:
    void convert2QImage();
 
};
 
#endif // FRAME_H
 

threadmanager.h

#ifndef THREADMANAGER_H
#define THREADMANAGER_H
 
#include <QObject>
#include <QThread>
#include "filecapture.h"
 
class threadManager : public QObject
{
    Q_OBJECT
 
    QThread thread;
    FileCapture capture;
 
public:
    explicit threadManager(QObject *parent = nullptr);
    Q_INVOKABLE void runCapture(QString url);
 
 
signals:
 
    void updateView(Mat frame);
 
public slots:
    void receiveFrame(Mat frame);
 
 
};
 
#endif // THREADMANAGER_H
 

filecapture.cpp

#include "filecapture.h"
 
void FileCapture::setUrl(QString &value)
{
    value.remove("file://");
    url = value;
}
 
bool FileCapture::openVideo()
{
    Mat rawFrame;
    videoCapture = new VideoCapture;
    videoCapture->open( url.toStdString() );
 
    if(!videoCapture->isOpened()){
        return false;
    }
 
    while(videoCapture->read(rawFrame) && !stopVideo){
        emit(newFrameCaptured(rawFrame));
    }
 
    return true;
 
}
 
FileCapture::FileCapture(QObject *parent) : QObject(parent)
{
    stopVideo = false;
}
 

frame.cpp

#include "frame.h"
 
Mat Frame::getRawFrame() const
{
    qDebug() <<__func__;
    return rawFrame;
}
 
void Frame::setRawFrame(const Mat &value)
{
    qDebug() <<__func__;
    rawFrame = value;
    convert2QImage();
}
 
QImage Frame::getFrame() const
{
    qDebug() <<__func__;
    return frame;
}
 
void Frame::setFrame(const QImage &value)
{
    qDebug() <<__func__;
    frame = value;
    Frame::update();
    emit( frameChanged() );
}
 
void Frame::openImage(QString url)
{
    qDebug() <<__func__;
    url.remove("file://");
    rawFrame = imread(url.toStdString());
    convert2QImage();
}
 
 
void Frame::convert2QImage()
{
    qDebug() <<__func__;
    Mat tempMat;
 
//  this may be bgr to rgb
    cvtColor( rawFrame, tempMat, COLOR_RGB2BGR );
 
//  constructor with the buffer and width, height, byte per line, format
    QImage tempImage( (uchar*)tempMat.data, tempMat.cols, tempMat.rows, tempMat.step, QImage::Format_RGB888);
 
    frame = tempImage;
 
////  in my opinion this disconnect mamory sharing with tempImage so we can chaenge tempImage without effecting on frame
    frame.detach();
 
 
    Frame::update();
 
    emit(frameChanged());
 
}
 
Frame::Frame(QQuickItem *parent) : QQuickPaintedItem (parent)
{
    qDebug() <<__func__;
 
}
 
void Frame::paint(QPainter *painter)
{
    qDebug() <<__func__;
    frame.scaled(1280,720, Qt::IgnoreAspectRatio, Qt::FastTransformation);
    painter->drawImage(0, 0, frame, 0, -1, -1, Qt::AutoColor );
 
}
 

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
 
 
// include thease to expose my thread to qml
#include <QQmlContext>
#include <QQmlComponent>
 
//include frame because we want to render something from
// Frame object otherwise we just connect signal and slot to the object
#include <frame.h>
 
//I didn't registered video related objects
//Since I just wanna connect signal and slot from them
 
#include "threadmanager.h"
 
 
int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
 
    QGuiApplication app(argc, argv);
 
    QQmlApplicationEngine engine;
 
    threadManager videoThread;
    // register my class
    qmlRegisterType<Frame>("com.app.frame", 1, 0, "Frame");
 
    //register object so Mat can be transfered throgh signal and slot
    qRegisterMetaType<cv::Mat>("Mat");
 
    // pass my context to qml as named videoThread( any class can be passed this way too )
    engine.rootContext()->setContextProperty("videoThread", &videoThread);
 
    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);
 
    return app.exec();
}
 

threadmanager.cpp

#include "threadmanager.h"
 
threadManager::threadManager(QObject *parent) : QObject(parent)
{
 
}
 
void threadManager::runCapture(QString url)
{
    capture.setUrl( url );
 
    connect( &thread , &QThread::started, &capture, &FileCapture::openVideo   );
    connect( &thread , &QThread::finished, &capture, &FileCapture::deleteLater);
    connect( &capture, &FileCapture::newFrameCaptured, this, &threadManager::receiveFrame);
 
    capture.moveToThread(&thread);
    thread.start();
 
}
 
void threadManager::receiveFrame(Mat frame)
{
    emit(updateView(frame));
}
 

home.qml

import QtQuick 2.0
import QtQuick.Controls 2.12
 
Page {
    anchors.fill:parent
    Rectangle{
        id: bar
        width: parent.width
        height: parent.height * 0.1
        color: 'orange'
 
        Label{
            text : "Welcome to the Qt OpenCV app"
            color : "white"
            anchors.centerIn: parent
        }
    }
 
    Button{
        id : imageButton
        text:'Show Image'
        anchors.top: bar.bottom
        anchors.topMargin: 20
        anchors.horizontalCenter: parent.horizontalCenter
        onClicked: loader.push("qrc:/showImage");
    }
 
    Button{
        text:'Show Video'
        anchors.top: imageButton.bottom
        anchors.topMargin: 20
        anchors.horizontalCenter: parent.horizontalCenter
        onClicked: loader.push("qrc:/showVideo");
    }
 
 
}
 

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
 
Window {
    visible: true
    width: 1024
    height: 720
    title: qsTr("app")
 
 
    StackView{
 
        id: loader
        anchors.fill: parent
        initialItem: 'qrc:/home'
    }
 
 
 
}
 

showImage.qml

import QtQuick 2.0
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import QtQuick.Dialogs 1.2
import com.app.frame 1.0
 
Page {
    anchors.fill:parent
    Rectangle{
 
        id: bar
        width: parent.width
        height: parent.height * 0.1
        color: 'orange'
 
        Label{
            text : "Show Image"
            color : "white"
            anchors.centerIn: parent
        }
    }
 
    ColumnLayout{
 
        id: imageContainer
        width: 640
        height: 480
        anchors.top:bar.bottom
        anchors.topMargin: 20
        anchors.horizontalCenter: parent.horizontalCenter
 
        Image{
 
            id : picture
            source: "qrc:/logo"
            Layout.preferredWidth : imageContainer.width
            Layout.preferredHeight: imageContainer.height
            fillMode: Image.PreserveAspectFit
        }
 
        Frame{
 
            id : selectedImage
            Layout.preferredWidth: imageContainer.width
            Layout.preferredHeight: imageContainer.height
            visible: false
        }
 
 
    }
 
    RowLayout{
 
        anchors.top: imageContainer.bottom
        anchors.topMargin: 10
        anchors.horizontalCenter: parent.horizontalCenter
        width: parent.width * 0.6
        spacing: width * 0.2
 
        Button{
            text : 'Open Image'
            Layout.preferredWidth: parent.width * 0.4
            onClicked: imageDialog.open()
        }
 
        Button{
            text : 'Go Back'
            Layout.preferredWidth: parent.width * 0.4
            onClicked: loader.pop()
        }
 
    }
 
    FileDialog{
        id : imageDialog
        title  : 'Choose Image'
        folder : shortcuts.pictures
        onAccepted:{
            selectedImage.openImage(imageDialog.fileUrl);
            picture.visible = false;
            selectedImage.visible = true;
        }
    }
 
 
}
 

showVideo.qml

import QtQuick 2.0
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import QtQuick.Dialogs 1.2
import com.app.frame 1.0
 
Page {
    anchors.fill:parent
 
    Connections{
 
        // name of class reference defined in main.cpp
        target: videoThread
        // updateView signal should be referred as onUpdateView such as a slot name
        // frame is a name of Mat object from updateView signal
        // name of parameter should be the same with it's definition
 
        onUpdateView : selectedImage.setRawFrame(frame)
    }
 
    Rectangle{
 
        id: bar
        width: parent.width
        height: parent.height * 0.1
        color: 'orange'
 
        Label{
            text : "Show Video"
            color : "white"
            anchors.centerIn: parent
        }
    }
 
    ColumnLayout{
 
        id: imageContainer
        width: 640
        height: 480
        anchors.top:bar.bottom
        anchors.topMargin: 20
        anchors.horizontalCenter: parent.horizontalCenter
 
        Image{
 
            id : picture
            source: "qrc:/logo"
            Layout.preferredWidth : imageContainer.width
            Layout.preferredHeight: imageContainer.height
            fillMode: Image.PreserveAspectFit
        }
 
        Frame{
 
            id : selectedImage
            Layout.preferredWidth: imageContainer.width
            Layout.preferredHeight: imageContainer.height
            visible: false
        }
 
 
    }
 
    RowLayout{
 
        anchors.top: imageContainer.bottom
        anchors.topMargin: 10
        anchors.horizontalCenter: parent.horizontalCenter
        width: parent.width * 0.6
        spacing: width * 0.2
 
        Button{
            text : 'Open Video'
            Layout.preferredWidth: parent.width * 0.4
            onClicked: videoDialog.open()
        }
 
        Button{
            text : 'Go Back'
            Layout.preferredWidth: parent.width * 0.4
            onClicked: loader.pop()
        }
 
    }
 
    FileDialog{
        id : videoDialog
        title  : 'Choose Video'
        folder : shortcuts.movies
        onAccepted:{
 
            picture.visible = false;
            selectedImage.visible = true;
            videoThread.runCapture(videoDialog.fileUrl);
        }
    }
 
 
}
 

app.pro

QT += quick
CONFIG += c++11
 
# The following define makes your compiler emit warnings if you use
# any Qt feature that has been marked deprecated (the exact warnings
# depend on your compiler). Refer to the documentation for the
# deprecated API to know how to port your code away from it.
DEFINES += QT_DEPRECATED_WARNINGS
 
# You can also make your code fail to compile if it uses deprecated APIs.
# In order to do so, uncomment the following line.
# You can also select to disable deprecated APIs only up to a certain version of Qt.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0
 
SOURCES += \
        filecapture.cpp \
        frame.cpp \
        main.cpp \
        threadmanager.cpp
 
RESOURCES += qml.qrc
 
INCLUDEPATH += /usr/local/include/opencv
LIBS += -L/usr/local/lib \
 -lopencv_core \
 -lopencv_imgproc \
 -lopencv_imgcodecs \
 -lopencv_videoio \
 -lopencv_flann \
 -lopencv_highgui \
 -lopencv_features2d \
 -lopencv_photo \
 -lopencv_video \
 -lopencv_calib3d \
 -lopencv_objdetect \
 -lopencv_stitching \
 -lopencv_dnn \
 -lopencv_ml
 
 
# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH =

# Additional import path used to resolve QML modules just for Qt Quick Designer
QML_DESIGNER_IMPORT_PATH =

# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target

HEADERS += \
    filecapture.h \
    frame.h \
    threadmanager.h