Visit a Fantastic 3D World with Anything3D, the World's Leading Provider of 3D Imaging and Virtual Tour Solutions

Anything3D Pano Viewer Pro Tutorial

Viewer Documentation

Publish applet to your webpage

Below is the HTML Code to put into your webpage. The items that you will need to modify to suit your panorama are: 1) the height and width in pixels, and 2) the your_panoramic_image should be the filename of your panoramic image file.


Basic HTML Code:


Copy this text and paste it into your html file.

Replace 'your_panoramic_image' with the path and name of your pano image. The java code is contained in the file apv.zip, which has to be placed in the same directory as the html-file, or you may provide a different path in the archive tag. Check image path. For use this applet into your webpage put there the registration code you got my mail, generated on domain name, received from you. < param name="regkey" value= < your registration code > > Applet will work on your domain and locally. Upload to your web server.

Pano Viewer uses equirectangular panoramic images, which must cover 360° horizontally. Vertical coverage may be any value between 0° and 180°. In the equirectangular projection, both horizontal and vertical axis are proportional to the viewing angle.

PTViewer is controlled by the html-file which sets the applet parameters. As a minimum, the size of the viewer window and the name of the image file have to be set.


PanoViewer supports many more commands, which are all set by adding more PARAM-tags inside the APPLET tag. This is a list of options:

Parameters:
Base parameters:
file path to pano image
<param name="file" value="01.jpg">
wait path to splash picture loading. It is in the archive apv1.zip, it can be changed on your logo,exam2
<param name="wait" value="loading.gif">
pano Representation of a panorama in various proections.
<param name="pano" value="Sphere">
<param name="pano" value="Cylinder">
auto Rotation speed of a panorama in an automatic mode.
<param name="auto" value="10">
inits Start function.Use apv commands.
<param name="inits" value="viewer:showHS();startAutoPan()">
Advanced parameters:
tilt initial representation angle.
(-90...90, default 0)
<param name="tilt" value="0">
tiltmin minimal inclination angle.
(-90 to 0, default -90 for spherical)
<param name="tiltmin" value="-90">
tiltmax maximal inclination angle.
90 to 0, default 90 for spherical)
<param name="tiltmax" value="90">
pan initial rotation angle.
(-180...180, default 0)
<param name="pan" value="-90">
panmin minimal rotation angle.
( 0...180, default 180)
<param name="panmin" value="-180">
panmax maximal rotation angle.
(0..-180, default 180)
<param name="panmax" value="180">
fov initial horizontal field of view.
(12...165, default 65)
<param name="fow" value="65">
fovmin minimum field of view
(default 15)
<param name="fowmin" value="15">
fovmax maximum field of view
(default 150)
<param name="fowmax" value="150">
Progress Bar:
bar_x the x-coordinate of the upper left point of the progress bar
(default width/4)
<param name="bar_x" value="50">
bar_y the y-coordinate of the upper left point of the progress bar
(default height*3/4)
<param name="bar_x" value="100">
bar_width the width of the progress bar.
(default width/2)
<param name="bar_width" value="150">
bar_height the height of the progress bar.
(default 10 pixels)
<param name="bar_height" value="30">
barcolor the color of the progress bar.
(default dark gray)
<param name="barcolor" value="FF00FF">
Specific:
panotilt Camera inclination angle while photographing a panorama.
<param name="panotilt" value="0">

All parameters are described inside the teg <applet> of your html page:
<param name="ParameterName" value="ParameterValue">
'file'- the path to the panorama image, it can be absolute or relative to the page where the applet is uploaded.
'pano'-Representation of a panorama in various proections. For today Spherical and Cylinder are supported. You can also attach additional renders if they realize interface a3d.imagerender.renders.ImagePanoRender.class.
With the help of parameters 'pan', 'tilt', 'fov' you can specify initial position of the box of the panorama view.
'panmax' & 'panmin','tiltmax'&'tiltmin', 'fovmax'&'fovmin' are used for setting of limiting positions of preview.


list of panoramas:

<PARAM name="pano1" value=" {file=pano/01.jpg}
    {auto=5}
    {tilt=40}
    {pan=150} ">

A list of panoramas can be defined using the pano0/1/2/3.. tag. This is required for use with the newPanoFromList() function. A panorama description consists of parameter tags similar to paramater tags in html pages. Each parameter tag is placed between braces. It consists of an identifier, followed by the equal sign ('=') followed by the value. The parameters have identical names as the above described tags, and are available except the view-related tags.



Parameters: HotSpots

Possible use hotspot(so far only for spherical render) and static hotspot(shotspot).
Hotspots may be used to link other documents to specific points in the panoramic image. Hotspots are set using the 'hotspot' parameter in the APPLET tag.
Shotspots These are static locations in the applet window which can be used like clickable image maps in html. Hotspots are set using the 'shotspot' parameter in the APPLET tag.
Hotspots and shotspots can are wrapped, transparent and popup.
Shotspots allow to create different skins.see example...
Parameters in hotspot description lines and in other multi-parameter tags consist of an identifier, which is a single character, and its value. Parameters are separated by spaces, or, if they contain spaces, may be quoted by single quotes ('). Example:
<param name=hotspot0 value="x525 y300 n'Room' u'index.html' " >

HotSpot tags:
Tegs for hotspots and shotspots alike, but follows to remember that x and y coordinates different. HotSpot use coordinates from pano images, but shotspot use coordinates of view panel.
x or X tag - the x - coordinate of the hotspotlocation. 0 is left. x - absolute pixelcoordinate (0...width),
X - relative pixelcoordinate (0...100), fractional values not allowed.
y or Y tag - the y - coordinate of the hotspotlocation. 0 is top. y - absolute pixelcoordinate (0...height),
Y - relative pixelcoordinate (0...100), fractional values not allowed.
u'name' - the URL of the linked document relative to the html-document. Must be enclosed with single quotes ('). Instead of an URL, any of the commands can be specified using the prefix "viewer:".
i'name' - name of image to be displayed when hotspot is activated (or command on mouseover action). Must be gif or jpeg, and will be shown x,y coordinates.
m'name' - name of mask for image from 'i' tag or colour in hotspot image from 'i' tag which is interpretted as transparent(color must starts with '#', example: m'#ffffff'). It's Makes wrapped image, places which do not appear must be white. Must be gif or jpeg, and will be shown x,y coordinates.
l - set transparent for hotspot. Float number between (0..1) . 0 - Unvisible, 1- Full Visible.
n'name' - the name of the hotspot displayed in the status line if the mouse moves over it..
t'name' - name of target in html-document specified with option u.
q - Specifying q (without parameter) makes this hotspot visible.
p - Specifying p (without parameter) makes this hotspot popup.
 

Here's an example for hotspots (shotspot):
<PARAM name=hotspot0 value=" x350 y400 q i'image1.jpg' u'viewer:startAutoPan()' ">
<PARAM name=hotspot1 value=" x320 y190 l0.6 i'logo.jpg' u'www.mypage.com' ">
<PARAM name=hotspot2 value=" x680 y300 m'mask.jpg' i'image.jpg' u'viewer:newPanoFromList(2 )' ">
<PARAM name=shotspot0 value=" x0 Y100 q m'#ff0000' i'image.jpg' u'viewer:startAutoPan()' ">
<PARAM name=shotspot1 value=" x120 y190 l0.6 m'image.jpg' i'image.jpg' u'viewer:stopAutoPan()' ">
<PARAM name=shotspot2 value=" x80 y80 u'viewer:ToggleHSImage(0);ToggleHSImage(1);ToggleHSImage(2)' ">

Hotspots can be superimposed, if coordinates x,y have some Hotspots, actions form.



Static HotSpot

These are static locations in the applet window which can be used like clickable image maps in html. The syntax to set these static hotspots is similar to the panorama hotspots. Note that all coordinates are pixelcoordinates in the applet window. Static hotspots are set using the 'shotspotNumber' parameter in the APPLET tag.
Static Hotspots may be stacked like normal hotspots. If one hotspot has identical x,y, a and b coordinates as another hotspot prior in the list, it is assumed to be identical. If this hotspot gets activated by clicking the mouse, or moving the mouse over it, the appropriate actions of both hotspots are executed. Arbitrary many hotspots may be stacked at any position.




APViewer Comands:
These commands can be activated from Hot Spots or javascript functions
HotSpot: u'viewer:<command>' or javascript: <applet name>.viewer( <command> );
You can specify several shared commands ';'.
ZoomIn() Zoom in
ZoomOut() Zoom out
panLeft() Pan 5- to the left
panRight() Pan 5- to the right
panUp() Pan 5- up
panDown() Pan 5- down
gotoView(panangle, tiltangle, field-of-view) jump to location specified by these three angles (degrees, fractional values allowed)
showHS(); show Hotspots, displays markers or images at hotspot locations
hideHS(); hide Hotspots
toggleHS(); hides Hotspots if currently displayed, or displays them if currently hidden
startAutoPan( ) initiate autopanning.
startAutoPan( pan_inc, tilt_inc, zoom ) initiate autopanning. Each successive view's panangle is incremented by pan_inc, its tiltangle is incremented by tilt_inc, and its field of view is multiplied by zoom.
stopAutoPan() Stops autopanning.
newPanoFromList( num ); Load Panorama numbered num into the applet. This panorama must have been previously defined using the panonum tag.
nextPano()
prevPano()
DrawSHSImage( num ); Draw static hotspot image.
HideSHSImage( num ); Hide static hotspot image.
ToggleSHSImage( num ); Toggle visibility of static hotspot image.
DrawHSImage( num ); Draw hotspot image
HideHSImage( num ); Hide hotspot image.
ToggleHSImage( num ); Toggle visibility of hotspot image.
setQuality( num); sets the quality parameter to 0,1,2, or 3.
toggleQuality(); toggle pano quality.
setDirection( int ) // 1/-1

Those function can be used as u-tag in both static and normal hotspots, see the examples for static hotspots above.



Web Publish

Operational code of the Viewer is archived as zip-archive. All pictures, icons and panoramas can be also packed "zip" or "jar" archives and allocated on the site as archives.
In this case do not forget to remember allocation of additional archives in <applet> teg.
<applet>
....
archive="apv.zip,pano/image.zip"
....
</applet>


If there are not enough resources for representation of panoramas (JPG or GIF) the size of images will be reduced.

TUTORIAL
Introduction
First Step: Shooting the pictures
Stitch The Images
Pano Viewer Documentation
EXAMPLES
Example 1.
Basic Pano View
Example 2.
Toolbars
Example 3.
Skins
Example 4.
Hotspot
Example 5.
JavaScript/HTML Control
Example 6.
Pano Tour




© 2000-2002 All Rights Reserved.