Dynamic Site Diagrams (HTML, XML, SVG)

[Max Drown (Infor)]

Anyone ever wanted a way to publish site diagrams to web pages dynamically? Me, too! Here’s what I’ve come up with. I hope some of you smart people can help me improve on this concept.

The boxes and links all have hyperlinks that move the viewer to more tools as needed.

I’ll include the code below.

-- Max Drown (Infor)

Topic

[Max Drown (Infor)]

Here is the script that creates a diagram. It pulls coordinates from dflt.mvw (default NetConfig view).

#!/hci/quovadx/qdx5.6/integrator/bin/tcl

set hostName “bhciigt.boone.org”
set hciRoot “/hci/quovadx/qdx5.6/integrator”
set hciSite [lindex $argv 0]
set file “/var/www/html/svg/diagram-$hciSite.svg”

eval [exec $hciRoot/sbin/hcisetenv -root tcl $hciRoot $hciSite]

set view [exec grep all_threads /hci/quovadx/qdx5.6/integrator/$hciSite/views/dflt.mvw]
regsub {^view } $view {} view
keylget view MEMBER member
keylget member THREAD thread

foreach line $thread {
[code]#!/hci/quovadx/qdx5.6/integrator/bin/tcl

set hostName “bhciigt.boone.org”
set hciRoot “/hci/quovadx/qdx5.6/integrator”
set hciSite [lindex $argv 0]
set file “/var/www/html/svg/diagram-$hciSite.svg”

eval [exec $hciRoot/sbin/hcisetenv -root tcl $hciRoot $hciSite]

set view [exec grep all_threads /hci/quovadx/qdx5.6/integrator/$hciSite/views/dflt.mvw]
regsub {^view } $view {} view
keylget view MEMBER member
keylget member THREAD thread

foreach line $thread {

-- Max Drown (Infor)

[Max Drown (Infor)]

Issues:

01) IE (which is a piece of junk) requires a plugin to be installed before viewing .svg files. Firefox displays them out-of-the-box. For IE, I create a .html file and embed the diagram using the embed tag. Just use firefox, it’s easier and better.

Here is the html.

[code]

-- Max Drown (Infor)

[James Cobane]

Max,

Looks pretty cool!  Now just add the thread status, run it every X minutes, and you’ve got your own version of a web-based monitoring tool!

Jim Cobane

Henry Ford Health

[Russ Ross]

Max Drown sweet Jesus and thanks!

I was able to get your sample .svg file to view in FireFox and not Internet Explorer like you predicted.

Do you have a suggested URL to get the .svg plug-in for IE; otherwise, I could Google one.

I tried using the HTML example but I did not get it to work and maybe you can help me connect the dots.

Here is specifically what I did:

– I made a directory on my AIX box for testing called /home/hci/public_html/russ and placed your sample .svg and .html file in it my test directory

– I was able to use FireFox to display the sample .svg file and not IE as expected using the URL http://mdahub4/~hci/russ/diagram-dev_max.svg

– I was not able to get IE to display the sample .html file using the URL http://mdahub4/~hci/russ/diagram-dev_max.html

What I get is a big empty rectangle displyed in IE when using the .html file example via the URL http://mdahub4/~hci/russ/diagram-dev_max.html

I also had to modify your code to replace the hardcoded line

Code:

set view [exec grep all_threads /hci/quovadx/qdx5.6/integrator/$hciSite/views/dflt.mvw]

with this since my $hciRoot doesn’t start with /hci

Code:

set view [exec grep all_threads $hciRoot/$hciSite/views/dflt.mvw]

I also share that I changed the following hardcoding, too:

Code:

set hostName “bhciigt.boone.org”
set hciRoot “/hci/quovadx/qdx5.6/integrator”

to the following

Code:

set hostName “[exec show_service_name.ksh]”
set hciRoot “$HciRoot”

then the code ran far enough for me to discover I need for you to also post the parseRoutes code for me to continue with this endeavor.

Russ Ross
RussRoss318@gmail.com

[Russ Ross]

Jim cobane wrote:

Code:

Looks pretty cool!  Now just add the thread status, run it every X minutes, and you’ve got your own version of a web-based monitoring tool!

I agree Jim and we’ve had the thread status html web pages that Don Ramey wrote for us run every 5 or 10 minutes many years ago even before global monitoring came about I think.

What I often end up doing is send the customer a screen shot of the netmonitor so they can connect the dots visually and this should be helpful in that regard.

Russ Ross
RussRoss318@gmail.com

[Max Drown (Infor)]

The monitoring piece was the first enhancement I thought of, too, and is under development, but it seems awful slow to me so far. I’ll be playing around more with it a lot in the future. Please use this thread to make suggestions or add code.

Here is the SVG plugin: http://www.adobe.com/svg/viewer/install/main.html

-- Max Drown (Infor)

[Max Drown (Infor)]

Russ, I have added the parseRoutes.tcl code above. Do you see any other code I left out?

-- Max Drown (Infor)

[James Cobane]

You could essentially change the box color based on the status of the thread.  Thanks for the code Max; I might have a little fun with this.

Jim Cobane

Henry Ford Health

[Max Drown (Infor)]

James Cobane wrote:

You could essentially change the box color based on the status of the thread.

-- Max Drown (Infor)

[James Cobane]

What’s nice also, is that once you have the .svg file, you can open it in Visio as well.  Google Chrome handles the .svg nicely as well.

Thanks again.

Jim Cobane

Henry Ford Health

[Max Drown (Infor)]

Yup. SVG is just XML.

Chrome actually displays both the .svg file and the .html file perfectly. IE does not display the .svg and Firefox does not display the .html.

I’d use Chrome more if the proxy integration were better. It keeps prompting me for the password all the time.

-- Max Drown (Infor)

[Jonathan Hamilton]

Max,

Looks good.

[Max Drown (Infor)]

Jonathan, would you care to share the method you use for embedding the SVG in .html documents for viewing in IE?

-- Max Drown (Infor)

[Jonathan Hamilton]

You have to use Javascript to source the SVG object in IE thanks to their new IE security.

Attached is the javascript to source the object.  But all it is is ‘document.write(obHTML);’ but it has to be in a sourced javascript file to work.  Well, Clovertech won’t let me post the file so you would create the file activateSVG.js on your web server, then insert the code within the single quotes above.

Then in the HTML document I have the following:

   

     var obHTML = ”

   

   

This works in IE 6 & 7, haven’t tried 8 yet.

Jonathan

[Russ Ross]

Thanks Max for uploading the parseRoutes.tcl code.

I was able to get a .svg file generated that I can view in FireFox.

Also, thanks for the link to the Adobe SVG viewer plug-in URL; I also was able to get working and view the SVG file in IE.

Russ Ross
RussRoss318@gmail.com

[Max Drown (Infor)]

Jonathan Hamilton wrote:

You have to use Javascript to source the SVG object in IE thanks to their new IE security.

Attached is the javascript to source the object.

-- Max Drown (Infor)

[Jonathan Hamilton]

Yes the plugin is required.  I still use the Adobe one even though they have sunset it.  It’s been the most stable.

We are trying to add support for Mozilla, Chrome, etc, but the way they deal with scripting is causing problems.  The SVG’s will display just fine but the AJAX backbone doesn’t work the same so we lose our dynamic content, which is almost everything.  I think Mozilla will be workable but the others I don’t think will be worth the effort to support.

Jonathan

[Max Drown (Infor)]

Jonathan, could you please paste the entire .html file? I’d like to confirm I have mine setup correctly.

-- Max Drown (Infor)

[Russ Ross]

Max:

I found out the HTML file will display once the SVG viewer is installed but will not display on a PC that doesn’t have the plug-in so I don’t think the embeded SVG in the HTML file will prevent needing the plug-in like I had hoped.

Russ Ross
RussRoss318@gmail.com

[Jonathan Hamilton]

Here it is.  There is some extra stuff in there that won’t apply to you but you should get the idea.

   
   
   
   
   
     if (parent.frames.length < 3) {
       parent.location.href="http://naclvq03.unix.medcity.net/~hci/index.shtml"
     }
   
   
   
   
   

   

   

   

   

Site: him_qa (none)     Location: Nashville RDC Version: /hci/qdx5.4/integrator Server Addr: 165.214.13.55

   
     var obHTML = ”
   
   
   
   
   
   

   

   

   

   

   

This site is maintained by    Jonathan Hamilton

Copyright

[code]    
   
   
   
   
     if (parent.frames.length < 3) {
       parent.location.href=”http://naclvq03.unix.medcity.net/~hci/index.shtml”
     }
   
   
   
   
   

   

   

   

   

Site: him_qa (none)     Location: Nashville RDC Version: /hci/qdx5.4/integrator Server Addr: 165.214.13.55

   
     var obHTML = ”
   
   
   

   
   

   

   

   

   

   

   

This site is maintained by    Jonathan Hamilton

Copyright

[Max Drown (Infor)]

Does this look correct?

[code]

-- Max Drown (Infor)

[Jonathan Hamilton]

Looks correct.  Did you create the javascript source file (activateSVG.js)?  For Apache, it must be in the /home/~user/public_html/javascript/ directory to work.

[Max Drown (Infor)]

Jonathan Hamilton wrote:

Looks correct. Did you create the javascript source file (activateSVG.js)?

Yup.

-- Max Drown (Infor)

[Jonathan Hamilton]

Does the SVG object display?  Is the error in the status bar a Javascript error?

If your using Apache you may need to add the following to your httpd.conf file and restart the service.

AddType image/svg+xml svg

AddType image/svg+xml svgz

Jonathan

[Max Drown (Infor)]

The image displays perfectly. I do not think it’s a javascript error. It may be comeing from the .svg file. We are using Apache, so I’ll try adding those lines.

-- Max Drown (Infor)

[Max Drown (Infor)]

Same error with the httpd.conf changes. I’ll google it and see what I can come up with.

-- Max Drown (Infor)

[Max Drown (Infor)]

*bump*

-- Max Drown (Infor)

[Max Drown (Infor)]

Has anyone been using this and care to report back on how it’s going? Screen shots would be nice, too.  😀

-- Max Drown (Infor)

[Max Drown (Infor)]

http://en.wikipedia.org/wiki/Scalable_Vector_Graphics

Looks like eventually Internet Explorer will support SVG natively. Firefox and Chrome already do. The wiki says IE9.

-- Max Drown (Infor)

[Max Drown (Infor)]

Firefox 4 has many performance improvements and offers many new functions and features. But this one in particular caught my eye …

Quote:

SVG files can now be used as images and backgrounds in Firefox, meaning that developers and designers can have stunning, performance-conscious websites with lighter, resolution-independent image files.

-- Max Drown (Infor)

[Author]

Replies