I wanted to use Visio to create image maps for use in media-wiki for several reasons including:
1) As a long-term Visio user (since before Microsoft acquired the software), it is much faster for me to generate diagrams than using other tools.
2) I know Visio allows you to associate hyperlinks with shapes on the diagram and can automatically produce an imagemap when saved as a Web Page - and can save the web page images as PNG files as well as SVGs (or others)
3) I didn't want to spend hours either learning a new tool or in 'manual editing' of image maps using one of the imagemap editing tools out there.
Of course the Visio "Web Page" imagemap format has only vague resemblance to the MW imagemap and is buried in a structure of HTML files with lots of "junk" javascript. The tiny useful bit (when you find it) has the following format:
<center> <IMG id="ConvertedImage" SRC="png_1.png" ALT="Page-1" name=RasterImage BORDER="0" USEMAP="#visImageMap"> <MAP NAME="visImageMap"> <AREA shape="POLYGON" tabindex="1" ALT="Strategy / ies" origTitle="Strategy / ies" TITLE="Strategy / ies" HREF="../%5B%5BStrategy%20%5C%20ies%5D%5D" target="_top" COORDS="440,643,415,643,275,643,275,694,415,694,440,694,483,694,483,643,440,643" onmouseover="UpdateTooltip(this,0,23,event)" onfocus="UpdateTooltip(this,0,23,event)" onclick="return OnShapeClick(0,23,event);" onkeyup="OnShapeKey(0,23,event);"> <AREA shape="POLYGON" tabindex="1" ALT="Information" origTitle="Information" TITLE="Information" HREF="../%5B%5BInformation%5D%5D" target="_top" COORDS="286,588,286,639,483,639,483,588,286,588" onmouseover="UpdateTooltip(this,0,22,event)" onfocus="UpdateTooltip(this,0,22,event)" onclick="return OnShapeClick(0,22,event);" onkeyup="OnShapeKey(0,22,event);"> <AREA shape="POLYGON" tabindex="1" ALT="" origTitle="" TITLE="" HREF="../%5B%5BEnterprise%20Strategic%20Context%5D%5D" target="_top" COORDS="87,436,88,456,90,477,94,497,99,517,105,537,113,556,122,574,133,592,145,609,158,625,172,640,187,654,203,667,220,678,237,689,256,698,275,706,294,713,314,718,335,721,355,724,376,724,396,724,417,721,437,718,457,713,477,706,496,698,514,689,532,678,549,667,565,654,580,640,594,625,607,609,618,592,629,574,638,556,646,537,653,517,658,497,661,477,664,456,664,436,664,415,661,395,658,374,653,354,646,335,638,316,629,297,618,280,607,263,594,247,580,232,565,218,549,205,532,193,514,182,496,173,477,165,457,159,437,154,417,150,396,148,376,147,355,148,335,150,314,154,294,159,275,165,256,173,237,182,220,193,203,205,187,218,172,232,158,247,145,263,133,280,122,297,113,316,105,335,99,354,94,374,90,395,88,415,87,436" onmouseover="UpdateTooltip(this,0,2,event)" onfocus="UpdateTooltip(this,0,2,event)" onclick="return OnShapeClick(0,2,event);" onkeyup="OnShapeKey(0,2,event);"> <!----snip ----> <AREA shape="POLYGON" tabindex="1" ALT="" origTitle="" TITLE="" HREF="../%5B%5BEnterprise%20Ecosystem%5D%5D" target="_top" COORDS="0,768,742,768,742,0,0,0,0,768" onmouseover="UpdateTooltip(this,0,3,event)" onfocus="UpdateTooltip(this,0,3,event)" onclick="return OnShapeClick(0,3,event);" onkeyup="OnShapeKey(0,3,event);"> </MAP>
So I wrote the following perl filter script, VisImageMap_to_MWImageMap.pl, to filter it down to the Mediawiki format:
#!/usr/bin/perl # # # *nix CLI Usage: VisImageMap_to_MWImageMap.pl < {Input_Filename} > {Output_Filename} # # The input file is a Visio image map - a html file associated with an image and the # output is a 'wikitext' image map designed to be pasted into a media-wiki page. The input # file is found in the "*_files" folder when the Visio diagram is saved as a web page. # This script assumes that mediawiki style hyperlinks have been associated with the diagram # shapes in the Visio diagram in the usual way - and these will be the 'diagram links' # in the wiki ImageMap. They can, of course, be edited afterwards. # # Todo: the filter doesn't place the correct image filename in the output ImageMap text - but # defaults to "UNDEFINED". It needs to take the filename as a parameter (option) - or take the # output filename (preferably the first so that it can be invked from another script). # # # Requires: perl - in the above location. # # Modification History # ==================== # When Version Who Comment # -------------------------------------------------------------------------------------------- # Feb 2017 1.0 Ian Glossop First version - developed on Qnap / Ubuntu # # -------------------------------------------------------------------------------------------- # # my $img_filename = 'UNDEFINED'; my $img_position = 'center'; my $img_width = '400'; my $img_alt_text = 'UNDEFINED'; my $poly_count = 0; while ( <> ) { #print; /\<IMG id=.ConvertedImage. SRC=.(png_1.png). ALT=.Page-1. name=RasterImage BORDER=.0. USEMAP=.#visImageMap..*\>/ && do { $img_filename = $1; print( "<imagemap>\n" ); }; /\<MAP NAME=.visImageMap.\>/ && do { print( " " ); print( "Image:$img_filename\|" ); print( "$img_position\|" ); print( "$img_width\|" ); print( "alt=$img_alt_text\n" ); }; #/\<AREA shape=.POLYGON. .*\>/ && do { }; #/\<AREA shape=.POLYGON. tabindex=.\d*. ALT=.(.+). origTitle=.(.+). TITLE=.(.+). .*\>/ && do { # }; /\<AREA shape=.POLYGON. tabindex=.\d*. ALT=.(.*). origTitle=.(.*). TITLE=.(.*). HREF=.(.+)%5B%5B(.+)%5D%5D. target=.(.+). COORDS=.(.+). onmouseover=..+. onfocus=..+. .*onclick=.return OnShapeClick\(.+\)\;. onkeyup=.OnShapeKey\(.+\)\;..*\>/ && do { #print; $poly_count++; my $poly_alt_text = $1; my $poly_orig_title = $2; my $poly_title = $3; my $poly_link_local_path = $4; my $poly_hyperlink = $5; my $poly_target_loc = $6; my $poly_coords = $7; $poly_coords =~ s/,/ /g; # Visio uses comma-separated coords, whereas media-wiki uses i # space-separated. Both programs are of course 'wrong' - anyone # who has studied mathematics knows that 2D rectilinear coordinates # come in pairs that are by convention x-coord first, y-coord second # with each pair being comma-separated and lists being space-separated. # Change HTML-encoded spaces back to real spaces $poly_hyperlink =~ s/%20/ /g; $poly_title =~ s/%20/ /g; print( " poly $poly_coords [[$poly_hyperlink|$poly_title]] \n" ); }; /\<\/MAP\>/ && do { print( "</imagemap>\n\n" ); # print( "\n\n\n Found $poly_count polys\n" ); }; }
Then to make life a little easier in getting the images and the maps out of the morass of htm, css and js files that Visio produces, I wrote the following shell script, Convert_Visio_to_Mediawiki_ImageMap.sh:
#!/bin/sh # # Usage - see help (-h) option below. # # This script creates a media-wiki ImageMap (image and wikitext) givin a hyperlinked Visio # diagram saved as a web page with the image format set to PNG. It attaches a version number # to both the wikitext and the corresponding image. The pair of output files - a PNG file # containing the image and a wikitext file containing the wikitext ImageMap are placed # in a corresponding folder defined by the Visio filename appended with the $OP_FOLDER # parameter. # # Requires: (a Bash-like shell accessible as /bin/sh) - as such shells vary so may the # behaviour of this script. It should be rewritten for a standard POSIX (/bin/ksh) shell - # but linux enthusiasts seem to prefer non-standard so Bash is much more common. # Requires also the perl ImgMapFilter - which does the hard work. # # Modification History # ==================== # When Who Version Comment # -------------------------------------------------------------------------------------------- # Feb 2017 Ian Glossop 1.0 First version - quickly 'knocked up'. # -------------------------------------------------------------------------------------------- export input_file='UNDEFINED' export OUTPUT_DIR='UNDEFINED' export OP_FOLDER="_wikimap" export VS_FOLDER="_files" export ImgMapFilterPath="." export ImgMapFilter="VisImageMap_to_MWImageMap.pl" export Version_no='UNDEFINED' args=$# while getopts ":h:v" opt; do case $opt in h) echo "Usage: Convert_Visio_to_Mediawiki_ImageMap.sh [-h] [-v {Version_Number}] {Source_Visio_file}.htm" exit ;; v) Version_no="$2" args=$(($args-2)) shift shift ;; esac done #shift "$((OPTIND-1))" #echo $0 #echo $# input_file="$1" echo "$input_file" if [[ $input_file == "" ]]; then echo "Error - you must specify an input filename" 2>&1 echo "Usage: Convert_Visio_to_Mediawiki_ImageMap.sh [-h] [-v {Version_Number}] {Source_Visio_file}.htm" exit 1 fi if [[ $args > 1 ]]; then echo "Error - this script takes only one parameter: the input filename. If your filename has spaces in it don't forget to put it in quotes." 2>&1 echo "Usage: Convert_Visio_to_Mediawiki_ImageMap.sh [-h] [-v {Version_Number}] {Source_Visio_file}.htm" exit 1 fi file=$(basename $input_file) dir=$(dirname $input_file) folder=$(echo $file | cut -d'.' -f1) extn=$(echo $file | cut -d'.' -f2) vs_folder="$dir/$folder$VS_FOLDER" if [[ ! -e $file || ! -d "$vs_folder" ]]; then echo "Error - the HTML file $file or the folder $vs_folder appears to not exist." 2>&1 exit 1 fi output_dir="$dir/$folder$OP_FOLDER" if [[ ! -d $output_dir ]]; then mkdir $output_dir chmod ugo+rx $output_dir fi for img_file in $(ls $vs_folder/*.png ) do echo "Processing $img_file" img_file_base=$(basename "$img_file" '.png') out_img_file="$output_dir/$img_file_base.$Version_no.png" echo "Copying $img_file" to $out_img_file cp "$img_file" "$out_img_file" out_wiki_file="$output_dir/$img_file_base.$Version_no.wikitext" echo "Filtering $img_file.htm" to "$out_wiki_file" $($ImgMapFilterPath/$ImgMapFilter < "$vs_folder/$img_file_base.htm" > "$out_wiki_file") done
I'm not interested in PHP programming (I'm not a Developer - in any language) - but if anyone wants to convert these scripts into a MediaWiki "ImportVisioImageMap" extension - please feel free.
Regards, Ian.