Vertical Text in Component

gui
#1

I am having more success with building plugins with plots, but I still have some questions. Here is a screen shot of a generic plot, which is implemented as a component class. My question is: how can I get my y axis label to display vertically, i.e., rotated -90 degrees?

25
Screenshot 2018-08-23 13.19.25.png628x698 24.4 KB

#2

My suggestion would be a label component for your “y axis label” as subcomponent of your ‘plot component’.
That subcomponent can be rotated with a simple call “Label.setTransform();”

Hope that helps :slight_smile:

#3

Sounds like a plan! I’ll give it a shot. Thanks!

#4

It may be personal preference but in my opinion this is a bad idea from the perspective of a user. It’s just harder to read.

#5

You could also use addTransform() when drawing the text in the paint routine for the component. That’s what I did.

#6

If you use Graphics::addTransform() it’s probably a good idea to save the state first and restore it after (unless it’s the very last thing you draw) otherwise everything after will be rotated:

auto midX = static_cast<float>(getWidth()) * 0.5f;
auto midY = static_cast<float>(getHeight()) * 0.5f;

g.saveState();
g.addTransform(AffineTransform::rotation(-MathConstants<float>::halfPi, midX, midY))
g.drawText("y axis label", getLocalBounds(), Justification::centredTop);
g.restoreState();

(Not tested)

#7

Thanks for all of the recommendations. I’ll see if I can make them work for me. The comment from Achder had some interesting consequences for me. I decided to search Google to see if there is a “proper” way to label the vertical (y) axis of a graph. I came across an article in Forbes that recommended both a vertical and horizontal format, with a preference for the vertical. But the interesting part is that the author of the article is a person I worked with at Bell Laboratories in the 1970s and have not seen since. She is a statistician who, in retirement, has established herself as a consultant in the area of presenting data. Nice coincidence that I should land on her web site while researching a JUCE problem!

#8

That’s a solution I used in the past as well. Just want to add the RAII save state for Graphics:

{
    Graphics::ScopedSaveState state (g);
    g.addTransform (AffineTransform::rotation (-MathConstants<float>::halfPi, 
                                               getWidth() * 0.5f, 
                                               getHeight() * 0.5f));
    g.drawText("y axis label", getLocalBounds(), Justification::centredTop);
}

and you don’t need the explicit cast, if you are multiplying with a float.

#9

I got the results I wanted using the Label approach. I used (child) Label components for both axis labels. I applied a rotation transform to the y axis label. Here’s my resize() code from my Plot component:

xAxisLabel.setText(xLabel, dontSendNotification);
yAxisLabel.setText(yLabel, dontSendNotification);
xAxisLabel.setJustificationType(Justification::centred);
yAxisLabel.setJustificationType(Justification::centred);
yAxisLabel.setTransform(AffineTransform::rotation(-MathConstants<float>::halfPi, 0.5 * getHeight(), 0.5 * getWidth()));
xAxisLabel.setBounds(0, 0.9 * getHeight(), getWidth(), 0.1 * getHeight());
yAxisLabel.setBounds(0, 0, getWidth(), 0.1 * getWidth());

Although I invoked the setText method in the Plot constructor, it did not display until I re-invoked it in the resize() method. I’m confused by this, but it seems to work.