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

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 :-)

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.

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 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?

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):

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.

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:

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

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:

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!

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 :-)

Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…