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

Tags and attributes used in plugin XML file:

In <picMenu> tag: Here you can specify menu attributes as size, position, colors...
size	size="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
salign	salign="BL"	relative position T(op),M(iddle),B(ottom) and
		L(eft),C(enter),R(ight) default=TL
margin	margin="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%)
alpha	alpha="0.60"	menu transparency
visible	visible="0"	0 or 1, any other value toggles menu visibility
scrollBar	scrollBar="0"	show scrollbar (default 1)
bgColor	bgColor="#CFCFC0"	menu background color, default=not visible
frameColor	frameColor="#000000"	menu frame color, default=not visible
showAtStart	showAtStart="1"	Setting this parameter to 1 will show menu expanded at startup, default 0
menuHide	menuHide="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
In <choiceField> tag: These are attributes for the text box in which the name of the current pano is stored
visible	visible="0"	show field with name of chosen thumbnail (default 1)
width	width="140"	width of selected text field, default=#160
font	font="Comic Sans MS"	selected text font, default: Arial
textSize	textSize="11"	selected text font size, default: 12
textColor	textColor="#FFFFFF"	selected text font color, default: #FFFFFF
bgColor	bgColor="#FFFFFF"	selected text background color, default: transparent
frameColor	frameColor="#000000"	selected text frame color, default: no frame
text	text="Choose panorama"	initial text if no pano is chosen
In <tooltip> tag: Tooltips attributes (use this only if you want to display thumbnail 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
In <id> tag: Thumbnail id attributes (use this only if you want to display thumbnail id)
font	font="Comic Sans MS"	id text font, default: Arial
textSize	textSize="24"	id font size, default=32
textColor	textColor="#FF0000"	id font color, default=#000000
salign	salign="BC"	id alignment within thumbnail, default=MC
In <images> tag: Contains attributes that are valid for all thumbnails
size	size="100:67"	thumbnail size, default=100:67
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)
showId	showId="1"	show thumbnail id, default=0
showText	showText="tooltip"	specifies how to show thumbnail text; below=below thumbnail,
		tooltip=as tooltip, never=don't show text, default: below
font	font="Comic Sans MS"	thumbnail text font, default=Arial
textSize	textSize="10"	thumbnail text size, default 10
textColor	textColor="#404040"	thumbnail text color, default #FFFFF0
textOnTop	textOnTop="1"	keeps text on top of thumbnail at mouse-over
textVSpace	textVSpace="10"	extra vertical space between thumbnail and text
extraVSpace	extraVSpace="8"	extra vertical space below text, 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 imgSelected parameter
text	text="Train Station"	thumbnail 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").

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:

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.

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: