Customized Visio HTML Export
A recent Visio newsgroup post asked about customizing the output files from Visio’s Save As Web feature. This rang a bell in the ol’ noggin, and I went searching for an old demo that exported a customized html page, with pop-up menus that displayed Custom Property (Shape Data) information.
This demo doesn’t use Visio’s built-in Save As Web feature, but instead uses automation code in the form of VBA stored in the document. But before we talk about code, let’s explain how to use it. The imagined user-scenario goes like this:
The user wants to highlight various items in her Visio document, such that viewers of the exported web-page can mouse-over special regions and see a pop-up dialog that displays info about that region.
The way the document is built is as follows:
- The user places custom “Hot Spot” shapes on top of the regions of interest in the diagram
- She fills in some information about the region
- She right-clicks the Page and chooses “Export” from the menu
- A web-page is produced by the code, that displays pop-ups when the mouse is over the specified regions
Below, we can see the Hot Spot shape in action. We’ve imported an image of a snazzy, not-so-new BMW, and placed a Hot Spot shape over the passenger-side mirror. The Shape Data (Custom Properties) window shows us three fields that we can fill out: Number, Title and Notes.
click to view larger image
Once all of the hot spot regions are defined and configured, we simply right-click a blank area on the page and choose “Export” from the menu:
The resulting web-page displays pop-ups when the user rolls the mouse over the previously specified regions. The Hot Spot shapes do not show in the html page, but the numbers do. In the screenshot below, the user has rolled over the license-plate hot spot:
Running the Demo
As we said before, the document uses VBA code to get the job done. It doesn’t use Visio’s Save As Web functionality at all, but makes use of Visio’s image exporting capabilities. It also does a bit of math to figure out where the mouse hit-zones are, replaces a few parameters in the otherwise-hard coded html, then spews out an html document. Go ahead and laugh at the html code while you’re perusing the VBA, I’m sure it’s quite poor.
Since the document uses VBA to get the job done, you’ll need to know how to deal with Visio’s macro security. While the document VBA Macro Security will tell you all you need to know, the correct thing to do is this:
- Disallow the macros when you first open the Visio document
- Open the VBA project, examine the code, check that nothing malicious or offensive is present (besides the ugly html code)
- Close the document
- Re-open, and allow and the macros to be enabled
After you’ve dodged the VBA security-bullets, you’ll hit another obstacle: Internet Explorer security. Since the document utilizes javaScript to produce the pop-ups, you’ll see this friendly message at the top of your IE browser window:
Click this little bugger and “Allow Blocked Content…” if you want to see the pop-ups in action. Note, if FireFox is your default browser, you might not see the pop-ups. They didn’t work for me in FireFox, but were just fine in IE.
Limitations of the Demo
The download has a few limitations…well it IS a demo after all…
- The Visio diagram is exported as an single image
- You can’t specify the resolution of this image via code
- Hyperlinks in the diagram will not exist in the web-page, as with the normal Visio Save As Web feature
- When you scroll the browser window, the pop-ups can get off-position with the mouse
Nevertheless, this thing might make a useful little tool for some of you out there. For the developers, well, um, I’m sure there are much better ways to code the html and pop-up features than are shown in this demo. But we think the concept is intriguing, and we hope that this will get your creative-visio-juices flowing as to what could be done with the Visio on the web!
Download CustomizedVisioHTMLExport.zip (335 KB)
Hi there,
I have done something similar, to create an interactive version of the design documentation I create with Visio (screenflows, sitemaps & wireframes). I’m linking the screenflows to the wireframes by using a consistent numbering method, and create on-the-fly imagemaps for the wireframes themselves. It’s really helped to smooth the communication of these documents to the different audiences, as the whole thing becomes much more interactive.
I’m happy to share more of this if you’re interested. The whole thing, which I have called swipr (Screenflows, Wireframes, Interactive PRototype), is available for download under the GPL, so you and everyone else is free to look at it and change it. Check it out at swipr.blogspot.com (the swipr site is down, sorry).
If you’d like more information, please let me know. I’m eager to share!
Jacco
Hey Guy,
this post is really cool. It´s an inspiration for more… I just search for a good possibility to comment my wireframes.
But I´ve one question… I know it´s a little bit stupid, but I don´t know how you make the 3D effect from the red circles. I know how to fill it that way, but how can I move the centre from the white effect???
Nice to hear from you
Lisa
Servus Lisa,
Don’t feel bad about those circles! It’s not easy to get the circular fill to be off-center, like you see in the images above, you have to do some tricks!
I think we will write an article about “off-center radial fill patterns” very soon. You have to use the ShapeSheet a little bit in order to get it to work.
- Chris
Okay, here’s the article about the offset radial fill: http://www.visguy.com/2007/08/30/off-center-radial-fill-effect/
Thank you very much
the descripiton is real strange – how do you find something out
Perhaps I can use it in my daily work,
By Lisa
this is really cool but when ever I try and export I get a system error.
Thoughts?
Hi Wrg,
I think this is because you haven’t enabled the VBA macros. The diagram contains VBA code that makes the export happen. Visio has security measures that prevent macros from running without your permission, to protect you from wackos that might send you documents with deviant code (ie: Not Visio Guy stuff
) Read this post to find out more about macro security:
VBA Macro Security
We really need to get a Digital Certificate for the content we post on this site!
I have a different problem: I created some custom shapes using ShapeStudio but they are not exporting properly to HTML. Specifically, I’m able to create working hyperlinks for the custom shapes but the HTML pages created by the export contain empty image maps like this:
This only happens with the custom shapes for which I defined right-click menu options. For these shapes, the user selects which of several images to display.
I use Visio 2003 Professional. I can’t find anything on this topic anywhere.
Thanks in advance!
Excellent. Really nice I wonder why Microsoft does not have this function by default. Is it it easy to have more than three properies displayed in the pop-up? And is it possible to change the colour of the font and backgroudcoulor for the pop-up window?