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:

1. The user places custom “Hot Spot” shapes on top of the regions of interest in the diagram
2. She fills in some information about the region
3. She right-clicks the Page and chooses “Export” from the menu
4. 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:

1. Disallow the macros when you first open the Visio document
2. Open the VBA project, examine the code, check that nothing malicious or offensive is present (besides the ugly html code)
3. Close the document
4. 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!