wxPython - Dynamically resize image when frame is maximized - image

Question

I want two images placed side-by-side to increase in size when the frame is resize (maximized). How do I achieve that?
import wx
class MyFrame2 ( wx.Frame ):
def __init__( self, parent ):
wx.Frame.__init__ ( self, parent, id = wx.ID_ANY, title = wx.EmptyString, pos = wx.DefaultPosition, size = wx.Size( 500,300 ), style = wx.DEFAULT_FRAME_STYLE|wx.TAB_TRAVERSAL )
self.SetSizeHintsSz( wx.DefaultSize, wx.DefaultSize )
bSizer11 = wx.BoxSizer( wx.HORIZONTAL )
self.m_bitmap3 = wx.StaticBitmap( self, wx.ID_ANY, wx.Bitmap( u"img/im1.jpg", wx.BITMAP_TYPE_ANY ), wx.DefaultPosition, wx.DefaultSize, 0 )
bSizer11.Add( self.m_bitmap3, 1, wx.ALL|wx.EXPAND, 5 )
self.m_bitmap4 = wx.StaticBitmap( self, wx.ID_ANY, wx.Bitmap( u"img/im2.jpg", wx.BITMAP_TYPE_ANY ), wx.DefaultPosition, wx.DefaultSize, 0 )
bSizer11.Add( self.m_bitmap4, 1, wx.ALL|wx.EXPAND, 5 )
self.SetSizer( bSizer11 )
self.Layout()
self.Centre( wx.BOTH )
def __del__( self ):
pass
app = wx.App(0)
MyFrame2(None).Show()
app.MainLoop()

Answer 1

Based on your pastebin code
import wx
class MyFrame2 ( wx.Frame ):
def __init__( self, parent ):
wx.Frame.__init__ ( self, parent, id = wx.ID_ANY, title = wx.EmptyString, pos = wx.DefaultPosition, size = wx.Size( 500,300 ), style = wx.DEFAULT_FRAME_STYLE|wx.TAB_TRAVERSAL )
self.SetSizeHintsSz( wx.DefaultSize, wx.DefaultSize )
bSizer11 = wx.BoxSizer( wx.HORIZONTAL )
self.img1=wx.Image("1.bmp", wx.BITMAP_TYPE_ANY)
self.img2=wx.Image("1.bmp", wx.BITMAP_TYPE_ANY)
self.m_bitmap3 = wx.StaticBitmap( self, wx.ID_ANY, wx.BitmapFromImage(self.img1), wx.DefaultPosition, wx.DefaultSize, 0 )
bSizer11.Add( self.m_bitmap3, 1, wx.EXPAND, 0 )
self.m_bitmap4 = wx.StaticBitmap( self, wx.ID_ANY, wx.BitmapFromImage(self.img2))
bSizer11.Add( self.m_bitmap4, 1, wx.EXPAND, 0 )
self.Bind(wx.EVT_SIZE, self.onResize)
self.SetSizer( bSizer11 )
self.Layout()
self.Centre(wx.BOTH)
def __del__( self ):
pass
def onResize(self, event):
# self.Layout()
frame_size = self.GetSize()
frame_h = (frame_size[0]-10) / 2
frame_w = (frame_size[1]-10) / 2
img1 = self.img1.Scale(frame_h,frame_w)
img2 = self.img2.Scale(frame_h,frame_w)
self.m_bitmap3.SetBitmap(wx.BitmapFromImage(img1))
self.m_bitmap4.SetBitmap(wx.BitmapFromImage(img2))
self.Refresh()
self.Layout()
app = wx.App(0)
MyFrame2(None).Show()
app.MainLoop()
Note: a single self.Bind
the size of the Scale is based on half of the frame size and the images are scaled from the original images each time, otherwise they slowly get more and more distorted.

Answer 2

You will need to bind to wx.EVT_SIZE since that is the event that is fired when you resize the frame. Then in that handler, you will want to update the image's size. You can use the Scale() method from wx.Image to change the image's size. Note that you will probably want to scale the image in such a way that you maintain it's aspect ratio or it will look weird when it gets stretched.
Here's an example based loosely on my tutorial for a Photo Viewer from a few years ago:
import os
import wx
class PhotoCtrl(wx.App):
def __init__(self, redirect=False, filename=None):
wx.App.__init__(self, redirect, filename)
self.frame = wx.Frame(None, title='Photo Control', size=(400, 400))
self.image_loaded = False
self.current_size = self.frame.GetSize()
self.filepath = None
self.panel = wx.Panel(self.frame)
self.Bind(wx.EVT_SIZE, self.onResize)
self.PhotoMaxSize = self.current_size.GetHeight() - 10
self.createWidgets()
self.frame.Show()
def createWidgets(self):
instructions = 'Browse for an image'
img = wx.EmptyImage(240,240)
self.imageCtrl = wx.StaticBitmap(self.panel, wx.ID_ANY,
wx.BitmapFromImage(img))
instructLbl = wx.StaticText(self.panel, label=instructions)
self.photoTxt = wx.TextCtrl(self.panel, size=(200,-1))
browseBtn = wx.Button(self.panel, label='Browse')
browseBtn.Bind(wx.EVT_BUTTON, self.onBrowse)
self.mainSizer = wx.BoxSizer(wx.VERTICAL)
self.sizer = wx.BoxSizer(wx.HORIZONTAL)
self.mainSizer.Add(wx.StaticLine(self.panel, wx.ID_ANY),
0, wx.ALL|wx.EXPAND, 5)
self.mainSizer.Add(instructLbl, 0, wx.ALL, 5)
self.mainSizer.Add(self.imageCtrl, 0, wx.ALL, 5)
self.sizer.Add(self.photoTxt, 0, wx.ALL, 5)
self.sizer.Add(browseBtn, 0, wx.ALL, 5)
self.mainSizer.Add(self.sizer, 0, wx.ALL, 5)
self.panel.SetSizer(self.mainSizer)
self.panel.Layout()
def onBrowse(self, event):
"""
Browse for file
"""
wildcard = "JPG files (*.jpg)|*.jpg"
dialog = wx.FileDialog(None, "Choose a file",
wildcard=wildcard,
style=wx.OPEN)
if dialog.ShowModal() == wx.ID_OK:
self.photoTxt.SetValue(dialog.GetPath())
self.onView()
dialog.Destroy()
def scale_image(self):
if self.filepath:
img = wx.Image(self.filepath, wx.BITMAP_TYPE_ANY)
# scale the image, preserving the aspect ratio
W = img.GetWidth()
H = img.GetHeight()
if W > H:
NewW = self.PhotoMaxSize
NewH = self.PhotoMaxSize * H / W
else:
NewH = self.PhotoMaxSize
NewW = self.PhotoMaxSize * W / H
img = img.Scale(NewW,NewH)
return img
def onView(self):
self.filepath = self.photoTxt.GetValue()
img = self.scale_image()
self.imageCtrl.SetBitmap(wx.BitmapFromImage(img))
self.panel.Refresh()
self.image_loaded = True
def onResize(self, event):
print 'resizing'
if self.image_loaded:
if self.current_size != self.frame.GetSize():
self.current_size = self.frame.GetSize()
self.PhotoMaxSize = self.current_size.GetHeight() - 30
img = self.scale_image()
self.imageCtrl.SetBitmap(wx.BitmapFromImage(img))
self.panel.Refresh()
self.panel.Layout()
if __name__ == '__main__':
app = PhotoCtrl()
app.MainLoop()
Note that this seems to scale the image just fine, but the buttons on the bottom are getting chopped off. I'm not sure why and don't really have the time at the moment to diagnose that issue, but in general this is probably the way you want to do it.