Home -> FPP plugins page -> picmenu2.swf
This plugin is completely free for use in any context or connection.
picmenu2.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.
The plugin reads configuration from external XML file.

This is a newer version of the picMenu plugin. It has menu scroll arrows, scalable images and arrows and can also be scrolled from outside the plugin.
It has no thumbnail texts - only tooltips.

Plugin parameters are read from an external xml file with the default name "picmenu2.xml".
If you want to use a different filename you can add these lines to the FPP xml file:
<picmenu2>
   xmlFile=myPics.xml
</picmenu2>
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 <picmenu2> tag: Here you can specify menu attributes as size, position, colors...
sizesize="5"menu size, if set to "max" as many images as possible
orwill be shown, default=6, see below
size="6:10"show 6 images, but 10 in fullscreen mode
orientationorientation="V"H=horizontal, V=vertical, default=H
salignsalign="BL"relative position T(op),M(iddle),B(ottom) and
L(eft),C(enter),R(ight) default=TL
offsetXoffsetX="10"horizontal distance from alignment point
offsetYoffsetY="-10"vertical distance from alignment point
scalescale="0.75"plugin scale
alphaalpha="0.60"menu transparency - no fade in/out
or
alpha=0.50:600:1000menu transparency with fade in/out times (ms)
bgColorbgColor="#CFCFC0"menu background color, default=transparent
frameColorframeColor="#000000"menu frame color, default=no frame
spacingspacing="8"spacing between thumbnails
showAtStartshowAtStart="1"1: menu will be visible at startup, default=0
menuHidemenuHide="auto"manual: menu is not hidden when thumbnail clicked - default
auto: menu is hidden after a thumbnail has been clicked
hideDirectionhideDirection="left"direction in which the menu will be hidden, see below
clickSelectedclickSelected="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 <arrows> tag: (use this only if you want to display arrows)
sizesize="18"internal arrow height (horizontal menu) or width (vertical menu),
default=15
colorcolor="#FFFFFF"internal arrow color, default: #FFFFFF
frameColorframeColor="#000000"internal arrow frame color, default: no frame
left / upleft="img/left.png"left or up arrow image url
right / downdown="img/down.png"right or down arrow image url
scalescale="0.6"arrow image scale, default=1
In <tooltip> tag: (use this only if you want to display 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
offsetXoffsetX="-25"horizontal offset from default position
offsetYoffsetY="-55"vertical offset from default position
In <images> tag: Contains attributes that are valid for all thumbnails
scalescale="0.6"thumbnail image scale, default=1
borderborder="1"if set, thumbnails will get a thin black border, default=0
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)
In <image> child tag: You should have one <image> tag for each thumbnail
idid="p12"image id (optional), used as reference when using the
select parameter, default: image sequence nr (1-n)
texttext="Train Station"tooltip 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
orientationorientation="V"H=horizontal, V=vertical, default=H
salignsalign="BL"relative position T(op),M(iddle),B(ottom) and
L(eft),C(enter),R(ight) default=TL
offsetXoffsetX="10"horizontal distance from alignment point
offsetYoffsetY="-10"vertical distance from alignment point
scalescale="0.75"plugin scale
alphaalpha="0.60"menu transparency - no fade in/out
or
alpha=0.50:600:1000menu transparency with fade in/out times (ms)
showshow=Tshow menu, 0 or 1 - anything else will toggle visibility
hidehide=1hide menu, 0 or 1 - anything else will toggle visibility
prevprev=1scrolls the menu backwards
nextshow=Tscrolls the menu forwards
selectselect=p5set this thumbnail as selected, menu will be scrolled
 orif thumbnail is not visible
selected



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.picmenu2.select=P4".

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

There are different ways to specify the menu size:

  1. As one fixed number: size="6"
    The menu will always try to show this number of thumbnails. If there is not room for all of them, the plugin will show as many as there is room for.
  2. As two fixed numbers: size="5:8"
    This is the number of thumbnails the plugin will try to show in normal mode and fullscreen mode. As above, the plugin can only show as many as there is room for.
  3. Setting one or both of the values as "max": size="max" or size="max:10"
    The menu will show as many thumbnails as there is room for in that screen mode.

Menu scrolling can be handled by the arrows or from outside the plugin. If no <arrows> tag is specified, no arrows will be shown. You can choose to load your own arrows images or use the internal arrows drawn by the plugin. Then you can select size, color and frame color of the arrows.

When the select=id command is used, the plugin will automatically scroll the menu to show the selected thumbnail.

When there are no more images to show by scrolling, the corresponding arrow will be dimmed.

Hiding the menu will default be done by sliding it off the nearest pano edge. This can be overridden by setting the hideDirection="..." attribute. Valid values are "left", "right", "up", "down" or "none". If hideDirection="none" is used, no sliding will be used and visibility will just be turned off.

The selected thumbnail is always framed, and the thumbnail mouseOver effects can be used in any combination.

If you want the thumbnail text to be shown in a tooltip, you have to include the <tooltip> tag and specify at least one of its attributes.

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 choose to put your data inside a <![CDATA[ ... ]]> tag, as these characters don't have any special meaning inside it.

The select=id parameter can be used at any time to select an image. If a new pano is selected by any other method (for example by the Google map plugin), you can update this parameter from FPP ("external.picmenu2.select=xxx") and the plugin will select and scroll to the image with id="xxx". Images with no id specified in the xml file, will get a generated id which is the same as the number of the image (starting from 1). Using the "select=id" parameter will only select the thumbnail - not execute its onClick command.

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.



Example plugin XML file:

<?xml version = '1.0'?>
<picmenu2
   size="5:8"
   orientation="H"
   salign="BC"
   offsetX="0"
   offsetY="-10"
   alpha="1"
   bgColor="#404050"
   frameColor="#FFFFFF"
   showAtStart="1"
   menuHide="auto"
   hideDirection="left"
   spacing="10"
>
   <arrows
      color="#A0A0FF"
      frameColor="#000000"
      size="30"
      left="img/left11.png"
      right="img/right11.png"
      scale="1"
   />
   <tooltip
      font="Comic Sans MS"
      size="12"
      color="#000000"
      bgColor="#FFFFD0"
      frameColor="#000000"
   />
   <images 
      mouseFrame="1" 
      mouseAlpha="1" 
      mouseScale="1" 
      frameWidth="2"
      frameColor="#FFFFF0"
      scale="1"
   >
      <image id="p1" text="City Hall Tower" url="../picMenu/pics/cityhall.jpg" onClick="global.goTower()" onOver="p1.alpha=1,300" onOut="p1.alpha=0,200" />
      <image id="p2" text="City Hall Yard" url="../picMenu/pics/cityyard.jpg" onClick="global.goYard()" onOver="p2.alpha=1,300" onOut="p2.alpha=0,200" />
      <image id="p3" text="The %C5rsta Bridge" url="../picMenu/pics/pano3.jpg" onClick="global.goArstaBridge()" onOver="p3.alpha=1,300" onOut="p3.alpha=0,200" />
      <image id="p4" text="Maria Hill" url="../picMenu/pics/maria.jpg" onClick="global.goMariaHill()" onOver="p4.alpha=1,300" onOut="p4.alpha=0,200" />
      <image id="p5" text="%C5SS Boat Club" url="../picMenu/pics/ass.jpg" onClick="global.goASS()" onOver="p5.alpha=1,300" onOut="p5.alpha=0,200" />
      <image id="p6" text="The Boat Club" url="../picMenu/pics/yachtclub.jpg" onClick="global.goYachts()" onOver="p6.alpha=1,300" onOut="p6.alpha=0,200" />
      <image id="p7" text="Hammarby Gates" url="../picMenu/pics/hammarbyslussen1.jpg" onClick="global.goGates()" onOver="p7.alpha=1,300" onOut="p7.alpha=0,200" />
      <image id="p8" text="Skanstull Marina" url="../picMenu/pics/arstaviken4.jpg" onClick="global.goSeasons()" onOver="p8.alpha=1,300" onOut="p8.alpha=0,200" />
      <image id="p9" text="The Train Bridge" url="../picMenu/pics/arstaviken7.jpg" onClick="global.goUnderBridge()" onOver="p9.alpha=1,300" onOut="p9.alpha=0,200" selected="1" />
      <image id="p10" text="Small bridge" url="../picMenu/pics/arstaviken8.jpg" onClick="global.goSmallBridge()" onOver="p10.alpha=1,300" onOut="p10.alpha=0,200" />
      <image id="p11" text="Torkel Knutssonsg." url="../picMenu/pics/torkelknutsson.jpg" onClick="global.goTorkel()" onOver="p11.alpha=1,300" onOut="p11.alpha=0,200" />
      <image id="p12" text="Årsta Train Bridge" url="../picMenu/pics/arstabron11.jpg" onClick="global.goArsta11()" onOver="p12.alpha=1,300" onOut="p12.alpha=0,200" />
   </images>
</picmenu2>
						


Version history:

1.1.3:
Fixed bug when using showAtStart="0" attribute.

1.1.2:
Fixed positioning bug when no scrolling arrows are used.

1.1.1:
Fixed bug when number of thumbs are fewer than specified menu width (or height when vertical).
Fixed bug when no thumb is selected initially.

1.1:
Added scale="n" attribute to set plugin scale
Added offsetX="n" and offsetY="n" attributes in <tooltip> tag to set tooltip position
Attributes orientation, offsetX, offsetY, scale and salign can now be dynamically updated.

1.0.5:
Added code to that ignores plugin commands before initialization is complete.

1.0.4:
Menu alpha fade-in/out time should now be specified in alpha="..." attribute.

1.0.3:
Added the "hideDirection="none" option for those who don't want a sliding menu.

1.0.2:
Added hideDirection="..." attribute to control which way the menu slides when hiding it.

1.0.1:
Added border="..." attribute to <images> tag to include a thin black thumbnail border.