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

なんとか、コンボボックスのGUIを実装することができました。

C++にも慣れてきたかな??

前回までで、GUIの作り方を確認して、色々と検証を行なっていました。一つ目のスロット選択部分をコンボボックスとすることができましたので、備忘録として記載していきます。

こんな人の役に立つかも

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

・JUCEのコンボボックスでGUIが作成したい人

・JUCEのCascadePluginチュートリアルをやっている人

目次

Editorクラスのプログラム

音声処理ノードをコンボボックスで選択できるようにしようと考え、「juce::comboBox」クラスを利用することにしました。

PluginEditor.h

「PluginEditor.h」に以下のようにコンボボックスを追加しました。

class CascadePlugin2AudioProcessorEditor  : public juce::AudioProcessorEditor,
    private juce::ComboBox::Listener//←★[1]add
{
public:
    CascadePlugin2AudioProcessorEditor (CascadePlugin2AudioProcessor&);
    ~CascadePlugin2AudioProcessorEditor() override;

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

private:
    void comboBoxChanged(juce::ComboBox* combo1) override;//★[2]add
    // This reference is provided as a quick way for your editor to
    // access the processor object that created it.
    CascadePlugin2AudioProcessor& audioProcessor;

    juce::ComboBox slot1;//★[3]slot1というコンボボックスクラスのメンバ変数を作成します。

    JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (CascadePlugin2AudioProcessorEditor)
};

[1]コンボボックスのリスナー関数をオーバーライドできるように追加します。

[2]コンボボックスのリスナー関数のプロトタイプ宣言を行いました。

[3]「juce::comboBox」クラスのメンバ変数を定義しました。

「JUCE::ComboBox::Listener」クラスについては、以下のドキュメントも参考にしています。

あわせて読みたい

PluginEditor.cpp

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

①コンボボックスの初期設定

②コンボボックスの見た目設定

③コンボボックスのリスナー関数設定

を行います。

①コンボボックスの初期設定

「PluginEditor.cpp」では、まず、コンストラクタでコンボボックスの初期化を行いました。コンボボックスに追加する項目は、PluginProcessorのAudioParameterChoiceに設定したarrayと同じ項目である「Empty」、「Oscillator」、「Gain」、「Filter」です。ちなみに、コンボボックスは「0」を取ることができないようで、注意が必要です。(Emptyを1とします)

CascadePlugin2AudioProcessorEditor::CascadePlugin2AudioProcessorEditor (CascadePlugin2AudioProcessor& p)
    : AudioProcessorEditor (&p), audioProcessor (p)
{
    //コンボボックスの初期設定★
    slot1.addItem("Empty", 1);
    slot1.addItem("Oscillator", 2);
    slot1.addItem("Gain", 3);
    slot1.addItem("Filter", 4);
    slot1.setSelectedId(1);
    addAndMakeVisible(&slot1);//コンボボックスの可視化です。
    slot1.addListener(this);//リスナー関数に紐づけます。

    setSize(400, 300);
}

「addItem」関数で上のように、(項目名、ID)として4つの項目を登録しています。先ほども記載したとおり、コンボボックスは1から始める必要があるので、Emptyを1とした4までの項目を登録しました。

コンボボックスの初期値は「setSelectedId」関数でセットしました。「1」のemptyとしていいます。そして、addAndMakeVisible関数でコンボボックスを可視化し、addListener関数でリスナー関数への紐づけを行いました。

②コンボボックスの見た目設定

void CascadePlugin2AudioProcessorEditor::resized()
{
    slot1.setBounds(40, 30, 200, 30);//コンボボックスのサイズを指定します。★
}

③コンボボックスのリスナー関数設定

コンボボックスが変更されたら実行される関数です。処理では、この後に実装する「setSlot1」というアクセサを呼び出してprocessorクラスのprivateなメンバ変数へ値を渡します。

//コンボボックスのリスナー関数です。★
void CascadePlugin2AudioProcessorEditor::comboBoxChanged(juce::ComboBox* combo1)
{
    audioProcessor.setSlot1(slot1.getSelectedId()-1);//processorSlot1の値を変更します。★
}

comboBoxの値取得は「getSelectedId」関数を利用します。この関数はint型で選択されている項目を返してくれますので、次に作成する「setSlot1」関数の引数とすることができます。しかし、コンボボックスは項目のIDが1から始まるため、setSlot1に入れる0から始まる項目IDとするために「-1」をしています。

Processor側の変更

Processor側は、変更点は微小です。次の2点を変更しました。

①privateなメンバ「processSlot1」の値を変更する関数を作成(アクセサ)。

②createEditorを「GenericAudioProcessorEditor」から変更。

①privateなメンバ「processSlot1」の値を変更する関数を作成。

「PluginProcessor.h」に、Editorクラスからスロット1の数値を変更できるように「setSlot1」関数をpublicに入れて、pribateなメンバ変数「processorSlot1」に値を入れられるようにしました。

class CascadePlugin2AudioProcessor : public juce::AudioProcessor
{
public:
    void setSlot1(int num)//引数にはintを取ります。★
    {
        processorSlot1->operator=(num);
    }

AudioParameterChoiceクラスには、「operator=(int)」で設定値を変更することができますので、setSlot1関数の引数をint型で受け、それをそのままoperator=に入れています。

こういうのをアクセサメソッドというのでしょうか。

②createEditorを「GenericAudioProcessorEditor」から変更

今までチュートリアルでは、Processorに存在するパラメータを自動で並べてくれる「GenericAudioProcessorEditor」を使っていましたが、今回はこの部分を自力で自作するため、以下のように、Editorクラスを指定します。

「PluginProcessor.cpp」のcreateEditor関数を以下のように変更します。

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

今回作成したプログラム

Githubの以下のリポジトリにアップロードしましたので、例としてご利用くださいませ。

GitHub
GitHub - perfectpanda-works/CascadePlugin2 Contribute to perfectpanda-works/CascadePlugin2 development by creating an account on GitHub.

 

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次