Name: [002] Ian Ozsvald
Member: 101 months
Authored: 181 videos
Description: I am the co-founder of ShowMeDo (see, author of `The Screencasting Handbook <>`_ and the founder of the professional screencast production company `ProCasts <>`_: .. image:: ...

Build a wxPython Image Viewer [ID:179]

a series of video-tutorials by Ian Ozsvald

Want to learn wxPython? Want a fully-worked example which leads you through to a working program? Want some exercises (with solutions!) which test your growing knowledge? Here we build a wxPython-based Image Viewer and at the end of the series you'll be able to build your own wxPython applications.

This series is aimed at Python programmers who have a little Python experience and no wxPython experience. Source-code and background information are included.

Release schedule - 12 episodes will be released between mid-February and the middle of March, the series will run for over 1 hour.

Versions - we use Python 2.5 and wxPython (unicode). The source-code will run on all platforms.

Video Tutorials

1. Overview - building your own Image Viewer

In 3 minutes you'll see all aspects of the wxPython application we're going to build including the wxPython objects for menus, status bar, file dialog, panel, frame, image and bitmap. You'll see the application in action and by the end of the series you'll be able to build it yourself. Three exercises are included to give you confidence - each are backed by a fully-worked solution. You'll add yo [...]

2. Your own Skeleton wxPython Application

We start from first principles by walking through a skeleton wxPython application - you can use this skeleton to build your own wxPython applications too. We use an over-ridden wx.App and wx.Frame to build a wx.Panel. The use of a constant and custom style for the wx.Frame is discussed and we walk through the basic event sequence for starting a wxPython application. Simple tests for you - changin [...]

3. Debug Tip (stdout) and wxPython Naming Conventions

When debugging a new wxPython application it is common for error messages to go to a separate window. If you application is buggy and crashes on startup then these error messages are lost! Here I show you how to keep track of the errors using 'App(redirect=False)'. I also discuss some of the differences between wxPython and Python's naming conventions and give you a useful heuristic (stick with [...]

4. Add Menus, wx Ids, Binding

We add a MenuBar with some Menu items. When adding Menus or other widgets you always have to specify an 'id' and there are multiple (slightly confusing!) ways of creating set our wx Ids we discuss wx's '-1', wx.ID_ANY, wx.NewId() and managing your own Ids. I provide the heuristic of always using '-1' for your Ids unless you need more control. We test wx's new Id using object.GetId() a [...]

5. Create a wx.FileDialog() File-Opener

To display a user's image we'll need to ask for a file-name. We use the wx.FileDialog() - configured to act as a file-opener dialog - to get a full pathname from the user. We extend the OnOpen method so it calls the file dialog and if a user selects a file then we set the Frame's title with .SetTitle and show how to enable a busy-mouse-pointer with BeginBusyCursor and EndBusyCursor. The dialog [...]

6. Using Frame.CreateStatusBar()

We use the Frame's CreateStatusBar() to add a Status Bar to the base of our Frame, adding a second field using .SetFieldsCount(2) and specify some text with .SetStatusText(...).

7. Using wx.Image & wx.StaticBitmap

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 [...]

8. Avoiding Memory Leaks with .Destroy()

Memory leaks lead to insidious bugs - here we look at a memory leak which exists in the code, inspect the problem and then remove the leak. The memory leak exists because we add a new StaticBitmap to a Panel and we don't remove the prior StaticBitmap from the previous call. The Panel keeps track of a growing list of StaticBitmaps which we don't need - these constitute a 'leak' (though they don [...]

9. Exercise - add a Mirror function to our wxPython Image Viewer

This is the first exercise in this series, the next episode shows the fully-worked solution. Here you're going to add a new menu item called Mirror and then write the code which will flip the image on the x-axis. The steps you'll need to follow are: Uncomment the menu-item code and write an empty OnMirrorImage function Upon loading an image you must enable the Mirror menu item In the OnMi [...]

10. Worked Solution - adding a Mirror function to the Image Viewer

First of all we uncomment the Mirror menu code and run the application without defining the OnMirrorImage function - we get an AttributeError exception on the Frame. Next we create an empty OnMirrorImage function and Enable the menu item in OnOpen after the wx.ID_OK. Next we use the image's Mirror() function, our ShowBitmap() and the Frame's Refresh() to correctly flip the image.

11. Exercise - Add an HTML About Dialog to the Help menu

In this episode we'll add an About box to the Help menu. Most programs that are released to users have an About box - ours will be no exception. We'll use an HTML box so we can easily create a nice message for the user. First we add the menu items for About, then you have to write an OnAbout function which calls our derived Dialog. Finally you will add a new 'ok' wx.Button to the Dialog for [...]

12. Worked solution - HTML About Dialog

Here I present a worked solution to the previous exercise. We'll walk through the steps for adding an HTML About Dialog to our application. First we add the 3 line OnAbout method which instantiates our custom ImageViewerAbout dialog. We also add a long HTML string which spans multiple lines and add the 'ok' button for the user.

13. Exercise - Add a Splash Screen

In this exercise you'll add a touch of professionalism by using a Splash Screen. The exercise is fairly short and only requires a few lines of code. The worked solution is in the next episode. Links - wx.SplashScreen, os.path. Download 3 test images in a zip file. The necessary source code is shown below in the Source Code tab.

14. Worked solution - Splash Screen

Here I show the worked solution for the Splash Screen exercise. We also test to make sure that the splash-screen image exists and silently ignore it if it doesn't.

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

Learning Paths

This series lies on the following learning-paths. Learning-paths are a new initiative at Showmedo, to start structuring our content better. You can find out more here.



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.