Bitmapbutton with background image

wxPython Users
1

I'd like to use bitmapbuttons with a background image. The following
code works fine, but uncommenting the two lines to show the background
image causes the button to stop working. Any suggestions appreciated!

Thanks,
Kevin

import wx

class MyFrame(wx.Frame):

    def __init__(self):

        wx.Frame.__init__(self, None, wx.ID_ANY, 'wxBitmapButton',

            pos=(300, 150), size=(300, 350))

        self.panel1 = wx.Panel(self, -1)

        # bground = wx.Image('Background.png',wx.BITMAP_TYPE_ANY)
        # bgroundbitmap = wx.StaticBitmap(self.panel1, -1,
wx.BitmapFromImage(bground))

        imageFile = "buttons/bb.png"

        image1 = wx.Image(imageFile,
wx.BITMAP_TYPE_ANY).ConvertToBitmap()

        self.button1 = wx.BitmapButton(self.panel1, id=-1,
bitmap=image1,

            pos=(50, 50), size = (image1.GetWidth()+5,
image1.GetHeight()+5), style = wx.NO_BORDER)

        self.button1.Bind(wx.EVT_BUTTON, self.button1Click)

        # show the frame

        self.Show(True)

    def button1Click(self,event):

        self.SetTitle("Button1 clicked") # test

application = wx.PySimpleApp()

window = MyFrame()

application.MainLoop()

2

First a couple notes about posting:

you sample app is a perfect test case. However:
  - it's generally better to enclose the code, rather than putting it
straight into email -- clients tend to add wrapping, etc that messes
things up.

- please enclose the pngs as well (as long as they are small) the
goal it to make it as easy as possible for us to run your code to test
it.

Now the real question:

On my system OS-X, it works fine -- that may be a platform difference.

I think you may not be able to use a StaticBitmap -- behaviour of
overlapping widgets is a bit undefined. An alternative is to do the
drawing in EVT_ERASE_BACKGROUND -- see sample enclosed.

By the way, you are right to put a panel in there, but things get
confusing if you put that in the frame class directly -- what do you
bind events, to, etc... So I put all this in wx.Panel subclass, then
put that on a frame to demo it.

See: wxPython Style Guide - wxPyWiki

NOTE: this is example is very basic -- you are likely to wan to be
more careful with making sure the background image is the right size,
maybe checking for the "damaged region", and only drawing that,
etc....

some googling will help you find more examples.

Come to think of it, has no one written and contributed a mature
"Panel with a background Image"? -- we get enough questions on here
aboutit, we should.

-Chris

···

On Thu, Feb 2, 2012 at 8:31 PM, kevinlcarlson <kevinlcarlson@gmail.com> wrote:

I'd like to use bitmapbuttons with a background image. The following
code works fine, but uncommenting the two lines to show the background
image causes the button to stop working. Any suggestions appreciated!

Thanks,
Kevin

import wx

class MyFrame(wx.Frame):

def __init__(self):

   wx\.Frame\.\_\_init\_\_\(self, None, wx\.ID\_ANY, &#39;wxBitmapButton&#39;,

       pos=\(300, 150\), size=\(300, 350\)\)

   self\.panel1 = wx\.Panel\(self, \-1\)

   \# bground = wx\.Image\(&#39;Background\.png&#39;,wx\.BITMAP\_TYPE\_ANY\)
   \# bgroundbitmap = wx\.StaticBitmap\(self\.panel1, \-1,

wx.BitmapFromImage(bground))

   imageFile = &quot;buttons/bb\.png&quot;

   image1 = wx\.Image\(imageFile,

wx.BITMAP_TYPE_ANY).ConvertToBitmap()

   self\.button1 = wx\.BitmapButton\(self\.panel1, id=\-1,

bitmap=image1,

       pos=\(50, 50\), size = \(image1\.GetWidth\(\)\+5,

image1.GetHeight()+5), style = wx.NO_BORDER)

   self\.button1\.Bind\(wx\.EVT\_BUTTON, self\.button1Click\)

   \# show the frame

   self\.Show\(True\)

def button1Click(self,event):

   self\.SetTitle\(&quot;Button1 clicked&quot;\)  \# test

application = wx.PySimpleApp()

window = MyFrame()

application.MainLoop()

--
To unsubscribe, send email to wxPython-users+unsubscribe@googlegroups.com
or visit http://groups.google.com/group/wxPython-users?hl=en

--

Christopher Barker, Ph.D.
Oceanographer

Emergency Response Division
NOAA/NOS/OR&R (206) 526-6959 voice
7600 Sand Point Way NE (206) 526-6329 fax
Seattle, WA 98115 (206) 526-6317 main reception

Chris.Barker@noaa.gov

3

Thanks for your insights! Your comments about problems with
overlapped widgets got me thinking... In my research I found some code
in wxPyWiki for implementing a bufferedcanvas widget. Perhaps I ought
to use dc.DrawBitmap to "simulate" bitmapbuttons on the canvas, then
use mouse events to identify which button was selected and redraw the
screen accordingly with a "selected" image? Or, is there a simpler
way perhaps?

Thanks again,
Kevin

···

On Feb 3, 12:23 pm, Chris Barker <chris.bar...@noaa.gov> wrote:

First a couple notes about posting:

you sample app is a perfect test case. However:
- it's generally better to enclose the code, rather than putting it
straight into email -- clients tend to add wrapping, etc that messes
things up.

- please enclose the pngs as well (as long as they are small) the
goal it to make it as easy as possible for us to run your code to test
it.

Now the real question:

On my system OS-X, it works fine -- that may be a platform difference.

I think you may not be able to use a StaticBitmap -- behaviour of
overlapping widgets is a bit undefined. An alternative is to do the
drawing in EVT_ERASE_BACKGROUND -- see sample enclosed.

By the way, you are right to put a panel in there, but things get
confusing if you put that in the frame class directly -- what do you
bind events, to, etc... So I put all this in wx.Panel subclass, then
put that on a frame to demo it.

See:wxPython Style Guide - wxPyWiki

NOTE: this is example is very basic -- you are likely to wan to be
more careful with making sure the background image is the right size,
maybe checking for the "damaged region", and only drawing that,
etc....

some googling will help you find more examples.

Come to think of it, has no one written and contributed a mature
"Panel with a background Image"? -- we get enough questions on here
aboutit, we should.

-Chris

On Thu, Feb 2, 2012 at 8:31 PM, kevinlcarlson <kevinlcarl...@gmail.com> wrote:
> I'd like to use bitmapbuttons with a background image. The following
> code works fine, but uncommenting the two lines to show the background
> image causes the button to stop working. Any suggestions appreciated!

> Thanks,
> Kevin

> import wx

> class MyFrame(wx.Frame):

> def __init__(self):

> wx.Frame.__init__(self, None, wx.ID_ANY, 'wxBitmapButton',

> pos=(300, 150), size=(300, 350))

> self.panel1 = wx.Panel(self, -1)

> # bground = wx.Image('Background.png',wx.BITMAP_TYPE_ANY)
> # bgroundbitmap = wx.StaticBitmap(self.panel1, -1,
> wx.BitmapFromImage(bground))

> imageFile = "buttons/bb.png"

> image1 = wx.Image(imageFile,
> wx.BITMAP_TYPE_ANY).ConvertToBitmap()

> self.button1 = wx.BitmapButton(self.panel1, id=-1,
> bitmap=image1,

> pos=(50, 50), size = (image1.GetWidth()+5,
> image1.GetHeight()+5), style = wx.NO_BORDER)

> self.button1.Bind(wx.EVT_BUTTON, self.button1Click)

> # show the frame

> self.Show(True)

> def button1Click(self,event):

> self.SetTitle("Button1 clicked") # test

> application = wx.PySimpleApp()

> window = MyFrame()

> application.MainLoop()

> --
> To unsubscribe, send email to wxPython-users+unsubscribe@googlegroups.com
> or visithttp://groups.google.com/group/wxPython-users?hl=en

--

Christopher Barker, Ph.D.
Oceanographer

Emergency Response Division
NOAA/NOS/OR&R (206) 526-6959 voice
7600 Sand Point Way NE (206) 526-6329 fax
Seattle, WA 98115 (206) 526-6317 main reception

Chris.Bar...@noaa.gov- Hide quoted text -

- Show quoted text -

4

Thanks for your insights! Your comments about problems with
overlapped widgets got me thinking... In my research I found some code
in wxPyWiki for implementing a bufferedcanvas widget. Perhaps I ought
to use dc.DrawBitmap to "simulate" bitmapbuttons on the canvas, then
use mouse events to identify which button was selected and redraw the
screen accordingly with a "selected" image?

if you want to deviate a lot for a "stadard" gui, then yes, but I
don't think you need that -- you can put an image in the background,
you jsut want to draw it, rather than usin ga widget to give you the
image.

Also, it may be that your problem wasn't what I thought (I didn' have
the same issue on a Mac), but you were putting a panel on a frame, and
a button on the panel, so it's posiiobe you got the parenting
relationship a bit wrong.

Did my code not work for you? why not clean it up a bit and go on your way...

oops, it looks like the enclosure didn't come through -- let's try again.
-Chris

Or, is there a simpler

test_background.py (1.23 KB)

···

On Fri, Feb 3, 2012 at 1:42 PM, kevinlcarlson <kevinlcarlson@gmail.com> wrote:

way perhaps?

Thanks again,
Kevin

On Feb 3, 12:23 pm, Chris Barker <chris.bar...@noaa.gov> wrote:

First a couple notes about posting:

you sample app is a perfect test case. However:
- it's generally better to enclose the code, rather than putting it
straight into email -- clients tend to add wrapping, etc that messes
things up.

- please enclose the pngs as well (as long as they are small) the
goal it to make it as easy as possible for us to run your code to test
it.

Now the real question:

On my system OS-X, it works fine -- that may be a platform difference.

I think you may not be able to use a StaticBitmap -- behaviour of
overlapping widgets is a bit undefined. An alternative is to do the
drawing in EVT_ERASE_BACKGROUND -- see sample enclosed.

By the way, you are right to put a panel in there, but things get
confusing if you put that in the frame class directly -- what do you
bind events, to, etc... So I put all this in wx.Panel subclass, then
put that on a frame to demo it.

See:wxPython Style Guide - wxPyWiki

NOTE: this is example is very basic -- you are likely to wan to be
more careful with making sure the background image is the right size,
maybe checking for the "damaged region", and only drawing that,
etc....

some googling will help you find more examples.

Come to think of it, has no one written and contributed a mature
"Panel with a background Image"? -- we get enough questions on here
aboutit, we should.

-Chris

On Thu, Feb 2, 2012 at 8:31 PM, kevinlcarlson <kevinlcarl...@gmail.com> wrote:
> I'd like to use bitmapbuttons with a background image. The following
> code works fine, but uncommenting the two lines to show the background
> image causes the button to stop working. Any suggestions appreciated!

> Thanks,
> Kevin

> import wx

> class MyFrame(wx.Frame):

> def __init__(self):

> wx.Frame.__init__(self, None, wx.ID_ANY, 'wxBitmapButton',

> pos=(300, 150), size=(300, 350))

> self.panel1 = wx.Panel(self, -1)

> # bground = wx.Image('Background.png',wx.BITMAP_TYPE_ANY)
> # bgroundbitmap = wx.StaticBitmap(self.panel1, -1,
> wx.BitmapFromImage(bground))

> imageFile = "buttons/bb.png"

> image1 = wx.Image(imageFile,
> wx.BITMAP_TYPE_ANY).ConvertToBitmap()

> self.button1 = wx.BitmapButton(self.panel1, id=-1,
> bitmap=image1,

> pos=(50, 50), size = (image1.GetWidth()+5,
> image1.GetHeight()+5), style = wx.NO_BORDER)

> self.button1.Bind(wx.EVT_BUTTON, self.button1Click)

> # show the frame

> self.Show(True)

> def button1Click(self,event):

> self.SetTitle("Button1 clicked") # test

> application = wx.PySimpleApp()

> window = MyFrame()

> application.MainLoop()

> --
> To unsubscribe, send email to wxPython-users+unsubscribe@googlegroups.com
> or visithttp://groups.google.com/group/wxPython-users?hl=en

--

Christopher Barker, Ph.D.
Oceanographer

Emergency Response Division
NOAA/NOS/OR&R (206) 526-6959 voice
7600 Sand Point Way NE (206) 526-6329 fax
Seattle, WA 98115 (206) 526-6317 main reception

Chris.Bar...@noaa.gov- Hide quoted text -

- Show quoted text -

--
To unsubscribe, send email to wxPython-users+unsubscribe@googlegroups.com
or visit http://groups.google.com/group/wxPython-users?hl=en

--

Christopher Barker, Ph.D.
Oceanographer

Emergency Response Division
NOAA/NOS/OR&R (206) 526-6959 voice
7600 Sand Point Way NE (206) 526-6329 fax
Seattle, WA 98115 (206) 526-6317 main reception

Chris.Barker@noaa.gov

5

The problem is indeed the fact that you were overlapping two sibling widgets. The behavior for that situation in wxWidgets is "undefined".

As Chris suggested one way to do it would be to simply draw the background bitmap on the panel either in its erase background event or in its paint event, and then the buttons would not be overlapping sibling widgets, rather you would have just the panel and the buttons and the panel would paint itself with an image.

IMO using simulated buttons and handling mouse events like you suggest would be overkill in this case, unless you need the buttons to totally blend in and appear as part of the background image.

···

On 2/3/12 1:42 PM, kevinlcarlson wrote:

Thanks for your insights! Your comments about problems with
overlapped widgets got me thinking... In my research I found some code
in wxPyWiki for implementing a bufferedcanvas widget. Perhaps I ought
to use dc.DrawBitmap to "simulate" bitmapbuttons on the canvas, then
use mouse events to identify which button was selected and redraw the
screen accordingly with a "selected" image? Or, is there a simpler
way perhaps?

--
Robin Dunn
Software Craftsman