carousel.swf
FPP external plugin for displaying a thumbnail carousel menu.
Plugin parameters are read from an external xml file with the default name "carousel.xml".
If you want to use a different filename you can add these lines to the FPP xml file:
And the following parameters can be changed dynamically from FPP ("external.carousel.name=value"):
Tags and attributes used in plugin XML file:
Example of plugin xml file:
NOTES:
Parameter names are not case sensitive ("FrameColor" is equal to framecolor").
Plugin position can only be set relative to pano borders. The margin parameter gives extra space to the pano edge.
Carousel rotation (except for the slow constant rotation, if chosen) is activated by mouse-over. When moving the mouse over the left part, the carousel will rotate counter- clockwise and vice versa. The rotation will be halted when the mouse is in the center part the width of a thumbnail.
The selected thumbnail is always framed.
Thumbnail texts will span over several lines if necessary. They can contain newline ("\n") codes to control the line breaks. Only the first line will be shown in the selected text box.
If you are using the &" characters inside the "command" parameters in the xml file, you have to encode them as follows:
The imgSelected parameter can be used at any time to select a thumbnail. If a new pano is loaded by another method than clicking an image, using the command: "external.carousel.imgSelected=nn" will select the corresponding thumbnail.
Version history:
<carousel> xmlFile=myCarousel.xml </carousel>
And the following parameters can be changed dynamically from FPP ("external.carousel.name=value"):
| radius | radius=25% | carousel radius, in pixels or percentage (default=200) |
| angle | angle=70 | carousel angle in degrees, 0=vertical, 90=horisontal (default=60) |
| visible | visible=0 | 0 or 1, anything else will toggle visibility |
| alpha | alpha=0.50 | carousel transparency |
| expand | expand=T | 0 or 1, anything else will toggle expanding |
| can also be used at startup to set initial status | ||
| collapse | collapse=T | 0 or 1, anything else will toggle collapsing |
| same function as expand, but inverted | ||
| salign | salign=BL | position of selected text field and arrow button |
| T(op),M(iddle),B(ottom) and | ||
| L(eft),C(enter),R(ight) default=TL | ||
| margin | margin=10 | margin to pano edges, default=10 |
| offsetX | offsetX=-120 | Horizontal position offset from center (a negative value moves carousel to the left) |
| offsetY | offsetY=80 | Vertical position offset from center (a negative value moves carousel upwards) |
| or | ||
| margin=15:10 | horizontal margin:vertical margin | |
| imgSelected | imgSelected=4 | thumbnail selected, default=1 |
| spin | spin=T | carousel constant spinning, see <carousel> tag below, any other value will toggle spin on/off |
Tags and attributes used in plugin XML file:
| In <carousel> tag: | ||
| visible | visible="0" | 0 or 1, anything else will toggle visibility |
| radius | radius="25%" | carousel radius, in pixels or percentage (default=200) |
| angle | angle="70" | carousel angle in degrees, 0=vertical, 90=horisontal (default=60) |
| offsetX | offsetX="-120" | Horizontal position offset from center (a negative value moves carousel to the left) |
| offsetY | offsetY="150" | Vertical position offset from center (a negative value moves carousel upwards) |
| alpha | alpha="0.50" | carousel transparency |
| spin | spin="1" | carousel constant spinning: 0=no spin, 1=clockwise spin, -1=anticlockwise spin, default:0 |
| expand | expand="1" | initial carousel status |
| collapse | collapse="1" | initial carousel status |
| same function as expand, but inverted | ||
| onClick | onClick="hide" | behaviour after clicking thumbnail, useful with parameter choiceField=0 |
| In <choiceField> tag: | ||
| visible | visible="0" | show field with name of chosen thumbnail (default 1) |
| 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" | hor margin:vert margin | |
| width | width="140" | width of selected text field, default=#160 |
| font | font="Comic Sans MS" | selected text font |
| textSize | textSize="11" | selected text font size |
| textColor | textColor="#FFFFFF" | selected text font color |
| bgColor | bgColor=#FFFFFF | selected text background color, default=#333333 |
| frameColor | frameColor=#000000 | selected text frame color, default=#FFFFFF |
| In <images> tag: | ||
| size | size="100:67" | thumbnail size, default=100:67 |
| frameColor | frameColor="#8040A0" | selected thumbnail frame color, default=#000000 |
| bgColor | bgColor="#FFFFFF" | selected thumbnail text background color, default=#333333 |
| mouseFrame | mouseFrame="1" | frames the thumbnail at mouseOver (default 1) |
| mouseTextBg | mouseTextBg="0" | show thumbnail text background at mouseOver (default 1) |
| 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 |
| In <image> tag: | ||
| 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 |
Example of plugin xml file:
<?xml version = '1.0'?>
<carousel
radius="30%"
angle="77"
offsetY="75"
spin="clockwise"
collapse="0"
alpha="1"
mouseFrame="0"
mouseTextBg="0"
visible="1"
>
<choiceField
visible="1"
salign="TL"
margin="15"
width="160"
font="Trebuchet MS"
textSize="11"
textColor="#FFFFF0"
bgColor="#404050"
frameColor="#000000"
/>
<images
size="100:67"
bgColor="#404040"
frameColor="#A0A080"
font="Comic Sans MS"
textSize="10"
textColor="#E0E0E0"
>
<image text="The Train Bridge" url="../img/pano3.jpg" onClick="global.goBridge()" onOver="pic2s.visible=1" onOut="pic2s.visible=0" />
<image text="Maria Hill" url="../img/maria.jpg" onClick="global.goMaria()" onOver="pic6s.visible=1" onOut="pic6s.visible=0" />
<image text="City Hall Tower" url="../img/cityhall.jpg" onClick="global.goTower()" onOver="pic5s.visible=1" onOut="pic5s.visible=0" />
<image text="%C5SS bridge" url="../img/ass.jpg" onClick="global.goASS()" onOver="pic7s.visible=1" onOut="pic7s.visible=0" />
<image text="Where I work" url="../img/work.jpg" onClick="global.goWork()" onOver="pic3s.visible=1" onOut="pic3s.visible=0" />
<image text="My home" url="../img/home.jpg" onClick="global.goHome()" onOver="pic1s.visible=1" onOut="pic1s.visible=0" />
<image text="The Yatch Club" url="../img/yatchclub.jpg" onClick="global.goYatchs()" onOver="pic4s.visible=1" onOut="pic4s.visible=0" selected="1" />
<image text="The Train Bridge" url="../img/pano3.jpg" onClick="global.goBridge()" onOver="pic2s.visible=1" onOut="pic2s.visible=0" />
<image text="Maria Hill" url="../img/maria.jpg" onClick="global.goMaria()" onOver="pic6s.visible=1" onOut="pic6s.visible=0" />
<image text="City Hall Tower" url="../img/cityhall.jpg" onClick="global.goTower()" onOver="pic5s.visible=1" onOut="pic5s.visible=0" />
<image text="%C5SS bridge" url="../img/ass.jpg" onClick="global.goASS()" onOver="pic7s.visible=1" onOut="pic7s.visible=0" />
<image text="Where I work" url="../img/work.jpg" onClick="global.goWork()" onOver="pic3s.visible=1" onOut="pic3s.visible=0" />
<image text="My home" url="../img/home.jpg" onClick="global.goHome()" onOver="pic1s.visible=1" onOut="pic1s.visible=0" />
<image text="The Yatch Club" url="../img/yatchclub.jpg" onClick="global.goYatchs()" onOver="pic4s.visible=1" onOut="pic4s.visible=0" />
</images>
</carousel>
NOTES:
Parameter names are not case sensitive ("FrameColor" is equal to framecolor").
Plugin position can only be set relative to pano borders. The margin parameter gives extra space to the pano edge.
Carousel rotation (except for the slow constant rotation, if chosen) is activated by mouse-over. When moving the mouse over the left part, the carousel will rotate counter- clockwise and vice versa. The rotation will be halted when the mouse is in the center part the width of a thumbnail.
The selected thumbnail is always framed.
Thumbnail texts will span over several lines if necessary. They can contain newline ("\n") codes to control the line breaks. Only the first line will be shown in the selected text box.
If you are using the &" characters inside the "command" parameters in the xml file, you have to encode them as follows:
& as %26
" as %22
You can also enclose your tag data with <![CDATA[ ... ]]> which makes the xml parser ignore any
special characters.
" as %22
The imgSelected parameter can be used at any time to select a thumbnail. If a new pano is loaded by another method than clicking an image, using the command: "external.carousel.imgSelected=nn" will select the corresponding thumbnail.
Version history:
2.1.2:
Fixed bug when loading new XML file.
Fixed bug when setting direction of constant rotation. 2.1.1:
When centering a thumbnail at imgSelected=nn, the carousel will fast-spin in the same direction that it is already spinning. 2.1:
Fixed bug when setting image frame color ().
2.0:
Plugin is now controlled by its own xml file.
OnOver and OnOut events added to each thumbnail. 1.07:
Added parameters "offsetX" and "offsetY" to support repositioning of the carousel. 1.06:
Modified formula for calculating plugin position results in a better centered carousel. 1.05:
Plugin mouse-over now changes mouse pointer (from arrow) to handcursor. 1.04:
Added parameter "onClick". Possible values "collapse" or "hide". If you don't want the carousel collapse behaviour after clicking thumbnail, you can set onClick=hide, which will simply hide plugin instead. 1.03:
Fixed bug - no repositioning of selected text field when pano has been resized. 1.02:
Added parameter "clockwise" for controlling constant spin direction. 1.01:
Fixed bug so angle change is directly visible also when auto spinning is off.
Fixed bug when loading new XML file.
Fixed bug when setting direction of constant rotation. 2.1.1:
When centering a thumbnail at imgSelected=nn, the carousel will fast-spin in the same direction that it is already spinning. 2.1:
Fixed bug when setting image frame color (
Plugin is now controlled by its own xml file.
OnOver and OnOut events added to each thumbnail. 1.07:
Added parameters "offsetX" and "offsetY" to support repositioning of the carousel. 1.06:
Modified formula for calculating plugin position results in a better centered carousel. 1.05:
Plugin mouse-over now changes mouse pointer (from arrow) to handcursor. 1.04:
Added parameter "onClick". Possible values "collapse" or "hide". If you don't want the carousel collapse behaviour after clicking thumbnail, you can set onClick=hide, which will simply hide plugin instead. 1.03:
Fixed bug - no repositioning of selected text field when pano has been resized. 1.02:
Added parameter "clockwise" for controlling constant spin direction. 1.01:
Fixed bug so angle change is directly visible also when auto spinning is off.