|
|
<!--------------------------------------------------------------------------->
<!-- INTRODUCTION
The Code Project article submission template (HTML version)
Using this template will help us post your article sooner. To use, just
follow the 3 easy steps below:
1. Fill in the article description details
2. Add links to your images and downloads
3. Include the main article text
That's all there is to it! All formatting will be done by our submission
scripts and style sheets.
-->
<!--------------------------------------------------------------------------->
<!-- IGNORE THIS SECTION -->
<html>
<head>
<title>The Code Project</title>
<Style>
BODY, P, TD { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt }
H2,H3,H4,H5 { color: #ff9900; font-weight: bold; }
H2 { font-size: 13pt; }
H3 { font-size: 12pt; }
H4 { font-size: 10pt; color: black; }
PRE { BACKGROUND-COLOR: #FBEDBB; FONT-FAMILY: "Courier New", Courier, mono; WHITE-SPACE: pre; }
CODE { COLOR: #990000; FONT-FAMILY: "Courier New", Courier, mono; }
</style>
<link rel="stylesheet" type=text/css href="http://www.codeproject.com/styles/global.css">
</head>
<body bgcolor="#FFFFFF" color=#000000>
<!--------------------------------------------------------------------------->
<!------------------------------- STEP 1 --------------------------->
<!-- Fill in the details (CodeProject will reformat this section for you) -->
<pre>
Title: Article Title Goes Here
Author: Author Name
Email: stevefalken@email.com
Member ID: stevefalken
Language: C# 2.0
Platform: Windows, .NET 2.0 etc
Technology: GDI+
Level: Intermediate
Description: An article about a simple front end to manage network diagram based on visio-like shape connectors
Section GDI+
SubSection General
</pre>
<!------------------------------- STEP 2 --------------------------->
<!-- Include download and sample image information. -->
<ul class=download>
<li><a href="Grahic_demo.zip">Download demo project - 290 Kb </a></li>
<li><a href="Article_src.zip">Download source - 158 Kb</a></li>
</ul>
<p><img src="ScreenShot.gif" alt="Sample Image - maximum width is 600 pixels"></p>
<!------------------------------- STEP 3 --------------------------->
<!-- Add the article text. Please use simple formatting (<h2>, <p> etc) -->
<h2>Introduction</h2>
<p>A graphic front end to manage network diagram can be very useful for a lot of aims like writing simulation software or simply to organize the collected data (for example by a network scanner). In this simple program we show a simple way to implement a graphic front end with this basics functions:
- Shape drag & drop
- Mobile Connectors (somewhere also defined glue link)
- Load & Write configuration from/to text file
�without any Office library, so you can use this even if you haven�t installed Visio or Powerpoint.
<h2>General Implementation</h2>
<p>This software has a main library i.e. GScenario.cs that implements the memory representation of all the drawn objects. Formally this a class with a pointer to the current object (CurrObjIndx) and an array of object like this:</p><p>
<code>
public class GObject <br>
public string Name;<br>
public string Type;<br>
public int x1;<br>
public int y1;<br>
public string Lnk1;<br>
public int x2;<br>
public int y2;<br>
public string Lnk2;<br>
<br>
</code>
The properties are : the (supposed unique) name of the object (i.e. �Router_0�), its type (for each type there is a different icon), the limits of the containing window and the links. These parameters are only significant for a line object and are useful to implement glue links and tells what object is connected to each terminal point of the line.
The icons of the object types are stored in a imageList object : the following function of the main form gets the correct image for each type
<pre>
private Image FindGObjectTypeImage(string ObjType)
</pre>
All the GDI function are managed in the main form class while the corresponding information are assigned, modified and so on by the GScenario class or better by its istance Gnetwork.
An important fact to tell is that after even object that modify the aspect of the form (i.e. Paint event) all the diagram must be redrawn using the information of the memory array (GNetwork).
<h2>General Implementation</h2>
<p>Variable or class names should be wrapped in <code> tags like <code>this</code>.
<h2>Drag & Drop function</h2>
<p>Is convenient to illustrate the drag & drop situation for the two different cases of a shape (rectangular object) and of a line. The first is simple because the second must implement even the �glue link� effect.
To manage a drag & drop situation of a shape we use this event of the main form object:
- Mouse Down
- Mouse Up
The Mouse Down event can indicate the start of an object dragging if the clicked point is contained in the rectangle related with an object. When entering in drag mode the cursor get the shape of a little hand. The Mouse Up indicate the release of the mouse button and we suppose that corresponds to the end of the dragging only if a significant (in this case we choose 300 milliseconds) time interval has elapsed : this to avoid to mistake a double click with a drag & drop. When a mouse up occurs, simply we move the center of the previous found object in the mouse up event cords (i.e. e.X and e.Y where e is the corresponding MouseEventArgs variable).
If the dragged object is a line the main difference is that, if the mouse up point falls into a rectangular object the line must be linked to its center. In particular the terminal point of the line nearest to the mouse down point must be linked to the center of the cointainer object like shown in the figure below:
<p><img src="DragDrop.gif" alt="How does it work Drag and Drop"></p>
<h2>Load & Save</h2>
<p>There�s no much to tell about this : simple that by using these methods of GScenario:
<pre>
public bool LoadFile(string FileFullPath, ref string sErrFileMsg)
public bool SaveFile(string FileFullPath, ref string sErrFileMsg)
</pre>
the GNetwork object is loaded/translated in a text file like this:</p><p>
<code>
<br>
object=Emitter_0;<br>
type=Emitter;<br>
x1=116;<br>
y1=119;<br>
lnk1=;<br>
x2=196;<br>
y2=199;<br>
lnk2=;<br>
end object.<br>
object=Receiver_0;<br>
type=Receiver;<br>
x1=674;<br>
y1=145;<br>
lnk1=;<br>
x2=754;<br>
y2=225;<br>
lnk2=;<br>
end object.<br>
�
</code>
</p><p>We use the basics function of the System.IO namespace, and each line has the form:
<code>
<br>
[variable_name]=[variable_value];
<br>
</code>
</p>
<h2>Further Considerations</h2>
<p>An apposite simple function extract from each �line string� the (variable, value) couple (for example x1=116; -> variable=�x1� ; value=116 and save it to memory or to disk.
This example has been developed referring to a TCP network : so the managed object are clients (TCP flow emitters), servers (receiver) and so on. However it�s obvious that its validity is general and can be used for all kind of hierarchical dependence network for example in logistics, production planning etc� (in this case the nodes are warehouses).
This program �.. doesn�t do anything in terms of calculation on the objects : those contains only the graphics elements and to be used in a specific contest must be contextualized, for example adding in the GObject class the information on whose doing the calculations (i.e. bandwidths, capacity and so on).
This program is very simple so the glue link management is basic : for example could be interesting to make the connecting mode more similar to the visio/powerpoint one, i.e. implementing the connection to a terminal point of the shape (and non only to the center) or the connections only by perpendicular lines.
To close it�s important to say that the program works (calculate center, evaluate is a click is contained or not �) not with the real image object but with the cointainer rectangle. So if you choose images like this :</p>
<p><img src="Click.gif" alt="Clicking into an object"></p>
<p>all goes (almost) good, if the image area is much smaller of the rectangle area and not centered � you have to implement a more efficient way to manage the objects or you have to choose different images.</p>
<h2>History</h2>
<p>First Release, 1.0 [28/01/2008]
<!------------------------------- That's it! --------------------------->
</body>
</html>
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
Submit an article or tip