Extending Visio’s Save As Web zoom functionality

This post is in response to a newsgroup question about how to extend Visio’s Save As Web zoom limits and also, how to set a custom default zoom level as each page loads…

Zoom Range

The standard zoom range is set from 10% to 500%.  If your page size is very large you might find this range a little restrictive and so the following is a description of how to extend this range, both up and down.

The standard zoom range is set within the widgets.htm file in an array called zoomLevels.  An associated set of tick images, in the Pan and Zoom scale, call a JavaScript function and pass in their respective zoom level.  So in order to include the extended zoom, you just need to add some new tick images and modify the array. 

You can see a live example here, where I’ve added four new zoom levels: 5%, 1000%, 2000% and 3000%.  I’ll use this example in the following walkthrough:

Walkthrough 1

1. Open the widgets.htm file that Visio generates in a text editor, such as Notepad, and search for var zoomLevels
2. Modify the array in brackets to include ‘5’ at the beginning and ‘1000, 2000, 3000’ at the end.
3. Scroll up the file a few lines to find the table tag with an id of tabScale and copy the entire <tr> line that includes the ‘Zoom to 500%’ title.
4. Add a new line after the 10% line and paste in your above copy.
5. Add a new line above the 500% line and paste a further three times (with a carriage return after each paste).
6. Return to each of your new lines and amend the href and title attributes of the anchor tag (<a>) and the id and alt attributes of the image tag (<img>) to the respective zoom level.  (Note that the image id must be begin with ‘t’ and be followed by the zoom level as this is processed elsewhere.)
7. Save your file and close.

The above results in an extended zoom, but there are a few other changes to make if you intend to use URL parameters:

1. Open the main.htm page that Visio generates and search for g_ZoomParamValue >= 10 && g_ZoomParamValue <= 500
2. Replace the 10 and 500 limits with 5 and 3000 respectively.

A final point regarding the widgets.htm file (in particular) is be careful with whitespace.  I’ve spent plenty of time in the past editing this file in Visual Studio and then hitting Ctrl+K (Format Document).  This is a tool I use a lot on most other code, but JavaScript can be very sensitive to whitespace so I strongly recommend you avoid this.

Default Zoom

Another zoom-related question is how to set a custom default zoom level for each page.  There are number of ways you could tackle this and my approach is to extend the existing g_ZoomParamValue variable, so that a default zoom can still be overridden by passing in a URL based parameter.

Walkthrough 2

1. Open the main.htm page that Visio generates and search for       gParams['zoom']
2. Add a new line after this and paste in the following single line of code: if (g_ZoomParamValue == undefined) {g_ZoomParamValue = "50"}; (where 50 is your new default zoom level)
3. Save the file and close
4. Open the widgets.htm file and search for t100
5. In the image element you locate change the src attribute to tick-off.gif

The above will set the opening page zoom level to 50% (assuming no zoom URL parameter is used) and will work only on the first page load.  All subsequent pages will default to 100%. 

To ensure other pages take part in the new custom zoom level you need to edit each corresponding vml page.  For example if you have a two page document, you’ll have two files named vml_1.htm and vml_2.htm.  Follow the next walkthrough for each page you wish to take part in the custom default zoom:

1. Open the vml_1.htm file that Visio generates and search for fit();
2. Select this line and replace it with the following code:

if (parent.g_ZoomParamValue != null) {
    parent.viewMgr.PostZoomProcessing = PostZoomProcessing;
    viewMgr.Zoom(parent.g_ZoomParamValue);
}
else {
    fit();
}

Note if you want to have different default zoom levels on a page by page basis you could replace the code in point 2 above with the following:

parent.viewMgr.PostZoomProcessing = PostZoomProcessing;
viewMgr.Zoom(50);