openFrameworks の GUI についてみてみます。

プロジェクト名は gui とします。

guiExample.png


ofxGui アドオンを使用する

はじめに、addons.make ファイルに、以下の1行を記述します。

ofxGui

次に、ofApp.h に、必要なヘッダファイルを追加します。

...略...
#include "ofxGui.h"

class ofApp : public ofBaseApp {
    ...略...
};

とりあえず円を描く

とりあえず円を描きます。

void ofApp::draw() {
    ofBackgroundGradient(ofColor::white, ofColor::gray);    // 背景色をグラデーションに

    ofDrawCircle(ofGetWidth() / 2, ofGetHeight() / 2, 100);    // 円を描く
}

パネルオブジェクト

まずは GUI の基盤となるパネルオブジェクトを作成します。

まずは、ofApp.h ヘッダファイルに ofxPanel オブジェクトを作成します。

...略...
#include "ofxGui.h"

class ofApp : public ofBaseApp {
    ...略...
        ofxPanel gui;
};

初期化と描画も行います。

void ofApp::setup() {
    gui.setup();
}

void ofApp::draw() {
    ofBackgroundGradient(ofColor::white, ofColor::gray);    // 背景色をグラデーションに

    gui.draw();

    ofDrawCircle(ofGetWidth() / 2, ofGetHeight() / 2, 100);    // 円を描く
}