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