JUCEのGUIをさわってみた備忘録

#JUCEのGUIを勉強しようと

2017アドベントカレンダーから

[ProjucerのGUIエディタを紹介してみる](https://qiita.com/COx2/items/95d2c89962cf9ddef841)

を参考にして作った。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/26f22420-fbbc-a9ef-17b5-8b38b3d379f1.png)

これをちゃんと、動作するまでの紹介になります。

追記　2018-01-19：後にAudioProcessorParameterなるものがでてきたので、この情報はちょっと古いようです。

# Audio-Pluginを作る

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/9e00420a-7d80-c36d-d1a8-dfa252ba339d.png)

違う点として、
まず、AUやVST　Pluginとして作るところからはじめました。

New Projectで Audio Plug-inを選択して始めます。

そして、
[ProjucerのGUIエディタを紹介してみる](https://qiita.com/COx2/items/95d2c89962cf9ddef841)
と同じように作っていきます。

# まず大前提
VSTのGUI側は オーディオのコアの処理と別で 
画面が消えると破棄される事を考慮すると良い。 

コアの処理からUIを操作するのではなく UIの処理がコアの値をポーリングするような実装

つまり、コアに値を持つ。

コアにUIの参照は持たない。UIからコアの参照を持つのじゃ。

#値を保持する

同じものをDAWのLogicXで右上の表示から、「エディタ」を選ぶと、
ホストアプリの標準のUIになる。

ここでは、スライダーの値をs1という内部値でもつことにしました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/11ba7005-5648-335e-c5be-c125392c4ab5.png)

Ableton Liveだとこんな感じ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/8826099e-1f0b-452c-e0d7-ebfe2e7ddebd.png)


# 内部値を持つ

これを行うには、以下の作業が必要です。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/f91d2789-3ea5-d34a-a06d-a9a93bb26e14.png)


内部パラメータを持つため、

``` PluginProcessor.h
    enum Parameters {
        s1 = 0,
        totalNumParam
    };
```
ここでは、enum名がs1で持ってます。

VSTは値をIndexで管理するので、このenumはIndexをわかりやすくする用。
enum名でなんだかわかるようにしておく。

``` PluginProcessor.h
    int getNumParameters() override;
    float getParameter (int parameterIndex) override;
    const String getParameterName (int parameterIndex) override;
    const String getParameterText (int parameterIndex) override;
    void setParameter (int parameterIndex, float newValue) override;
    
    float UserParams[totalNumParam];
```
これ、UserParamsにfloatで値を保持しておき、
override系は、ホストアプリが値を得るための関数群になります。

Indexアクセスですね。

float UserParams[]；
は、先ほどのenumの数分配列を用意しています。

enumの最後の項目が、要素数になるといったテクニッック。

# 値をポーリングする

VSTが持つ内部値をUIに定期的に反映させるために
Timerコールバックを使います。


![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/b6c9fa06-f35b-9bda-be9f-3d8042269c10.png)

ホストアプリからスライダー変更を通知させるために
タイマーを動かして、GUIのスライダーを更新させるために使っています。

# UI系の初期化時に、processor(内部処理のコアがかかれている）を渡して、表示に備えます。

NewComponent側（スライダー作っているもの）にprocessorのポインタを渡す。
これで、コア処置と　UIの連携ができます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/1f12dadd-8d99-79ce-f2e6-1b610d7edb03.png)

setProcessor関数でコアの参照（ポインタ）をUI処置側に持たせて、
スライダーを変更した時のイベント（コールバック）内で、
processorの内部値を変更しています。

# NewComonent.cppの中身

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/1dda4b8e-58a7-558e-d84d-86cab133ecca.png)

# スライダーを動かしたら内部値を変更します。
スライダーのイベントで、値を変えているここ重要で

setParameterNotifyingHost

で、内部値の更新とともに、ホストアプリへも通知します。

これで、Logicでレコードしたりすれば、オートメーションに書かれるはずです。

``` NewComonent.cpp
if (sliderThatWasMoved == slider)
    {
        //[UserSliderCode_slider] -- add your slider handling code here..
        if(processor != nullptr)
        {
            processor->beginParameterChangeGesture(0);
            processor->setParameterNotifyingHost(0,slider->getValue());
            processor->endParameterChangeGesture(0);
        }
        //[/UserSliderCode_slider]
    }
``` 

# enum と Index
上のソースだとIndexに0 を直接書いているけど、
GuitestAudioProcessor::Parameters::s1　はenumだけどintにキャストされるとIndex値になるので、

``` NewComonent.cpp
processor->setParameterNotifyingHost(GuitestAudioProcessor::Parameters::s1,slider->getValue());
```
とすると、enum値とIndexと一致してあとで見た時わかりやすい。

# ParameterChangeGesture

この前後を
beginParameterChangeGestureとendParameterChangeGestureでくくられているのは何か？

## これくくらないとどうなるか？

例えば、LogicでLatchモード（再生中もコントロールいじった時だけ上書きするモード）で動かした時

1.オートメーションに書かれた値で、コントロールの表示が連動し、UIが変わります。
 これは先ほどのTimerで、

``` PluginEditor.cpp
void GuitestAudioProcessorEditor::timerCallback()
{
    adventCalnedar.updateParams(processor.UserParams[0]);
}
```
PluginEditorから30msec間隔で更新されつづけています。

``` NewComponent.cpp
void AdventCalendar::updateParams(float val)
{
    slider->setValue(val,dontSendNotification);
}
```
ここで、スライダーに値がセットされています。

2.さらにユーザーが、スライダーを動かそうとする。

どちらの値が優先されるか？

が不明です。
(Unityでいうところの、「エディター実行中に編集しても編集結果が反映されない」と同じ状況。動作結果を表示したいUIと編集したいUIが同じために起きる混乱）


ここで、beginParameterChangeGesture でくくることで、

「今、このパラメータはスライダーで変更しようとユーザーがジェスチャーしている」
とホストアプリに伝えることで、　ホストアプリからのスライダー更新が抑制されるのです。

このホストからの抑制処理が来ないと、Latchモードとかで、ホストの処理が優先されたりして、
スライダーをいじっても変更できない恐れがあります。

以上、備忘録。![slider.gif](https://qiita-image-store.s3.amazonaws.com/0/96808/f5e2d2b3-d6ce-6e98-7f9c-cf5713abfcef.gif)

#　追記

## 内部値の表示や範囲について

### getParameter
VSTやAudioUnitが持っている内部値は、一定のインターフェースで保持される。
float型で、0.0~1.0に正規化された値。（じゃなくてもfloatなら良さそうだけど後述）

### getParameterText
これを表示時に倍率かけたり、文字列に置き換えたりしたものがホストアプリに表示される仕組み。

Liveとかだと0.0~100とか1.0超えてもOKと聞いたけど、いろいろなDAWに対応しようと思うと低い仕様に合わせる方が無難か

## 落とし穴が

### Logicのオートメーションの値が0.0~1.0表記

値の範囲を0.0~1.0にしている限りは問題ないのですが、
例えば0~127にしたい　とした場合にAudioUnit(Logic固有？)の場合で混乱があります。

オートメーションや、コントロール表示の時は、相変わらず内部値をそのまま表示している。
エディタ表示の時だけ変換されるといった感じ。

### AbletonLiveでもオートメーション値は0.0~1.0表記みたい。
![slider.gif](https://qiita-image-store.s3.amazonaws.com/0/96808/bafe73d9-ca35-96bf-0ef7-62f92b23f02b.gif)

これは、どう解決するものなのか・・・
まぁ、内部値は何か方法があるような。

とりあえずは動いているからよしとするか。

# 追記(2018-01-19)
AudioProcessor::getParameterって非推奨なのか！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/951bfecd-0b1f-6f53-963b-7ad28d47ae05.png)

AudioProcessorParameter使うと良いらしい。

使い方はここらあたりにある
https://juce.com/doc/tutorial_audio_parameter


# setParameterNotifyingHostも非推奨？！

AudioProcessorParameterを使うと・・・
たとえば

``` GUI.cpp
void GUIComponent::sliderValueChanged (Slider* sliderThatWasMoved)
{
    //[UsersliderValueChanged_Pre]
    //[/UsersliderValueChanged_Pre]

    if (sliderThatWasMoved == sliderAR)
    {
        //[UserSliderCode_sliderAR] -- add your slider handling code here..
        processor->paramOsc1AR->beginChangeGesture();
        *(processor->paramOsc1AR) = sliderAR->getValue();
        processor->paramOsc1AR->endChangeGesture();
        //[/UserSliderCode_sliderAR]
    }
```

といった感じですみそう。