advice on filling squares

wxPython Users
1

(Sorry about the non-informative subject line; didn’t know what else to put)

I’d like to make something like what is shown in the attached image. I’m not sure if I care whether the whole array of squares should be able to grow when the client area is resized, though that would be a nice effect. The main thing is that the proportionality stays the same and that the “yellow liquid” covers the words as it “fills” the boxes.

I invite general suggestions for the simplest way to approach this. I began trying with sizers and panels but had trouble keeping the squares from distorting as I changed the proportionality flag on the spacer that limited the size of each yellow rectangle. Also, I don’t think that will work due to the need for the yellow part to be transparent (there is no way for a wxPanel to be transparent, is there?).

Thanks for any help.

Che

filling_squares.jpg

2

I may be missing the point, but can’t you do custom drawing with wx.GraphicsContext? I’d try making each of the four boxes a wx.Panel or wx.PyControl (depending on what else you need to do with them), and code the layout of each manually. You should be able to draw a transparent yellow rectangle pretty easily, although I’m not entirely sure how well it will blend with the text since I’ve never tried something like this. (In theory you could draw the entire thing on a single panel too - but it’s probably easier to let sizers take care of the rest of the layout, and make each white and yellow box a control/panel.)

-Nat

···

On Thu, Jun 9, 2011 at 8:58 PM, C M cmpython@gmail.com wrote:

I’d like to make something like what is shown in the attached image. I’m not sure if I care whether the whole array of squares should be able to grow when the client area is resized, though that would be a nice effect. The main thing is that the proportionality stays the same and that the “yellow liquid” covers the words as it “fills” the boxes.

I invite general suggestions for the simplest way to approach this. I began trying with sizers and panels but had trouble keeping the squares from distorting as I changed the proportionality flag on the spacer that limited the size of each yellow rectangle. Also, I don’t think that will work due to the need for the yellow part to be transparent (there is no way for a wxPanel to be transparent, is there?).

3

I began trying that based on your suggestion. But I’m having trouble getting the yellow rectangle over the text. I have the gc within the OnPaint method, like:

dc = wx.PaintDC(self)
gc = wx.GraphicsContext.Create(dc)
gc.DrawRectangle(x,y,w,h) #these defined in the real code

but the rectangle is under the staticText. How do I get it laid over the text and transparent?

Thanks,
Che

···

On Fri, Jun 10, 2011 at 12:16 AM, Nat Echols nathaniel.echols@gmail.com wrote:

On Thu, Jun 9, 2011 at 8:58 PM, C M cmpython@gmail.com wrote:

I’d like to make something like what is shown in the attached image. I’m not sure if I care whether the whole array of squares should be able to grow when the client area is resized, though that would be a nice effect. The main thing is that the proportionality stays the same and that the “yellow liquid” covers the words as it “fills” the boxes.

I invite general suggestions for the simplest way to approach this. I began trying with sizers and panels but had trouble keeping the squares from distorting as I changed the proportionality flag on the spacer that limited the size of each yellow rectangle. Also, I don’t think that will work due to the need for the yellow part to be transparent (there is no way for a wxPanel to be transparent, is there?).

I may be missing the point, but can’t you do custom drawing with wx.GraphicsContext?

4

but the rectangle is under the staticText. How do I get it laid over the text and transparent?

Update: I’d still like to know if that is possible with a wxStaticText or any widget, but for now I am just drawing the text on directly in the gc–first before the rectangle–and that works fine.

Thanks for the suggestion.

Che

5

Sorry, yeah, this is what I meant - I have no idea what the rules for visibility are, but I’ve been assuming that actual controls get drawn after EVT_PAINT is processed.

-Nat

···

On Fri, Jun 10, 2011 at 12:25 AM, C M cmpython@gmail.com wrote:

Update: I’d still like to know if that is possible with a wxStaticText or any widget, but for now I am just drawing the text on directly in the gc–first before the rectangle–and that works fine.

6

You can force two window components to overlay each other by using negative border widths. I don’t know that it’s especially recommended (seems like the kind of situation where the official behavior is actually undefined), but it seems to be pretty reliable. Here’s an example:

import wx

class DemoFrame(wx.Frame):
def init(self):
wx.Frame.init(self, parent = None, size = (400, 200))
sizer = wx.BoxSizer(wx.VERTICAL)
panel = wx.Panel(self, size = (400, 50))

    sizer.Add(panel)
    panel = wx.Panel(self, size = (400, 50))
    panel.SetBackgroundColour((255, 255, 0))
    sizer.Add(panel)
    text = wx.StaticText(self, -1, "SOME TEXT")

    text.SetFont(wx.Font(24, wx.FONTFAMILY_DEFAULT, wx.FONTSTYLE_NORMAL, wx.FONTWEIGHT_BOLD))
    sizer.Add(text, 0, wx.TOP | wx.ALIGN_CENTER_HORIZONTAL, -65)
    self.SetSizerAndFit(sizer)

class App(wx.App):

def OnInit(self):
    self.frame = DemoFrame()

    self.frame.Show()
    self.SetTopWindow(self.frame)
    return True

app = App(redirect = False)
app.MainLoop()

···

On Thu, Jun 9, 2011 at 8:58 PM, C M cmpython@gmail.com wrote:

(Sorry about the non-informative subject line; didn’t know what else to put)

I’d like to make something like what is shown in the attached image. I’m not sure if I care whether the whole array of squares should be able to grow when the client area is resized, though that would be a nice effect. The main thing is that the proportionality stays the same and that the “yellow liquid” covers the words as it “fills” the boxes.

I invite general suggestions for the simplest way to approach this. I began trying with sizers and panels but had trouble keeping the squares from distorting as I changed the proportionality flag on the spacer that limited the size of each yellow rectangle. Also, I don’t think that will work due to the need for the yellow part to be transparent (there is no way for a wxPanel to be transparent, is there?).

7

C M wrote:

Update: I'd still like to know if that is possible with a
wxStaticText or any widget, but for now I am just drawing the text on
directly in the gc--first before the rectangle--and that works fine.

In general, no. The situation you describe is one I would always
implement with active drawing calls, not with separate windows.

···

--
Tim Roberts, timr@probo.com
Providenza & Boekelheide, Inc.

8

Che, What you want is the yellow to be semi-transparent. There are to ways to do this: 1- Using a Frame whose inside is given semi-transparency; 2- “Alpha Blending” of 2 bitmaps.

Attached is an example of alpha blending.

Ray

AlphaBlending.py (3.23 KB)

9

Che,

If you want the whole thing to scale well, wx.lib.floatcanvas may be helpful. Check out the ScaledTextBox Object.

(it doesn't have the semi-transparent fill, but you could add that.

-Chris

···

--
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

10

Correct. Or more accurately, the drawing of the parent is usually clipped to leave holes for where the child controls are located, and then the child controls get their own paint events so they can (re)draw themselves in those spaces.

···

On 6/10/11 7:37 AM, Nat Echols wrote:

On Fri, Jun 10, 2011 at 12:25 AM, C M <cmpython@gmail.com > <mailto:cmpython@gmail.com>> wrote:

    Update: I'd still like to know if that is possible with a
    wxStaticText or any widget, but for now I am just drawing the text
    on directly in the gc--first before the rectangle--and that works fine.

Sorry, yeah, this is what I meant - I have no idea what the rules for
visibility are, but I've been assuming that actual controls get drawn
after EVT_PAINT is processed.

--
Robin Dunn
Software Craftsman

11

Thanks, everyone. For now I am simply drawing everything with GC inside a panel. If I get more ambitious and want things to rescale, I’lll try floatcanvas.

Che