JUCEプログラミング、カスケードプラグインにGUIを自作したい、ToggleButtonのGUI

カスケードプラグインの操作には、スロットとなる「コンボボックス」が３個と、各種ミュートやバイパスを行うためのチェックを入れるボタン（ToggleButton）がありました。

今回は、ToggleButtonを自作のEditorクラスに実装して、入力音声のオンオフをGUIから制御できるようにしていきます。

こんな人の役に立つかも

・JUCEフレームワークに入門したい人

・JUCEのToggleButtonクラスでGUIが作成したい人

・JUCEのGUIを作成したい人

Editorクラスのプログラム

「PluginEditor.h」では、以下ように、トグルボタンの追加を行いました。

class CascadePlugin2AudioProcessorEditor : public juce::AudioProcessorEditor,
    private juce::ComboBox::Listener,
    private juce::Button::Listener//[1]Button::Listenerクラスのリスナーを利用してToggleButtonの変化を検出します。
{
public:
    CascadePlugin2AudioProcessorEditor (CascadePlugin2AudioProcessor&);
    ~CascadePlugin2AudioProcessorEditor() override;

    //==============================================================================
    void paint (juce::Graphics&) override;
    void resized() override;

private:
    void comboBoxChanged(juce::ComboBox* combo1) override;
    //void buttonStateChanged(juce::Button* mute) override;//←結局コメントアウトしました。
    void buttonClicked(juce::Button* mute) override;//[2]リスナー関数のプロトタイプ宣言です。
    // This reference is provided as a quick way for your editor to
    // access the processor object that created it.
    CascadePlugin2AudioProcessor& audioProcessor;

    juce::ComboBox slot1;

    juce::ToggleButton muteInputToggle;//[3]

    JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (CascadePlugin2AudioProcessorEditor)
};

[1]では、Buttonクラスのリスナー関数を使えるようにEditorクラスに追加しています。最初、ToggleButtonクラスを利用したいので、ToggleButtonクラスにリスナーはないのかな、と探していましたが、ToggleButtonなど一連のボタンクラスは抽象クラスのButtonクラスを継承して作成されているとのことで、Button::Listenerクラスを利用すると良いことがわかりました。

[2]で、ボタンがクリックされたときのリスナー関数のプロトタイプ宣言を行っています。button::Listenerクラスには、「buttonStateChanged」という関数があり、最初こちらを利用しようと思っていたのですが、「buttonClicked」関数が定義されていないと、ビルドエラーになるようで、最終的に「buttonClicked関数」をリスナー関数として利用しました。

[3]でToggleButtonオブジェクト「muteInputToggle」を定義しました。

PluginEditor.cpp

「PluginEditor.cpp」では、以下の項目の追加を行いました。

①トグルボタンの初期設定

②トグルボタンの見た目設定

③トグルボタンのリスナー関数設定

を行います。

①トグルボタンの初期設定

「PluginEditor.cpp」のコンストラクタで、ToggleButtonオブジェクトの初期設定を行っています。

CascadePlugin2AudioProcessorEditor::CascadePlugin2AudioProcessorEditor (CascadePlugin2AudioProcessor& p)
    : AudioProcessorEditor (&p), audioProcessor (p)
{
    //...略...

    //↓●toggleButton
    addAndMakeVisible(&muteInputToggle);//ToggleButtonを可視化しています。
    muteInputToggle.addListener(this);//ToggleButtonをリスナー関数への紐づけを行います。

    setSize(400, 300);
}

②トグルボタンの見た目設定

resize関数の中で、GUIの配置設定を行っています。ComponentsクラスのsetBound関数を利用して次のようにコンボボックスの下の位置に配置するようにしました。

void CascadePlugin2AudioProcessorEditor::resized()
{
    slot1.setBounds(40, 30, 200, 30);
    muteInputToggle.setBounds(40, 80, 30, 30);//←追加した行です。
}

③トグルボタンのリスナー関数設定

リスナー関数です。「buttonClicked」関数の方に実装を行っています。juce::Buttonクラスへのポインタ「b」を引数として受け取りますので、ここにToggleButtonのオブジェクトが入ってきます。そのため、アロー演算子を利用して、「getToggleState」関数を呼び出して、ToggleButtonがTrueの状態か、Falseの状態かを取得しています。

/*void CascadePlugin2AudioProcessorEditor::buttonStateChanged(juce::Button* b)
{
    audioProcessor.setMute(b);
}*/
//↑最小はこちらの関数をオーバーライドしようとしていましたが、
//button::Listerクラスは、button clickedがないとビルドに失敗するようです。
void CascadePlugin2AudioProcessorEditor::buttonClicked(juce::Button* b)
{
    bool t_or_f = b->getToggleState();
    audioProcessor.setMute(t_or_f);
}

最後に、「setMute」関数に取得したbool型変数を入れますが、この関数は次に実装するProcessorクラスのアクセサとなります。

Processor側の変更

PluginProcessor.hのpublicなメンバ関数として、「muteInput」パラメータにアクセスするための「setMute」関数を作成しました。

public:
    void setSlot1(int num)//★
    {
        processorSlot1->operator=(num);
    }

    void setMute(bool flg)//←このアクセサを追加しました。
    {
        muteInput->operator=(flg);
    }

また、PluginProcessor.cppのcreateEditor関数では以下のように今回作成しているEditorクラスであることを確認しておきます。

juce::AudioProcessorEditor* CascadePlugin2AudioProcessor::createEditor()
{
    return new CascadePlugin2AudioProcessorEditor(*this);//★
    //return new juce::GenericAudioProcessorEditor(*this);
}

動作検証

下のスクリーンショットのように、コンボボックスの位置の↓にチェックを入れたり外したりできるボタンオブジェクトが配置されました。

今回の実装で参考にしたドキュメント

実装に際して、次のページを参考にしました。

ボタン系のリスナー関数を追加するドキュメント

JUCE::Buttonクラス

JUCE::ToggleButtonクラス