Draw vertical and horizontal lines to connect shapes

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

Draw vertical and horizontal lines to connect shapes

Eddy
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 [hidden email].
For more options, visit https://groups.google.com/groups/opt_out.
Reply | Threaded
Open this post in threaded view
|

Re: Draw vertical and horizontal lines to connect shapes

Rufus V. Smith
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 [hidden email].
For more options, visit https://groups.google.com/groups/opt_out.

--
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 [hidden email].
For more options, visit https://groups.google.com/groups/opt_out.
Reply | Threaded
Open this post in threaded view
|

Re: Draw vertical and horizontal lines to connect shapes

Chris Barker - NOAA Federal
In reply to this post by Eddy
On Sun, Mar 2, 2014 at 10:17 PM, SL Huang <[hidden email]> 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

[hidden email]

--
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 [hidden email].
For more options, visit https://groups.google.com/groups/opt_out.
Reply | Threaded
Open this post in threaded view
|

Re: Draw vertical and horizontal lines to connect shapes

Eddy

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: http://www.mathworks.com/help/aeroblks/examples/lightweight-airplane-design.html .   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 <[hidden email]> wrote:
On Sun, Mar 2, 2014 at 10:17 PM, SL Huang <[hidden email]> 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

[hidden email]
--
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 [hidden email].
For more options, visit https://groups.google.com/groups/opt_out
.


--
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 [hidden email].
For more options, visit https://groups.google.com/groups/opt_out.
Reply | Threaded
Open this post in threaded view
|

Re: Draw vertical and horizontal lines to connect shapes

Chris Barker - NOAA Federal
On Mon, Mar 3, 2014 at 9:00 PM, SL Huang <[hidden email]> 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: http://www.mathworks.com/help/aeroblks/examples/lightweight-airplane-design.html .   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.

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

--

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

[hidden email]

--
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 [hidden email].
For more options, visit https://groups.google.com/groups/opt_out.