Home -> VRSmarty plugins page -> vr360.swf
This plugin is completely free for use in any context or connection.
vr360.swf
VRSmarty plugin for showing an object that you can rotate in one 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 parameters are supported:

In VRSmarty xml file:
xmlFilexmlFile='teapot.xml'plugin control XML file, default=vr360.xml



Plugin attributes:set with spot_id.content.name=value
xmlFilexmlFile='myNewMenu.xml'new plugin control XML file
imagePosimagePos='L'set image position immediately to x (without rotating it)
x = F, L, B, R (for Front, Left, Back and Right) or
image number (1 - n)


Plugin methods: call with spot_id.content.name(value)
moveTo(x)moveTo(12)rotate to position x, see below
for x value, see imagePos attribute above
rotate(x)rotate(-36)rotate a number of steps (+ or -), see below



Plugin external xml file:

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="2.0"time to rotate one turn (s), default=3.0
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).

If the scale="..." attribute is used, it will be applied to all images. And when 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 in the direction that the mouse is pressed over the object, and the closer to the edge of the object, the faster it will rotate. There is a quiet zone in the center.

Use the moveTo() method for rotating the object to a certain position, and specify either an image number or a direction (F, L B or R). If you want your object to rotate constantly, a certain number of steps or while a button is pressed, use the rotate() method. By using a very large number as argument, the object will keep spinning for a very long time, and rotate(0) will stop the rotation.

If you find your object 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="2.0"
   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: