Qt Designerとカスタムウィジェット

【Qt をもうちょっといじってみよう】

昨日に引き続き、Qt （+ OpenCV）のお勉強。表題でカスタムウィジェットとか言っているけど、単にこんなものを作っただけだったりして。

昨日と比べて、なんかスクロールバー的なものがくっついているあたりがおしゃれ。

---

【とにかく作り始める】

まず、昨日と同様、以下のようなメインウィンドウ（MainWindow クラス）を作り、画面いっぱいに ScrollArea ウィジェットを配置する。なお、ObjectName プロパティは scrollArea にした。

外観だけ作って、コードはまだ書かない。

このままでは、scrollArea は空っぽのままなので、これから作る『画像表示機能をくっつけた改造ウィジェット』をセットしてやる。

あ、その前に、ちゃんとプロジェクトファイル（～.pro）に

view plainprint?

1. INCLUDEPATH += C:/OpenCV2.0/include/opencv  
2. DEPENDPATH += C:/OpenCV2.0/include/opencv  
3.   
4. win32:CONFIG(release, debug|release): LIBS += -LC:/OpenCV2.0/lib/release/ -lcv200  
5. else:win32:CONFIG(debug, debug|release): LIBS += -LC:/OpenCV2.0/lib/debug/ -lcv200d  
6.   
7. win32:CONFIG(release, debug|release): LIBS += -LC:/OpenCV2.0/lib/release/ -lcxcore200  
8. else:win32:CONFIG(debug, debug|release): LIBS += -LC:/OpenCV2.0/lib/debug/ -lcxcore200d  
9.   
10. win32:CONFIG(release, debug|release): LIBS += -LC:/OpenCV2.0/lib/release/ -lhighgui200  
11. else:win32:CONFIG(debug, debug|release): LIBS += -LC:/OpenCV2.0/lib/debug/ -lhighgui200d  

INCLUDEPATH += C:/OpenCV2.0/include/opencv
DEPENDPATH += C:/OpenCV2.0/include/opencv

win32:CONFIG(release, debug|release): LIBS += -LC:/OpenCV2.0/lib/release/ -lcv200
else:win32:CONFIG(debug, debug|release): LIBS += -LC:/OpenCV2.0/lib/debug/ -lcv200d

win32:CONFIG(release, debug|release): LIBS += -LC:/OpenCV2.0/lib/release/ -lcxcore200
else:win32:CONFIG(debug, debug|release): LIBS += -LC:/OpenCV2.0/lib/debug/ -lcxcore200d

win32:CONFIG(release, debug|release): LIBS += -LC:/OpenCV2.0/lib/release/ -lhighgui200
else:win32:CONFIG(debug, debug|release): LIBS += -LC:/OpenCV2.0/lib/debug/ -lhighgui200d

を書き加える必要がある。詳しくは昨日の日記参照（あんまり詳しくないけれど）。

---

【改造ウィジェット作成】

次に、Qt Designer フォームクラスを新規作成。テンプレートは Widget を選択して、Form クラスと名付ける（デザインは初期状態のまま手をつけない）。

すると form.h と form.cpp が自動生成されるので、以下のように書き換えた。

form.h

view plainprint?

1. #ifndef FORM_H  
2. #define FORM_H  
3.   
4. #include <QImage>  
5. #include <QPainter>  
6. #include <QWidget>  
7.   
8. #include <cv.h>  
9. #include <cxcore.h>  
10. #include <highgui.h>  
11.   
12. namespace Ui {  
13.     class Form;  
14. }  
15.   
16. class Form : public QWidget  
17. {  
18.     Q_OBJECT  
19.   
20. public:  
21.     explicit Form(QWidget *parent = 0);  
22.     ~Form();  
23.   
24.     // 表示したいIplImageをセットする  
25.     void setIplImage(const IplImage*);  
26.   
27. protected:  
28.     // オーバーライド∩( ・ω・)∩  
29.     void Form::paintEvent(QPaintEvent*);  
30.   
31. private:  
32.     Ui::Form *ui;  
33.     QImage *qImg;  
34. };  
35.   
36. #endif // FORM_H  

#ifndef FORM_H
#define FORM_H

#include <QImage>
#include <QPainter>
#include <QWidget>

#include <cv.h>
#include <cxcore.h>
#include <highgui.h>

namespace Ui {
    class Form;
}

class Form : public QWidget
{
    Q_OBJECT

public:
    explicit Form(QWidget *parent = 0);
    ~Form();

    // 表示したいIplImageをセットする
    void setIplImage(const IplImage*);

protected:
    // オーバーライド∩( ・ω・)∩
    void Form::paintEvent(QPaintEvent*);

private:
    Ui::Form *ui;
    QImage *qImg;
};

#endif // FORM_H

form.cpp

view plainprint?

1. #include "form.h"  
2. #include "ui_form.h"  
3.   
4. Form::Form(QWidget *parent) :  
5.     QWidget(parent),  
6.     ui(new Ui::Form),  
7.     qImg(NULL) // qImgを初期化  
8. {  
9.     ui->setupUi(this);  
10. }  
11.   
12. Form::~Form()  
13. {  
14.     delete ui;  
15.     if(qImg != NULL) delete qImg;  
16. }  
17.   
18. void Form::paintEvent(QPaintEvent *) {  
19.     if(qImg != NULL) {  
20.         QPainter widgetPainter(this);  
21.         widgetPainter.drawImage(0, 0, *qImg);  
22.     }  
23. }  
24.   
25. // IplImage から QImage に変換！  
26. void Form::setIplImage(const IplImage *iplImg)  
27. {  
28.     if(iplImg == NULL) return;  
29.   
30.     int h = iplImg->height;  
31.     int w = iplImg->width;  
32.     int channels = iplImg->nChannels;  
33.   
34.     if (qImg != NULL) delete qImg;  
35.     qImg = new QImage(w, h, QImage::Format_ARGB32);  
36.   
37.     char *data = iplImg->imageData;  
38.     for (int y = 0; y < h; y++, data += iplImg->widthStep)  
39.     {  
40.         for (int x = 0; x < w; x++)  
41.         {  
42.             char r, g, b, a = 0;  
43.             if (channels == 1)  
44.             {  
45.                 r = g = b = data[x * channels];  
46.             }  
47.             else if (channels == 3 || channels == 4)  
48.             {  
49.                 r = data[x * channels + 2];  
50.                 g = data[x * channels + 1];  
51.                 b = data[x * channels];  
52.             }  
53.   
54.             if (channels == 4)  
55.             {  
56.                 a = data[x * channels + 3];  
57.                 qImg->setPixel(x, y, qRgba(r, g, b, a));  
58.             }  
59.             else  
60.             {  
61.                 qImg->setPixel(x, y, qRgb(r, g, b));  
62.             }  
63.         }  
64.     }  
65.     setMinimumSize(iplImg->width, iplImg->height);  
66.     update();  
67. }  

#include "form.h"
#include "ui_form.h"

Form::Form(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Form),
    qImg(NULL) // qImgを初期化
{
    ui->setupUi(this);
}

Form::~Form()
{
    delete ui;
    if(qImg != NULL) delete qImg;
}

void Form::paintEvent(QPaintEvent *) {
    if(qImg != NULL) {
        QPainter widgetPainter(this);
        widgetPainter.drawImage(0, 0, *qImg);
    }
}

// IplImage から QImage に変換！
void Form::setIplImage(const IplImage *iplImg)
{
    if(iplImg == NULL) return;

    int h = iplImg->height;
    int w = iplImg->width;
    int channels = iplImg->nChannels;

    if (qImg != NULL) delete qImg;
    qImg = new QImage(w, h, QImage::Format_ARGB32);

    char *data = iplImg->imageData;
    for (int y = 0; y < h; y++, data += iplImg->widthStep)
    {
        for (int x = 0; x < w; x++)
        {
            char r, g, b, a = 0;
            if (channels == 1)
            {
                r = g = b = data[x * channels];
            }
            else if (channels == 3 || channels == 4)
            {
                r = data[x * channels + 2];
                g = data[x * channels + 1];
                b = data[x * channels];
            }

            if (channels == 4)
            {
                a = data[x * channels + 3];
                qImg->setPixel(x, y, qRgba(r, g, b, a));
            }
            else
            {
                qImg->setPixel(x, y, qRgb(r, g, b));
            }
        }
    }
    setMinimumSize(iplImg->width, iplImg->height);
    update();
}

別に大した事はやっておらず、QWidget を継承して、与えられた画像を表示するようにちょこちょこ書き換えただけ。というか、昨日 MainWindow に書いたような処理をほとんど移しただけである（が、ほんのちょっとだけ改良したりもした）。

---

ふたたび MainWindow クラスに戻り、ヘッダとソースを以下のように書き換える。

mainwindow.h

view plainprint?

1. #ifndef MAINWINDOW_H  
2. #define MAINWINDOW_H  
3.   
4. #include <QMainWindow>  
5.   
6. #include "form.h"   // さっき作ったFormを使う  
7.   
8. namespace Ui {  
9.     class MainWindow;  
10. }  
11.   
12. class MainWindow : public QMainWindow  
13. {  
14.     Q_OBJECT  
15.   
16. public:  
17.     explicit MainWindow(QWidget *parent = 0);  
18.     ~MainWindow();  
19.   
20. private slots:  
21.     void on_action_Open_triggered();  
22.   
23. private:  
24.     Ui::MainWindow *ui;  
25.     Form *form;  
26. };  
27.   
28. #endif // MAINWINDOW_H  

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

#include "form.h"   // さっき作ったFormを使う

namespace Ui {
    class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

private slots:
    void on_action_Open_triggered();

private:
    Ui::MainWindow *ui;
    Form *form;
};

#endif // MAINWINDOW_H

mainwindow.cpp

view plainprint?

1. #include "mainwindow.h"  
2. #include "ui_mainwindow.h"  
3.   
4. #include<QFileDialog>  
5.   
6. MainWindow::MainWindow(QWidget *parent) :  
7.     QMainWindow(parent),  
8.     ui(new Ui::MainWindow),  
9.     form(new Form)  
10. {  
11.     ui->setupUi(this);  
12.     ui->scrollArea->setWidget(form);  
13. }  
14.   
15. MainWindow::~MainWindow()  
16. {  
17.     // delete form; ←これを書かなくてもちゃんとメモリが解放された。すごい。  
18.     delete ui;  
19. }  
20.   
21. void MainWindow::on_action_Open_triggered()  
22. {  
23.     QString fileName =  
24.         QFileDialog::getOpenFileName  
25.             (this, tr("Open Image"), ".",  
26.              tr("Image (*.jpg *.jpeg *.png *.bmp)"));  
27.   
28.     if(!fileName.isEmpty()) {  
29.         IplImage *img =  
30.             cvLoadImage(fileName.toLocal8Bit());  
31.   
32.         if(img != NULL) {  
33.             // formにIplImageをセット  
34.             form->setIplImage(img);  
35.   
36.             // そしてすぐ解放  
37.             cvReleaseImage(&img);  
38.         }  
39.     }  
40. }  

#include "mainwindow.h"
#include "ui_mainwindow.h"

#include<QFileDialog>

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow),
    form(new Form)
{
    ui->setupUi(this);
    ui->scrollArea->setWidget(form);
}

MainWindow::~MainWindow()
{
    // delete form; ←これを書かなくてもちゃんとメモリが解放された。すごい。
    delete ui;
}

void MainWindow::on_action_Open_triggered()
{
    QString fileName =
        QFileDialog::getOpenFileName
            (this, tr("Open Image"), ".",
             tr("Image (*.jpg *.jpeg *.png *.bmp)"));

    if(!fileName.isEmpty()) {
        IplImage *img =
            cvLoadImage(fileName.toLocal8Bit());

        if(img != NULL) {
            // formにIplImageをセット
            form->setIplImage(img);

            // そしてすぐ解放
            cvReleaseImage(&img);
        }
    }
}

スクロールエリアは、QScrollArea::setWidget() に子ウィジェット（ここでは form ）を渡す。

すると、form の親ウィジェットが自動的に設定される。

ちなみに Qt は、親ウィジェットが死ぬとき、自動的に子ウィジェットも delete されるので、ここでは敢えて form の解放コードを書く必要はない。

今回の肝は、ウィジェットをいじくり回したいなら、（当該ウィジェットの）基底クラスを継承しててきとうにオーバーライドすれば OK というお話である。めでたし。

---

【おまけ】

そういえば昨日、てきとうに作り過ぎた事もあって、ファイルを開こうとするたびに、 "." から目的のファイルを探しにいかなければならなかった。これは地味に使い勝手が悪く、デバッグするたびに溜飲が上がっていた。

そこで、『（例えば）一度マイピクチャから画像を開いたら次からはマイピクチャを拠点にファイルを探しに行けるように改良したいな』と思ったので、頭の体操がてら on_action_Open_triggered() を（ほんの2、3行だけ）いじってみた。

view plainprint?

1. void MainWindow::on_action_Open_triggered()  
2. {  
3.     static QDir dir(tr("."));   // 追加！  
4.     QString fileName =  
5.         QFileDialog::getOpenFileName  
6.             (this, tr("Open Image"), dir.absolutePath(),  
7.              tr("Image (*.jpg *.jpeg *.png *.bmp)"));  
8.   
9.     if(!fileName.isEmpty()) {  
10.         IplImage *img =  
11.             cvLoadImage(fileName.toLocal8Bit());  
12.   
13.         if(img != NULL) {  
14.             // 前回開いたファイルの場所を静的変数に格納  
15.             // （次に開くときは、この場所が拠点になる）  
16.             dir = QFileInfo(QFile(fileName)).dir();  
17.   
18.             form->setIplImage(img);  
19.             cvReleaseImage(&img);  
20.         }  
21.     }  
22. }  

void MainWindow::on_action_Open_triggered()
{
    static QDir dir(tr("."));   // 追加！
    QString fileName =
        QFileDialog::getOpenFileName
            (this, tr("Open Image"), dir.absolutePath(),
             tr("Image (*.jpg *.jpeg *.png *.bmp)"));

    if(!fileName.isEmpty()) {
        IplImage *img =
            cvLoadImage(fileName.toLocal8Bit());

        if(img != NULL) {
            // 前回開いたファイルの場所を静的変数に格納
            // （次に開くときは、この場所が拠点になる）
            dir = QFileInfo(QFile(fileName)).dir();

            form->setIplImage(img);
            cvReleaseImage(&img);
        }
    }
}

ここでは拠点となるディレクトリを静的記憶領域 dir に格納している。private なメンバ変数でもよいかも知れないが、一つの関数でしか使わないような変数をいちいちヘッダファイルに宣言するのも面倒だったので、今回は敢えて static 変数を選んだ。

これで幸せになれるね。