Home -> FPP plugins page -> vr360.swf
This plugin is completely free for use in any context or connection.
vr360.swf
FPP hotspot plugin for showing an object that you can rotate in a horizontal plane - either with your own imbedded controls or with ordinary hotspot buttons. The rotation can also be synchronized with panorama panning.

The object is composed of a series of separate images.

The following hotspot attributes are supported in FPP XML file:

xmlfilexmlFile="teapot.xml"plugin control XML file
commandcommand="rotate=-36"rotate a number of steps (+ or -)
command="moveto=x"rotate to position x
x = F, L, B, R (for Front, Left, Back and Right) or
image number (1 - n)
command="pos=x"set image position immediately to x
x as above


In plugin XML file, the following tags and attributes are supported:

In <vr360> tag:
widthwidth="295"only needed if bgColor or frameColor is set
heightheight="245"only needed if bgColor or frameColor is set
roundedrounded="n"frame corner radius, default=0: square
bgColorbgColor="#FFFFFF"background color, default:transparent
frameColorframeColor="#000000"frame color, default:no frame
turnTimeturnTime="2000"time to rotate one turn (ms)
dragModedragMode="1"mouse drag mode, see NOTES
directiondirection="L"L=Left, R=Right, see NOTES
synchPansynchPan="-79"set synchronized pan angle, see NOTES
In <texts> tag:
visiblevisible="1"text visibility
pospos="65:200"text position
fontfont="Trebuchet MS"text font
sizesize="11"text size
colorcolor="#000000"text color
frontfront="vorn"name to use for "front" position
leftleft="links"name to use for "left" position
backback="hinten"name to use for "back" position
rightright="rechts"name to use for "right" position
In <buttons> tag - <left> and <right> child tags:
urlurl="img/arrowL.gif"button image url
pospos="110:165"button position
In <images> tag:
pospos="110:165"position of images
scalescale="0.75"image scale, see NOTES below
 or
scale="30%
   In <image> child tag:
urlurl="img/mac000.jpg"image url
dirdir="R"image direction, see NOTES
selectedselected="1"set "front" or "synch" image,
default is image 1, see NOTES



NOTES:

All tag names must be written in lower case, but attribute names are case independent (bgColor is equal to bgcolor).

The plugin is monitoring the xmlFile="" parameter. Setting this to a new value will make the plugin load and parse the new XML file and build a new object.

If the scale="..." attribute is used, it will be applied to all images. And when the scale is specified as a percentage, the scale factor will be set to make the image height this percentage of the pano height. This of course means that all images will be rescaled when pano size is changed.

With dragMode="0" the rotation will follow the mouse when dragged over the object. With dragMode="1" the object will rotate to the direction that the mouse is pressed over the object, and the nearer the edge of the object, the faster it will rotate. There is a quiet zone in the center.

If you find that the object is rotating in the wrong direction, try setting direction="L". Your images may be numbered in the opposite way.

The synchPan="nnn" parameter is used when you want the image to be rotated in synch with pano panning. The parameter value should be the pan value that corresponds to the first (or selected) image.



Example plugin external XML file:

<?xml version = '1.0'?>
<vr360
   width="295"
   height="245"
   rounded="1"
   bgColor="#FFFFFF"
   frameColor="#000000"
   turnTime="2000"
   dragMode="1"
   direction="L"
>
   <texts 
      visible="1"
      pos="65:200"
      font="Trebuchet MS"
      size="11"
      color="#000000"
      front="front"
      left="left"
      back="back"
      right="right"
   />

   <buttons>
      <left url="img/arrowL.gif" pos="110:165" />
      <right url="img/arrowR.gif" pos="160:165" />
   </buttons>

   <images pos="10:10" >
      <image url="img/mac000.jpg" />
      <image url="img/mac010.jpg" />
      <image url="img/mac020.jpg" />
      <image url="img/mac030.jpg" />
      <image url="img/mac040.jpg" />
      <image url="img/mac050.jpg" />
      <image url="img/mac060.jpg" />
      <image url="img/mac070.jpg" />
      <image url="img/mac080.jpg" />
      <image url="img/mac090.jpg" />
      <image url="img/mac100.jpg" />
      <image url="img/mac110.jpg" />
      <image url="img/mac120.jpg" />
      <image url="img/mac130.jpg" />
      <image url="img/mac140.jpg" />
      <image url="img/mac150.jpg" />
      <image url="img/mac160.jpg" />
      <image url="img/mac170.jpg" />
      <image url="img/mac180.jpg" />
      <image url="img/mac190.jpg" />
      <image url="img/mac200.jpg" />
      <image url="img/mac210.jpg" />
      <image url="img/mac220.jpg" />
      <image url="img/mac230.jpg" />
      <image url="img/mac240.jpg" />
      <image url="img/mac250.jpg" />
      <image url="img/mac260.jpg" />
      <image url="img/mac270.jpg" />
      <image url="img/mac280.jpg" />
      <image url="img/mac290.jpg" />
      <image url="img/mac300.jpg" />
      <image url="img/mac310.jpg" />
      <image url="img/mac320.jpg" />
      <image url="img/mac330.jpg" />
      <image url="img/mac340.jpg" />
      <image url="img/mac350.jpg" />
   </images>
</vr360>
						



Version history:
1.3.2:
Fixed bug when loading images.

1.3.1:
Added image smoothing when scaling.
When specifying image scaling in percent, the size will now be calculated in percent of pano height (not width).

1.3:
Support for image scaling has been added.
Fixed bug when dragMode=1 is used.

1.2:
Reversed direction for synchronized rotation.
Rotation by dragging can now be made beyond the width of the object.

1.1.1:
Fixed a small rounding error with synchronized rotation.

1.1:
"rounded" attribute now used to set frame corner radius.