How to draw rectangle on wxpython?

[Chong Hong Rui]

I am very new a wxpython and I'm looking for a way to draw a set of rectangles that will simulate a LED bar. However, I'm not sure how to draw them into a horizontal boxsizer using wxpython. i'm also looking for a way to perhaps update them like making the rectangle a class or something to changes the color etc to simulate a rgb led bar. some help is very much appreciated.

#!/usr/bin/python

# -*- coding: utf-8 -*-

# gotoclass.py

import wx

class Example(wx.Frame):

    def __init__(self, parent, title):

        super(Example, self).__init__(parent, title=title, size=(900, 600))

        self.InitUI()

        self.Centre()

        self.Show()     

    def InitUI(self):

        panel = wx.Panel(self)

        font = wx.SystemSettings_GetFont(wx.SYS_SYSTEM_FONT)

        font.SetPointSize(9)

        vbox = wx.BoxSizer(wx.VERTICAL)

        vbox.Add((-1, 5))

        hbox1 = wx.BoxSizer(wx.HORIZONTAL)

        ledST = wx.StaticText(panel, label='LED BAR')

        ledST.SetFont(font)

        hbox1.Add(ledST, flag=wx.LEFT, border=5)

        joystickST = wx.StaticText(panel, label='JOYSTICK')

        joystickST.SetFont(font)

        hbox1.Add(joystickST, flag=wx.LEFT, border=600)

        vbox.Add(hbox1, flag=wx.LEFT|wx.RIGHT|wx.TOP, border=0)

        vbox.Add((-1, 10))

        hbox2 = wx.BoxSizer(wx.HORIZONTAL)

        dc = wx.PaintDC(self)

        dc.SetBrush(wx.Brush('#075100'))

        dc.DrawRectangle(10, 4, 30, 5)

        #NOT SURE WHAT TO DO HERE <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

        vbox.Add((-1, 15))

        hbox5 = wx.BoxSizer(wx.HORIZONTAL)

        btn1 = wx.Button(panel, label='Ok', size=(70, 30))

        hbox5.Add(btn1)

        btn2 = wx.Button(panel, label='Close', size=(70, 30))

        hbox5.Add(btn2, flag=wx.LEFT|wx.BOTTOM, border=5)

        vbox.Add(hbox5, flag=wx.ALIGN_RIGHT|wx.RIGHT, border=10)

        panel.SetSizer(vbox)   

if __name__ == '__main__':

    app = wx.App()

    Example(None, title='Go To Class')

    app.MainLoop()

[Tim Roberts]

Chong Hong Rui wrote:

I am very new a wxpython and I'm looking for a way to draw a set of rectangles that will simulate a LED bar. However, I'm not sure how to draw them into a horizontal boxsizer using wxpython. i'm also looking for a way to perhaps update them like making the rectangle a class or something to changes the color etc to simulate a rgb led bar. some help is very much appreciated.

The most straightforward way to do this is to set up your UI so you have a simple blank panel in the area where you want the LED bar to be.  Then, in your EVT_PAINT event handler, do the actual drawing.  That will be called every time the window needs updating.  There, you can fetch the actual size of the region, divide it up into proportionally shaped regions, and draw your rectangles.

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

[Chris Barker]

On Wed, Feb 4, 2015 at 10:10 AM, Tim Roberts <ti...@probo.com> wrote:

The most straightforward way to do this is to set up your UI so you have a simple blank panel in the area where you want the LED bar to be. 

I"d say it slightly different -- you want to make a custon wx.Window that draws itself the way you want. See:

http://wiki.wxpython.org/CustomisedDrawing

and also search the Wiki for "Drawing" and you'll see a few other pages that would be helpful.

> There, you can fetch the actual size of the region, divide it up into proportionally
> shaped regions, and draw your rectangles.

And decide how you want to to behave when re-sized, etc...

-Chris

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

--
You received this message because you are subscribed to the Google Groups "wxPython-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to wxpython-user...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

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....@noaa.gov

[Chong Hong Rui]

Hi guys,

Thanks for the help. I ended up using panels as my led bars as it allows me to have more control over the color changing instead of having to draw the rectangle.

Rey

[Nathan McCorkle]

On Wednesday, February 4, 2015 at 5:06:08 PM UTC-8, Chong Hong Rui wrote:

Hi guys,

Thanks for the help. I ended up using panels as my led bars as it allows me to have more control over the color changing instead of having to draw the rectangle.

Just be aware that this might not be the most CPU-efficient way to do this, I imagine because all the panels will be part of the event loop for drawing/painting and receiving events, it will perform worst when you resize (this might not mean anything displays poorly, but a resize might take longer, so on a slow machine or with lots of other CPU load, you might experience more delay in GUI refresh).

[Chong Hong Rui]

thanks for the warning. will consider other options, but for now, get something to work first. =D.

As I've said before, i'm new to wxpython, so I would appreciate if you guys have any comments on my code style etc. my current code makes use of class to create a panel before adding onto the main frame. Is this considered a good practice?

Rey

On Wednesday, February 4, 2015 at 4:20:52 PM UTC+10, Chong Hong Rui wrote:

[Rufus Smith]

Hi Chong,


This is answering your question directly, but you code bothered me when
duplicated identical
code 10 times for the segments. Since you didn't save the reference
names anyway, you could
have simplified the creator greatly:

def ledMainCreate(self):
ledHBox = wx.BoxSizer(wx.HORIZONTAL)
panelFlags = wx.ALL # flags for first panel
for panelNum in range(10):
ledPanel = wx.Panel(self, size=(10, 30))
ledPanel.SetBackgroundColour('grey')
ledHBox.Add(ledPanel, flag=panelFlags, border=5)
panelFlags = wx.RIGHT|wx.BOTTOM|wx.TOP # flags for
subsequent panels
self.SetSizer(ledHBox)

(another added advantage is the number of segments is easily changed in
the one range() call)

Rufus

[Chris Barker]

On Wed, Feb 4, 2015 at 5:06 PM, Chong Hong Rui <reyrey...@gmail.com> wrote:

Thanks for the help. I ended up using panels as my led bars as it allows me to have more control over the color changing instead of having to draw the rectangle.

I just noticed that you also asked about a joystick control -- so it looks like you'll need to learn about custom drawing anyway ;-)

-Chris

 

 

--
You received this message because you are subscribed to the Google Groups "wxPython-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to wxpython-user...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Chong Hong Rui]

Hi Rufus,

Thank you very much for the tips. =D. Reduces the amount of code used.

So in this case, if say a LED lights up, how am i suppose to change the color of the panel since here is no reference to access? hot do i get a reference for items created using for loop?

Hi Chris,

Yes, there is no escape from the drawing loops. with try doing a protector angle updater to simulate a servo before designing the joystick. is there any good learning materials besides those you've already shared?

Regards,

Rey

On Wednesday, February 4, 2015 at 4:20:52 PM UTC+10, Chong Hong Rui wrote:

[Rufus]

As far as references to the panel goes, I thought you had already worked that one out.  ;)

That's why I said "you aren't saving references" in my first message.

if you save a reference to the sizer (in self.ledHBox for instance),
you can get the sizer's controlled  items with self.ledHBox.GetChildren()

But it would probably be better if you add the panel references to a list
as you create them and access them through that list, (in case you had other
items in the sizer).

e.g.

self.ledPanels= []   # (in __init__)

and

self.ledPanels.append(ledPanel)  # after creation

[Mike Stover]

Another thing you could try instead of a series of panels is the PeakMeter widget from wx.lib.agw, which is a set of "advanced" controls. It is easy to setup the widget and feed it data.

Admittedly, whether or not you would be able to use this depends largely on the version of wxPython you have installed and are using. As far as I know it is only working with wxPython 2.9.5.0, though I am working on getting it updated to work with wxPython 3.0.0.0 and up. Progress has been slow lately as I have been busy with work and commissioned projects.

An example of how to use the PeakMeter if you have 2.9.5.0 installed is available with the wxPython 2.9.5.0 Demo.

[Chris Barker]

On Mon, Feb 9, 2015 at 10:13 PM, Chong Hong Rui <reyrey...@gmail.com> wrote:

Yes, there is no escape from the drawing loops. with try doing a protector angle updater to simulate a servo before designing the joystick. is there any good learning materials besides those you've already shared?

sorry -- that's all I've got onhand. :-(

-Chris

 

 

--
You received this message because you are subscribed to the Google Groups "wxPython-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to wxpython-user...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Rufus]

Mike,

    I'm glad you mentioned PeakMeter, because I wanted to suggest something like that!

    I found Gauge, ProgressDialog and others, but none were customizable to look like an LED bar.
    But I looked at the PeakMeter in the demo and it looks good to me.
    After Rey works with his array of panels, he'll think so too.

Rufus

[Chong Hong Rui]

Thank you guys for all the suggestions. will consider each and everyone of them and when it's complete, will share it up here. i do have a quick question. is there anyway i can draw insider the sizer? or must i draw on a panel, then put the panel into the sizer?

regards,

Rey

[Tim Roberts]

This is a good question; understanding the relationship between sizers
and windows is key to success in wx layout.

A sizer is not a visible component -- it is not a window. It is merely
an abstract object that contains windows and manages their size and
position. In order to draw, you have to start from a component that has
a window, such as a panel.

[Chong Hong Rui]

Hey all, I'm about to finish up the GUI, but still require some help.

Currently, I'm drawing onto a panel, but would also like to have a static box to show what i am drawing. Does anyone know how to draw into the staticbox?

Regards,

Rey

[Rufus]

[off topic]
This doesn't answer your question about drawing.  But after a quick scan of your code,  I just wanted to make two comments on conditional statements and range checking.   The first is in your onSliderScroll routine:

        if panval>0 and panval<=90:
            pandc = 25.0/180.0*(panval+90)
        elif panval<=0 and panval>=-90:
            pandc = 25.0/180.0*(panval+90)
        if tiltval>0 and tiltval<=90:
            tiltdc = 25.0/180.0*(tiltval+89)
        elif tiltval<=0 and tiltval>=-90:
            tiltdc = 25.0/180.0*(tiltval+90)

Python is unusual among languages, in it allows you to specify ranges in this way:

        if 0 < panval <= 90:
            pandc = 25.0/180.0*(panval+90)
        elif 0 >= panval >= -90:
            pandc = 25.0/180.0*(panval+90)
        if 0 < tiltval <= 90:
            tiltdc = 25.0/180.0*(tiltval+89)
        elif 0 >= tiltval >= -90:
            tiltdc = 25.0/180.0*(tiltval+90)

Which is how you'd write the expression mathematically.   And cooler.

Also,: If a final condition check is the exact opposite of the prior condition as in:

        if panangle<=90:
            panxcoor = int(panxfix-math.cos(math.radians(panangle+90))*90)
            panycoor = int(panyfix-math.sin(math.radians(panangle+90))*90)
        elif panangle > 90:
            panxcoor = int(panxfix+math.cos(math.radians(270-panangle))*90)
            panycoor = int(panyfix-math.sin(math.radians(panangle+90))*90)

 
Just use "else"

        if panangle<=90:
            panxcoor = int(panxfix-math.cos(math.radians(panangle+90))*90)
            panycoor = int(panyfix-math.sin(math.radians(panangle+90))*90)
        else:
            panxcoor = int(panxfix+math.cos(math.radians(270-panangle))*90)
            panycoor = int(panyfix-math.sin(math.radians(panangle+90))*90)

These don't change the functionality of the program, it just looks better.

[Charles J. Daniels]

A static box is used with a StaticBoxSizer, and you can just add the panel to that sizer -- so you keep drawing on panel and just box it.

[Chong Hong Rui]

Thanks Charles, thank helped. =D.

[Chong Hong Rui]

Thanks Rufus. Didn't know about that. And yes. it looks way cooler. I'm starting to like python.