Join Club ShowMeDo to Learn Python!

This series is a part of Club ShowMeDo. Click to learn why you should join our club with a simple monthly subscription.

  • We teach Python and all the cool modules
  • Topics include beginner Python, GUIs, Web and Desktop Apps
  • Long, specially crafted video tutorials just for you
  • Club video tutorials extend our normal Free content
  • Save your time - we've done the research for you
  • Keep your skills up-to-date
  • Learn at your own pace, everything you need is shown to you
  • Over 12 hours of archived material are waiting for you in the club

Name: [002] Ian Ozsvald
Member: 105 months
Authored: 181 videos
Description: I am the co-founder of ShowMeDo (see http://showmedo.com/about), author of `The Screencasting Handbook <http://thescreencastinghandbook.com>`_ and the founder of the professional screencast production company `ProCasts <http://procasts.co.uk>`_: .. image:: http://procasts.co.uk/media/procasts_sma ...

Using wx.Image & wx.StaticBitmap [ID:540] (7/14)

in series: Build a wxPython Image Viewer

(Showmedo is undergoing major changes. To report any problems viewing the videos please email us and include browser and OS specifics. Cheers - Kyran.)

Now we actually load and display an Image! We use a wx.Image which reads a graphic image from our hard-drive.

First we show the image's dimensions in the status-bar using .SetStatusText(...). Next we use the new ShowBitmap(self) function to convert the Image to a wx.StaticBitmap which is shown inside the Panel. We ask the Frame to resize itself to fit the picture and also to center itself on-screen.

Links - documentation for wx.Image and wx.StaticBitmap.

import os
import wx

MAIN_WINDOW_DEFAULT_SIZE = (300,200)

class Frame(wx.Frame):
    
    def __init__(self, parent, id, title):
        style=wx.DEFAULT_FRAME_STYLE ^ (wx.RESIZE_BORDER) # XOR to remove the resizeable border        
        wx.Frame.__init__(self, parent, id, title=title, size=MAIN_WINDOW_DEFAULT_SIZE, style=style)
        self.Center() # open in the centre of the screen
        self.panel = wx.Panel(self)
        self.panel.SetBackgroundColour('White') # make the background of the window white

        self.CreateMenuBar()
        
        # create a StatusBar and give it 2 columns
        self.statusBar = self.CreateStatusBar()
        self.statusBar.SetFieldsCount(2)
        self.statusBar.SetStatusText('No image specified', 1)
        

    def CreateMenuBar(self):
        "Create a menu bar with Open, Exit items"
        menuBar = wx.MenuBar()
        # Tell our Frame about this MenuBar
        self.SetMenuBar(menuBar)
        menuFile = wx.Menu()
        menuBar.Append(menuFile, '&File')
        # NOTE on wx ids - they're used everywhere, we don't care about them
        # Used to handle events and other things
        # An id can be -1 or wx.ID_ANY, wx.NewId(), your own id
        # Get the id using object.GetId()
        fileOpenMenuItem = menuFile.Append(-1, '&Open Image', 'Open a picture')
        #print "fileOpenMenuItem.GetId()", fileOpenMenuItem.GetId()
        self.Bind(wx.EVT_MENU, self.OnOpen, fileOpenMenuItem)

        # add a 'mirror' option, disable it for now
        # we add mirrorMenuItem to self so that we can reference it later
        #self.mirrorMenuItem = menuFile.Append(-1, '&Mirror Image', 'Mirror the image horizontally')
        #self.mirrorMenuItem.Enable(False) # we can't mirror an image until we've loaded one in, so start with 'mirror' disabled
        #self.Bind(wx.EVT_MENU, self.OnMirrorImage, self.mirrorMenuItem)
        
        # create a menu item for Exit and bind it to the OnExit function       
        exitMenuItem = menuFile.Append(-1, 'E&xit', 'Exit the viewer')        
        self.Bind(wx.EVT_MENU, self.OnExit, exitMenuItem)
        
        # add a Help menu with an About item
        #menuHelp = wx.Menu()
        #menuBar.Append(menuHelp, '&Help')
        #helpMenuItem = menuHelp.Append(-1, '&About', 'About screen')
        #self.Bind(wx.EVT_MENU, self.OnAbout, helpMenuItem)

    def OnOpen(self, event):
        "Open an image file, set title if successful"
        # Create a file-open dialog in the current directory
        
        filters = 'Image files (*.gif;*.png;*.jpg)|*.gif;*.png;*.jpg'
        dlg = wx.FileDialog(self, message="Open an Image...", defaultDir=os.getcwd(), 
                            defaultFile="", wildcard=filters, style=wx.OPEN)
        
        # Call the dialog as a model-dialog so we're required to choose Ok or Cancel
        if dlg.ShowModal() == wx.ID_OK:
            # User has selected something, get the path, set the window's title to the path
            filename = dlg.GetPath()
            self.SetTitle(filename)
            wx.BeginBusyCursor()            
            #self.image = wx.Image(filename, wx.BITMAP_TYPE_ANY, -1) # auto-detect file type        
            #self.statusBar.SetStatusText('Size = %s' % (str(self.image.GetSize())), 1)
            #self.ShowBitmap()
            wx.EndBusyCursor()
                        
        dlg.Destroy() # we don't need the dialog any more so we ask it to clean-up

    def ShowBitmap(self):
        # NOTE doesn't delete old bitmap which can cause a memory leak!
        
        # Convert to Bitmap for wxPython to draw it to screen
        self.bitmap = wx.StaticBitmap(self.panel, -1, wx.BitmapFromImage(self.image))       
        # Make the application's window as large as the image
        self.SetClientSize(self.bitmap.GetSize())
        #self.Center() # open in the centre of the screen
        
    def OnExit(self, event):
        "Close the application by Destroying the object"
        self.Destroy() 
        
    
class App(wx.App):
    
    def OnInit(self):
        self.frame = Frame(parent=None, id=-1, title='Image Viewer')
        self.frame.Show()
        self.SetTopWindow(self.frame)
        return True
    
if __name__ == "__main__":       
    # make an App object, set stdout to the console so we can see errors
    app = App(redirect=False)
        
    app.MainLoop()

Got any questions?

Get answers in the ShowMeDo Learners Google Group.

Video statistics:

  • Video's rank shown in the most popular listing
  • Video plays: 148 (since July 30th)
  • Plays in last week: 0
  • Published: 79 months ago

Thank-yous, questions and comments

If this video tutorial was helpful please take some time to say thank-you to the authors for their hard work. Feel free to ask questions. Let the author know why their video tutorial was useful - what are you learning about? Did the video tutorial save you time? Would you like to see more?

You may also want to see our ShowMeDo Google Group to speak to our active users and authors.

Your email address will not be published.

Show some quick comments >>








All comments excluding tick-boxed quick-comments

Thank you so much, this video explained two very important details I needed for a project of mine.


Great video, Is helping me heaps


These are a great bunch of videos, shows a logical progression; which really helps in understanding the code.

-- From making the Frame, Menubar, putting in the File menu and items, importing the OS to open up a Windows file dialog box to search for image files, and creating a self sizing bitmap to fit the image inside the frame.

It's a great feeling to finally get that image up on the screen! Thanks a bunch = )


Review of Using wx.Image & wx.StaticBitmap

Great series! Straight forward and easy to follow along. I'm learning a lot. A very practical application, strikes up my interest and makes me want to experiment with the code and start making my own wx applications. This has been very helpful thanks a bunch!


Review of Using wx.Image & wx.StaticBitmap

Very cool stuff. It's amazing how simple it is. Well done.


Excellent Ian, i find that it works well for me when I pull up the sample code first and then run/uncomment as the video progresses


Video published, thanks for contributing to ShowMeDo


Showmedo is a peer-produced video-tutorials and screencasts site for free and open-source software (FOSS)- with the exception of some club videos, the large majority are free to watch and download.

how to help » about » faq »

Educating the Open-source Community With Showmedo

Although as important as the software it supports, education and documentation are relatively neglected in the Open-source world. Coders love to code, and explaining how best to use or improve the software tends to be deferred or even sidelined.

At Showmedo we believe the community can play a vital role here and also say thanks for the tools and software that make our lives easier. If you have a piece of software you love or a programming langugage you are enthusiastic about, why not make a screencast showing others how to use it? All the stuff you wish you'd been told, the tips, tricks, insights that would have saved you time and frustration.

Screencasting is easier than you think, and we're happy to help you. You can emailus for advice or just use some of the how-to screencasts on the site. This screencasting learning-pathis a good place to start.

Kudos and Thanks for Ian

Content

Feedback

Showmedo's development is fairly rapid and bugs will inevitably creep in. If you have any problems please drop us a line using the contact address below. Likewise, any suggestions for improvements to the site are gratefully received.

feedback@showmedo.com