wxPython layout of gui panels

Question

I'm trying to create a gui with the following layout:

Where the top panel is going to contain three figures, the three middle panels are going to contain textboxes and the bottom panel some buttons

Here is what I have so far:

import wx
from matplotlib.backends.backend_wxagg import FigureCanvasWxAgg as FigureCanvas
from matplotlib.figure import Figure
from mpl_toolkits.mplot3d import Axes3D
import gui_functions as gf

class MainWindow(wx.Frame):
    def __init__(self, parent, id, title = "Test GUI"):
        wx.Frame.__init__(self, parent, wx.ID_ANY, title = "MyTitle", size=(1200,1000))

        self.graphicsPanel = wx.Panel(self,-1,style=wx.CLIP_CHILDREN)
        self.textPanel = wx.Panel(self)
        self.buttonsPanel = wx.Panel(self)

        self.graphicsPanel.figure = Figure()
        self.graphicsPanel.canvas = FigureCanvas(self.graphicsPanel, -1, self.graphicsPanel.figure)

        self.axeshandleA = self.graphicsPanel.figure.add_subplot(131, projection='3d',facecolor='#f3f3f3')
        self.axeshandleB = self.graphicsPanel.figure.add_subplot(132, projection='3d',facecolor='#f3f3f3')
        self.axeshandleC = self.graphicsPanel.figure.add_subplot(133, projection='3d',facecolor='#f3f3f3')






if __name__ == '__main__':
    app = wx.App(False)
    app.frame = MainWindow(None, wx.ID_ANY)
    app.frame.Show()

    app.MainLoop()

I've assumed that I need to start with three panels, that I somehow have to align vertically.

I'm thinking in the middle panel I will then need to add three additional panels and align them horizontally

My brain is thinking along the lines of how to structure div boxes in HTML and CSS.

My first problem is that I can't work out how to get the panels to a) fill the parent and b) align vertically.

Secondly, I'm working Spyder. Why do I have to start a new console after every call to the gui? If I don't then I get the error

The wx.App object must be created first!

I would really appreciate any help, because I'm stuck! Many thanks

I'm running wxPython 4.0.0rc1.dev3617+346e3b7 and Python 3.5.4

Answer 1

After much work and phaffing I now have this GUI:

The buttons are still wider than I would like, but I can't figure out how to make them narrower.

The code I have used is

import wx
from matplotlib.backends.backend_wxagg import FigureCanvasWxAgg as FigureCanvas
from matplotlib.figure import Figure
from mpl_toolkits.mplot3d import Axes3D

class MainWindow(wx.Frame):
    def __init__(self, parent, id, title = "Test GUI"):
        wx.Frame.__init__(self, parent, wx.ID_ANY, title = "MyTitle", size=(1200,1000))

        self.graphicsPanel = wx.Panel(self,-1,style=wx.CLIP_CHILDREN)
        self.graphicsPanel.SetBackgroundColour('#3aafbb')
        self.textPanel = wx.Panel(self)
        self.textPanel.SetBackgroundColour('#ffaf33')
        self.buttonsPanel = wx.Panel(self)
        self.buttonsPanel.SetBackgroundColour('#489e3e')

        self.graphicsPanel.figure = Figure()
        self.graphicsPanel.canvas = FigureCanvas(self.graphicsPanel, 1, self.graphicsPanel.figure)

        main_sizer = wx.BoxSizer(wx.VERTICAL)

        main_sizer.Add(self.graphicsPanel, 3, wx.EXPAND, border = 20)
        main_sizer.Add(self.textPanel, 6, wx.EXPAND, border = 20)
        main_sizer.Add(self.buttonsPanel, 1, wx.EXPAND, border = 20)

        self.SetSizer(main_sizer)
        self.Maximize(True)

        self.axeshandleA = self.graphicsPanel.figure.add_subplot(131, projection='3d',facecolor='#f3f3f3')
        self.axeshandleB = self.graphicsPanel.figure.add_subplot(132, projection='3d',facecolor='#f3f3f3')
        self.axeshandleC = self.graphicsPanel.figure.add_subplot(133, projection='3d',facecolor='#f3f3f3')

        self.graphicsPanel_sizer = wx.BoxSizer()
        self.graphicsPanel_sizer.Add(self.graphicsPanel.canvas, 1, wx.EXPAND|wx.LEFT|wx.RIGHT|wx.TOP|wx.BOTTOM, border=10)
        self.graphicsPanel.SetSizerAndFit(self.graphicsPanel_sizer)


        self.textPanelR = wx.Panel(self.textPanel)
        self.textPanelR.SetBackgroundColour('#f2c4f5')
        self.textPanelA = wx.Panel(self.textPanel)
        self.textPanelA.SetBackgroundColour('#86478a')
        self.textPanelC = wx.Panel(self.textPanel)
        self.textPanelC.SetBackgroundColour('#e11fee')

        self.textPanel_sizer = wx.BoxSizer(wx.HORIZONTAL)
        self.textPanel_sizer.Add(self.textPanelR, 1, wx.EXPAND|wx.LEFT|wx.RIGHT|wx.TOP|wx.BOTTOM, border=20)
        self.textPanel_sizer.Add(self.textPanelA, 1, wx.EXPAND|wx.LEFT|wx.RIGHT|wx.TOP|wx.BOTTOM, border=20)
        self.textPanel_sizer.Add(self.textPanelC, 1, wx.EXPAND|wx.LEFT|wx.RIGHT|wx.TOP|wx.BOTTOM, border=20)
        self.textPanel.SetSizerAndFit(self.textPanel_sizer)


        self.backBtn = wx.Button(self.buttonsPanel,label='<<BACK',style=wx.BU_EXACTFIT, size=(50,30))
        self.backBtn.Bind(wx.EVT_BUTTON, self.backBtnClicked)

        self.exitBtn = wx.Button(self.buttonsPanel,label='EXIT',style=wx.BU_EXACTFIT, size=(50,30))
        self.exitBtn.Bind(wx.EVT_BUTTON, self.exitBtnClicked)

        self.nextBtn = wx.Button(self.buttonsPanel,label='NEXT>>',style=wx.BU_EXACTFIT, size=(50,30))
        self.nextBtn.Bind(wx.EVT_BUTTON, self.nextBtnClicked)

        self.buttonsPanel_sizer = wx.BoxSizer(wx.HORIZONTAL)
        self.buttonsPanel_sizer.Add(self.backBtn, 1, wx.CENTER|wx.LEFT|wx.RIGHT, border=20)
        self.buttonsPanel_sizer.Add(self.exitBtn, 1, wx.CENTER|wx.LEFT|wx.RIGHT, border=20)
        self.buttonsPanel_sizer.Add(self.nextBtn, 1, wx.CENTER|wx.LEFT|wx.RIGHT, border=20)
        self.buttonsPanel.SetSizer(self.buttonsPanel_sizer)







    def backBtnClicked(self, event):
        print("Back Button")

    def nextBtnClicked(self, event):
        print("Next Button")

    def exitBtnClicked(self, event):
        print("Exit Button")









if __name__ == '__main__':
    app = wx.App(False)
    app.frame = MainWindow(None, wx.ID_ANY)
    app.frame.Show()

    app.MainLoop()

I doubt it's as efficient as it could be, but it seems to mostly do what I want it to. Any further advice or recommendations would be gratefully received.