Click here to Skip to main content
Click here to Skip to main content

A Utility for Network Diagrams

, 28 Jan 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
A simple front end to manage network diagrams based on Visio-like shape connectors.

ScreenShot.gif

Introduction

A graphic front end to manage network diagrams can be very useful for a lot of purposes like writing simulation software or simply to organize collected data (for example, by a network scanner). In this simple program, we will see a simple way to implement a graphic front end with these basic functions:

  • Shape drag and drop
  • Mobile connectors (somewhere also defined is a glue link)
  • Load and write configuration from/to text file

…without requiring any Office library, so you can use this even if you haven’t installed Visio or PowerPoint.

General Implementation

This software has a main library, i.e., GScenario.cs, that implements the memory representation of all the drawn objects. Formally, this is a class with a pointer to the current object (CurrObjIndx) and an array of objects like this:

public class GObject 
public string Name;
public string Type;
public int x1;
public int y1;
public string Lnk1;
public int x2;
public int y2;
public string Lnk2;

The properties are: the (supposedly 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 an ImageList object. The following function of the main form gets the correct image for each type:

private Image FindGObjectTypeImage(string ObjType)

All the GDI functions are managed in the main form class while the corresponding information is assigned, modified, and so on by the GScenario class, or better by its instance Gnetwork. An important fact to note is that after an object modifies the aspect of the form (i.e. Paint event), the diagram must be redrawn using the information in the memory array (GNetwork).

Drag & Drop Function

It is easy to illustrate the drag and 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 and drop situation of a shape, we use these event of the main form object:

  • MouseDown
  • MouseUp

The MouseDown event can indicate the start of an object dragging if the clicked point is contained in the rectangle related with the object. When entering in drag mode, the cursor gets the shape of a little hand. The MouseUp indicates 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 is to avoid mistaking a double click with a drag and drop. When a mouse up occurs, we simply move the center of the previous found object in the mouse up event co-ordinates (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 container object, like shown in the figure below:

DragDrop.GIF

Load & Save

There’s not much to explain about this: simply use these methods of GScenario:

public bool LoadFile(string FileFullPath, ref string sErrFileMsg)
public bool SaveFile(string FileFullPath, ref string sErrFileMsg)

The GNetwork object is loaded/translated in a text file like this:

object=Emitter_0;
type=Emitter;
x1=116;
y1=119;
lnk1=;
x2=196;
y2=199;
lnk2=;
end object.
object=Receiver_0;
type=Receiver;
x1=674;
y1=145;
lnk1=;
x2=754;
y2=225;
lnk2=;
end object.
… 

We use the basic function of the System.IO namespace, and each line has the form:

[variable_name]=[variable_value];

Further Considerations

An apposite simple function extracts from each “line string”, the (variable, value) couple (for example: x1=116; -> variable=x1; value=116) and saves it to memory or to disk. This example has been developed referring to a TCP network: so the managed objects 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 kinds of hierarchical dependence networks, 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 contain 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 who is doing the calculations (i.e., bandwidths, capacity, and so on). This program is very simple, so the glue link management is basic: for example, it 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 not only to the center) or the connections only by perpendicular lines. To conclude, it’s important to say that the program works (calculate center, evaluate if a click is contained or not …) not with the real image object, but with the container rectangle. So, if you choose images like this:

Click.GIF

If all goes (almost) good, and if the image area is much smaller than 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.

History

  • First release - 1.0 [28/01/2008]

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

stevefalken
Systems Engineer
Italy Italy
Master in Electronic Enginneering;
MBA;
 
Project Engineer of electric control system (1999);
Production Engineer (2000-2002);
BPR Consultant (2002-2005);
Network Administrator (2006-today);
 

Comments and Discussions

 
GeneralNeed Help for makin Human Machine Interface (SCADA) Software using Visual Studio 2008 in C # languages Pinmembererich1158819-Feb-10 22:52 
GeneralRe: Need Help for makin Human Machine Interface (SCADA) Software using Visual Studio 2008 in C # languages Pinmemberstevefalken20-Jan-11 6:49 
Generalweb based network topology Pinmembervaibhav limaye16-Dec-08 2:07 
Dear sir,
Can it be made possible in web based project. Please clarify as early as possible. thanks.
best regards,
vaibhav
GeneralRe: web based network topology Pinmemberstevefalken20-Jan-11 6:54 
Generalnice Pinmemberali_reza_zareian6-Oct-08 19:32 
GeneralGreat Thanksss Pinmemberztevoz12-May-08 9:12 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141223.1 | Last Updated 28 Jan 2008
Article Copyright 2008 by stevefalken
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid