OSX/Win/GTK layout differencesv (Phoneix 4.0.0b1)

[Brendan Simon (eTRIX)]

Layout differences between wxMac, wxGTK and WxWin (using Phoenix/wxPython 4.0.0b1)

When using sizers (e.g. with static box) on mac, the borders between the sizers have a nice spacing between them, and the contents of the sizer (e.g. some checkboxes) also have a nice space between the border and widgets).

However on GTK3 and Windows, the borders of the sizers are right next to each other (or on top of each other), and the sizer content widgets are very close to the border.  Things look more cramped.

I presume the goal is to have the GUIs look the same (as similar as possible), no matter which underlying widget toolkit is being used.  So is this a bug either in wxMac or wxGTK/wxWin ?

I'm using wxglade to create my UI, and I can add gaps around each widget (and select which edges -- left, right, top, bottom), but I can't do that on a per platform basis, and it's is a bit of pain if you have to do that for lots of widgets.  The sizers themselves can also have a gap (any edge) specified, but again I can't specify that on a per platform basis.

I might be able to override things programatically per platform in derived classes, but it seems like work I shouldn't have to do.

Should the spacing between sizers and widgets, etc, be consistent on all platforms?

Is there a way to force sizer, widgets, etc to have consistent spacing between them on all platforms?

Thanks, Brendan.

[Igor Korot]

Hi, Brendan,

On Sat, Sep 16, 2017 at 10:49 PM, Brendan Simon (eTRIX)
<brenda...@etrix.com.au> wrote:
> Layout differences between wxMac, wxGTK and WxWin (using Phoenix/wxPython
> 4.0.0b1)

Could you please create a snapshot and post them on e.g. imgur so that
it will be better understood what
you mean?

Thank you.

> --
> You received this message because you are subscribed to the Google Groups
> "wxPython-users" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to wxpython-user...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.

[Matt Newville]

Hi Brendan,

On Sat, Sep 16, 2017 at 9:49 PM, Brendan Simon (eTRIX) <brenda...@etrix.com.au> wrote:

Layout differences between wxMac, wxGTK and WxWin (using Phoenix/wxPython 4.0.0b1)

When using sizers (e.g. with static box) on mac, the borders between the sizers have a nice spacing between them, and the contents of the sizer (e.g. some checkboxes) also have a nice space between the border and widgets).

However on GTK3 and Windows, the borders of the sizers are right next to each other (or on top of each other), and the sizer content widgets are very close to the border.  Things look more cramped.

I presume the goal is to have the GUIs look the same (as similar as possible), no matter which underlying widget toolkit is being used.  So is this a bug either in wxMac or wxGTK/wxWin ?

I think your presumption is not correct.  As described in the one-paragraph description of wxWidgets at http://wxwidgets.org/, it uses the systems GUI toolkit with give native look and feel.  Many of the widgets look very different between Mac, Windows, and Gtk.

 

[Chris Barker - NOAA Federal]

I presume the goal is to have the GUIs look the same (as similar as possible), no matter which underlying widget toolkit is being used.  So is this a bug either in wxMac or wxGTK/wxWin ?

I think your presumption is not correct.  As described in the one-paragraph description of wxWidgets at http://wxwidgets.org/, it uses the systems GUI toolkit with give native look and feel.  Many of the widgets look very different between Mac, Windows, and Gtk.

This is a good point -- the goal is for it to "function" pretty much the same, but with native look and feel.

That being said -  native look means well spaced out, etc for the platfor. And each platform does handle spacing differently, so it is hard to design platform independent layout that works well.

Take a look for something like "SizedControls" (sorry, on a phone, hard to find proper reference)-- they are designed to try to improve that.

-CHB

[Brendan Simon]

On Monday, 18 September 2017 02:40:05 UTC+10, Chris Barker - NOAA Federal wrote:

I presume the goal is to have the GUIs look the same (as similar as possible), no matter which underlying widget toolkit is being used.  So is this a bug either in wxMac or wxGTK/wxWin ?

I think your presumption is not correct.  As described in the one-paragraph description of wxWidgets at http://wxwidgets.org/, it uses the systems GUI toolkit with give native look and feel.  Many of the widgets look very different between Mac, Windows, and Gtk.

This is a good point -- the goal is for it to "function" pretty much the same, but with native look and feel.

That being said -  native look means well spaced out, etc for the platfor. And each platform does handle spacing differently, so it is hard to design platform independent layout that works well.

Take a look for something like "SizedControls" (sorry, on a phone, hard to find proper reference)-- they are designed to try to improve that.

 

I've uploaded screenshots to:

https://drive.google.com/drive/folders/0B1t5vV7Go1zbQm14Rm1tRl9ZMWs

Files: aquasition_mac.png, aquasition_win.png, sdcard_production_mac.png, sdcard_production_gtk3.png

All GUIs created with wxglade, which uses sizers directly.

Notice with `aquasition*` files that the borders of static boxes are right next to each other on Windows, but on Mac they have a nice gap between them.

Notice with `sdcard_production*` files that the option checkboxes and `Program SD Card` button are right next to the left/right edge of the static box on GTK3, but on Mac there is a nice gap.

I understand the individual widgets will look different on different platforms.  Layout/spacing (between widgets) is a bit different.  The two approaches are (1) have the same spacing on all platforms, or (2) use the standard spacing that is specific to each platform (if there is such a standard or convention).  Either way, as a programmer I don't want to have to do to much customization.  Setting a layout mode once is more than acceptable, if need be.  Having to change the spacing on every sizer and or widget per platform becomes tedious very quickly.

I have used SizedControls before, and once I discovered them I always used them when hand coding a GUI (rather than explicitly coding sizers), however I am now trying to move to a graphical layout tool (i.e. wxglade) for layout, as it seems a more logical to use a GUI to create a GUI (if the layout tool is any good, then it should be quicker to design then hand coding).  wxglade does not instantiate SizedControls (not directly anyhow).

https://www.blog.pythonlibrary.org/2014/01/23/wxpython-an-introduction-to-sized-controls/

According to the wxPython demo:

This class also applies control borders that adhere to the native platform’s Human Interface Guidelines (HIG) on Win, GTK and Mac.

So SizedControls adheres to the native platforms Human Interface Guidelines.  Shouldn't this be the default for all sizers on all platforms ?

[Robin Dunn]

On Sunday, September 17, 2017 at 4:41:45 PM UTC-7, Brendan Simon wrote:

On Monday, 18 September 2017 02:40:05 UTC+10, Chris Barker - NOAA Federal wrote:

I presume the goal is to have the GUIs look the same (as similar as possible), no matter which underlying widget toolkit is being used.  So is this a bug either in wxMac or wxGTK/wxWin ?

I think your presumption is not correct.  As described in the one-paragraph description of wxWidgets at http://wxwidgets.org/, it uses the systems GUI toolkit with give native look and feel.  Many of the widgets look very different between Mac, Windows, and Gtk.

I've uploaded screenshots to:

https://drive.google.com/drive/folders/0B1t5vV7Go1zbQm14Rm1tRl9ZMWs

Files: aquasition_mac.png, aquasition_win.png, sdcard_production_mac.png, sdcard_production_gtk3.png

All GUIs created with wxglade, which uses sizers directly.

Notice with `aquasition*` files that the borders of static boxes are right next to each other on Windows, but on Mac they have a nice gap between them.

Notice with `sdcard_production*` files that the option checkboxes and `Program SD Card` button are right next to the left/right edge of the static box on GTK3, but on Mac there is a nice gap.

I suspect that if you look at the actual widgets sizes and positions that you'll see that the widgets are aligned the same on OSX as the other platforms, it's just that the native OSX static box doesn't draw the lines on the border, but has some extra space built in and draws the lines in the middle of that space.

 

I understand the individual widgets will look different on different platforms.  Layout/spacing (between widgets) is a bit different.  The two approaches are (1) have the same spacing on all platforms, or (2) use the standard spacing that is specific to each platform (if there is such a standard or convention).  Either way, as a programmer I don't want to have to do to much customization.  Setting a layout mode once is more than acceptable, if need be.  Having to change the spacing on every sizer and or widget per platform becomes tedious very quickly.

I have used SizedControls before, and once I discovered them I always used them when hand coding a GUI (rather than explicitly coding sizers), however I am now trying to move to a graphical layout tool (i.e. wxglade) for layout, as it seems a more logical to use a GUI to create a GUI (if the layout tool is any good, then it should be quicker to design then hand coding).  wxglade does not instantiate SizedControls (not directly anyhow).

https://www.blog.pythonlibrary.org/2014/01/23/wxpython-an-introduction-to-sized-controls/

According to the wxPython demo:

This class also applies control borders that adhere to the native platform’s Human Interface Guidelines (HIG) on Win, GTK and Mac.

So SizedControls adheres to the native platforms Human Interface Guidelines.  Shouldn't this be the default for all sizers on all platforms ?

In a perfect world, yes. There has been some work towards that goal but it's not there yet. It can help make things a little more consistent however.  If you add items to a sizer using wx.SizerFlags instead of specifying all the extra parameters individually, then there are some methods that can help with adding default border sizes for the items.  For example, something like this:

    sizer.Add(childWindow, wx.SizerFlags().Expand().Border())

That will set the item to be expanded and include a default border size on all sides of the item. Of course that doesn't help with UI editors and generated code unless they actually use it, and it won't help when using XRC at all.

The approach I usually take is not too complex and is easily manageable. I set the hgap and vgap of all grid sizers to something small, like 4 to 8 pixels, set the same value for the bottom side for vertical box sizers or to the right side for horizontal sizers, and when adding a sizer to another I tend to use the same border size on all sides. And I always use an extra sizer on the top-level panel or equivalent on the frame so I can add that border size on all sides there.  This way, the widgets are not jammed up against each other on Windows or Linux, and the layouts look close enough to normal for the platform. On OSX with the extra space that some widgets have built in, it still looks normal there because typical Mac layouts have lots of empty space.

--
Robin Dunn
Software Craftsman
http://wxPython.org