Trying to get things to line up vertically

If you are using the main C++ distribution of wxWidgets, Feel free to ask any question related to wxWidgets development here. This means questions regarding to C++ and wxWidgets, not compile problems.
Post Reply
Digital Larry
Earned a small fee
Earned a small fee
Posts: 12
Joined: Tue Nov 26, 2019 10:35 pm

Trying to get things to line up vertically

Post by Digital Larry » Tue Nov 26, 2019 11:18 pm

I'm working on trying to modify the GUI for the open-source project "sooperlooper" which is written using wxWidgets.
https://github.com/essej/sooperlooper

The code I am editing is looper_panel.cpp
https://github.com/essej/sooperlooper/b ... _panel.cpp

Here's the original UI:
sl-original.png
sl-original.png (38.54 KiB) Viewed 611 times
And here it is after I've commented out the generation and inclusion in the wxBoxSizers of the various buttons, checkboxes, and sliders I don't need.
sl-modified.png
sl-modified.png (32.79 KiB) Viewed 611 times
I'd like everything to line up with the buttons (which are bitmaps) on the left hand side. I didn't see anything in the code which explicitly sets the size of any of the sliders, just that they are arranged in different wxBoxSizers. I will add the relevant code sections in a subsequent comment as I need to spend some time filtering it down to what I think is the most relevant info.

User avatar
doublemax
Moderator
Moderator
Posts: 15074
Joined: Fri Apr 21, 2006 8:03 pm
Location: $FCE2

Re: Trying to get things to line up vertically

Post by doublemax » Wed Nov 27, 2019 6:59 am

Can you post the new code for comparison?

In general, e.g. the three buttons "in gain", "thresh" and "feedb" are higher than they need to be. Same goes for the column next to them. You need to find out what makes these sizers grow in that direction.

Do they grow even further if you make the window bigger in vertical direction? Than it's maybe just a wxEXPAND flag that needs to be removed in the code that inserts the column sizers into the horizontal mainsizer.
Use the source, Luke!

Digital Larry
Earned a small fee
Earned a small fee
Posts: 12
Joined: Tue Nov 26, 2019 10:35 pm

Re: Trying to get things to line up vertically

Post by Digital Larry » Wed Nov 27, 2019 5:26 pm

Thank you for the response.
a) I'd be happy if everything just stayed at a fixed size. The goal is to get this to display on a 7" LCD attached to a Raspberry Pi.

Here is the result of my most recent adjustments where I include a wxSize of (60,30) when declaring the SliderBars (in gain, thresh, feedback). The "SliderBar" class is not a native wxWidgets class but it seems to use the idea of declaring the size using a wxSize reference. The vertical size tracks what I put into those statements, however the horizontal size seems fixed or dictated by something else.
slgui-two-tracks.JPG
slgui-two-tracks.JPG (67.05 KiB) Viewed 577 times
I'm also showing the situation where I have another track added. You can add an arbitrary number of tracks, although for this application 3 or 4 seems the practical maximum.

I tried removing "wxEXPAND" from some of the calls, but when I did that, the controls disappeared or contracted to a line or point. So clearly it's some basic combination of the default size, proportion, and flags. I'm trying to learn the minimum necessary to adjust this UI, which is turning out to be more than I expected, but that's OK. As if it weren't obvious, I am a total noob at wxWidgets although I did do some app design with Java Swing which has some similarities.

b) Here are what I think are the relevant parts of the modified source code.

Code: Select all

107: wxBoxSizer * mainSizer = new wxBoxSizer(wxHORIZONTAL);
108: wxBoxSizer * mainVSizer = new wxBoxSizer(wxVERTICAL);
110: wxBoxSizer * colsizer = new wxBoxSizer(wxVERTICAL);
111: wxBoxSizer * rowsizer = new wxBoxSizer(wxHORIZONTAL);
138:        mainVSizer->Add (_topSelbar, 0, wxEXPAND|wxBOTTOM|wxLEFT, 0);
139: mainSizer->Add (_leftSelbar, 0, wxEXPAND|wxBOTTOM|wxLEFT, 0);
150:  colsizer->Add (_undo_button, 0, 0, 0);
152:  colsizer->Add (_redo_button, 0, wxTOP, 5);
154: mainSizer->Add (colsizer, 0, wxEXPAND|wxLEFT, 5);
157: colsizer = new wxBoxSizer(wxVERTICAL);
161:  colsizer->Add (_record_button, 0, wxLEFT, 5);
163:  colsizer->Add (_overdub_button, 0, wxTOP|wxLEFT, 5);
165:  colsizer->Add (_multiply_button, 0, wxTOP|wxLEFT, 5);
167: mainSizer->Add (colsizer, 0, wxEXPAND|wxBOTTOM, 0);
169: colsizer = new wxBoxSizer(wxVERTICAL);
174: _maininsizer = new wxBoxSizer(wxVERTICAL);
187: _in_gain_control = slider = new SliderBar(this, ID_InputGainControl, 0.0f, 1.0f, 0.0f, false, wxPoint(-1,-1), wxSize(60,30));
199: _maininsizer->Add (slider, 0, wxLEFT | wxEXPAND, 5);
202: _thresh_control = slider = new SliderBar(this, ID_ThreshControl, 0.0f, 1.0f, 0.0f, false, wxDefaultPosition, wxSize(60,30));
215: _maininsizer->Add (slider, 0, wxEXPAND|wxLEFT|wxTOP, 5);
218: _feedback_control = slider = new SliderBar(this, ID_FeedbackControl, 0.0f, 100.0f, 100.0f, false, wxPoint(-1,-1), wxSize(60,30));
229: _maininsizer->Add (slider, 0, wxEXPAND|wxLEFT|wxTOP, 5);
235: mainSizer->Add (_maininsizer, 1, wxEXPAND, 5);
241: colsizer = new wxBoxSizer(wxVERTICAL);
246: colsizer->Add (_time_panel, 0, wxLEFT, 5);
249: _toppansizer = new wxBoxSizer(wxHORIZONTAL);
251: colsizer->Add (_toppansizer, 1, wxEXPAND|wxTOP|wxLEFT, 4);
253: _botpansizer = new wxBoxSizer(wxHORIZONTAL);
255: _wet_control = slider = new SliderBar(this, ID_WetControl, 0.0f, 1.0f, 1.0f);
263: _botpansizer->Add (slider, 1, wxEXPAND, 0);
265: colsizer->Add (_botpansizer, 1, wxEXPAND|wxTOP|wxLEFT, 4);
266: mainSizer->Add (colsizer, 0, wxEXPAND, 5);
270: colsizer = new wxBoxSizer(wxVERTICAL);
274: wxBoxSizer * lilcolsizer = new wxBoxSizer(wxVERTICAL);
282: _scratch_control = slider = new SliderBar(this, ID_ScratchControl, 0.0f, 1.0f, 0.0f, false, wxPoint(-1,-1), wxSize(60,30));
292: colsizer->Add (slider, 1, wxEXPAND|wxTOP|wxLEFT, 3);
293: colsizer->Add (_sync_check, 1, wxLEFT|wxEXPAND, 3);
306: colsizer->Add (_play_sync_check, 1, wxLEFT|wxEXPAND, 3);
317: colsizer->Add (_play_feed_check, 1, wxLEFT | wxEXPAND, 3);
318:        mainSizer->Add (colsizer, 1, wxEXPAND | wxLEFT, 1);
320: lilcolsizer = new wxBoxSizer(wxVERTICAL);
321: lilcolsizer->Add (_load_button, 0, wxTOP, 0);
322: lilcolsizer->Add (_trig_button, 0, wxTOP, 2);
323:  lilcolsizer->Add (_mute_button, 0, wxTOP, 2);
324: lilcolsizer->Add (_pause_button, 0, wxTOP, 2);
325: rowsizer->Add(lilcolsizer, 0, wxLEFT, 3);
327: lilcolsizer = new wxBoxSizer(wxVERTICAL);
328: lilcolsizer->Add (_save_button, 0, wxTOP, 0);
329: lilcolsizer->Add (_once_button, 0, wxTOP, 2);
330:  lilcolsizer->Add (_solo_button, 0, wxTOP, 2);
331: rowsizer->Add(lilcolsizer, 0, wxLEFT, 3);
335: colsizer->Add (rowsizer, 0, wxEXPAND);
337: mainSizer->Add (rowsizer, 1, wxEXPAND|wxLEFT, 0);
339:        mainSizer->Add (_rightSelbar, 0, wxEXPAND|wxLEFT, 0);
342:        mainVSizer->Add (mainSizer, 1, wxEXPAND, 0);
343:        mainVSizer->Add (_bottomSelbar, 0, wxEXPAND|wxLEFT, 0);
362: _panners = new SliderBar*[_chan_count];
372:  _dry_control = slider = new SliderBar(this, ID_DryControl, 0.0f, 1.0f, 1.0f);
379:  _toppansizer->Add (slider, 1, wxEXPAND, 0);
390:  _maininsizer->Add (_use_main_in_check, 0, wxALL|wxEXPAND|wxALIGN_CENTRE_VERTICAL ,0);
410:  _panners[i] = slider = new SliderBar(this, ID_Panner, 0.0f, 1.0f, defval, true, wxDefaultPosition, wxSize(barwidth,-1));
426:   _toppansizer->Add (slider, 1, (i==0) ? wxEXPAND : wxEXPAND|wxLEFT, 2);
429:   _toppansizer->Add (slider, 0, wxEXPAND|wxLEFT, 2);
432:   _botpansizer->Add (slider, 0, wxEXPAND|wxLEFT, 2);

Digital Larry
Earned a small fee
Earned a small fee
Posts: 12
Joined: Tue Nov 26, 2019 10:35 pm

Re: Trying to get things to line up vertically

Post by Digital Larry » Wed Nov 27, 2019 5:29 pm

doublemax wrote:
Wed Nov 27, 2019 6:59 am
Can you post the new code for comparison?

In general, e.g. the three buttons "in gain", "thresh" and "feedb" are higher than they need to be. Same goes for the column next to them. You need to find out what makes these sizers grow in that direction.

Do they grow even further if you make the window bigger in vertical direction? Than it's maybe just a wxEXPAND flag that needs to be removed in the code that inserts the column sizers into the horizontal mainsizer.
No, the elements in the two sections that are too tall do not change size when I change the size of the enclosing app. That's fine, like I said in another post, I don't need or want them to change size.

User avatar
doublemax
Moderator
Moderator
Posts: 15074
Joined: Fri Apr 21, 2006 8:03 pm
Location: $FCE2

Re: Trying to get things to line up vertically

Post by doublemax » Wed Nov 27, 2019 5:31 pm

Here are what I think are the relevant parts of the modified source code.
That's a little hard to follow. Can you post the whole file? Then i can make a visual diff.
No, the elements in the two sections that are too tall do not change size when I change the size of the enclosing app. That's fine, like I said in another post, I don't need or want them to change size.
The purpose of my question was just to narrow down the potential problem.

Normally i'd just clone it and try it myself, but it has just too many external dependencies.
Use the source, Luke!

Digital Larry
Earned a small fee
Earned a small fee
Posts: 12
Joined: Tue Nov 26, 2019 10:35 pm

Re: Trying to get things to line up vertically

Post by Digital Larry » Wed Nov 27, 2019 5:44 pm

Thanks for your help. Here's the whole file. Yes, getting everything in place to build this takes quite a bit of effort!
looper_panel.cpp
(58.72 KiB) Downloaded 28 times

User avatar
doublemax
Moderator
Moderator
Posts: 15074
Joined: Fri Apr 21, 2006 8:03 pm
Location: $FCE2

Re: Trying to get things to line up vertically

Post by doublemax » Wed Nov 27, 2019 6:21 pm

Sorry, the sizer code is too complex for me to spot the error just by reading it.

Things you should try:
In all the places where you add a vertical boxsizer into the horizontal mainsizer, remove the wxEXPAND flag. Do it one by one and see what happens.

Alternatively, comment out the vertical column sizers (and their contents) one by and and see what happens.

Also: In Debug mode, if you CTRL-ALT-SHIFT-middle click into a free space on the window, you should see some colored lines that display the sizer structure. These lines are just drawn into the wxClientDC, so they disappear on the next redraw. If you can manage to make a screenshot of that, please show it.
Use the source, Luke!

Digital Larry
Earned a small fee
Earned a small fee
Posts: 12
Joined: Tue Nov 26, 2019 10:35 pm

Re: Trying to get things to line up vertically

Post by Digital Larry » Thu Nov 28, 2019 4:56 am

doublemax wrote:
Wed Nov 27, 2019 6:21 pm
Also: In Debug mode, if you CTRL-ALT-SHIFT-middle click into a free space on the window, you should see some colored lines that display the sizer structure. These lines are just drawn into the wxClientDC, so they disappear on the next redraw. If you can manage to make a screenshot of that, please show it.
I made some progress by setting the flag (which had been wxEXPAND) to 0 for the components that were too big. That collapsed them vertically to lines. Then I added a default size and that looks good too. But there's a big space between the tracks (which I think was part of the original problem).
sl-getting-closer.JPG
sl-getting-closer.JPG (54.25 KiB) Viewed 490 times
I've done "git diff" a number of times and although the answer is clearly in there I must be missing it.

Also I cannot get this debug mode of which you speak to work. That would be great and probably clear things right up. I couldn't find any other reference to this. I only have Logitech mice with a combination roller wheel/push button which I assume is middle mouse button, but when I press that, I just get a wxWidgets popup dialog. It says:
wxWidgets Library (wxGTK port)
Version 3.0.4 (Unicode: wchar_t, debug level: 1),
Runtime version of toolkit used is 2.24.
Compile-time GTK+ version is 2.24.32.

Copyright (c) 1995-2013 wxWidgets team

Can you please elaborate on what I need to do? thanks!

DL

User avatar
doublemax
Moderator
Moderator
Posts: 15074
Joined: Fri Apr 21, 2006 8:03 pm
Location: $FCE2

Re: Trying to get things to line up vertically

Post by doublemax » Thu Nov 28, 2019 8:43 am

But there's a big space between the tracks (which I think was part of the original problem).
I agree.

I assume that 1 track = 1 instance of LooperPanel. Did you change anything in the code where the new LooperPanel is added (i assume to another vertical sizer)?

Code: Select all

Version 3.0.4 (Unicode: wchar_t, debug level: 1),
debug level must be 2 in order for this to work. You'd have to rebuild the wxWidgets libraries and use "--enable-debug=max" on the .configure line.
Use the source, Luke!

Digital Larry
Earned a small fee
Earned a small fee
Posts: 12
Joined: Tue Nov 26, 2019 10:35 pm

Re: Trying to get things to line up vertically

Post by Digital Larry » Thu Nov 28, 2019 2:24 pm

I'm rebuilding wxWidgets on the Pi (last time I did this it took about 70 minutes). I'm a little skeptical about whether it will work (the debugging mode to highlight layout regions), because this app is sort of like a clock in that it updates the UI something like ten times per second, and I don't know if it stops doing that even when nothing is going on. We will find out.

I moved forward with your recommendation to comment out one vertical sizer at a time and now I can at least zero in on where the problem is taking place. Thanks a ton! :D
slgui-debug.JPG
slgui-debug.JPG (43.01 KiB) Viewed 440 times
Here's the section of code in question (just the parts dealing with sizers and putting stuff into them):

Code: Select all

270: colsizer = new wxBoxSizer(wxVERTICAL);
282: _scratch_control = slider = new SliderBar(this, ID_ScratchControl, 0.0f, 1.0f, 0.0f, false, wxPoint(-1,-1), wxSize(60,30));
292: colsizer->Add (slider, 1, wxEXPAND|wxTOP|wxLEFT, 3);
293: colsizer->Add (_sync_check, 1, wxLEFT|wxEXPAND, 3);
306: colsizer->Add (_play_sync_check, 1, wxLEFT|wxEXPAND, 3);
317: colsizer->Add (_play_feed_check, 1, wxLEFT | wxEXPAND, 3);
318:        mainSizer->Add (colsizer, 1, wxEXPAND | wxLEFT, 1);
mainSizer is the horizontally oriented sizer that all the other things in a single track go into.

Taking out "wxEXPAND" in the flags on line 318 didn't change anything.

The other thing that is interesting about this is that with this code in there, when I terminate the app, I get:

Code: Select all

corrupted size vs. prev_size while consolidating
Aborted
Whereas the original code, and my code with line 318 commented out, do not show that error upon shutdown.

Digital Larry
Earned a small fee
Earned a small fee
Posts: 12
Joined: Tue Nov 26, 2019 10:35 pm

Re: Trying to get things to line up vertically

Post by Digital Larry » Thu Nov 28, 2019 3:57 pm

OK, I figured it out.

mainSizer is the horizontally oriented wxBoxSizer for the per-track controls.

Each column that gets added declares a new wxBoxSizer. "colsizer" is the variable that is reused for each column, with the exception of a couple that needed to be referenced after the fact (in another class function) to add controls whose state is not known until later.

I was missing a line:

colsizer = new wxBoxSizer(wxVERTICAL);

after adding the previous colsizer to the mainSizer but prior to adding more controls for the next column. So the next column started off with all the controls from the previous column in it. Which is odd because I couldn't see them. But anyway it looks like it works now! Thanks. Now onto the real fun part of trying to get a real time kernel onto the Raspberry Pi. :D

Post Reply