スライダークラス
このチュートリアルではSliderクラスで、スライダーの動きに応答する方法と、スライダーから値を取得する方法を示します。このチュートリアルでは、スライダーで値を表示するために不可欠なカスタマイズテクニックも紹介します。
レベル初心者
プラットフォーム：Windows, macOS, Linux, iOS, Android
クラス： Slider,Slider::Listener,Label
スタート
このチュートリアルはTutorial: Listeners and Broadcastersそれは最初に読んで理解すべきだった。
このチュートリアルのデモ・プロジェクトのダウンロードはこちらから：PIP|ZIP.プロジェクトを解凍し、最初のヘッダーファイルをProjucerで開く。
このステップにヘルプが必要な場合は、以下を参照してください。Tutorial: Projucer Part 1: Getting started with the Projucer.
デモ・プロジェクト
デモ・プロジェクトでは、2つの直線的な水平スライダーを示しています。一方のスライダーには頻度もうひとつは期間次のスクリーンショットのように：
どちらのスライダーも、基本的には同じ値を表示するということだ。f)は継続時間(d):
f =1⁄d
どちらかのスライダーを動かすと、もう一方のスライダーも更新され、変更が反映される。
JUCE Sliderクラス。
このチュートリアルでは、スライダを作成し、その範囲を設定し、値の変化をリッスンし、スライダの値をプログラムで更新する方法を示します。デモ・アプリケーションを実行すると、両方のスライダにテキスト・ボックスが含まれ、このテキスト・ボックスには周波数の単位 (ヘルツヘルツ）と持続時間(s秒）。
スライダーの追加
このスライダーは、プライベート・メンバーとして我々のチームに加えられている。MainContentComponentクラスである：
private:
juce::Slider frequencySlider;
juce::Label frequencyLabel;
juce::Slider durationSlider;
juce::Label durationLabel;
//==============================================================================
JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (MainContentComponent)
};
を追加していることに注意してください。LabelオブジェクトはSliderオブジェクトを表示します。これらはテキストを表示する頻度そして期間をスライダーの左に置く。スライダー・コントロールのすぐ左にあるボックスは、現在のスライダー値を表示するもので、実際にはSliderオブジェクトがある。
を追加した。Slider::Listenerクラスを基底クラスとして使用することで、スライダーの変更を受け取るようにクラスを登録できます。
class MainContentComponent : public juce::Component,
public juce::Slider::Listener
{
public:
我々のMainContentComponentコンストラクタの子コンポーネントとしてスライダーを追加する (Tutorial: Parent and child components)を設定し、それらを表示させ、スライダーが表すことのできる値の範囲を設定します。最初にfrequencySliderメンバーだ：
MainContentComponent()
{
addAndMakeVisible (frequencySlider);
frequencySlider.setRange (50, 5000.0); // [1]
frequencySlider.setTextValueSuffix (" Hz"); // [2]
frequencySlider.addListener (this); // [3]
- [1]スライダーの範囲はSlider::setRange()関数である。
- [2]スライダーのテキストボックスのテキスト表示に、値の単位を示すサフィックスを追加します。
- [3]を加える。
MainContentComponentオブジェクトをスライダーのリスナーとして使用します。
対応するラベルは以下のように設定さ れている：
addAndMakeVisible (frequencyLabel);
frequencyLabel.setText ("Frequency", juce::dontSendNotification);
frequencyLabel.attachToComponent (&frequencySlider, true); // [4]
についてLabel::attachToComponent()機能[4]は、ラベルを他のコンポーネントに隣接させるのにとても便利です。番目の引数、trueラベルを他のコンポーネント (falseでは上に配置される)。後ほど説明するが、これによって、ラベルの位置を手動でMainContentComponent::resized()関数である。
についてdurationSliderそしてdurationLabelの範囲の逆数となるように設定される。frequencySliderメンバーだ：
addAndMakeVisible (durationSlider);
durationSlider.setRange (1.0 / frequencySlider.getMaximum(),
1.0 / frequencySlider.getMinimum());
durationSlider.setTextValueSuffix (" s");
durationSlider.addListener (this);
addAndMakeVisible (durationLabel);
durationLabel.setText ("Duration", juce::dontSendNotification);
durationLabel.attachToComponent (&durationSlider, true);
スライダーの位置
スライダーはMainContentComponent::resized()関数を使用した。私たちはLabel::attachToComponent()関数を使用してラベルをスライダーに貼り付けると、ラベルは自動的にスライダーの左側に配置されます。
void resized() override
{
auto sliderLeft = 120;
frequencySlider.setBounds (sliderLeft, 20, getWidth() - sliderLeft - 10, 20);
durationSlider .setBounds (sliderLeft, 50, getWidth() - sliderLeft - 10, 20);
}
スライダーの変化への対応
次のコードは、スライダーのリスナーがスライダーの値の変化に反応するようにします。
void sliderValueChanged (juce::Slider* slider) override
{
if (slider == &frequencySlider)
durationSlider.setValue (1.0 / frequencySlider.getValue(), juce::dontSendNotification);
else if (slider == &durationSlider)
frequencySlider.setValue (1.0 / durationSlider.getValue(), juce::dontSendNotification);
}
これはSlider::Listener::sliderValueChanged()関数を追加する場合は、オーバーライドする必要があります。Slider::Listenerを基本クラスとする。を呼び出すことで、 スライダーの逆数をもう一方のスライダーに渡すだけです。Slider::setValue()関数を使います。また、スライダーにその変化をブロードキャストしないように指示する。これは、このように2つのスライダーが互いに依存している場合、無限のフィードバックループが発生する可能性があるからです。スライダーのdontSendNotification値はこのループの可能性を断ち切る。演算が正確で、両方向の変換が同じ結果を生むと仮定すると、これは必要ないはずです。というのも、スライダーがリスナーにブロードキャストするのは、値が実際に変化した場合だけだからです。(このような状況では、変換にわずかな丸め誤差がある場合に問題が発生することがあります)。を省略することもできます。dontSendNotificationこの値は、スライダーのデフォルト動作である意志放送が変わる。を使うかどうかは、本当に慎重に考える必要がある。dontSendNotificationあるいは、そうでなくても、あなた自身のアプリケーションにおける特定のユースケースに対応できる。
初期値の設定
コンストラクタではfrequencySliderスライダーは500に設定されている。これによりdurationSliderスライダーを更新する。dontSendNotification今回は価値がある：
frequencySlider.setValue (500.0); // [5]
いくつかのカスタマイズ
インタフェースをより効果的にするために、ここにいくつかの簡単なカスタマイズを加えることができる。
テキストボックスを広くする
のテキストボックスdurationSlider特にスライダーは、その値を満足に表示するために多くの桁を必要とする。そのためにSlider::setTextBoxStyle()関数に追加する。以下の2行のコードをMainContentComponentビルダー
frequencySlider.setTextBoxStyle (juce::Slider::TextBoxLeft, false, 160, frequencySlider.getTextBoxHeight());
durationSlider .setTextBoxStyle (juce::Slider::TextBoxLeft, false, 160, durationSlider .getTextBoxHeight());
これにより、テキストボックスはいずれも160ピクセルに設定されます（ただし、高さはSlider::getTextBoxHeight()関数)。
スライダー値の歪み
デフォルトでは、スライダートラックはリニアで、スライダーの値はスライダートラックに沿ったスライダーサムの位置に比例します。インタフェースを操作してみると、これがどうもしっくりこないのは明らかだ。スライダーを調整するスキューを使ってスライダーの軌跡を対数にできます。これを行うにはSlider::setSkewFactorFromMidPoint()関数に追加します。以下の2行のコードをMainContentComponentのコンストラクタは、スライダが設定された後に使用します：
frequencySlider.setSkewFactorFromMidPoint (500);
durationSlider .setSkewFactorFromMidPoint (0.002);
のスライダートラックの中間点に500を置く。frequencySliderスライダーは0.002である。durationSliderスライダーを動かす。事実上、スライダーは等しく、しかし反対方向に動くように見えます。このような非線形のスライダートラックは、時間や周波数など、小さな値ではより細かくコントロールしたいが、大きな値ではそれほど細かいコントロールが必要でない傾向があるパラメータに効果的です。
このセクションの完成したコードはSliderValuesTutorial_02.hファイルを参照してください。
への呼び出しの値を変えてみる。Slider::setSkewFactorFromMidPoint()関数を使用して、さまざまなテキストボックスのサイズを試してみてください。のAPIリファレンスを見てください。Sliderクラスを作成し、他のカスタマイズを試してみる。
スライダー・コールバックの簡素化
このチュートリアルで示したようなリスナーやブロードキャスターのパラダイムを使う代わりに、最新のC++ 標準のラムダ関数を使うことで、スライダーのコールバックを単純化できます。これは、複雑な実装を必要としない単純なコールバックには特に効果的です。
まずはSlider::Listenerクラスを作成し、次のようにMainContentComponentクラスの定義を復元する：
class MainContentComponent : public juce::Component
{
public:
次に、MainContentComponentをリスナーとして追加する代わりに、MainContentComponentをSliderラムダ関数をSlider::onValueChangeヘルパー・オブジェクトは次のようになる：
MainContentComponent()
{
addAndMakeVisible (frequencySlider);
frequencySlider.setRange (50, 5000.0);
frequencySlider.setTextValueSuffix (" Hz");
frequencySlider.onValueChange = [this] { durationSlider.setValue (1.0 / frequencySlider.getValue(), juce::dontSendNotification); };
addAndMakeVisible (frequencyLabel);
frequencyLabel.setText ("Frequency", juce::dontSendNotification);
frequencyLabel.attachToComponent (&frequencySlider, true);
addAndMakeVisible (durationSlider);
durationSlider.setRange (1.0 / frequencySlider.getMaximum(),
1.0 / frequencySlider.getMinimum());
durationSlider.setTextValueSuffix (" s");
durationSlider.onValueChange = [this] { frequencySlider.setValue (1.0 / durationSlider.getValue(), juce::dontSendNotification); };
これはSliderオブジェクトを呼び出します。Sliderの値はユーザーによって変更される。
コードの実装はSliderValuesTutorial_03.hファイルを参照してください。
概要
このチュートリアルではSliderクラスで学んだ。特に私たちは学んだ：
- スライダーが特定の範囲で動作するように設定する方法
- スライダーの値の変化にどう対応するか
- 対数目盛りを使用するようにスライダーの傾きを設定する方法