Solved

How to generate a dynamically drawn, web based, infrastructure network map image(s) from info in a database or file.

Posted on 2004-08-16
12
448 Views
Last Modified: 2006-11-17
Ok…I have a pretty ambitious project for a systems admin, and I am going to need some help.  I realize this is not the appropriate place for step-by-step assistance, but if I could get some general direction I can do the research into the specifics.

Basically, I am a network admin.  I would like to set up a web page which shows a variation(s) of the standardized visual representation of the network.  I.E. The big picture with a bunch of little computer icons on it, and all the little computers are connected to each other with dotted lines which are labeled with the appropriate IP addresses…basically, the web’s version of the big infrastructure wall map you might see on any medium to large IT department.

OK…here are the two VERY ambitious parts…

1.      (Not too terribly optimistic) The map itself would need to scroll around, and zoom in and out, so you could see the whole thing…or just sections of it at one glance (basically like you could if it were a big picture in Photoshop…dragging it around and zooming in and out as necessary.)
2.      (VERY optimistic)  I would like to be able to have the connecting lines drawn dynamically based on specified criteria.  I.E.  If you want to see the actual network connections, click the “network” button and the lines show you what machines are attached to whom and are labeled with the IP addresses.

OR, you click the “mounts” button, and the lines re-draw themselves to show that “MachineA:/mnt” dir has a mount to “MachineB:/export/home/tempdata”.  The lines themselves will probably not change (much), just WHICH lines are shown and what the label is. ( I will attach some example images if I am able.  If I am not, I will put an example out on my website at www.utr.net/netmapexample.)

I was thinking some of the ways this could be done would be …
1.      An .asp or .jsp page with an SQL database.
2.      flash using masks and an SQL(or whatever?) type of database.
3.      Some form of RTAP or WonderWare database.
4.      Some other piece of web software better suited to this task that I don’t know about because I am an admin and not a web designer :-)

OK Guys…hit me with your great advice!  I have SOME experience with all the above (.asp, .jsp, SQL web, RTAP, Flash) but feel free to assume I am an idiot :-)

M
0
Comment
Question by:Mike R.
  • 6
  • 3
  • 2
  • +1
12 Comments
 
LVL 10

Assisted Solution

by:frugle
frugle earned 100 total points
ID: 11815061
Microsoft Visio draws nice network diagrams, the help system is very intuitive and can be configured (i think) to use your own graphics.

If you want to drag things around and zoom in and out, consider using Flash. Again, it's a fairly steep learning curve, but the results will be much more compatible than Dynamic HTML

Lastly, if you're going to store all the connections and things in a database, it's structure is going to take the most working out.  See how you get on pulling data out of it into "flat" tables before getting adventurous with graphics.

Mike
0
 
LVL 3

Author Comment

by:Mike R.
ID: 11815149
The website is up.  Take a look.  I made the site to simulate what I would like it to be able to do...however (so no one asks why I don't just DO it that way) I would need for the server data, the IP addresses, the software, the mount map, ETC. to be contained in a database, and have the image drawn dynamically, so the data can be updated regularly in the database, and the changes reflected in the maps.

Thanks!
M
0
 
LVL 3

Author Comment

by:Mike R.
ID: 11816564
Hey Frugle,

Thanks for the input.  I am currently playing with SQL...just to get back into practice, and have done a few simple websites with flash...however, as this is for a specific project, ultimately I have to get it working with the graphics ASAP.  For better or for worse, I have always been the type to go right for building the skyscraper, without doing some “one bedrooms” first.  Figure the best way to learn is to jump in with both feet :-)

When I was writing the initial question, I figured the lines drawn between the machines would remain relatively stable...and considered using Flash with multiple mask layers (and just hide the stuff I didn’t want to be seen...kinda like an image gallery) but I have since decided it may be necessary to have the lines drawn dynamically...meaning I would have to be careful in how "it" (whatever it may be) will determine where to put the lines...for fear of it just becoming a jumble.

Does anyone know of a software package that does all this?  I used to work with a database called RTAP (Windows competitor “WonderWare”) that was designed to do this sort of thing, but it was intended to run giant factories and production equipment…and cost about $100,000.  Anyone know of something similar for a “small network” environment?

Thanks!
M

M
0
 
LVL 4

Assisted Solution

by:kolpdc
kolpdc earned 200 total points
ID: 11820579
i assume, you do not only have five little computers in your network, so i think, you'll like to get the job done automatically. i think, from this aspect visio is out of the race (perhaps i'm wrong?).

i would take a database - does not matter which one (depends on the money you'll like to spend;). then create your entities/tables fitting your needs. for example, i spontanously think of two tables (not to take too serious):

table networkdevice (details of every device)
-----------------------
#ID (perhaps your ip? perhaps better an int-id and ip separately, because it could change?)
criteria1
criteria2
...

table dependencies (all dependencies between two devices)
----------------------
#ID int
device1
device2

then you need a programm that offers you a little piece of logic and painting-possibilies to get all your networkdevices abstractly connected and painted in the last step. i think everything before painting is no problem. you can solve this by yourself using every bigger programminglanguage with database-features you can get.

the big problem will be the rendering, i believe. imagine, you have only ten devices in your network connected each to two other devices. and image how long it would take you to arrange these little boxes so the screen does not look confusing anymore.

unfortunately i do not know a rendering-tool, that offers this possibility so could save the time of writing rendering algorithms.

if you are not able to find such a tool, then i would recommend - depending on your situation and time to be spend for example following constellation:
php with installed gd2-lib accessing a mysql-database or whatever database you have (that all depends on the infrastructure you are using - gd2 is a good thing to solve graphical web-problems).

three ideas for the rendering: like you mentioned - flash. next one gd2-lib (produces static images dynamically). and last - for example best one to get the whole problem solved (assuming you have the right infrastructure): macromedia director.
0
 
LVL 4

Assisted Solution

by:kolpdc
kolpdc earned 200 total points
ID: 11820602
you can achieve the database-task with every database - relational or objectoriented. does not matter. two possibilities: mysql (cheapest possible, i think), sql-server.

your problem, like i mentioned, will be the rendering. try to get a programm or an algorithm achieving this aim, because i could imagine, that'll be time-consuming.
0
 
LVL 3

Assisted Solution

by:krazywest
krazywest earned 200 total points
ID: 11822399
I'm not particularily familiar with neither asp nor jsp, because I use PHP..

Php nicely supports MySQL as well as some really nifty extensions, like...

http://uk2.php.net/manual/en/ref.swf.php

writing directly to flash files!

The language of php is much like c, which is much like java.. so it shouldn't be too much of alearning curve for you?


An alternative to this (if you don't want to write the whole thing in php-flash) is to write a "wrapper" in flash that reads an image off of your web-server, and generate this image using.. the php image functions:

http://uk2.php.net/manual/en/ref.image.php

The second one is how I'd do it..
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 3

Author Comment

by:Mike R.
ID: 11823357
Krazywest: Awsome.  I will check out the sites.  THANKS!

kolpdc: Yes.  The network, actually, is probably 100 PCs, so you're correct, the graphics will likely be the big hardship.  I will have to ponder on that.

All:  Flash keeps coming up, so I will look into that as well.  I won't be so bold as to ask for a tutorial...but if you could give me an idea what features in flash I need to learn.  

What I mean is, I have done some flash pages where different things pop up when you mouseover or click stuff...and worked a little with action script.  I have also worked a little with Java and Javascript.  SO, I guess the question is ...

1. How in Flash do I get the image drawn from the database?  Maybe a couple of simple example code snippets, or a tutorial website would be great.
2. How in flash would you recommend getting the zoom in/zoom out/drag around the screen thing going?  Same idea...a web site tutorial or a quick example would be awesome.

Thanks again!  I wish I could make this one worth more than 500 pts :-D

M

0
 
LVL 3

Author Comment

by:Mike R.
ID: 11823447
Oh...and some suggesstions as to what I am looking for with Macromedia director.

Thanks!
M
0
 
LVL 3

Accepted Solution

by:
krazywest earned 200 total points
ID: 11830922
1) Quick example of the zoom/drag around thing: http://www.zoomify.com/

I don't have flash here, if I remember I'll have a play when I have a chance.

If you want to do it the free way (whoo), get some tutorials and work on it.. I'm not a flash guru.

Some things to consider:
Dragging (tutorial): http://www.phong.com/tutorials/flash/drag/index.php

Zooming: http://www.19.5degs.com/element/420.php

Oooh, and after all of the rest of this was written, I go back and find:
http://www.sephiroth.it/file_detail.php?id=127

That's based on a static image, but as the next bit says, that's lies.

2) Getting the image from the database:

This is very neat in php.

All you do is pretend that the php file is an image (by adding the Header("Content-type: image/FOMRAT"); line to the top.).

This allows you to use html of the style.. <img src="generate_it.php" />, or you can then tell flash to load this php script and it will do so fine, as an image.

If you have no idea what I'm going on about.. consider a web counter. They are normally rendered as images.. and these images must be drawn (with the correct value from the database) each time the image is requested.

3) If you go the writing-to-flash-files way..

Having had a closer look I'd recommend http://freemovie.sourceforge.net/.
It's nice and free, and really easy to install (you don't have to). It's only problem is the major lack of documentation, but I've managed to find this:

http://www.oreillynet.com/pub/a/javascript/2002/05/09/freemovie.html

(No, I have no idea why it mentions javascript..)

That should give you a rough idea of what is going on (it also gives a sample of header("content-type...). Make sure you look at page 2.

4) Another thought..

You could even go for a combination attempt.. A flash file for the zooming/scrolling that loads ANOTHER dynamically generated flash-from-php file.

5) Re: 500 pts.

You can... just submit a points-for question afterwards.
http://www.experts-exchange.com/help.jsp#hi91


Please ask for better explanations if this is too waffly.
0
 
LVL 3

Author Comment

by:Mike R.
ID: 11833039
Awesome advice!  I have downloaded a copy of the Mac Director and gone through the tutorial, and it (or flash...they are very similar) seem like the way to go.  I will play with the PHP a bit and get back with you!

Thanks again!
M
0
 
LVL 3

Author Comment

by:Mike R.
ID: 11836237
Wow!  Great links!  OK...here's what I think I am going to do...

1. I think I am going to use Mac Director...as it seems to have all the functionality of flash, plus a few extra features which might come in handy on this, or later projects.
2. I am going to go through some of the tutorials (from links on this page...and others) until I have a little better feel for Director in general.
3. Then I am going to post additional questions regarding the details...probably there is going to be the following questions, if not more :-)
 a. Zooming in Director (assuming it is not entirely the same as zooming in flash.)
 b. Details about using a database (probably JavaScript or PHP in director.)
 c. Details about saving changes to the screen during a user session.

I expect this is the direction I am going to take.  I will be using director to (in a nutshell) make a shockwave video-game...called "Let's build a network!"  It will need to have the ability to ...

1. have objects dragged from a repository pool of icons (servers, workstations, routers, cables, ETC) and placed on the screen.  
2. After placement on the screen, they need to be "saved" so they stay there between session...and if another user logs into the "game".  Unless there is a Director designated way to do this, I may end up having the locations of the objects stored in the database.  This would be fine, however, after the network gets big, I suspect this cause it to take a lot of time to load initially.
3. Each icon (object) will have its own link to the database so information about the object can be seen, and modified, from the game.
4. Finally, the entire "game map" (i.e. the vis representation of the network) will need to be able to be zoomed/dragged around.

So...I am going to assign some points.  Since everyone had a had, I think I will just divvy up the points evenly...and start the first of the new series of questions.

NEXT QUESTION: (look for this as a new question in the forum) Tutorials on how to write a shockwave game :-)

Thanks again everyone!
M
0
 
LVL 3

Expert Comment

by:krazywest
ID: 11837098
Ouch.. nice easy target you picked yourself there..
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
Read about why website design really matters in today's demanding market.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now