Tabbed Component Becomes a Slider but Slider Should be Placed in Tab

gui
#1

So I’m currently trying to create a Tabbed Component that contains a slider inside but when I make reference to the slider inside the tab it makes the whole tab a slider? Even though i’ve set the bounds of the slider in ‘resize’.

Here’s snippets of the code. Please help me overcome this problem.

Animal_generator_krotosAudioProcessorEditor::Animal_generator_krotosAudioProcessorEditor(Animal_generator_krotosAudioProcessor& p)
    :
AudioProcessorEditor (&p),
processor (p),
m_triggerComponent(TabbedButtonBar::Orientation::TabsAtTop)
{
    // Make sure that before the constructor has finished, you've set the
    // editor's size to whatever you need it to be.
    setSize (600, 600);
    
    
    addAndMakeVisible(&m_triggerComponent);
    
    m_triggerComponent.addTab("Trigger" , juce::Colours::red, &m_gain, false);
    m_triggerComponent.addTab("Controller" , juce::Colours::black, &m_aggression, false);
    
    m_aggression.setSliderStyle (Slider::LinearBar);
    m_aggression.setRange(100.0, 6000.0, 0.10);
    m_aggression.setTextBoxStyle (Slider::NoTextBox, false, 90, 0);
    m_aggression.setPopupDisplayEnabled (true, this);
    m_aggression.setTextValueSuffix ("aggression");
    m_aggression.setValue(processor.a);
    addAndMakeVisible (&m_aggression);
    m_aggression.addListener (this);

.
.
.

 void Animal_generator_krotosAudioProcessorEditor::resized()
{
    m_triggerComponent.setBounds(0, 0, getWidth(), getHeight());
    m_aggression.setBounds (40, 11*getHeight()/16, getWidth()- 80, 20);
#2

It’s quite hard to tell without seeing more of your code but I’m assuming that the m_triggerComponent object inherits from TabbedComponent and you want that to display a slider in one of its tabs? If so, then you shouldn’t be adding your m_aggression Slider object as a child component of your editor as well as adding it to the TabbedComponent. A better way to do this would be to have another component that contains the slider object and then add this component as a tab in the TabbedComponent instead. Take a look at the DemoTabbedComponent class in the JUCE Demo project for a good guideline on how to use TabbedComponents.

#3

Yeah that’s exactly what I’m trying to do.

Could you write a simple example of what you mean. I have had a look at the DemoTabbedComponent class in the JUCE demo and find it quite hard to follow. I’m just looking to see a simple example of a slider placed within a tab if possible?

#4

OK, here’s a very simple example of a TabbedComponent containing a tab with just a slider in:

class MainContentComponent   : public Component
{
public:
    //==============================================================================
    MainContentComponent() : tabs (TabbedButtonBar::Orientation::TabsAtTop)
    {
        addAndMakeVisible (tabs);
    
        tabs.addTab ("Blank", Colours::hotpink, new Component(), true);
        tabs.addTab ("Slider", findColour(ResizableWindow::ColourIds::backgroundColourId), new SliderHolder(), true);
        
        setSize (600, 400);
    }

    ~MainContentComponent() {}
    
    void paint (Graphics&) override {}
    void resized() override
    {
        tabs.setBounds (getLocalBounds().reduced (20));
    }

private:
    TabbedComponent tabs;

    struct SliderHolder    : public Component
    {
        SliderHolder()
        {
            addAndMakeVisible (slider);
        }
    
        void resized() override
        {
            slider.centreWithSize (getWidth() - 40, 150);
        }
    
        Slider slider;
    };

    //==============================================================================
    JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (MainContentComponent)
};

Hope this helps!

#5

Thank you very much ed95! That’s the kind of example I needed to get my head around it all! Could follow that no problem! Managed to get what I wanted to work! Thanks again!