QtでOpenCV(GraphicsViewに出力)

# はじめに
前回は、LabelにUSBカメラの映像を表示しました。
今回はGraphicsViewに映像を表示したいと思います。
前回のプロジェクトを使いますので、まだ見ておられない方は、
[こちら](https://qiita.com/tom_tom_tom/items/0490d930a90d94f4df02)
を参照してください。
前回細かく説明を記載しておりますので、今回からは要所のみの記載になります。

# UIの変更
前回作成したプロジェクトのOpenCVを開いてください。
mainWindow.uiを開きます。
何も変更していないのでしたら、下記の画面です。
![Screenshot from 2022-12-16 15-17-57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1473918/8cd83f18-f9f4-29a1-87c1-2133223df806.png)
前回作成したLabelへの表示を削除しないで、新たにGraphicsViewを追加します。
Qt Creatorをwindowで開いているのでしたら、フルスクリーン(最大化)してください。
先ず、Labelの位置を左にづらします。(ラベルをクリックして、キーボードの←押下で移動できます)
![Screenshot from 2022-12-16 15-27-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1473918/a23e7689-5857-9cca-713b-c14aaf8d0ace.png)
新たにGraphicsViewを追加するには、windowの幅が狭いですので、広げます。
Labelのない箇所でクリックします。
![Screenshot from 2022-12-16 15-30-13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1473918/0b362751-a6a2-d9cd-821d-ee1d49605fdc.png)
画面右下にある「geometry」の値を変更します。
```geometry.
幅：800 → 1330
高さ：600 → 変更なし
```
![Screenshot from 2022-12-16 15-32-37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1473918/c7472e30-970b-c768-fe76-121ef3019190.png)
windowが広がったのが分かります。
左側にある「GraphicsView」を中央へドラッグアンドドロップします。
![Screenshot from 2022-12-16 15-34-16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1473918/d6812611-0589-e59e-a60f-0cc2e65310a7.png)
このGraphicsViewのサイズも変更しますので、geometryを下記のように変更します
```geometry.
幅：256 → 650(Labelは640ですが、GraphicsViewでは少し増やしてください)
高さ：192 → 490(Labelは480ですが、GraphicsViewでは少し増やしてください)
```
![Screenshot from 2022-12-16 15-51-52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1473918/b0b37743-1471-9f56-b924-f4f585902f29.png)
水平のスクロールバーを右に移動すると、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時にエラーの出力はないと思います。
![Screenshot from 2022-12-16 15-56-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1473918/92677e03-c109-d267-f8f8-66224a1ccd8f.png)
左がLabelでの映像出力、右がGraphicsViewでの映像出力です。
(映像が暗くてすみません)

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

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