QtでOpenCV(GraphicsViewに出力)

はじめに

前回は、LabelにUSBカメラの映像を表示しました。
今回はGraphicsViewに映像を表示したいと思います。
前回のプロジェクトを使いますので、まだ見ておられない方は、
こちら
を参照してください。
前回細かく説明を記載しておりますので、今回からは要所のみの記載になります。

UIの変更

前回作成したプロジェクトのOpenCVを開いてください。
mainWindow.uiを開きます。
何も変更していないのでしたら、下記の画面です。

前回作成したLabelへの表示を削除しないで、新たにGraphicsViewを追加します。
Qt Creatorをwindowで開いているのでしたら、フルスクリーン(最大化)してください。
先ず、Labelの位置を左にづらします。(ラベルをクリックして、キーボードの←押下で移動できます)

新たにGraphicsViewを追加するには、windowの幅が狭いですので、広げます。
Labelのない箇所でクリックします。

画面右下にある「geometry」の値を変更します。

geometry.

幅：800 → 1330
高さ：600 → 変更なし

windowが広がったのが分かります。
左側にある「GraphicsView」を中央へドラッグアンドドロップします。

このGraphicsViewのサイズも変更しますので、geometryを下記のように変更します

geometry.

幅：256 → 650(Labelは640ですが、GraphicsViewでは少し増やしてください)
高さ：192 → 490(Labelは480ですが、GraphicsViewでは少し増やしてください)

水平のスクロールバーを右に移動すると、window内にGraphicsViewが入っていることが確認できます。UIはこれで終了です。Ctrl+sで保存して、mainwindow.uiを閉じます。

実装

mainwindow.hとmainwindow.cppにGraphicsViewを追加実装します。
前回追加したのが「追加」今回の追加は「GraphicsView追加」とコメントします。

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QTimer>				// 追加
#include <QMessageBox>			// 追加
#include <opencv2/opencv.hpp>	// 追加
#include <opencv2/highgui.hpp>	// 追加
#include <opencv2/imgproc.hpp>	// 追加
#include <QGraphicsView>		// GraphicsView追加

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private:
    Ui::MainWindow *ui;

private slots:					// 追加
	void updateWindow();		// 追加

private:						// 追加
	QTimer *timer;				// 追加
	cv::VideoCapture cap;		// 追加
	cv::Mat frame, dst;			// 追加
	QImage qtImage;				// 追加
	QGraphicsScene Scene;		// GraphicsView追加
	QPixmap pixmap;				// GraphicsView追加
};
#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include "opencv2/opencv.hpp"			// 追加
#include "opencv2/imgproc/types_c.h"	// 追加

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

	ui->graphicsView->setScene(&Scene);	// GraphicsView追加

	// 追加(ここから)
	timer = new QTimer(this);

	cap.open(0);
	if(!cap.isOpened()){
		QMessageBox msgBox(this);
		msgBox.setText(tr("カメラがオープンできませんでした。"));
		msgBox.setWindowTitle(tr("エラー"));
		msgBox.setStandardButtons(QMessageBox::Yes);
		msgBox.setDefaultButton(QMessageBox::Yes);
		msgBox.setIcon(QMessageBox::Warning);
		msgBox.exec();
		exit(0);
	}

	cap.set(cv::CAP_PROP_FRAME_WIDTH, 640);
	cap.set(cv::CAP_PROP_FRAME_HEIGHT, 480);

	connect(timer, SIGNAL(timeout()), this, SLOT(updateWindow()));

	timer->start(20);
	// 追加(ここまで)
}

MainWindow::~MainWindow()
{
    delete ui;
}


// 追加(ここから)
void MainWindow::updateWindow()
{
	cap >> frame;
	cv::cvtColor(frame, dst, cv::COLOR_BGR2RGB);

	qtImage = QImage((const unsigned char*) (dst.data), dst.cols, dst.rows, QImage::Format_RGB888);
	ui->label->setPixmap(QPixmap::fromImage(qtImage));

	Scene.clear();							// GraphicsView追加
	pixmap = QPixmap::fromImage(qtImage);	// GraphicsView追加
	Scene.addPixmap(pixmap);				// GraphicsView追加
}
// 追加(ここまで)

build&run

実装が完了しましたら、▶をクリックして、build & run します。
今回は前回のプロジェクトを使用しておりますので、build時にエラーの出力はないと思います。

左がLabelでの映像出力、右がGraphicsViewでの映像出力です。
(映像が暗くてすみません)

まとめ

OpenCVでUSBカメラから取得した映像をLabelとGraphicsViewに出力してみました。
複雑なことは何もしておりません。

今後の予定

タイマではなく、スレッドでUSBカメラを取得するを投稿したいと思います。