BitmapButton with text

I’m trying to make a wx.BitmapButton that also has text on it. Using wx.lib.GenBitmapTextButton doesn’t look right since the button no longer looks like native OS buttons. So I was thinking it might be possible to somehow combine a StaticText and a bitmap… does anyone know if this is possible? Is there a way to convert a StaticText to a bitmap and then fuse it together with a bitmap?

Thanks
Soren

There are versions of the generic buttons classes that use the native theme to draw the button, so they will end up looking a lot more native. It's not perfect however so you are on the right track if you want a truly native button.

You'll need to do something like the following:

* Create a new empty bitmap using wx.EmptyBitmap(width, height). You can estimate the size needed by taking the size of the bitmap, adding the size needed to draw the text, and add in some space for margins between the text and the bitmap, etc. You can measure the size needed for the text by creating a temporary DC using wx.ClientDC, setting the desired font and then calling dc.GetTextExtent.

* Create a wx.MemoryDC passing it the empty bitmap you just created.

* Set the dc's background brush to the desired color and then Clear() the DC.

* Draw the image you want to appear next to the text with DrawBitmap.

* Draw the text with DrawText.

* Destroy the memory DC with Python's del operator. This will release the bitmap so you can use it with the bitmap button.

* Create and use the bitmap button like normal.

···

On 6/5/10 1:47 PM, S�ren Nielsen wrote:

I'm trying to make a wx.BitmapButton that also has text on it. Using
wx.lib.GenBitmapTextButton doesn't look right since the button no longer
looks like native OS buttons. So I was thinking it might be possible to
somehow combine a StaticText and a bitmap.. does anyone know if this is
possible? Is there a way to convert a StaticText to a bitmap and then
fuse it together with a bitmap?

--
Robin Dunn
Software Craftsman

Robin forgot the last essential step: Post the result here and on the
wiki so the rest of us can use the new awesome widget!

···

On Jun 7, 3:37 pm, Robin Dunn <ro...@alldunn.com> wrote:

On 6/5/10 1:47 PM, S ren Nielsen wrote:

> I'm trying to make a wx.BitmapButton that also has text on it. Using
> wx.lib.GenBitmapTextButton doesn't look right since the button no longer
> looks like native OS buttons. So I was thinking it might be possible to
> somehow combine a StaticText and a bitmap.. does anyone know if this is
> possible? Is there a way to convert a StaticText to a bitmap and then
> fuse it together with a bitmap?

There are versions of the generic buttons classes that use the native
theme to draw the button, so they will end up looking a lot more native.
It's not perfect however so you are on the right track if you want a
truly native button.

You'll need to do something like the following:

* Create a new empty bitmap using wx.EmptyBitmap(width, height). You
can estimate the size needed by taking the size of the bitmap, adding
the size needed to draw the text, and add in some space for margins
between the text and the bitmap, etc. You can measure the size needed
for the text by creating a temporary DC using wx.ClientDC, setting the
desired font and then calling dc.GetTextExtent.

* Create a wx.MemoryDC passing it the empty bitmap you just created.

* Set the dc's background brush to the desired color and then Clear()
the DC.

* Draw the image you want to appear next to the text with DrawBitmap.

* Draw the text with DrawText.

* Destroy the memory DC with Python's del operator. This will release
the bitmap so you can use it with the bitmap button.

* Create and use the bitmap button like normal.

--
Robin Dunn
Software Craftsmanhttp://wxPython.org

-------------------
Mike Driscoll

Blog: http://blog.pythonlibrary.org

Actually the most important thing that I forgot to mention is that the native wx.Button in 2.9 will be able to have a bitmap in addition to the text label. So while seeing an example of the above in the wiki would be good for the general education of newbies, there will eventually be a better way to do it. :slight_smile:

···

On 6/7/10 2:27 PM, Mike Driscoll wrote:

On Jun 7, 3:37 pm, Robin Dunn<ro...@alldunn.com> wrote:

On 6/5/10 1:47 PM, S ren Nielsen wrote:

I'm trying to make a wx.BitmapButton that also has text on it. Using
wx.lib.GenBitmapTextButton doesn't look right since the button no longer
looks like native OS buttons. So I was thinking it might be possible to
somehow combine a StaticText and a bitmap.. does anyone know if this is
possible? Is there a way to convert a StaticText to a bitmap and then
fuse it together with a bitmap?

There are versions of the generic buttons classes that use the native
theme to draw the button, so they will end up looking a lot more native.
   It's not perfect however so you are on the right track if you want a
truly native button.

You'll need to do something like the following:

* Create a new empty bitmap using wx.EmptyBitmap(width, height). You
can estimate the size needed by taking the size of the bitmap, adding
the size needed to draw the text, and add in some space for margins
between the text and the bitmap, etc. You can measure the size needed
for the text by creating a temporary DC using wx.ClientDC, setting the
desired font and then calling dc.GetTextExtent.

* Create a wx.MemoryDC passing it the empty bitmap you just created.

* Set the dc's background brush to the desired color and then Clear()
the DC.

* Draw the image you want to appear next to the text with DrawBitmap.

* Draw the text with DrawText.

* Destroy the memory DC with Python's del operator. This will release
the bitmap so you can use it with the bitmap button.

* Create and use the bitmap button like normal.

--
Robin Dunn
Software Craftsmanhttp://wxPython.org

Robin forgot the last essential step: Post the result here and on the
wiki so the rest of us can use the new awesome widget!

--
Robin Dunn
Software Craftsman

Thanks Robin!

I’ll try it out as soon as I get a bit of time for it! Looking forward to 2.9 :slight_smile: I’ll post my results when I’m done.

Soren

···

On Mon, Jun 7, 2010 at 4:37 PM, Robin Dunn robin@alldunn.com wrote:

On 6/5/10 1:47 PM, Søren Nielsen wrote:

I’m trying to make a wx.BitmapButton that also has text on it. Using

wx.lib.GenBitmapTextButton doesn’t look right since the button no longer

looks like native OS buttons. So I was thinking it might be possible to

somehow combine a StaticText and a bitmap… does anyone know if this is

possible? Is there a way to convert a StaticText to a bitmap and then

fuse it together with a bitmap?

There are versions of the generic buttons classes that use the native theme to draw the button, so they will end up looking a lot more native. It’s not perfect however so you are on the right track if you want a truly native button.

You’ll need to do something like the following:

  • Create a new empty bitmap using wx.EmptyBitmap(width, height). You can estimate the size needed by taking the size of the bitmap, adding the size needed to draw the text, and add in some space for margins between the text and the bitmap, etc. You can measure the size needed for the text by creating a temporary DC using wx.ClientDC, setting the desired font and then calling dc.GetTextExtent.

  • Create a wx.MemoryDC passing it the empty bitmap you just created.

  • Set the dc’s background brush to the desired color and then Clear() the DC.

  • Draw the image you want to appear next to the text with DrawBitmap.

  • Draw the text with DrawText.

  • Destroy the memory DC with Python’s del operator. This will release the bitmap so you can use it with the bitmap button.

  • Create and use the bitmap button like normal.

Robin Dunn

Software Craftsman

http://wxPython.org

To unsubscribe, send email to wxPython-users+unsubscribe@googlegroups.com

or visit http://groups.google.com/group/wxPython-users?hl=en

Thanks all! It does seem to work great… however, I’m not able to reproduce the background colour of the native system buttons… getting the colour from wx.SystemSettings_GetColour(wx.SYS_COLOUR_BTNFACE) does not work for some reason… Does anyone know how to get the system button colour?

I’m testing on Windows XP at the moment… I can see how it looks on Linux and Mac tomorrow…

Thanks for the Transparancy tip Ray. It seems to be enabled by default on windows though.

···

On Tue, Jun 8, 2010 at 12:10 PM, Ray Pasco raoulpalma@yahoo.com wrote:

One more tip: When you .DrawText(), you may want to have previously

set the text background rectangle to be wx.Transparent:

# Create a new DC using a previously created bitmap

dc = wx.MemoryDC()    # use any class derived from wx.DC

dc.SelectObject( my_wxBitmap )



# Draw textColor'ed text on top the wxBitmap.

dc.SetTextForeground( textColor )

dc.SetBackgroundMode( wx.TRANSPARENT )      # wx.SOLID or

wx.TRANSPARENT

dc.SetFont( wx.Font( fontSize, family, style, weight, underline,

face, encoding ) )

dc.DrawText( text, text_offset_coordinate_tuple )

dc.SelectObject( wx.NullBitmap )            # Close the DC.



# Create a bitmapped button

self.button = wx.BitmapButton( panel, wx.NewId(), my_wxBitmap )

....

I hope this helps.

Ray Pasco

On Jun 8, 12:42 am, Søren Nielsen soren.skou.niel...@gmail.com > > wrote:

Thanks Robin!

I’ll try it out as soon as I get a bit of time for it! Looking forward to

2.9 :slight_smile: I’ll post my results when I’m done.

Soren

On Mon, Jun 7, 2010 at 4:37 PM, Robin Dunn ro...@alldunn.com wrote:

On 6/5/10 1:47 PM, Søren Nielsen wrote:

I’m trying to make a wx.BitmapButton that also has text on it. Using

wx.lib.GenBitmapTextButton doesn’t look right since the button no longer

looks like native OS buttons. So I was thinking it might be possible to

somehow combine a StaticText and a bitmap… does anyone know if this is

possible? Is there a way to convert a StaticText to a bitmap and then

fuse it together with a bitmap?

There are versions of the generic buttons classes that use the native theme

to draw the button, so they will end up looking a lot more native. It’s not

perfect however so you are on the right track if you want a truly native

button.

You’ll need to do something like the following:

  • Create a new empty bitmap using wx.EmptyBitmap(width, height). You can

estimate the size needed by taking the size of the bitmap, adding the size

needed to draw the text, and add in some space for margins between the text

and the bitmap, etc. You can measure the size needed for the text by

creating a temporary DC using wx.ClientDC, setting the desired font and then

calling dc.GetTextExtent.

  • Create a wx.MemoryDC passing it the empty bitmap you just created.
  • Set the dc’s background brush to the desired color and then Clear() the

DC.

  • Draw the image you want to appear next to the text with DrawBitmap.
  • Draw the text with DrawText.
  • Destroy the memory DC with Python’s del operator. This will release the

bitmap so you can use it with the bitmap button.

  • Create and use the bitmap button like normal.

Robin Dunn

Software Craftsman

http://wxPython.org

To unsubscribe, send email to wxPython-users+unsubscribe@googlegroups.comwxPython-users%2Bunsubscribe@googlegroups.com

or visithttp://groups.google.com/group/wxPython-users?hl=en

To unsubscribe, send email to wxPython-users+unsubscribe@googlegroups.com

or visit http://groups.google.com/group/wxPython-users?hl=en

Hi Søren!

···

On Jun 9, 9:09 pm, Søren Nielsen <soren.skou.niel...@gmail.com> wrote:

Thanks all! It does seem to work great.. however, I'm not able to reproduce
the background colour of the native system buttons.. getting the colour from
wx.SystemSettings_GetColour(wx.SYS_COLOUR_BTNFACE) does not work for some
reason.. Does anyone know how to get the system button colour?

Try wx.NullColour

-------------------
Mike Driscoll

Blog: http://blog.pythonlibrary.org

If you've got the XP themes active then the native buttons do not draw with a solid color, but rather use the theme APIs to draw something like a gradient/texture to give it a 3D rounded look. SystemSettings can only give you a solid color that is an approximation of what will be used for the themed widget.

You've got a couple options for a workaround. First you can go ahead and clear the bitmap's background to the color you get from SystemSettings, draw your icon and text, and then set the bitmap's mask to that color. That way the anti-aliased pixels next to the text will be blended with almost the right color as if the text was drawn directly on the button, but the rest of it will be transparent and the real button should show through when it is drawn.

The other option is to use the wx.RendererNative to use the theme to draw the whole button, not just the bitmap. This is essentially what the Themed* classes in wx.lib.buttons do.

···

On 6/9/10 7:09 PM, S�ren Nielsen wrote:

Thanks all! It does seem to work great.. however, I'm not able to
reproduce the background colour of the native system buttons.. getting
the colour from wx.SystemSettings_GetColour(wx.SYS_COLOUR_BTNFACE) does
not work for some reason.. Does anyone know how to get the system button
colour?

--
Robin Dunn
Software Craftsman

Thanks Robin!

It looks much better with the mask on and its more than good enough for me. If I enlarge the font I can see that the areas inside the letters ‘o’, ‘e’ and ‘p’ are of course not masked. I’m gonna give it a go with wx.RendererNative also as soon as I have a bit of time, just for the hell of it.

···

On Thu, Jun 10, 2010 at 12:39 PM, Robin Dunn robin@alldunn.com wrote:

On 6/9/10 7:09 PM, Søren Nielsen wrote:

Thanks all! It does seem to work great… however, I’m not able to

reproduce the background colour of the native system buttons… getting

the colour from wx.SystemSettings_GetColour(wx.SYS_COLOUR_BTNFACE) does

not work for some reason… Does anyone know how to get the system button

colour?

If you’ve got the XP themes active then the native buttons do not draw with a solid color, but rather use the theme APIs to draw something like a gradient/texture to give it a 3D rounded look. SystemSettings can only give you a solid color that is an approximation of what will be used for the themed widget.

You’ve got a couple options for a workaround. First you can go ahead and clear the bitmap’s background to the color you get from SystemSettings, draw your icon and text, and then set the bitmap’s mask to that color. That way the anti-aliased pixels next to the text will be blended with almost the right color as if the text was drawn directly on the button, but the rest of it will be transparent and the real button should show through when it is drawn.

The other option is to use the wx.RendererNative to use the theme to draw the whole button, not just the bitmap. This is essentially what the Themed* classes in wx.lib.buttons do.


Robin Dunn

Software Craftsman

http://wxPython.org

To unsubscribe, send email to wxPython-users+unsubscribe@googlegroups.com

or visit http://groups.google.com/group/wxPython-users?hl=en