wxPython add wx.StaticBitmap to wx.GridBagSizer

Question

I have 2 bitmaps that I want to put in a specific location using wx.GridBagSizer. This question is similar to this one. However, it is not clear if it was ever resolved.

here is one of the examples I found. I believe I am doing exactly the same but my image is not added to the sizer.

Here is my code. I create a frame, panel and put 2 bitmaps in presumable two different cells using wx.gridbagsizer. However, when I update bitmaps with actual graphs they appear as overlapping.

    frame = wx.Frame.__init__(self, None, wx.ID_ANY, "", size = (1200,800))#, style= wx.SYSTEM_MENU | wx.CAPTION)
    self.panel = wx.Panel(self, wx.ID_ANY, style=wx.BORDER_THEME, size = (1200,800))

    bmp1 = wx.Bitmap.FromRGBA(100, 100, red=255, alpha=0)
    self.bitmap1 = wx.StaticBitmap(self.panel, bitmap=bmp1)
    self.bitmap2 = wx.StaticBitmap(self.panel, bitmap=bmp1)

    sizer = wx.GridBagSizer(hgap = 0, vgap = 0)#(13, 11)
    sizer.Add(self.bitmap1, pos=(0,0),  flag = wx.ALL)#, flag=wx.TOP|wx.RIGHT) FIXIT so the sidebar is closer to the graph
    sizer.Add(self.bitmap2, pos=(0,1),  flag = wx.ALL)#,flag=wx.TOP|wx.RIGHT)


    def buf2wx (buf):
        image = PIL.Image.open(buf)
        width, height = image.size
        return wx.Bitmap.FromBuffer(width, height, image.tobytes())

    import PIL
    import io
    from matplotlib import pyplot as plt
    import urllib, base64
    import cStringIO
    import io
    from numpy import random
    plt.figure()
    b = random.rand(100,)
    plt.subplot(311)
    plt.plot(b)
    b = random.rand(100,)
    plt.subplot(312)
    plt.plot(b)
    b = random.rand(100,)
    plt.subplot(313)
    plt.plot(b)
    plt.title("test")
    buf = io.BytesIO()
    plt.savefig(buf, format='jpg')
    buf.seek(0)

    self.bitmap1.SetBitmap(buf2wx(buf))
    self.bitmap2.SetBitmap(buf2wx(buf))


    buf.close()
    app.MainLoop()

what I get are overlapping graphs

I can move them around by specifying the position

self.bitmap1.SetPosition((0,0))
self.bitmap2.SetPosition((100,0))

Answer 1

The answer ended up been trivial. To make it work I needed to set sizer. Adding the code below at the end of the charting before app.MainLoop(), especially 'SetSizer()'. Other functions take care of resizing, etc. Also, make sure that the bitmap is added to the panel object(self.panel), not frame (self).

    self.panel.SetSizer(sizer)
    self.Layout()
    self.panel.Layout()
    self.Fit()