Topic on Extension talk:ImageMap

Jump to navigation Jump to search

Visio to MediaWiki Image Maps

Ian Glossop (talkcontribs)

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,, to filter it down to the Mediawiki format:

#!/usr/bin/perl # # # *nix CLI Usage: < {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,

#!/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="" export Version_no='UNDEFINED' args=$# while getopts ":h:v" opt; do case $opt in h) echo "Usage: [-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: [-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: [-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.

קיפודנחש (talkcontribs)

note that "imagemap" is not a mediawiki thing, it's a very old (and scarcely used) feature of HTML, since very early version of the standard (according to , it's available since html 3.2, so 1997 - years before wikipedia and media wiki).

i would recommend googling "visio to html image map" - cursory search yielded , but i didn't really read it very carefully and not sure how much it helps. other search results may yield better/more suitable answers.

peace. (talkcontribs)

Hello Peace,

Yes did the Googling - of course - and was aware of the chuvash article - and what Visio can do and the history of the imagemap concept [I was a web user before most browsers could handle imagemaps and invoked external programs]. But it isn't what I want to do - and Visio loads up the HTML with all sorts of unnecessary "garbage" that is nothing to do with presenting diagrammatic information (but just "programmer twaddle"). It is far from "clean".

What I'm after is clickable, hyperlinked diagrams in mediawiki - without the authors having to learn HTML (or get anywhere near any form of programming).

קיפודנחש (talkcontribs)

so, User:Dapete, who is an editor of dewiki created a _manual_ tool to generate imagemaps. we (i.e., hewiki), load this tool so it's available for everyone. you can load it for yourself by calling something like:

	if ( mw.config.get( 'wgNamespaceNumber' ) === 6 ) {
		try {
			mw.loader.load( '//' );
		catch( e ) {
		} // surround with try/catch in case other server behaves badly.

this will create a small "imageMapEdit" clickable linkette to appear under the image in the "File" namespace, which puts you in a little "imagemap editor".

however, this is not what you asked for in your original question: you asked about something to convert visio images to imagemaps. for this, the conversion tool i mentioned earlier seems like the right answer.

the user is not required to know anything about HTML, but they _are_ required to be able to use wikitext.

using wikitext, they can then create an "imagemap" tag, and feed it the output of the conversion tool.



Reply to "Visio to MediaWiki Image Maps"