Draw vertical and horizontal lines to connect shapes

wxPython Users
1

Hi, guys,

I am developing a visual programming environment just like Matlab’s simulink. I am stuck with drawing lines between shapes. Matlab’s simulink can draw a line consisting of several vertical and horizontal sections, and also when user drags and pulls each section of line, it is movable, adjustable and the more sections can be created. I wish I can put some screen shots here to explain it. But I can’t. I don’t have problem draw straight lines between shapes just like OGL and FloatCanvas does. But I have trouble doing as Matlab’s simulink does. Do any of you have experience and some clue how to do that? Your feedback is appreciated.

Thank you very much!

Eddy H.

2

Hey Eddy,

     I've not done too much work with Matlab or Cad type systems, but I think I know what you are describing.

     What Matlab and its ilk does is probably create intermediate nodes in the line.

     So for example, if the connection point for shape 1 is (x1,y1) and the connection point for shape 2 is (x2,y2),
     then you might, for instance, define two intermediate points A and B, with coordinates at (x1+(x2-x1)/2, y1), and (x1+(x2-x1)/2,y2).
     then draw line segments from 1 to A to B to 2. The first line segment provide a horizontal out from shape 1, the middle segment
     is the vertical halfway between the shapes, and the last connect to shape 2.

     You'll use different number of intermediate notes and different formulas depending upon where the connection point is on the
    shape, top, left, bottom, or right. (or n,w,e,s if you prefer compass directions), and what the relative positions of the two shapes are.

      For example, if x1==x2 or y1==y2, you might not need intermediate nodes, if the connection points of the two shapes are facing
     each other. (Although if they are on opposite sides of the shape, you might need 4 intermediate points).

     Is that what you're talking about?

Rufus

···

On 3/3/2014 1:17 AM, SL Huang wrote:

Hi, guys,

I am developing a visual programming environment just like Matlab's simulink. I am stuck with drawing lines between shapes. Matlab's simulink can draw a line consisting of several vertical and horizontal sections, and also when user drags and pulls each section of line, it is movable, adjustable and the more sections can be created. I wish I can put some screen shots here to explain it. But I can't. I don't have problem draw straight lines between shapes just like OGL and FloatCanvas does. But I have trouble doing as Matlab's simulink does. Do any of you have experience and some clue how to do that? Your feedback is appreciated.

Thank you very much!

Eddy H.
--
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-users+unsubscribe@googlegroups.com <mailto:wxpython-users+unsubscribe@googlegroups.com>.
For more options, visit https://groups.google.com/groups/opt_out.

3

Without a screenshot ,or more description, I"m not sure I understand what
you want to do, but I'm guessing:

Rather than a strait, maybe diagonal line between two objects, you want a
line that "zig-zags", using only vertical or horizontal lines, to go from
one object to another.

As a "zig-zag" line like this is really only more than one regular line, I
don't think this is a drawing question or a wx one -- rather, you'll need
to develop the logic to compute what that zig-zag line should be, and then
draw it -- with FloatCanvas, you'd use a Line with more than two points.

It sounds like you also may want the user to be able to drag the "nodes" of
the zig-zag line around to customize how it is drawn. In that case, look at
soem of the example in the FloatCanvas Demos in SVN. PolyEditor, for
example.

HTH,
  -Chris

···

On Sun, Mar 2, 2014 at 10:17 PM, SL Huang <aldounix@yahoo.ca> wrote:

I am developing a visual programming environment just like Matlab's
simulink. I am stuck with drawing lines between shapes. Matlab's simulink
can draw a line consisting of several vertical and horizontal sections, and
also when user drags and pulls each section of line, it is movable,
adjustable and the more sections can be created. I wish I can put some
screen shots here to explain it.

--

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

4

Hi, Rufus
and Chris,

Thanks
for the reply. Rufus, you read my mind.
Chris, I guess you are getting my points too. Here is a link for matlab
simulink, just to show what I was talking about, especially, please look at
Figure 8: Lightweight Airplane Design - MATLAB & Simulink
. I agree it is not wxpython drawing
question, but it is the
logic issue of how to develop a logic to draw those vertical
and horizontal lines between shapes and dynamically create node as user
drag and pull segments (lines).

I am thinking to create a Connection
Class, each instance of it represents a connection
between two shapes. it could have the following attributes: a list to record
[shape1, shape2]; a list of lines to record [(x1, y1), (x2, y2),
(segment 1), (segment 2)…], these segments should be dynamically created by
the method as Rufus
proposed ; a hit test function for user to select segment
to drag; a function to delete … Do you guys have comments on
it? I will test out if it is working.

Thank you both again.

Eddy H.

···

On Monday, March 3, 2014 8:50:47 AM, Chris Barker chris.barker@noaa.gov wrote:

On Sun, Mar 2, 2014 at 10:17 PM, SL Huang aldounix@yahoo.ca wrote:

I am developing a visual programming environment just like Matlab’s simulink. I am stuck with drawing lines between shapes. Matlab’s simulink can draw a line consisting of several vertical and horizontal sections, and also when user drags and pulls each section of line, it is movable, adjustable and the more sections can be created. I wish I can put some screen shots here to explain it.

Without a screenshot ,or more description, I"m not sure I understand what you want to do, but I’m guessing:

Rather than a strait, maybe diagonal line between two objects, you want a line that “zig-zags”, using only vertical or horizontal lines, to go from one object to another.

As a “zig-zag” line like this is really only more than one regular line, I don’t think this is a drawing question or a wx one – rather, you’ll need to develop the logic to compute what that zig-zag line should be, and then draw it – with FloatCanvas, you’d use a Line with more than two points.

It sounds like you also may want the user to be able to drag the “nodes” of the zig-zag line around to customize how it is drawn. In that case, look at soem of the example in the FloatCanvas Demos in SVN. PolyEditor, for example.

HTH,

-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

–

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-users+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out
.

5

That all sounds about right. Take a look at some of the FloatCanvas Demos
-- particuarly ProcessDiagram and PolyEditor - between those two, you'll
have examples of what you need.

For FloatCanvas, the line object is really a polyline, so a
little simpler than your' example -- just a list of (x.y) paris for the
nodes of the line.

Good luck...

-Chris

···

On Mon, Mar 3, 2014 at 9:00 PM, SL Huang <aldounix@yahoo.ca> wrote:

Thanks for the reply. Rufus, you read my mind. Chris, I guess you are
getting my points too. Here is a link for matlab simulink, just to show
what I was talking about, especially, please look at Figure 8:
Lightweight Airplane Design - MATLAB & Simulink.
  I agree it is not wxpython drawing question, but it is the logic issue
of how to develop a logic to draw those vertical and horizontal linesbetween shapes and dynamically create node as user drag and pull segments
(lines).

I am thinking to create a Connection Class, each instance of it
represents a connection between two shapes. it could have the following
attributes: a list to record [shape1, shape2]; a list of lines to
record [(x1, y1), (x2, y2), (segment 1), (segment 2)...], these segments
should be dynamically created by the method as Rufus proposed ; a hit
test function for user to select segment to drag; a function to delete ...
Do you guys have comments on it? I will test out if it is working.

--

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