Custom Linear Slider look And Feel

Audio Plugins
1

Hello All, i try to made my custom linear slider using SVG, here is the look
Min Value: -60.0
Max Value: 24.0

How to make thumb slide down not overflowed?
image

class SliderLookAndFeel : public LookAndFeel_V4
{
private:
  /* data */
  std::unique_ptr<Drawable> thumbImage;

public:
  SliderLookAndFeel()
  {
    thumbImage = Drawable::createFromImageData(BinaryData::SliderThumb_svg, BinaryData::SliderThumb_svgSize);
  };
  ~SliderLookAndFeel(){};

  void drawLinearSlider(Graphics &g, int x, int y, int width, int height, float sliderPos, float minSliderPos, float maxSliderPos, const Slider::SliderStyle style, Slider &slider) override
  {
    auto trackWidth = 4.0f;
    auto track = Rectangle<float>((width / 2) - trackWidth / 2, y, trackWidth, height);
    g.setColour(Colours::black.withAlpha(0.1f));
    g.fillRect(track.toFloat());

    auto thumbWidth = 10.0 * 2;
    auto thumbHeight = 20.0f * 2;
    auto thumbX = x + (width - thumbWidth) * 0.5f;
    auto thumbY = sliderPos;

    auto thumb = Rectangle<float>(thumbX, thumbY, thumbWidth, thumbHeight);
    thumbImage->drawWithin(g, thumb, RectanglePlacement::centred, 1.0f);
  }
};

that is my look and feel, how to calculate thumbY not overflow to Top and Bottom

2 
    void drawLinearSlider (juce::Graphics& g, int x, int y, int width, int height, float sliderPos, float minSliderPos, float maxSliderPos, const juce::Slider::SliderStyle style, juce::Slider& slider) override
    {
        auto sliderBounds { getSliderLayout (slider).sliderBounds };
       // draw your slider inside sliderBounds
       
       ...


    }

if you need more control for the layout, override the following function (just an example)

    juce::Slider::SliderLayout getSliderLayout (juce::Slider& slider) override
    {
        juce::Slider::SliderLayout layout;

        int textBoxHeight { 24 };
        layout.textBoxBounds = slider.getLocalBounds().removeFromBottom (textBoxHeight);

        int deltaY { thumbImage.getHeight() / 2 };
        layout.sliderBounds = slider.getLocalBounds().reduced (2, deltaY);

        return layout;
    }
3

HI mas bayu, Greeting form indonesia, thanks for your answer.
let me try it

i already lister your youtube video, https://www.youtube.com/watch?v=uZIHyl8iHkg
very nice song!! :ok_hand:

1 Like
4

Halo Irfan,

salam kenal

akhirnya ketemu juga orang indonesia yang pake juce selain anak kantor :grinning:

1 Like
5

akhirnya, saya juga nyari nyari teman yang bisa audio programming kususnya pakek JUCE, jadi bisa tanyak tanyak :grinning:

6

Saya lihat lihat product dari kuassa, bagus bagus, keren mas, kayaknya susah nemu audio programmer di indonesia

7

kalo LookAndFeel-nya spesifik pake SVG yg sama, lebih baik dijadiin static member aja.

Alternativenya

  1. Dikonversi jadi binary (bisa pake binary builder).
  2. Atau lebih mudahnya copy aja text SVG-nya jadiin string literal sebagai object const char*.

Kalo pake metode no.2 ada metode static di juce yang bisa parsing dari SVG string jadi Path, kemudian jadi DrawablePath. Jadi gak perlu manggil dari BinaryData.

Jadi kalo LookAndFeel-nya (berikut static member SVG-nya) bakal sering dipake di project lain, tinggal ditulis jadi juce module—lebih portable.

8

Ohh i see, thanks thanks mas, memanggil BinaryData itu ada kelemahannya mas?

9

Ini soal project management aja sih. Nanti kalo skala projectnya semakin besar dan rumit, hal-hal seperti ini jadi signifikan dampaknya.

File yang disimpan di BinaryData kan dibuat oleh projucer. File seperti itu lebih cocok untuk asset spesifik project itu saja.

Object semacam LookAndFeel kan bisa dipakai ulang untuk berbagai macam aplikasi, mungkin bukan cuma untuk plugin. Jadi lebih baik jadi module. Nanti kalo kita update modulenya di salah satu project yang pakai, project yang lain akan ikut menyesuaikan.

Kalo LookAndFeel nya dipakai di berbagai project tapi manggil dari BinaryData, kita musti mastiin file yang dipanggil dari BinaryData udah kita ikut masukin di projucer. Ini jadi nambah dependency. Kalo gambar SVG banyak dan beragam, gampang banget cepat pusing LookAndFeel mana pake SVG yg mana. Terus begitu ada satu project yang pake diupdate (source code atau gambarnya nya berubah), kita musti mastiin BinaryData untuk setiap project di-rebuild pakai projucer. Horror.

Sorry jadi panjang biasanya jelasin gini lebih mudah pakai english haha

10

Wah paham paham mas, saya yang minta maaf jadi mas bayu jelasinnya harus panjang, hehe, mksih mas, ilmu baru ini