wxPython GUI to Display a JPEG (.jpg) Image

vegaseat 0 Tallied Votes 3K Views Share

Jumping through a few extra hoops allows you to display the common image format jpeg on a panel of the wxPython GUI window. All you need to do is to read in the image file as a binary, convert to a byte stream image and then to a bitmap. Now you can display the bitmap. An updated simpler way without the stream is also shown.

# show a jpeg (.jpg) image using wxPython, newer coding style
# two different ways to load and display are given
# tested with Python24 and wxPython25   vegaseat   24jul2005

import wx
import  cStringIO

class Panel1(wx.Panel):
  """ class Panel1 creates a panel with an image on it, inherits wx.Panel """
  def __init__(self, parent, id):
    # create the panel
    wx.Panel.__init__(self, parent, id)
    try:
        # pick a .jpg file you have in the working folder
        imageFile = 'Moo.jpg'
        data = open(imageFile, "rb").read()
        # convert to a data stream
        stream = cStringIO.StringIO(data)
        # convert to a bitmap
        bmp = wx.BitmapFromImage( wx.ImageFromStream( stream ))
        # show the bitmap, (5, 5) are upper left corner coordinates
        wx.StaticBitmap(self, -1, bmp, (5, 5))
        
        # alternate (simpler) way to load and display a jpg image from a file
        # actually you can load .jpg  .png  .bmp  or .gif files
        jpg1 = wx.Image(imageFile, wx.BITMAP_TYPE_ANY).ConvertToBitmap()
        # bitmap upper left corner is in the position tuple (x, y) = (5, 5)
        wx.StaticBitmap(self, -1, jpg1, (10 + jpg1.GetWidth(), 5), (jpg1.GetWidth(), jpg1.GetHeight()))
    except IOError:
        print "Image file %s not found" % imageFile
        raise SystemExit


app = wx.PySimpleApp()
# create a window/frame, no parent, -1 is default ID
# increase the size of the frame for larger images
frame1 = wx.Frame(None, -1, "An image on a panel", size = (400, 300))
# call the derived class
Panel1(frame1,-1)
frame1.Show(1)
app.MainLoop()
vegaseat 1,735 DaniWeb's Hypocrite Team Colleague

Adopted the newer wxPython coding style, which identifies the namespace wx.

feci1024 0 Newbie Poster

Hello,
let me just say that I found you example very useful. I've tried to make a simple slideshow program from it, but I'm stuck, because I can't make the picture change in the created Panel. I would appreciate any help. Thank you.

Erik Vandamme 0 Newbie Poster

When iI supply the name of another file in filebname="NEWONE.JPG" the display does not change ...

Erik Vandamme 0 Newbie Poster

When I try to integrate this into wxPython (windows XP) see code below.
It actually use the windows fax and picture viewer, so I obviously need to somehow fix the image to the frame/panel??
# show a jpeg (.jpg) image using wxPython, newer coding style
# two different ways to load and display are given
# tested with Python24 and wxPython25 vegaseat 24jul2005

import wx
import Image
import cStringIO


class Panel1(wx.Panel):
""" class Panel1 creates a panel with an image on it, inherits wx.Panel """
def __init__(self, parent, id):
# create the panel
wx.Panel.__init__(self, parent, id)
try:
# pick a .jpg file you have in the working folder
imageFile = 'c:\eTemp\dThumb.jpg'
im1 = Image.open(imageFile)
im1.show()
## data = open(imageFile, "rb").read()
## # convert to a data stream
## stream = cStringIO.StringIO(data)
## # convert to a bitmap
## bmp = wx.BitmapFromImage( wx.ImageFromStream( stream ))
## # show the bitmap, (5, 5) are upper left corner coordinates
## wx.StaticBitmap(self, -1, bmp, (5, 5))

# alternate (simpler) way to load and display a jpg image from a file
# actually you can load .jpg .png .bmp or .gif files
print "next\n"
imageFile = 'c:\eTemp\TOPUPDOWN.jpg'
im1 = Image.open(imageFile)
im1.show()

jpg1 = wx.Image(imageFile, wx.BITMAP_TYPE_ANY).ConvertToBitmap()
# bitmap upper left corner is in the position tuple (x, y) = (5, 5)
wx.StaticBitmap(self, -1, jpg1, (10 + jpg1.GetWidth(), 5), (jpg1.GetWidth(), jpg1.GetHeight()))
except IOError:
print "Image file %s not found" % imageFile
raise SystemExit


app = wx.PySimpleApp()
# create a window/frame, no parent, -1 is default ID
# increase the size of the frame for larger images
frame1 = wx.Frame(None, -1, "An image on a panel", size = (400, 300))
# call the derived class
Panel1(frame1,-1)
frame1.Show(1)
app.MainLoop()

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.