<picmenu2>
   xmlFile=myPics.xml
</picmenu2>

Tags and attributes used in plugin XML file:

In <picmenu2> tag: Here you can specify menu attributes as size, position, colors...
size	size="5"	menu size, if set to "max" as many images as possible
	or	will be shown, default=6, see below
	size="6:10"	show 6 images, but 10 in fullscreen mode
orientation	orientation="V"	H=horizontal, V=vertical, default=H
salign	salign="BL"	relative position T(op),M(iddle),B(ottom) and
		L(eft),C(enter),R(ight) default=TL
offsetX	offsetX="10"	horizontal distance from alignment point
offsetY	offsetY="-10"	vertical distance from alignment point
scale	scale="0.75"	plugin scale
alpha	alpha="0.60"	menu transparency - no fade in/out
	or
	alpha=0.50:600:1000	menu transparency with fade in/out times (ms)
bgColor	bgColor="#CFCFC0"	menu background color, default=transparent
frameColor	frameColor="#000000"	menu frame color, default=no frame
spacing	spacing="8"	spacing between thumbnails
showAtStart	showAtStart="1"	1: menu will be visible at startup, default=0
menuHide	menuHide="auto"	manual: menu is not hidden when thumbnail clicked - default
		auto: menu is hidden after a thumbnail has been clicked
hideDirection	hideDirection="left"	direction in which the menu will be hidden, see below
clickSelected	clickSelected="1"	0=clicking a selected thumbnail is ignored (default)
		1=selected thumbnail can be clicked again
clickDelay	clickDelay="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)
size	size="18"	internal arrow height (horizontal menu) or width (vertical menu),
		default=15
color	color="#FFFFFF"	internal arrow color, default: #FFFFFF
frameColor	frameColor="#000000"	internal arrow frame color, default: no frame
left / up	left="img/left.png"	left or up arrow image url
right / down	down="img/down.png"	right or down arrow image url
scale	scale="0.6"	arrow image scale, default=1
In <tooltip> tag: (use this only if you want to display tooltips)
font	font="Comic Sans MS"	tooltip text font, default: Arial
textSize	textSize="10"	tooltip text font size, default: 10
textColor	textColor="#FF0000"	tooltip text color, default: #000000
bgColor	bgColor="#FFFFFF"	tooltip background color, default: transparent
frameColor	frameColor="#000000"	tooltip frame color, default: no frame
offsetX	offsetX="-25"	horizontal offset from default position
offsetY	offsetY="-55"	vertical offset from default position
In <images> tag: Contains attributes that are valid for all thumbnails
scale	scale="0.6"	thumbnail image scale, default=1
border	border="1"	if set, thumbnails will get a thin black border, default=0
frameWidth	frameWidth="2.5"	width of thumbnail frame, default=3
frameColor	frameColor="#FFFFF0"	color of thumbnail frame, default=menuBgColor-0x808080
mouseFrame	mouseFrame="1"	frames the thumbnail at mouse-over (default 1)
mouseAlpha	mouseAlpha="0"	sets thumbnail alpha to 1 at mouse-over (default 0)
mouseScale	mouseScale="1"	increases thumbnail scale at mouse-over (default 0)
In <image> child tag: You should have one <image> tag for each thumbnail
id	id="p12"	image id (optional), used as reference when using the
		select parameter, default: image sequence nr (1-n)
text	text="Train Station"	tooltip text
url	url="pics/pano8.jpg"	thumbnail url
onClick	onClick="global.goPano2"	thumbnail onClick command
onOver	onOver="pic3.visible=1"	thumbnail onOver command
onOut	onOut="pic3.visible=0"	thumbnail onOut command
selected	selected="1"	thumbnail selected at start

The following parameters can be updated dynamically from FPP:

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:

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: