[JUCE]튜토리얼8 Slider values

//발번역 https://juce.com/doc/tutorial_slider_values

tutorial_slider_values.zip

데모 프로젝트 빌드과정에서 아래와 같이 라이브러리 빌드 에러 발생시 Projucer실행하여 프로젝트를 열고 모듈->global path를 해제해주면된다.

데모 프로젝트

데모 프로젝트는 두개의 슬라이더 수직선을 보여준다. 하나는 레이블이 Frequency고 다른 하나는 레이블이 Duration이다.

이 개념은 주파수(f)가 지속 시간의 역수(d)이기 때문에 기본적으로 두 슬라이더 모두 동일한 기본 값을 표시한다.

f = 1/4

둘 중 하나의 슬라이더가 움직이면 또 다른 슬라이더가 변경사항을 반영하여 갱신된다.

JUCE Slider 클래스

이 튜토리얼은 슬라이더를 만드는 방법이랑 범위 설정, 값 변경, 슬라이더 값 프로그래밍 방식으로 업데이트 하는법을 보여준다. 데모 앱에서 주의해야할점은 실행될때 두 슬라이더가 텍스트 박스를 include 해야하고 이 텍스트 박스는 또한 frequency(헤르쯔,Hz)와 duration(s,초)를 include 해야한다.

슬라이더 추가하기

MainContentComponent.h에 MainContentComponent 클래스에 슬라이더들이 private 멤버로 있다.

private:

Slider frequencySlider;

Label frequencyLabel;

Slider durationSlider;

Label durationLabel;

//==============================================================================

JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (MainContentComponent)

};

주의 할 점은 Label 객체도 각각에 슬라이더에 추가된다는 점이다. 이것들은 Frequency와 Duration을 슬라이더 왼편에 화면에 띄워준다.

슬라이더 컨트롤의 바로 왼쪽 박스는 현제 슬라이더의 값을 보여주고 Slider 객체의 일부분이다.

 Slider::Listener 클래스를 기본 클래스로 추가하여 슬라이더가 바뀐것을 받기위한 클래스를 등록할 수 있다.

class MainContentComponent : public Component,

public Slider::Listener

{

// ...

MainContentComponent 생성자에서 슬라이더를 자식 컴포넌트로 추가하고 표시되도록 서렂ㅇ하고 슬라이더에서 표시할 수 있는 값의 범위를 구성한다.

첫번째로 frequencySlider 멤버 구성을 보자.

MainContentComponent()

{

addAndMakeVisible (frequencySlider);

frequencySlider.setRange (50, 5000.0); // 슬라이더의 범위를 Slider::setRange() 함수로 설정한다.

frequencySlider.setTextValueSuffix (" Hz"); // Hz접미사를 추가하여 값의 단위를 슬라이더의 텍스트상자에 표시

frequencySlider.addListener (this); // MainContentComponent 객체를 슬라이더에 리스너로 추가

// ...

대응하는 레이블은 아래와 같다.

addAndMakeVisible (frequencyLabel);

frequencyLabel.setText ("Frequency", dontSendNotification);

frequencyLabel.attachToComponent (&frequencySlider, true); // [4]

[4]의 Lable::attachToComponent() 함수는 정말 유용하다 레이블을 인접한 다른 컴포넌트에 위치하는데. 두번째 인자 true는 레이블을 다른 컴포넌트 왼쪽에 위치시킨다. 곧 보게 될 것처럼, 이것은 MainContentComponent::resized() 함수에서 레이블을 수동으로 위치시키지 않아도된다.

durationSlider와 durationLabel 멤버는 비슷하게 설정하지만 슬라이더의 범위는 frequencySlider의 역수 범위로 설정된다.

addAndMakeVisible (durationSlider);

durationSlider.setRange (1.0 / frequencySlider.getMaximum(),

1.0 / frequencySlider.getMinimum());

durationSlider.setTextValueSuffix (" s"); //suffix는 접미사라는 뜻

durationSlider.addListener (this);

addAndMakeVisible (durationLabel);

durationLabel.setText ("Duration", dontSendNotification);

durationLabel.attachToComponent (&durationSlider, true);

슬라이더 위치

슬라이더들은 MainContentComponent::resized() 함수를 통해 위치된다. Lable::attachToComponent() 함수를 레이블을 슬라이더에 첨부하기 위해 사용하는 이후 이것들은 자동적으로 슬라이더의 왼쪽에 위치된다.

void resized() override

{

const int sliderLeft = 120;

frequencySlider.setBounds (sliderLeft, 20, getWidth() - sliderLeft - 10, 20);

durationSlider.setBounds (sliderLeft, 50, getWidth() - sliderLeft - 10, 20);

}

슬라이더 변경에 응답

다음 코드는 슬라이더의 리스너가 슬라이더의 값 변경에 반응하도록한다.

void sliderValueChanged (Slider* slider) override

{

if (slider == &frequencySlider)

durationSlider.setValue (1.0 / frequencySlider.getValue(), dontSendNotification);

else if (slider == &durationSlider)

frequencySlider.setValue (1.0 / durationSlider.getValue(), dontSendNotification);

}

Slider::Listener::sliderValueChanged() 함수는 Slider::Listener를 기본으로 한 클레스를 추가한경우 반드시 오버라이딩해야한다.

여기에서는 Slider::setValue() 함수를 호출하여 슬라이더의 역수를 다른 슬라이더로 전달한다. 또한 슬라이더에 변경 사항을 브로드케스트 하지 않도록 지시한다.

이유는 두 개의 슬라이더가 서로 의존하는 경우에 무한 피드백 루프가 발생할 가능성이 있다.(A와 B가 있다고 가정하자. A의 값을 변경하면 B의 값이 역수로 변경되고 B의 값이 변경되면 A의 값도 역수로 변경된다. 이 경우 어느 한쪽을 변경할경우 다른 한쪽의 값도 역수로 변경되고 역수로 변경된 다른 한쪽에 의해 처음 변경한 값도 다시 바뀐다.)  dontSendNotification 값은 이 무한 루프 가능성을 깨트린다. 

기본값 설정

frequencySlider 슬라이더는 값이 500으로 생성자에서 설정된다. 이번에는 dontSendNotification 값을 생략하기 때문에 durationSlider 슬라이더가 업데이트된다.

frequencySlider.setValue (500.0); // [5]

몇가지 커스텀하기

인터페이스를 효과적으로 커스텀해보자.

텍스트박스 길게 만들기

durationSlider 슬라이더의 텍스트 상자는 값을 만족스럽게 표시하기 위해 많은 자릿수가 필요하다. 이를 위해 Slider::setTextBoxStyle() 함수를 사용할 수 있다. 다음 두 줄의 코드를 MainContentComponent 생성자에 추가하자.

frequencySlider.setTextBoxStyle (Slider::TextBoxLeft, false, 160, frequencySlider.getTextBoxHeight());

durationSlider.setTextBoxStyle (Slider::TextBoxLeft, false, 160, durationSlider.getTextBoxHeight());

이 설정은 각각의 텍스트 박스를 160픽셀로 적용한다.

슬라이더 값 기울이기

기본적으로 슬라이더 트랙은 슬라이더 트랙을 따라 슬러이더 위치에 비례하여 슬라이더의 값이 선형이라는 점에서 선형이다. 인터페이스가 올바르게 작동하지다는 점은 분명하다. 슬라이더의 기울기를 조정하여 슬라이더가 로그를 추적하도록 할 수 있다. 이를 위해 Slider::setSkewFactorFromMidPoint() 함수를 사용할 수 있다. 슬라이더를 구성한 후 MainContentComponent 생성자에 다음 두 줄의 코드를 추가하여 이 작업을 시도해보십시오.(by 구글번역기)

frequencySlider.setSkewFactorFromMidPoint (500);

durationSlider.setSkewFactorFromMidPoint (0.002);

그러면 frequencySlider 슬라이더의 슬라이더 트랙 중간에 500,durationSlider 슬라이더에 0.002가 입력된다. 효과적으로 슬라이더는 이제 동등하지만 반대 방향으로 움직이는 것처럼 보인다. 이와 같은 비선형 슬라이더 트랙은 시간과 주파수와 같은 매개 변수에서 잘 작동하지만 작은 값보다 정밀한 제어가 필요하지만 큰 값보다 미세한 제어가 필요하지는 않다.

Note: 위의 커스텀한거는 MainComponent_02.h에 있다.

연습하기:  Slider::setSkewFactorFromMidPoint() 함수에 대한 호출에 대해 다른 값을 시험해보고 다른 텍스트 상자 크기를 시험해보십시오. Slider 클래스 API 참조.