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

Anything3D Pano Viewer Pro 2.1 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
2) the <your_pano_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_pano_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 by mail, generated on domain name, received from you. (PARAM name="regkey" value=<your registration code>). Applet will work on your domain and locally. Upload result HTML code to your web server.

Pano Viewer uses equirectangular panoramic images, which may cover up to 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.

Pano Viewer 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.


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

Following parameters is supported by both A3D Pano Viewer and A3D Pano Viewer Pro 2.1 versions.
Parameter / Default value: Description / Example:
file "01.jpg" Path to pano image from(from applet's base URL)
<param name="file" value="01.jpg">
wait "loading.gif" 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 "Sphere" Representation of a panorama in various proections.
<param name="pano" value="Sphere">
<param name="pano" value="Cylinder">
auto "0" Relative rotation speed of a panorama in an automatic mode.
<param name="auto" value="10">
inits Empty Start function. Use apv commands
<param name="inits" value="viewer:showHS();startAutoPan()">
tilt "0" initial representation angle. ( -90 to 90 degrees)
<param name="tilt" value="0">
tiltmin "-90" Minimal inclination angle. (-90 to 0 degrees)
<param name="tiltmin" value="-90">
tiltmax "90" Maximal inclination angle. (90 to 0 degrees)
<param name="tiltmax" value="90">
pan "0" initial rotation angle. (-180 to 180 degrees)
<param name="pan" value="-90">
panmin "-180" Minimal rotation angle. (-180 to 0 degrees)
<param name="panmin" value="-180">
panmax "180" Maximal rotation angle. (0 to -180 degrees)
<param name="panmax" value="180">
fov "75" initial horizontal field of view. (12 to 165 relative units)
<param name="fov" value="65">
fovmin "15" Minimum field of view (12 to 165 relative units)
<param name="fovmin" value="15">
fovmax "165" maximum field of view (12 to 165 relative units)
<param name="fovmax" value="150">
bar_x width/4 the x-coordinate of the upper left point of the progress bar (pixels)
<param name="bar_x" value="50">
bar_y height*3/4 the y-coordinate of the upper left point of the progress bar (pixels)
<param name="bar_y" value="100">
bar_width width/2 the width of the progress bar. (pixels)
<param name="bar_width" value="150">
bar_height "10" he height of the progress bar. (pixels)
<param name="bar_height" value="30">
barcolor "FFFFFF" the color of the progress bar.
<param name="barcolor" value="FF00FF">
bar_show "1" Defines the visibility of progress bar.
0 - Progress bar is visible
1 - Progress bar is not visible
<param name="bar_show" value="1">
panotilt "0" Camera inclination angle while photographing a panorama. (degrees)
<param name="panotilt" value="0">
MouseSen "10" Defines the sensivity of the mouse.
<param name="MouseSen" value="25">

New in version 2.0

Parameter / Default value: Description / Example:
quality "1" Defines the browsing quality.
0 - Low quality always ; 1 - High quality when image is stopped ; 2 - High quality always
<param name="quality" value="1">
panofov "360" Full Panorama field of view (degrees 1 to 360). Use it for partial panoramas.
<param name="panofov" value="360">
cpu_usage "normal" Defines the CPU resource usage at image rotating. ("lowest", "low", "normal", "high")
<param name="cpu_usage" value="normal">
numpano "1" Number of listed panoramas (please see List of panoramas)
<param name="numpano" value="1">

Notes:
- All parameters should be described inside the tag <applet> of your html page with: <param name="ParameterName" value="ParameterValue">
- Value 'file' is the path to the panorama image, it can be absolute or relative to the page where the applet is uploaded.
- For today Spherical and Cylinder are supported. You can also attach additional renders if they realize interface (a3d.imagerender.renders.ImagePanoRender.class).
- Use parameters 'pan', 'tilt', 'fov' to specify initial position of the panorama view.
- Use parameters 'panmax'&'panmin', 'tiltmax'&'tiltmin', 'fovmax'&'fovmin' to set the 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.



HotSpots and SHotSpots:

Hotspots may be used to link other documents to specific points in the panoramic image (so far only for spherical render). Hotspots are set using the 'hotspot' parameter in the APPLET tag.
Shotspots (static hotspot) 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' " >


Documented tags for both static hotspots and dynamic hotspots (for A3D Pano Viewer Pro 2.1 . version only).

NOTE: Follows to remember that x and y coordinates different. Dynamic hotspot (HotSpot) use coordinates from images, but static hotspots (ShotSpot) use coordinates of the view panel.

Tag: Description:
x Absolute x-coordinate of the hotspot location (0...width pixels). Fractional values not allowed.
X Relative x-coordinate (0...100). Fractional values not allowed.
y Absolute y-coordinate of the hotspot location (0...width pixels). Fractional values not allowed.
Y Relative y-coordinate (0...100). Fractional values not allowed.
u'name' The URL of the html-document that linked by hotspot.
Must be enclosed with single quotes (').
Instead of an URL, any of the commands can be specified using the prefix "viewer:"
(e.g : u"viewer:startAutoPan()")
i'name' Name of the image to be displayed when hotspot is activated or command on mouseover action. Image must be gif or jpeg, and will be shown at specified coordinates (x , y). If both image ('i') and mask ('m') is not specified then you make hotspot as transparent area (20x20 pixels).
m'name' The name of the mask-image from 'i' tag or color in hotspot image from 'i' tag which is interpreted as transparent (color must starts with '#', example: m'#ffffff'). It's Makes wrapped image. The places which do not appear and not receive the mouse events must be white.The black area will receive the mouse events. When the mask is specified without image ('i') then you make invisible area that receives the mouse events. Mask-image must be black/white gif or jpeg, and will be shown at specified coordinates (x , y).
l Sets the hotspot transparency. Float number between (0..1) . 0 - Unvisible, 1- Full Visible. (e.g. : l0.5 )
n'name' The name of the hotspot displayed in the browser's status bar if the mouse moves over hotspot.
t'name' The name of target in html-document specified with option u.
q Specifying q (without parameter) makes this hotspot always visible.
NOTE : This hotspot can not be hidden by ToggleHS or ToggleSHS function.
v When the parameter 'q' is not specified then please use v(without parameter) for making this hotspot initially visible.
p Specifying p (without parameter) makes this hotspot popup. The hotspot will be shown when the mouse moves over it.


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 Features

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 pixel coordinates 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 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>'
JavaScript: <applet name>.viewer( <command> );
You can specify several commands shared by ';'.
Following functions is included into both A3D Pano Viewer and A3D Pano Viewer Pro 2.1 versions.

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

Following functions is included into both A3D Pano Viewer and A3D Pano Viewer Pro 2.1 versions.

Function Description:
ZoomIn()
zoomIn()
Zooms the image in once.
ZoomOut()
zoomOut()
Zooms the image out once.
SetDirection(int d)
setDirection(int d)
Sets rotation direction.
Parameter d can be 1 or -1
StartZoomIn()
startZoomIn()
Starts the zooming in.
StartZoomOut()
startZoomOut()
Starts the zooming out.
ZoomStop()
zoomStop()
Stops the zooming.
ToggleQuality()
toggleQuality()
Changes the browsing quality with one point (please see parameter "quality")
SetQuality(int q)
setQuality(int q)
Changes the browsing quality (please see parameter "quality")
0 - Low quality always ; 1 - High quality when image is stopped ; 2 - High quality always
GotoView(panangle, tiltangle, field-of-view)
gotoView(panangle, tiltangle, field-of-view)
Jump to location specified by these. (please see parameters : "pan","tilt","fov").
PanUp()
panUp()
Moves field of view upwards.
PanDown()
panDown ()
Moves field of view downwards
PanLeft()
panLeft()
Moves field of view to the left.
PanRight()
panRigh ()
Moves field of view to the right.
StartAutoPan( pan_inc, tilt_inc, zoom )
startAutoPan( pan_inc, tilt_inc, zoom )
Initiates the 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.
StartAutoPan()
startAutoPan()
Initiates the autopanning with default speed (see parameter "auto").
ReverseAutoPan()
reverseAutoPan()
Reverses the autopanning direction.
StopAutoPan()
stopAutoPan()
Stops the autopanning.
NewPanoFromList(int num)
newPanoFromList(int num)
Loads the panorama that is numbered as 'num' into the panoramas list. (see parameter "numpano").
NextPano()
nextPano()
Loads next panorama from panoramas list.
PrevPano()
prevPano()
Loads previous panorama from panoramas list.


Following functions is included into A3D Pano Viewer Pro 2.1 . version only.

Function Description:
ShowHS()
showHS()
Displays all markers or images at dynamic hotspot locations
HideHS()
hideHS()
Hides all markers or images at dynamic hotspot locations
ToggleHS()
toggleHS()
Hides all dynamic Hotspots if currently displayed, or displays them if currently hidden.
NOTE : This function can not change Hotspot state if it have property 'q' (always visible)
ToggleHSImage(int num)
toggleHSImage(int num)
Hides dynamic Hotspot specified by "num" parameter if it currently is displayed, or displays them if it currently is hidden.
NOTE : This function can not change Hotspot state if it have property 'q' (always visible)
HideHSImage(int num)
hideHSImage(int num)
Hides dynamic Hotspot specified by 'num' parameter.
DrawHSImage(int num)
drawHSImage(int num)
Displays dynamic Hotspot specified by 'num' parameter.
ShowSHS()
showSHS(
Displays all markers or images at static hotspot locations.
HideSHS()
hideSHS()
Hides all markers or images at static hotspot locations
ToggleSHS()
toggleSHS()
Hides all static Hotspots if currently displayed, or displays them if currently hidden.
NOTE : This function can not change Hotspot state if it have property 'q' (always visible)
ToggleSHSImage(int num)
toggleSHSImage(int num)
Hides static Hotspot specified by 'num' parameter if it currently is displayed, or displays them if it currently is hidden.
NOTE : This function can not change Hotspot state if it have property 'q' (always visible)
HideSHSImage(int num)
hideSHSImage(int num)
Hides static Hotspot specified by 'num' parameter.
DrawSHSImage(int num)
drawSHSImage(int num)
Displays static Hotspot specified by 'num' parameter.

Web Publishing

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.
Multi Pano Tour




© 2000-2004 All Rights Reserved.