FlexBox Issues

General JUCE discussion
1

I’m tossing together a simple UI just to play around with FlexBox a bit. I’m having an issue, but am not sure where it is. I have set up two FlexBoxes with the same code, but one is different from the other in the way the content is spaced.

Here are my two FlexBoxes. knobBox and bypassBox are defined in the class specification file and this code here

void SimplEqAudioProcessorEditor::resized()
{
    knobBox.flexDirection = FlexBox::Direction::row;
    knobBox.items.add (FlexItem (highPassFilterSlider).withFlex (1));
    knobBox.items.add (FlexItem (lowPassFilterSlider).withFlex (1));
    knobBox.performLayout (getLocalBounds().removeFromTop (getHeight() / 2).toFloat());

    bypassBox.flexDirection = FlexBox::Direction::row;
    bypassBox.items.add (FlexItem (highPassFilterBypassToggle).withFlex (1));
    bypassBox.items.add (FlexItem (lowPassFilterBypassToggle).withFlex (1));
    bypassBox.performLayout(getLocalBounds().removeFromBottom (getHeight() / 2).toFloat());
}

Here is the result:

13%20AM
Screen Shot 2019-08-23 at 3.42.13 AM.jpg1824×720 120 KB

I’m not quite sure why the lower FlexBox has the ToggleButtons starting all the way on the left while the top box has the Sliders spaced from the sides. I’m trying to get the bottom FlexBox to look the same, but can’t seem to figure it out. Any help is greatly appreciated.

Edit: There is one difference in the code and that is whether I call removeFromBottom() or removeFromTop() on the Rectangles.

2

I’m not able to test and see exactly why this is happening right now but I would maybe try the following on the box with the toggles…

box.alignContent = FlexBox::AlignContent::center;
or…
box.justifyContent = FlexBox::JustifyContent::center;

One of those might place the toggles underneath the Sliders. I think it’s AlignContent though - whereas JustifyContent would have the box itself centered within it’s bounds.

Also, i’m not sure if it will make a difference, but I usually have an easier time with things if I use a main container box and then add other boxes inside the main one. Then only need to call performLayout once on the main container.

3

This is to do with the way ToggleButton gets painted rather than the positioning of flexbox. The checkbox of the ToggleButton is a fixed size and position in LookAndFeel_V4. You’ll find that you can click on any of the blank space to the right of the ToggleButton and it will cause it to toggle

1 Like
4

Yep, I actually had went through all of the AlignContent and JustifyContent enums and unfortunately, none of that changed how these ToggleButtons were being aligned. Thats’ a good suggestions though and that’s what I initially thought too

5

Now that you mention it, I actually recall this being a thing before; being able to click off to the side of the ToggleButtons and it still working, as it was considering part of the button’s clickable region. Hmmmm, is there any good solution for what I’m trying to do with the FlexBox and the toggles?

6

Hmm, I guess you could use a regular button and turn it into a toggle button by using setClickingTogglesState to true? I’ve been using both the regular and drawable buttons as toggle buttons and they play nicely with flex. Otherwise making your own look and feel for the existing ToggleButton might be an alternative?

7

That is a good idea. It has basically been quite some time since I’ve last used the JUCE framework and totally forgot you can create a toggle button with a standard button. This will probably be the best solution. I’ve never drawn my own button before, so that might be a bit more complex for me.

8

The DrawableButton is actually pretty nice to use. You don’t need to draw it, I don’t - you can just pass it some images (png/svg) and have yourself a custom button. It’s pretty easy to rustle something up in Inkscape or similar. But yeah - even the ordinary Button class should work for you :wink:

1 Like
9

Sorry, just now getting back to this. Still having some issues understanding what I’m doing wrong with the FlexBox. The last issue was solved, but a new issue came up; there isn’t good reason to create a new thread for it, so I figured I’d just keep posting here. Again, this is a rather meaningless project used to learn some of the newer tools offered in JUCE (DSP module, FlexBox, etc).

I’m wanting to vertically center the two enable / disable buttons in the lower half of the GUI, but I can’t seem to get this correct. Here is the current code and the screenshot:

void SimplEqAudioProcessorEditor::resized()
{
    knobBox.flexDirection = FlexBox::Direction::row;
    knobBox.items.add (FlexItem (hiPassFilterSlider).withFlex (1));
    knobBox.items.add (FlexItem (loPassFilterSlider).withFlex (1));
    knobBox.performLayout (getLocalBounds().removeFromTop (getHeight() / 2).toFloat());

    bypassBox.flexDirection = FlexBox::Direction::row;
    bypassBox.justifyContent = FlexBox::JustifyContent::spaceAround;
    bypassBox.items.add (FlexItem (hiPassFilterBypassToggle).withMaxWidth (100.0).withMaxHeight (40.0).withFlex (1));
    bypassBox.items.add (FlexItem (loPassFilterBypassToggle).withMaxWidth (100.0).withMaxHeight (40.0).withFlex (1));
    bypassBox.performLayout (getLocalBounds().removeFromBottom (getHeight() / 2).toFloat());

Here’s the UI with some lines drawn at the midway points for reference:

50%20AM
Screen Shot 2019-08-26 at 4.27.50 AM.jpg1824×720 128 KB

The toggle switches are pressed right up against the upper portion of the lower FlexBox.

So I figured I would need to add a line dealing with alignItems:

bypassBox.alignItems = FlexBox::AlignItems::center;

Nothing actually changed when I ran the program. I also tried:

bypassBox.alignContent = FlexBox::AlignContent::center;

but this actually caused the toggles to disappear. I’m pretty confused at this point and can’t really seem to predict what FlexBox will do in most scenarios. I’m a little confused by the wording of the FlexBox documentation, which is probably causing me these issues. Any help would, again, be greatly appreciated.

10

Hey there, there are 3 possible ways you can attack this that I know of.

  1. Subdivide the lowerbox and place empty dummy boxes/items to fill the spaces where you don’t want components - so you could add a box above the toggle buttons inside the bypass box with some flex value that filled the top half of it. I do this often adding placeholders that will be used later with components - FlexItem().withFlex(0.1)

  2. Probably the easiest is this:

	lowerBox.flexDirection = FlexBox::Direction::row;
	lowerBox.justifyContent = FlexBox::JustifyContent::spaceBetween;
	lowerBox.alignContent = FlexBox::AlignContent::center;

…but i’m not sure why this is making your items vanish - it is working here. The only thing I can think of is that you might be better of placing both the knobBox and the bypassBox inside a mainBox each having withFlex(0.5) for 50%. Then you only call performLayout(getLocalBounds()) once.

  1. Another way is to set the top margin of the toggle button items:

FlexItem(lopassFilterBypassToggle).withWidth(100.0).withHeight(40.0).withFlex(1).withMargin({50,0,0,0})

where the margin values are {top, right, bottom, left} so you can simply put a variable instead of 50 that is the margin you would like.

11

Hey Chi, thanks a ton for the suggestions. Number 1 was something I was actually considering if I couldn’t get the content aligned with the FlexBox options. I just wanted to see if there was a way to get it going without having to add any dummy boxes.

I’ll give number 2 a go again. As for number 3, I must’ve missed the withMargin() function in the documentation… I never even saw this. That’s very helpful as well!.

I’ll report back after playing around with some of these suggestions. Thanks a ton!

12

Yep, the entire bottom FlexBox is disappearing if I try to do your suggestion number 2 or if I try to create a main FlexBox to put everything in to call performLayout() only once. The trick with the margins worked, but it would be great to have this thing just center these buttons along both axes. I’m betting I have something somewhere else that just isn’t correct. I’ll just post the repo, it isn’t very large.

EDIT: I got the mainBox to work, but the issue of not being able to vertically center the button’s persists and they will disappear as soon as bypassBox.alignContent = FlexBox::AlignContent::center; is used, so it is commented out.

13

Yes, it’s because you only set the withMaxHeight for the buttons so there is no minimum height for them and they disappear.

So either set both min and max height and width, or set the height and width with withWidth and they will work with bypassBox.alignContent = FlexBox::AlignContent::center

14

That did the trick! Man, I would’ve never guessed that! Wonder why the height of the object needs to change just because I want to center the toggle? That is sort of strange. I would assume that if the button can fit in the region at the top of the box, then it could fit the same at the center, but either way, thank you very much! You’ve been extremely helpful! Thank you!