clickable shapes using wx.DC

wxPython Users
1

Hi,

I am trying to find the best way to draw clickable shapes (say a
circle or a pie with many segments) where each segment can interacte
with mouse events to open window with more details. I am using wx.DC
module to draw my shapes (essentially each shape is a segment that has
2 lines and an arc to form a closed shape). However, I am not sure to
how make each segment interact with mouse hover or lef-button click.
Any points to the right direction?

Many thanks,
sa9

2

Hi,
One method that has been used successfully is when drawing your display
also create an un-displayed bitmap of the same dimensions where each
click-able item has a unique colour, when the mouse is clicked get the
x,y position of the mouse and get the colour from this bitmap then you
can use the unique colour to access the data/methods required. A
dictionary is very useful here.

Gadget/Steve

···

On 25/07/2011 12:25 AM, sa9 wrote:

Hi,

I am trying to find the best way to draw clickable shapes (say a
circle or a pie with many segments) where each segment can interacte
with mouse events to open window with more details. I am using wx.DC
module to draw my shapes (essentially each shape is a segment that has
2 lines and an arc to form a closed shape). However, I am not sure to
how make each segment interact with mouse hover or lef-button click.
Any points to the right direction?

Many thanks,
sa9

3

Fantastic. Thanks Gadget/Steve.

···

On Jul 25, 6:01 am, Gadget/Steve <GadgetSt...@live.co.uk> wrote:

On 25/07/2011 12:25 AM, sa9 wrote:> Hi,

> I am trying to find the best way to draw clickable shapes (say a
> circle or a pie with many segments) where each segment can interacte
> with mouse events to open window with more details. I am using wx.DC
> module to draw my shapes (essentially each shape is a segment that has
> 2 lines and an arc to form a closed shape). However, I am not sure to
> how make each segment interact with mouse hover or lef-button click.
> Any points to the right direction?

> Many thanks,
> sa9

Hi,
One method that has been used successfully is when drawing your display
also create an un-displayed bitmap of the same dimensions where each
click-able item has a unique colour, when the mouse is clicked get the
x,y position of the mouse and get the colour from this bitmap then you
can use the unique colour to access the data/methods required. A
dictionary is very useful here.

Gadget/Steve

4

Gadget/Steve wrote:

I am trying to find the best way to draw clickable shapes (say a
circle or a pie with many segments) where each segment can interacte
with mouse events to open window with more details.

One method that has been used successfully is when drawing your display
also create an un-displayed bitmap of the same dimensions where each
click-able item has a unique colour, when the mouse is clicked get the
x,y position of the mouse and get the colour from this bitmap then you
can use the unique colour to access the data/methods required. A
dictionary is very useful here.

Exactly -- or use wx.lib.floatcanvas, which does this under the hood.

http://trac.paulmcnett.com/floatcanvas

FloatCanvas gives you zooming and panning, which you may not want, but you don't have to use it.

Also check out the Demos in SVN, there is a Pie Chart example there, that sounds like it may be what you want:

http://svn.wxwidgets.org/viewvc/wx/wxPython/3rdParty/FloatCanvas/Demos/PieChart.py?view=markup

-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

5

Hi Chris,

Thanks a lot for pointing out wx.lib.floatcanvas. I wasn't aware of
it.

I am not after Pie chart per say but actually a sunburst chart. A
Sunburst is a radial space-filling visualization technique for
displaying tree like structures. See this JavaScript example:

http://mbostock.github.com/d3/ex/sunburst.html

For a starter , I am looking for two things:
1) to make a sunburst based on a tree structure data (small genetics
data)
2) to give it some sort of simple transition animation (shrinking or
enlarging a section when clicked in or out).

However, in the future I would love to enhance the second point and be
able to have similar effects to what DaisyDisk program has (see this
movie at 1:30 second http://www.youtube.com/watch?v=ceJ0Fb0TnEg).
DaisyDisk uses an advanced sunburst chart to help the user to find
where are all large files/directories on her harddisk.

This sort of interaction offered by DaisyDisk seems to help the end
user to keep tracking where they are when browsing the tree espically
when it has many levels and nodes. When using DaisyDisk I notched when
mouse hovers over a segment it changes its alpha channel threshold to
dim or increase the color intensity and more importantly when the user
click a segment it transforms to a whole circle and act as the root
for the sunburst chart. This kind of interaction is my end goal for my
open source project.

Since you are the main developer of floatcanvas , I would like to hear
your opinion if these ideas are doable with wxPython/floatcanvas
especially the animation part or should I look into pygame, pyglet or
any other modules to code my sunburst diagram.

Thanks for your help,
sa9

···

On Jul 25, 6:25 pm, Christopher Barker <Chris.Bar...@noaa.gov> wrote:

Gadget/Steve wrote:
>> I am trying to find the best way to draw clickable shapes (say a
>> circle or a pie with many segments) where each segment can interacte
>> with mouse events to open window with more details.
> One method that has been used successfully is when drawing your display
> also create an un-displayed bitmap of the same dimensions where each
> click-able item has a unique colour, when the mouse is clicked get the
> x,y position of the mouse and get the colour from this bitmap then you
> can use the unique colour to access the data/methods required. A
> dictionary is very useful here.

Exactly -- or use wx.lib.floatcanvas, which does this under the hood.

http://trac.paulmcnett.com/floatcanvas

FloatCanvas gives you zooming and panning, which you may not want, but
you don't have to use it.

Also check out the Demos in SVN, there is a Pie Chart example there,
that sounds like it may be what you want:

http://svn.wxwidgets.org/viewvc/wx/wxPython/3rdParty/FloatCanvas/Demo…

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

6

I am not after Pie chart per say but actually a sunburst chart. A
Sunburst is a radial space-filling visualization technique for
displaying tree like structures. See this JavaScript example:

http://mbostock.github.com/d3/ex/sunburst.html

I see -- cool!

For a starter , I am looking for two things:
1) to make a sunburst based on a tree structure data (small genetics
data)
2) to give it some sort of simple transition animation (shrinking or
enlarging a section when clicked in or out).

However, in the future I would love to enhance the second point and be
able to have similar effects to what DaisyDisk program has (see this
movie at 1:30 second http://www.youtube.com/watch?v=ceJ0Fb0TnEg).
DaisyDisk uses an advanced sunburst chart to help the user to find
where are all large files/directories on her harddisk.

This sort of interaction offered by DaisyDisk seems to help the end
user to keep tracking where they are when browsing the tree espically
when it has many levels and nodes. When using DaisyDisk I notched when
mouse hovers over a segment it changes its alpha channel threshold to
dim or increase the color intensity and more importantly when the user
click a segment it transforms to a whole circle and act as the root
for the sunburst chart. This kind of interaction is my end goal for my
open source project.

Since you are the main developer of floatcanvas , I would like to hear
your opinion if these ideas are doable with wxPython/floatcanvas
especially the animation part or should I look into pygame, pyglet or
any other modules to code my sunburst diagram.

I think FloatCanvas would be fine for this the animation is minimal, I don't think you'll have a performance issue with it.

The one "missing piece" is the alpha channel -- FloatCanvas is built on wx.DC, which does not support alpha blending. However, you can get around that in two ways:

1) in the example, you don't necessarily need to use alpha blending -- you can just have the color change to get brighter and darker, but still be completely opaque.

2) you can use a wxGCDC, instead of the regular DC in your own custom DrawObjects, thenyou could use Alpha blending. A bit more code to write, but you'll be writing you own drawobjects anyway.

There is an example of that here:

http://trac.paulmcnett.com/floatcanvas/wiki/AlphaCircle

Aside from that, be sure to look at the Demos in SVN, there are lots of small, self-contained examples in there.

I also have some Wind Rose that is similar, but simpler, to a sunburst diagram.

I've enclosed that code, though it depends on a bunch of other in-house modules of mine to run (sorry about that). I can get you those later, or one of us could re-work it to to use canned data to demo and test purposes (no idea why I didn't do that in the first place)..

But you can get ideas from the code, anyway.

In short, you will still have a fair bot of code to write, but FloatCanvas will give you some infrastructure that will make it easier. And it will be more infrastructure than pygame or pyglet will give you.

If you want to proceed, why don't you post further questions on the FloatCanvas list -- I like to have an archive of discussion there:

http://mail.paulmcnett.com/cgi-bin/mailman/listinfo/floatcanvas

-Chris

FC_Rose.py (18.1 KB)

···

On 7/26/11 7:38 AM, sa9 wrote:

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

7

Chris, your reply is very helpful.

I will start working on the project shortly and will send any
questions to FloatCanvas list.

Thanks again for taking the time to reply.

Best,
sa9

···

On Jul 26, 6:21 pm, Christopher Barker <Chris.Bar...@noaa.gov> wrote:

On 7/26/11 7:38 AM, sa9 wrote:

> I am not after Pie chart per say but actually a sunburst chart. A
> Sunburst is a radial space-filling visualization technique for
> displaying tree like structures. See this JavaScript example:

>http://mbostock.github.com/d3/ex/sunburst.html

I see -- cool!

> For a starter , I am looking for two things:
> 1) to make a sunburst based on a tree structure data (small genetics
> data)
> 2) to give it some sort of simple transition animation (shrinking or
> enlarging a section when clicked in or out).

> However, in the future I would love to enhance the second point and be
> able to have similar effects to what DaisyDisk program has (see this
> movie at 1:30 secondhttp://www.youtube.com/watch?v=ceJ0Fb0TnEg).
> DaisyDisk uses an advanced sunburst chart to help the user to find
> where are all large files/directories on her harddisk.
> This sort of interaction offered by DaisyDisk seems to help the end
> user to keep tracking where they are when browsing the tree espically
> when it has many levels and nodes. When using DaisyDisk I notched when
> mouse hovers over a segment it changes its alpha channel threshold to
> dim or increase the color intensity and more importantly when the user
> click a segment it transforms to a whole circle and act as the root
> for the sunburst chart. This kind of interaction is my end goal for my
> open source project.

> Since you are the main developer of floatcanvas , I would like to hear
> your opinion if these ideas are doable with wxPython/floatcanvas
> especially the animation part or should I look into pygame, pyglet or
> any other modules to code my sunburst diagram.

I think FloatCanvas would be fine for this the animation is minimal, I
don't think you'll have a performance issue with it.

The one "missing piece" is the alpha channel -- FloatCanvas is built on
wx.DC, which does not support alpha blending. However, you can get
around that in two ways:

1) in the example, you don't necessarily need to use alpha blending --
you can just have the color change to get brighter and darker, but still
be completely opaque.

2) you can use a wxGCDC, instead of the regular DC in your own custom
DrawObjects, thenyou could use Alpha blending. A bit more code to write,
but you'll be writing you own drawobjects anyway.

There is an example of that here:

http://trac.paulmcnett.com/floatcanvas/wiki/AlphaCircle

Aside from that, be sure to look at the Demos in SVN, there are lots of
small, self-contained examples in there.

I also have some Wind Rose that is similar, but simpler, to a sunburst
diagram.

I've enclosed that code, though it depends on a bunch of other in-house
modules of mine to run (sorry about that). I can get you those later, or
one of us could re-work it to to use canned data to demo and test
purposes (no idea why I didn't do that in the first place)..

But you can get ideas from the code, anyway.

In short, you will still have a fair bot of code to write, but
FloatCanvas will give you some infrastructure that will make it easier.
And it will be more infrastructure than pygame or pyglet will give you.

If you want to proceed, why don't you post further questions on the
FloatCanvas list -- I like to have an archive of discussion there:

http://mail.paulmcnett.com/cgi-bin/mailman/listinfo/floatcanvas

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

FC_Rose.py
24KViewDownload

8

I look forward to seeing what you come up with.

-Chris

···

On 7/28/11 5:00 AM, sa9 wrote:

Chris, your reply is very helpful.

I will start working on the project shortly and will send any
questions to FloatCanvas list.

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