Viewport Basic Example

Hello, I am New To JUCE. Can Anyone Please Provide Me The Source Code Of Very Basic Viewport Example.

  • Thanks.

The Demo in the examples folder (JUCE -> examples -> JuceDemo -> JuceDemo.jucer) is the place to look for these kind of things.
Open in your favourite IDE and do a project wide search for Viewport.
Good luck

EDIT: actually, I realise, that it is not covered in the Demo sources itself. You can find it used deeper in the sources, but an example seems to be missing…

2 Likes

If you still need some example: As a JUCE beginner too, I implemented my first viewport some weeks ago. It’s pretty straightforward, if it helps you, just take a look at my code, my main content component contains a viewport (just look out for dspControlsViewport in my code), wich contains a component with all control elements of my app:

2 Likes

Thanks For Replay I Got It.

Can you upload the file again? I get a 404 error in github.

To be honest, no I don‘t want to upload it again, as said in my post back then I was just starting with JUCE and C++, comming from a pure C background and I consider this code I wrote back then not to match my personal demands in terms of clean code and good usage of modern C++ I have today. However, I might make up a new example and post it here if I find some spare time the next days.

I hope you‘ll understand this decision :wink:

That would be great! I’m starting right now and I feel a bit lost!

Thanks in advance!

It’s reasonably straightforward:

i) add Viewport to your window
ii) create the component which should exist within it and set its size
iii) call setViewedComponent with pointer to your content component, passing false if you don’t want the viewport to manage the lifetime

So with iii) you have 2 options:

Your content component is a member alongside the Viewport so you’d do something like this

addAndMakeVisible(myViewport);
myViewport.setSize(200, 300);
myViewport.setViewedComponent(&myContentComponent, false);
myContentComponent.setSize(500, 700);

[in the class definition]
Viewport myViewport;
ContentComponent myContentComponent;

or create the content component and pass true so that the Viewport deletes the content component when no longer needed

addAndMakeVisible(myViewport);
myViewport.setSize(200, 300);
auto content = new ContentComponent();
myViewport.setViewedComponent(content, true);
content->setSize(500, 700);

Hopefully that helps you before PluginPenguin comes back with something more concrete!

2 Likes

Put this in your class declaration:

Viewport myViewport;
Component container;
TextButton dogs{"dogs"};
TextButton cats{"cats"};
TextButton pigs{"pigs"};

then put this in your constructor:

dogs.setBounds(0,0,100,30);
cats.setBounds(100,0,100,30);
pigs.setBounds(200,0,100,30);

container.setBounds(0,0,400,30);
container.addAndMakeVisible(dogs);
container.addAndMakeVisible(cats);
container.addAndMakeVisible(pigs);

myViewport.setBounds(0,0,200,300);
myViewport.setViewedComponent(&container, false);
addAndMakeVisible(myViewport);
setSize (200,300);  // purposely smaller

I just did this in the a new audio plugin project and it works fine… From here you should be able to do anything you want

3 Likes