Creating blockdiagrams with FloatCanvas

wxPython Users
1

Hi,

I am looking for a way to implement some GUI features and I am
contemplating between OGL or FloatCanvas. Actually I am leaning more
towards FloatCanvas, but I am not sure how much effort it will be to get
it together. -- Unless there is some other toolkit that can handle this
task even better and works together with wxPython. --

The GUI should be like a block diagram editor. There are function blocks
that have different amounts of input and output. Inside the function
block there is a text for each input/output port and in the middle of
the block a title. Those blocks can be moved around and changed in size.
Blocks can be interconnected with lines. Those lines connect to the
input and output ports. When moving the blocks, the line connection
should stay.

Lines should only go horizontally or vertically and individual segments
can be moved around. Different lines can cross without interconnection
or connect. When moving such a segment from an interconnected line all
segments follow the move.

To make connections, when moving the mouse over a port, a small square
shows up that allows to draw a line from that port.

That are pretty common functions and I wonder whether actually a toolkit
like that exists already?

I know that OGL was made for something like that. I just read a post
about 2 years ago, where someone described a similar GUI and said that
he grew out of OGL pretty fast. -- The post is here:

http://aspn.activestate.com/ASPN/Mail/Message/wxPython-users/1986966

Looking at the FloatCanvas I see the basic functions I am looking for,
but they still need some work to get them together.

In addition to that, there are some functions I have not seen being
implemented with FloatCanvas yet like like having a grid and moving
blocks and lines based on that grid or a scrollbar for the canvas.

I would appreciate any comments about what the simplest way would be to
implement those features.

Thanks

Cheers,

Guenter

2

I didn't answer this the other day because I was expecting Chris to answer it. He may not have seen it, so I'll give him a little nudge with this message. :wink:

Robin

Günter Dannoritzer wrote:

···

Hi,

I am looking for a way to implement some GUI features and I am
contemplating between OGL or FloatCanvas. Actually I am leaning more
towards FloatCanvas, but I am not sure how much effort it will be to get
it together. -- Unless there is some other toolkit that can handle this
task even better and works together with wxPython. --

The GUI should be like a block diagram editor. There are function blocks
that have different amounts of input and output. Inside the function
block there is a text for each input/output port and in the middle of
the block a title. Those blocks can be moved around and changed in size.
Blocks can be interconnected with lines. Those lines connect to the
input and output ports. When moving the blocks, the line connection
should stay.

Lines should only go horizontally or vertically and individual segments
can be moved around. Different lines can cross without interconnection
or connect. When moving such a segment from an interconnected line all
segments follow the move.

To make connections, when moving the mouse over a port, a small square
shows up that allows to draw a line from that port.

That are pretty common functions and I wonder whether actually a toolkit
like that exists already?

I know that OGL was made for something like that. I just read a post
about 2 years ago, where someone described a similar GUI and said that
he grew out of OGL pretty fast. -- The post is here:

ActiveState Community - Boosting coder and team productivity with ready-to-use open source languages and tools.

Looking at the FloatCanvas I see the basic functions I am looking for,
but they still need some work to get them together.

In addition to that, there are some functions I have not seen being
implemented with FloatCanvas yet like like having a grid and moving
blocks and lines based on that grid or a scrollbar for the canvas.

I would appreciate any comments about what the simplest way would be to
implement those features.

Thanks

Cheers,

Guenter

3

Robin Dunn wrote:

I didn't answer this the other day because I was expecting Chris to
answer it. He may not have seen it, so I'll give him a little nudge
with this message. :wink:

Robin

Thanks Robin,

I am a bit torn between FloatCanvas and OGL. It seems to me that doing
connections between objects with lines is already implemented with OGL,
whereas FloatCanvas does not have that feature yet. So I am leaning more
towards OGL.

At the moment I am studying the OGL documentation and try to play around
with it to understand it better.

Guenter

4

Robin Dunn wrote:

I didn't answer this the other day because I was expecting Chris to answer it.

Wow! you go off line for a week, and suddenly everyone has questions about your code!

Günter Dannoritzer wrote:

I am looking for a way to implement some GUI features and I am
contemplating between OGL or FloatCanvas.

To be totally honest, I don't quite remember why I rejected OGL for my uses and wrote FloatCanvas, but there were reasons!

In a nutshell, however, OGL was created to make Boxes-Connected-by-lines diagrams, so if that what you're doing, then it may be the best way to go.

FloatCanvas doesn't have anything built it to support that kind of use, but it does have a lot of the primitives you'd need to make it. I wrote it primarily to support easy zooming and panning and being able to work in your natural, floating points coordinates (thus the name). With some work, you could certainly do what you want with it, but I don't know if it it would work better than OGL.

A few comments that might be helpful:

Those blocks can be moved around and changed in size.

The TextBox supports that pretty well, including primitive line-wrapping.

Blocks can be interconnected with lines. Those lines connect to the
input and output ports. When moving the blocks, the line connection
should stay.

You'd have to handle keeping track of the coords of the line connections yourself, but it could be done.

To make connections, when moving the mouse over a port, a small square
shows up that allows to draw a line from that port.

That would be pretty easy.

In addition to that, there are some functions I have not seen being
implemented with FloatCanvas yet like like having a grid and moving
blocks and lines based on that grid

That's not there, but it wouldn't be hard to add.

or a scrollbar for the canvas.

I've provided the "NavCanvas" which used "panning", rather than scrollbars to scroll, but it's not hard to add scrollbars. I think some folks have done it. (if you're reading this, send me the code, I should really provide a ScrolledCanvas as part of the lib.)

I have a few extra small demos that implement editing objects. I really need to get that in the Demo. I'm also thinking about how to make editable objects that are built into the Canvas. I haven't worked out the design details, but I'd love help!

-Chris

···

--
Christopher Barker, Ph.D.
Oceanographer

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

5

Christopher Barker wrote:

To be totally honest, I don't quite remember why I rejected OGL for my
uses and wrote FloatCanvas, but there were reasons!

In a nutshell, however, OGL was created to make Boxes-Connected-by-lines
diagrams, so if that what you're doing, then it may be the best way to go.

[...]

Thanks Chris for the detailed answer.

It sounds like I will give OGL a try for now. I found a more complex
wxWidgets example called OGLeditor and I will study that code a bit
more. From the explanation it had already some of the features I was
looking for.

Cheers,

Guenter

6

Hi Guenter,

Just for your information: the uml diagrams in SPE are generated by
OGL. The code is in _spe/sm/wxp/uml.py and can be run alone as a test
(no need to run SPE).

Stani

···

On 4/20/06, Günter Dannoritzer <dannoritzer@web.de> wrote:

Christopher Barker wrote:
>
> To be totally honest, I don't quite remember why I rejected OGL for my
> uses and wrote FloatCanvas, but there were reasons!
>
> In a nutshell, however, OGL was created to make Boxes-Connected-by-lines
> diagrams, so if that what you're doing, then it may be the best way to go.
>
[...]

Thanks Chris for the detailed answer.

It sounds like I will give OGL a try for now. I found a more complex
wxWidgets example called OGLeditor and I will study that code a bit
more. From the explanation it had already some of the features I was
looking for.

--

http://pythonide.stani.be/screenshots
http://pythonide.stani.be/manual/html/manual.html