How to resize the plugin window with all pictures and svgs in it according to a fix ratio?

Hi, i checked juce API (Image, ResizeableWindow,…)and some topics but couldn’t find a clean way to do it. There is a lot of different ways and some of methods are deprecated and again there is no an example to see how it works. Any suggestions ?
Thank you

when applying bounds to objects you can use getWidth() and getHeight() (of the localbounds) to let your objects be some proportion of the window’s size. for example Rectangle(0,0,getWidth()/2, getHeight()/2); would create a rectangle half the size of your screen. this should be in the resized-method, but it also works in paint. don’t use it in the constructor or it will only be calculated at the start. when drawing an image use the RectanglePlacement::stretchToFit (which is default) so it will always go to the bounds you have set for the image

thank you very much :slight_smile: It helped a lot. i have pictures for my knobs. for almost every each position. Since they have shadow and shinning parts of them , i dont want to add only one image and rotate it. I put all pictures in a row in a png file, then i tried to relocate the rectangle area that i draw at the window.

//as a gloabal variable
 Image fullKnob = ImageCache::getFromMemory(BinaryData::Knobs_png, BinaryData::Knobs_pngSize);
Image  createKnob()
{
	
	 fullKnob.duplicateIfShared();
	Rectangle< int> fullKnobArea(0, 0, 200, 185);
	  fullKnob = fullKnob.getClippedImage(fullKnobArea);
	 
	 Graphics::ResamplingQuality 	quality = Graphics::mediumResamplingQuality;
	 return fullKnob = fullKnob.rescaled(90, 90, quality);
};

i draws , but when i try to change the x position of my rectangle “Rectangle< int> fullKnobArea(0, 0, 200, 185);” to this “Rectangle< int> fullKnobArea(0, 0, 200, 185);” while debugging i can see that it is working at the beggining but once a drag the mouse onto the plugin window or try to rotate the dials it disappears . it is so strange :smiley: i call these functions within paint method of plugin editor.

don’t speak too loud. people here hate image-graphics xD no just kidding. it’s just that you should totally consider vector graphics for all kinds of stuff including knobs, since they are more versatile and can be resized perfectly without the need to interpolate pixels and stuff. some of the other people here can explain that a lot better.

yeah that sounds like a nice way to let the shadow always stay at the right place. i just feel like this could either look a little steppy or contain a lot of image data.

EDIT: oh yeah, you could also try to use only 2 images btw. one with the knob and one with the transparent shadow. the shadow always stays the same and you apply a rotational transform on the knob-image. that way you’d get silky smooth movement without more than 2 images

maybe that’s a silly question but… do you draw the knobs in the custom look and feel method or do you try to make your own knob class with this image? cause the normal juce way to draw sliders is in the drawRotarySlider-method as shown in this tutorail that i’d like recommend a lot, if you haven’t seen it yet:
https://docs.juce.com/master/tutorial_look_and_feel_customisation.html#tutorial_look_and_feel_customisation_sliders

Thank you for answer, I drew an image on plugin editor>paint with this code

  KnobComponent clockRateKnob;
 g.drawImageAt(clockRateKnob.createKnob(), 55, 105);

in my Knobcomponent i have this method.

  Image KnobComponent::createKnob()
{
Knob= ImageCache::getFromMemory(BinaryData::single_knob_png, BinaryData::single_knob_pngSize);
Knob.duplicateIfShared();
Rectangle< int> fullKnobArea(0, 0, 186, 171);
Knob = Knob.getClippedImage(fullKnobArea);
Graphics::ResamplingQuality 	quality = Graphics::mediumResamplingQuality;
processedKnob=Knob.rescaled(getWidth(), getHeight(), quality);
return Knob.rescaled(getWidth(), getHeight(), quality);
 }

it draws the image excatly where i want.

just after this i have this line again on plugin editor>paint

        clockRateKnob.rotateKnob(g, mGainSlider.getValue());

and again im my Knobcomponent i have this method to rotate it

 void Knobcomponent::rotateKnob(Graphics& g, float sliderValue)
{


sliderValue = jmap(sliderValue, 0.0f, 1.0f, 0.0f, 5.0f);

g.drawImageTransformed(processedKnob, AffineTransform::rotation(sliderValue, getWidth(), getHeight()), false);

 Rectangle <int> frameofrotatingknob(getLocalBounds());

 g.drawRect(frameofrotatingknob);
	 
g.setOpacity(1.0f);

}

it work but i couldn’t change the position of it. i tried to set bounds for Knobcomponent class, i treid to set bounds for “g” after rotating the image. but i didnt work . how can i relocate or set the bounds for drawImageTransformed methods? i does not return an image or a rectangle to me to work on . Should leave this and try to customize the juce slider class for my picture? i dont know :confused: