Home -> FPP plugins page -> picMenu.swf
This plugin is completely free for use in any context or connection.
picMenu.swf
FPP external plugin for displaying a scrolling picture menu.
The menu can be oriented vertically or horizontally.
Each thumbnail can have onClick, onOver and onOut events.

Now also possible to use more than one menu concurrently (see NOTES).
Plugin parameters are read from an external xml file with the default name "picMenu.xml".
If you want to use a different filename you can add these lines to the FPP xml file:
<picMenu>
   xmlFile=myPics.xml
</picMenu>
This parameter can be URL encoded to allow the XML file to be loaded through server side scripts.



Tags and attributes used in plugin XML file:

In <picMenu> tag: Here you can specify menu attributes as size, position, colors...
sizesize="124:500"menu size, default=500:111
size="50%:140"width will be 50% of pano width
size="120:-30"height will be pano height - 30
salignsalign="BL"relative position T(op),M(iddle),B(ottom) and
L(eft),C(enter),R(ight) default=TL
marginmargin="10"margin to pano edge (used with salign=xx), default=10
margin="15:10"horizontal:vertical margin
margin="10:0:270:0"left:top:right:bottom margin (use with width/height 100%)
alphaalpha="0.60"menu transparency
visiblevisible="0"0=hide menu (including the choice field), 1=show menu
scrollBarscrollBar="0"show scrollbar (default 1)
bgColorbgColor="#CFCFC0"menu background color, default=not visible
frameColorframeColor="#000000"menu frame color, default=not visible
showAtStartshowAtStart="1"1: menu will show expanded at startup, default=0
menuHidemenuHide="manual"never: menu always expanded
manual: menu collapsed with arrow button
auto: menu collapsed when thumbnail clicked - default
all: visible will be set to 0 after clicking thumbnail
clickModeclickMode="1"0=clicking a selected thumbnail is ignored (default)
1=selected thumbnail can be clicked again
clickDelayclickDelay="0.5"delay (in seconds) after a thumbnail is clicked before
a new click is accepted - to protect from double-clicks,
(default=3)
In <choiceField> tag: These are attributes for the text box in which the name of the current pano is stored
visiblevisible="0"show field with name of chosen thumbnail (default 1)
widthwidth="140"width of selected text field, default=#160
fontfont="Comic Sans MS"selected text font, default: Arial
textSizetextSize="11"selected text font size, default: 12
textColortextColor="#FFFFFF"selected text font color, default: #FFFFFF
bgColorbgColor="#FFFFFF"selected text background color, default: transparent
frameColorframeColor="#000000"selected text frame color, default: no frame
texttext="Choose panorama"initial text if no pano is chosen
In <tooltip> tag: Tooltips attributes (use this only if you want to display thumbnail tooltips)
fontfont="Comic Sans MS"tooltip text font, default: Arial
textSizetextSize="10"tooltip text font size, default: 10
textColortextColor="#FF0000"tooltip text color, default: #000000
bgColorbgColor="#FFFFFF"tooltip background color, default: transparent
frameColorframeColor="#000000"tooltip frame color, default: no frame
In <id> tag: Thumbnail id attributes (use this only if you want to display thumbnail id)
fontfont="Comic Sans MS"id text font, default: Arial
textSizetextSize="24"id font size, default=32
textColortextColor="#FF0000"id font color, default=#000000
salignsalign="BC"id alignment within thumbnail, default=MC
In <images> tag: Contains attributes that are valid for all thumbnails
sizesize="100:67"thumbnail size, default=100:67
frameWidthframeWidth="2.5"width of thumbnail frame, default=3
frameColorframeColor="#FFFFF0"color of thumbnail frame, default=menuBgColor-0x808080
mouseFramemouseFrame="1"frames the thumbnail at mouse-over (default 1)
mouseAlphamouseAlpha="0"sets thumbnail alpha to 1 at mouse-over (default 0)
mouseScalemouseScale="1"increases thumbnail scale at mouse-over (default 0)
showIdshowId="1"show thumbnail id, default=0
showTextshowText="tooltip"specifies how to show thumbnail text; below=below thumbnail,
tooltip=as tooltip, never=don't show text, default: below
fontfont="Comic Sans MS"thumbnail text font, default=Arial
textSizetextSize="10"thumbnail text size, default 10
textColortextColor="#404040"thumbnail text color, default #FFFFF0
textOnToptextOnTop="1"keeps text on top of thumbnail at mouse-over
textVSpacetextVSpace="10"extra vertical space between thumbnail and text
extraVSpaceextraVSpace="8"extra vertical space below text, default=0
In <image> child tag: You should have one <image> tag for each thumbnail
idid="p12"image id (optional), used as reference when using
the imgSelected parameter
texttext="Train Station"thumbnail text
urlurl="pics/pano8.jpg"thumbnail url
onClickonClick="global.goPano2"thumbnail onClick command
onOveronOver="pic3.visible=1"thumbnail onOver command
onOutonOut="pic3.visible=0"thumbnail onOut command
selectedselected="1"thumbnail selected at start



The following parameters can be updated dynamically from FPP:

xmlFilexmlFile=myconfig2.xmlrebuild menu
sizesize="124:500"menu size, default=500:111
size="50%:140"width will be 50% of pano width
size="120:-30"height will be pano height - 30
salignsalign="BL"relative position T(op),M(iddle),B(ottom) and
L(eft),C(enter),R(ight) default=TL
marginmargin="10"margin to pano edge (used with salign=xx), default=10
margin="15:10"horizontal margin:vertical margin
alphaalpha="0.60"menu transparency
visiblevisible="0"0 or 1, any other value toggles visibility
imgSelectedimgSelected=p5set this thumbnail as selected
collapsecollapse=T0 or 1, anything else will toggle menu state
expandexpand=T0 or 1, anything else will toggle menu state



NOTES:
Remember when setting a plugin parameter from the FPP XML file, that the plugin name must always be written in lower case, ie. "external.picmenu.salign=BL".

Parameter and attribute names are not case sensitive ("bgcolor" is equal to "BGColor").

The menu thumbnails can be oriented horizontally or vertically, depending on the width and height values. So, if menu height is greater than menu width, the thumbnails are stacked vertically.

There are three ways to specify menu width or height:

  1. As a fixed pixel value: size="124:500"
    The menu will keep this size when the pano is resized.
  2. As a percentage: size="50%:140"
    The menu will change size when the pano is resized. In this example the menu will always occupy 50% of the pano width. When the setting is 100%, margins will be deducted from menu width/height.
  3. As a fixed negative value: size="-30:120"
    The menu will change size when the pano is resized. In this example the menu width will be pano width - 30px.

When the menu is centered (horisontally or vertically), left/right or top/bottom margins will be equally wide even if they are set to different values.

Menu scrolling is of course handled by the scrollbar, but can also be done by positioning the mouse near the menu endpoints.

The selected thumbnail is always framed.

Thumbnail texts can contain newline ("\n") codes to make it span over several lines. When using horizontal mode, you have to set the "size" parameter accordingly to make the text fit. And only the first line will be shown in the selected text box.

You can choose whether the thumbnail text is to be shown below thumbnail, in a separate tooltip box or not shown at all. You can also select separately if you want the thumbnail id to be shown over the thumbnail. If no thumbnail id is specified, it will be set to its sequence nr.

As you can't use the &;=| characters in the XML file, you have to encode them as follows:

& as %26
; as %3B
= as %3D
| as %7C
You can also enclose your tag data with <![CDATA[ ... ]]> which makes the xml parser ignore it.

The thumbnail mouseOver effects can be used in any combination.

The imgSelected=xxx parameter can be used at any time to select an image. If a new pano is selected by any other method (the Google map plugin, for example), you can update this parameter from FPP ("external.picmenu.imgSelected=nn") and the plugin will select and scroll to image with id="xxx". If image id is not specified, use image number starting with 1. Setting this parameter will only select the thumbnail - not execute its onClick command.

If you want to make the text under the thumbnail more visible at mouse-over, you can try using one of the textOnTop or textVSpace attributes in the <images> tag.

After clicking a thumbnail there is a 3 seconds delay before further clicks are accepted. Furthermore, if a new pano is being loaded, thumbnail clicks are ignored until loading is complete.



If you want to use more than one menu at the same time, you have to give them different id's:

layer_5 = ../picMenu.swf?menu1
layer_6 = ../picMenu.swf?menu2
...
<menu1>
   xmlFile=my_menu_1.xml
</menu1>
<menu2>
   xmlFile=my_menu_2.xml
</menu2>
					
You can choose any id's you like as long as they are different, and if the xml files have the same
name, you don't need to specify "xmlFile".

The different menus can then be controlled from the FPP xml file like this:
external.menu1.imgSelected=p5
					



Example plugin XML file:

<?xml version = '1.0'?>
<picMenu
   size="138:100%"
   alpha="0.4"
   salign="TL"
   margin="0"
   scrollbar="1"
   bgColor="#CFCFC0"
   frameColor="#000000"
   showAtStart="1"
   menuHide="auto"
>
   <choiceField 
      visible="1"
      width="160"
      font="Comic Sans MS"
      textSize="12"
      textColor="#000080"
      bgColor="#FFFFFF"
      frameColor="#000000"
   />
   <images 
      size="100:67"
      mouseFrame="1" 
      mouseAlpha="0" 
      mouseScale="1" 
      font="Comic Sans MS"
      textSize="10"
      textColor="#404040"
   >
      <image text="The Train Bridge" url="pics/pano3.jpg" onOver="menuH.visible=0" onOut="menuH.visible=1" onClick="global.goBridge()" />
      <image text="The Yacht Club" url="pics/pano6.jpg" onClick="global.goYachts()" />
      <image text="My home" url="pics/pano7.jpg" onClick="global.goHome()" />
      <image text="Where I work" url="pics/pano8.jpg" onClick="global.goWork()" onOver="menuH.visible=0" onOut="menuH.visible=1" />
      <image text="The Train Bridge" url="pics/pano3.jpg" onClick="global.goBridge()" selected="1" />
      <image text="The Yacht Club" url="pics/yachtclub.jpg" onClick="global.goYachts()" />
      <image text="My home" url="pics/home.jpg" onClick="global.goHome()" />
   </images>
</picMenu>
						


Version history:

3.0:
Possible to use more than one menu concurrently. Code ported to Flash Builder.

2.20:
Fixed small bug when checking content of selected="n" attribute in <image> tag.

2.19:
"clickDelay" attribute added for setting delay after thumbnail is clicked, before a new click is accepted.

2.18:
"clickMode" attribute added to enable clicking on a selected thumbnail.

2.17:
menuHide="all" option added - to completely hide the menu after clicking a thumbnail.
Tooltips are now rounded (if tooltip frame or background color is specified).
Clickable scrollbar to make menu scrolling even easier.
Reserving space for left and right margins (if specified) with width=100%.

2.16:
"text" attribute added in <choiceField> tag for setting initial text.

2.15:
Setting plugin alpha will now have immediate effect.

2.14:
Clicking on thumbnails during initial loading is now also ignored.

2.13:
Further clicking on thumbnails should now be ignored until new pano is loaded.

2.12:
Fixed bug when expanding menu after screen size.

2.11:
New defaults in <choiceField> tag: bgColor:transparent, frameColor:no frame.
Support for showing thumbnail text as tooltip.
Support for showing thumbnail id.
New attributes in <images> tag:
showText: specifies how to show thumbnail text.
extraVSpace: for setting extra vertical space below text (vertical mode)

2.10:
Fixed bug when mouseAlpha="1" and thumbnail did not have any text.

2.09:
Modified alpha handling for thumbnail texts (Adobe - grrr!).

2.08:
Added "frameWidth" and "frameColor" attributes in <images> tag to make thumbnail frame appearance more customizable.

2.07:
Added "textOnTop" and "textVSpace" attributes in <images> tag to make thumbnail text more visible at mouse-over.
Added optional "id" attribute in <image> tag for reference in "imgSelected=xxx" command.

2.06:
Fixed a bug so you can now leave out the thumbnail text.
Added a space after the last thumbnail.

2.05:
It is now possible to rebuild the menu from a new XML file with the command: "external.picmenu.xmlfile=...".

2.01:
Fixed a bug when reading thumbnail size from XML file

2.0:
Plugin is now controlled by its own xml file.
OnOver and OnOut events added to each thumbnail.

1.25:
Somewhere along the line the possibility to escape code the image command must have disappeared. This has been corrected.
Handcursor is now used over the images.

1.24:
Parameter "showAtStart" added to make it possible to show the menu expanded at startup, even if parameter "menuHide" is set to "manual" or "auto".

1.23:
Width or height can be expressed as a negative number (example: size=140:-30), which will set the menu size to pano size minus that number. So, when the pano is resized - the menu will also be resized.

1.22:
Modified plugin init code so images don't have to be reloaded when menu is redrawn.

1.21:
Modified scrollbar code for smoother scrolling.
Disables scrolling when all thumbnails are visible.
Fixed scrollbar bug when redrawing menu.

1.20:
Fixed choiceFont bug

1.19:
This code should have been in the 1.18 version, but unfortunately a code mixup happened

1.18:
New parameter "scrollbar" makes it possible to hide the scrollbar.
New parameter "choicefield" makes it possible to hide the name field with the chosen thumbnail.
New parameters "expand" and "collapse" complement the "visible" paramter.
Parameter "size" can now be expressed in percentage of pano size. It is now also supported as a dynamic parameter, which means it can be set at any time.
Parameter "menuBgColor" defaultd to "not visible".
Parameter "menuFrameColor" defaultd to "not visible".
Menu onOver scroll limits and speed modified.

1.17:
The "imgSelected=nn" parameter can now be set at any time.
A delay has been added: After clicking an image, further clicks are discarded for 3 seconds (default - to, set parameter "clickDelay=n.n" seconds).

1.15:
Thumbnail mouseOver effects added.
MouseOver scrolling at menu endpoints modified.

1.11:
Parameter "visible" added.

1.10:
Thumbnail texts can span over several lines.