Online Virtual Tours

One Click Is Enough To Create An Online Virtual Tour

The Online Virtual Tour Creator supports several image formats and lets you create Virtual Tours from the scratch in just two clicks:

  • A click from your camera to capture 360 degree around in a single exposure.


  • A click from your mouse to transform the picture into an Interactive Virtual Tour.


With your own camera and free.



 

Parabolic Mirrors


Contact Information
contacto

360 Facil

Barcelona, España

Buenos Aires, Argentina

Santiago, Chile

Contact Us

E-Mail : info@360facil.com


Retractable Parabolic Mirror


Forum

Find An Answer To Your Enquiry Entering The Forum


This is the place to ask for data you didn't find elsewhere and also a good spot to help others with your knowledge :


 

Newsletter
Subscribe To Our Newsletter

To be notified of major updates to our site and/or other related info please type in your email adress :




 

Recommended

A Minimal Investment To Update Your Online Real Estate Agency

Offer more and better services to your clients by showing your Real Estate Portfolio in 360 degree Virtual Tours. Nothing is more alike to actually being in the place and you can do it yourself with the same ease as you do it with traditional pictures.
Read more...



The Ideal Complement To Any Website

Every Webmaster can notoriously improve his/her services by adding to them interactive Virtual Tours that he/she can do with his/her own equipment and in as little as two clicks.
Read more...



The Freeware Programs That Will Do All The Job

Depending on the panorama type, the combination of this four free programs, three, two, one or even none of them is all the multimedi photographer needs to complete his/her work.
Read more...


Renovated Online Virtual Tour Creator : improved design, Facebook comments box for each Virtual Tour, internal engine optimized for greater speed, compatibility with more browsers and increased security.


Interactive Java Panorama Publising



On this page we'll explain in detail how to publish an interactive panorama based on Java with complete management of all the variables. The Virtual Tour is created in a local drive without the need of an Internet connection to work and, once created, it can be distributed in cds, pen drives or similar media, or hosted on a server to be accesible through the web.


When we say the publishing is based on Java we mean that the program, code o instruction which allows the animation and interaction with the Virtual Tour does not contain in itself all the necessary instructions but part of them need to be previously installed on the computer from where we want the animation to be accessed from.

Warning : the pages derived from this one require installed to work properly.

A great majority of the world's existing computers have already installed this program and as for those where it is not, it is possible to download and install it quickly and without the need to restart the machine. A great part of the interactive contents existing on the Internet use Java without you noticing.

Out of the many panorama viewers based on Java, we choose for this implementation PTViewer, an excellent and free program by Helmut Dersch improved by Fulvio Senore, whose version is the one we use. This is one of Internet's most widely used panorama viewers since Years ago. The codes written by Helmut Dersch include, besides the ability to display panoramic pictures, a great number of features including the creation of panoramas and projection conversions. Some commercial programs such as PT-Gui are based on this german professor's program.



PTViewer's Basic Customization


The basic implementation of PTViewer is very simple with only four elements needed :




Click here to download the four elements togheter and uncompress the file to an empty folder as shown above. We'll call this folder Java. Alternatively you can choose to download each element apart and save each one of them with the name indicated on the link :


ptviewer.jar

ptviewer.class

panorama_cilindrico.jpg

pagina.htm


The ptviewer.jar file is a colection of instructions, including the one that allows al the movement, interaction between the user and the panorama and the apparent changes in the image such as perspective alterations when the mouse's cursor moves up or down.

The ptviewer.class file is the precise instruction used for the features described in the previous paragraph. Some browsers are not configured to open files of .jar format and in these cases, to have the .class referenced at can be useful for the Virtual Tour to still be executed.

The image file panorama_cilindrico.jpg :




The pagina.htm file which is the webpage contains in its code references to the three files above. We'll work as always with this file opened simultaneously by two programs : a browser and a text editor. While the browser shows us the page, the text editor shows us its code :





The code below inserts the applet element into a blank page :



<html>
<head>
<title>Panorama Cilindrico De 360 Grados Interactivo Offline En Java</title>
</head>
<body bgcolor="#ffffff" >
<applet height="350" width="360" archive="ptviewer.jar" code="ptviewer.class" align="center" vspace="0" hspace="0">
<param name="file" value="panorama_cilindrico.jpg">
<param name="fov" value="60">
<param name="auto" value="0.1">
</applet>
</body>
</html>


As it can be seen, he have highlighted in red color the references included in the webpage to the external files. It is enough to have these four elements in a single folder for the Virtual Tour included in the pagina.htm file to work. Alternatively it is possible to place the files in folders or even in different domains, as far as the references in the code contain the actual location of all of them.



applet is the Java element which inserted into a webpage executes in this place a sub-program, in our case, an interactive Virtual Tour.

height is the height in pixels of the panorama viewer inserted into the webpage.

width is the width in pixels of the panorama viewer inserted into the webpage.

archive is the file that contains among other instructions the one that allows the animation and interaction over the panoramic photograph as a Virtual Tour, in this case the ptviewer.jar file.

code is the precise instruction which allows the features described in the previous paragraph and which is contained in the .jar file.

align is the horizontal aligning of the Virtual Tour viewer.

vspace is the vertical space that separates the panorama viewer from the element which preceeds it and from the element which is located after it.

hspace is the horizontal space that separates the panorama viewer from the elements which surround it from both sides.

file points at the image file name.

fov is the initial vertical angle of view of the interactive Virtual Tour measured in degree.

auto is the automatic Virtual Tour's rotation speed when it starts playing.



After editing the code in the text editor and saving the changes we'll go to the browser to see the updated page containing a Virtual Tour From A Cylindrical Panorama.




Viewer Configuration For Other Types Of Panorama


Spherical Panorama



Click on the image to download it and save it as panorama_esferico.jpg in the Java folder. To create a Virtual Tour from this image we'll open the pagina.htm file with a text editor and change the code line that contains the reference to the image file :



<html>
<head>
<title>Panorama Esferico De 360 Grados Interactivo Offline En Java</title>
</head>
<body bgcolor="#ffffff" >
<applet height="350" width="360" archive="ptviewer.jar" code="ptviewer.class" align="center" vspace="0" hspace="0">
<param name="file" value="panorama_esferico.jpg">
<param name="fov" value="60">
<param name="auto" value="0.1">
</applet>
</body>
</html>


After editing the code in the text editor and saving the changes we'll go to the browser to se the updated page that contains a Virtual Tour From A Spherical Panorama.


Partial Panorama



Click on the image to download it and save it as panorama_parcial.jpg in the Java folder. To create an interactive Virtual Tour from this image we'll open the pagina.htm file with a text editor and change the code line that contains the reference to the image file, on top of adding new necessary parameters to modify the projection type :



mayscript must be added togheter with a value of true to allow the ability to permit to edit through scripts the applet code.

pwidth is the total width in pixels of a 360 degree ideal panorama that would complement the partial panorama up to complete the entire horizontal turn. If we don't know this figure it will be necessary to guess it.





pheight is the height in pixels of the partial panorama.

roi0 is the region of interest within the entire ideal panorama and spans only the visible part of the partial panorama. As a value it adds, besides the reference to the image file, the distances x and y measured in pixles from the upper left corner of the ideal spherical panorama to the upper left corner of the real partial panorama.

panmin is the maximum panning value in degree from the center of the partial panorama to the left.

panmax is the maximum panning value in degree from the center of the partial panorama to the right.

tiltmin is the maximum panning value in degree from the center of the partial panorama to the top.

tiltmax is the maximum panning value in degree from the center of the partial panorama to the bottom.



With the data corresponding to the downloaded image we can edit our page's code :



<html>
<head>
<title>Panorama Parcial Interactivo Offline En Java</title>
</head>
<body bgcolor="#ffffff" >
<applet height="350" width="360" archive="ptviewer.jar" code="ptviewer.class" align="center" vspace="0" hspace="0" mayscript="true">
<param name="pwidth" value="4000">
<param name="pheight" value="1060">
<param name="file" value="panorama_parcial.jpg">
<param name="roi0" value="i'panorama_parcial.jpg' x500 y0">
<param name="panmin" value="-134">
<param name="panmax" value="134">
<param name="tiltmax" value="49">
<param name="tiltmin" value="-49">
<param name="fov" value="60">
<param name="auto" value="0.1">
</applet>
</body>
</html>


After editing the code in the text editor and saving the changes we'll go to the browser to see the updated page that contains the Virtual Tour From A Partial Panorama.




How To Avoid The Warning Alert Displayed By Some Internet Explorer Versions


When accesing a page that contains a Java based Virtual Tour from certain versions of Internet Explorer, the browser stops the execution of the active content and show a warning alert that requires the user to confirm his/her conformity with the execution. Ths is inconvenient not only because of the delay that it means but also because many users may distrust the contents and simply forget about their intentions of activating the Virtual Tour.





To make sure this warning is not shown we can use a script such as ClickFix.js. Click to download the file and save it with the same name as shown in the link in the Java folder. You can also choose another location but if you do so don't forget to change the reference to the file in the code of the page we'll create below :


ClickFix.js


Keep in mind that browsers other than Internet Explorer may not recognize at all a page with the code that implements ClickFix, making it not to work. The solution is to duplicate the page, creating a version for Internet Explorer and another one for all other browsers, adding as well a third page -indeed, the first one- that detects which is the browser from where the site is being accessed and based on this information redirect the user to the most adequated version of the Virtual Tour's page :



The main page recognizes the browser from where it is being accessed and silently redirects to any of the other two. The code of this main page, which we'll call index.htm, could be as follows :



<html>
<head>
<title>Redireccionar Segun Navegador</title>
<script languaje='javascript' type='text/javascript'>
if (navigator.appName=="Microsoft Internet Explorer")
{window.location = "explorer.htm";}
else
window.location = "browsers.htm";
</script>
</head>
</html>


Warning : This code does not work locally but only if the page is hosted on a server. If the browser that accesses the index.htm page is Internet Explorer, the user is immediately and imperceptibly redirected to the explorer.htm page. Otherwise, the redirection goes towards the browsers.htm (navegadores) page.


As we have seen at the beggining, the file destined to browser without distinction which we'll call browsers.htm (navegadores) can contain a code as follows :



<html>
<head>
<title>Panorama Cilindrico De 360 Grados Interactivo Offline En Java</title>
</head>
<body bgcolor="#ffffff" >
<applet height="350" width="360" archive="ptviewer.jar" code="ptviewer.class" align="center" vspace="0" hspace="0">
<param name="file" value="panorama_cilindrico.jpg">
<param name="fov" value="60">
<param name="auto" value="0.1">
</applet>
<p>You are seing this page in a browser which is not Internet Explorer</p>
</body>
</html>


Click to see the Page Destined To Browsers Different From Internet Explorer. Remeber that this page works in any browser but in certain versions of Internet Explorer its execution is stopped to show the warning alert.


The equivalent code for a page destined to Internet Explorer explorer.htm should be like this :



<html>
<head>
<title>Panorama Cilindrico De 360 Grados Interactivo Offline En Java</title>
</head>
<body bgcolor="#ffffff" >
<!--[if gte IE 6]><script language="javascript">document.write("<noscript class=clickfix><object style=\"display:none\">"); </script> <!--<![endif]-->
<applet height="350" width="360" archive="ptviewer.jar" code="ptviewer.class" align="center" vspace="0" hspace="0">
<param name="file" value="panorama_cilindrico.jpg">
<param name="fov" value="60">
<param name="auto" value="0.1">
</applet>
<!--[if gte IE 6]></object></noscript><!--<![endif]-->
<p>You are seing this page in Internet Explorer</p>
<script language="JScript" type="text/jscript" src="ClickFix.js"></script>
</body>
</html>


Click to see the Page Destined To Internet Explorer. Remember that this page works in Internet Explorer, avoiding the warning alert previous to its activation, but it could not work in other browsers.

Finally, independently from the browser you are using, click on the link for the index.htm file to detect your browser and automatically redirects you to the Page Corresponding To Your Browser.



Configure Aditional Parameters



Parameters For The Original Helmut Dersch's Version Of PTViewer 2.5



Besides the parameters mentioned so far, pt-viewer recognizes a great number of parameters which allow for a much deeper customization of the immersive experience. The following are the main elements accepted as aditional parameters within the <applet> tag :



tilt is a vertical displacement angle when loading the panorama. The default value is zero.

pan is an horizontal displacement angle when loading the panorama. The default value is zero.

fovmin is the minimum vertical view angle that can be reached. The default value is 12 degree.

fovmax is the maximum vertical view angle that can be reached. The default value is 165 degree.

wait is a reference to an image file that can be shown while the panorama is loading.

waittime is the minimum time for the image mentioned in the previous paragraph to be shown.

hotspot0,1,2... and shotspot0,1,2... are static and dynamic links that are shown within the interactive panorama.

frame is an image that can be inserted floating in front of the interactive panorama.

mousehs makes it possible for a function created by the programmer be executed each time the mouse's cursor enters a defined area of the panoramic image.

bar_x is the x coordinate of the upper left corner of the applet's loading bar.

bar_y is the y coordinate of the upper left corner of the applet's loading bar.

bar_width is the width of the applet's loading bar.

bar_height is the height of the applet's loading bar.

barcolor is the color of the applet's loading bar. The default color is grey.

view_width is the width of the panorama viewer, which can or cannot match the applet's width.

view_height is the height of the panorama viewer.

view_x is the x coordinate of the upper left corner of the panorama viewer within the applet.

view_y is the y coordinate of the upper left corner of the panorama viewer within the applet.

pano0,1,2,3 is the list of panoramas to be loaded for internal functions of the applet.

bgcolor is the applet's background color expressed in hexa numbers.

hsimage is a reference to an image file to be displayed showing every hotspot or link inside the interactive panorama.

sound0, sound1, sound2,... are references to sound files to be used by the applet.

quality determines the image extrapolation type to be used for the anmation of the panorama while it remains either static or moving, existing optimized options for quality and for speed.

inits is used to execute internal pt-viewer's or external javascript's commands each time the applet is loaded.



Besides this parameters defined within the <applet> tag, pt-viewer can also be configured with other parameters placed into <param> individual tags including each one the name of the parameter and a value for it :



applet0, applet1,... are applets to be loaded inside pt-viewer such as videos, interactive objects, etc.

preload is a list of images that keep loading in the background while the interactive panorama is executing, so that when the times comes to load a new image to the viewer, this has already been downloaded from the Internet and is ready to be used at a temporary files folder.

cache allows to enable or disable the loading of an applet to the clipboard.

cursor let us choose the image to show when the mouse's cursor moves over the applet.

loadAllRoi allows to enable or disable loading all images bound to regions of interest at the initial Virtual Tour's load.

grid_bgcolor allows to choose the background color for a grid which shows while the panoramic image is being loaded in case we choose the partitioned load.

grid_fgcolor allows to choose the color of the lines belonging to the grid that shows while the panoramic image is being loaded in case we choose for the partitioned load.

mass adds inertia to the panorama movement making the beggining of its dragging slower and longer the time needed for its complete detention.



To know in depht these and other alternatives visit the presentation page of PTViewer .




Aditional Parameters For Fulvio Senore's Version PTViewer 2.8



showToolbar allows to choose to show/hide an internal toolbar consisting of three tools : zoom in, zoom out and show/hide hotspots in the panorama. The default value is hide the tool bar.

toolbarDescr_x defines in an integer the x coordinate from which in the internal toolbar will be shown a description of the links when the mouse's cursor passes over them.

toolbarDescr_color defines in hexa numbers the color for the description in the previous paragraph. The default color is black.

toolbarImage is a reference to an image file used to customize the look of the applet's internal toolbar.

imgLoadFeedback serves to stop the applet from showing both the loading bar and the percentage of information already downloaded at loading time. By default these elements are shown.

toolbarBoldText allows to add weight to the font in which the descriptions are shown in the internal toolbar. The default value is normal weight.

hsEnableVisibleOnly and shsEnableVisibleOnly enable and disable static and dynamic anchors inside the interactive panorama while these are in invisible state.

hsShowDescrInStatusBar serves to enable and disable showing the panorama's internal anchor's target in the browser's toolbar. These are shown by default.

popup_panning allows the anchors inserted into the interactive panorama to get lifted when the mouse's cursor moves over them. The default value for this parameter is disabled.

shsStopAutoPanOnClick allows to set that the automatic panning does not stop after clicking on the applet. The default value is that its stops.

mouseSensitivity defines a sensibility degree for the mouse's movement which reflects in the Virtual Tour's panning being faster or slower.

mouseQ6Threshold defines a value for the mouse's necessary movement to change the interpolation mode for the panorama when it is manually moved.

mousePanTime serves to define a maximum time for an entire panning cycle, so that it keeps an inexperienced user from dragging the mouse too fast creating a confusing effect.

autoTime defines in seconds the total time necessary for the automatic panning movement of a Virtual Tour to complete an entire 360 degree rotation.

startAutoPan( pan_inc, tilt_inc, zoom, autoTime ) allows to load at once several values for the beggining of the automatic rotation on loading the applet.

autoNumTurns permits to limit the number of automatic panning turns before it stops. This parameter accepts decimal numbers.

outOfMemoryURL allows to open a URL in case an error happens because of lack of memory at the time of loading the Virtual Tour.

horizonPosition is a percentage value that allows to define the precise location of the horizon line, correcting the deformations produced in case this is not in the center of the image. The default value is 50.

statusMessage permits to show a message in the status bar when the mouse moves or keys are pressed. Mozilla Firefox does not support this command.



To know in more depth these and other options visit the Official PTViewer 2.8 Reference .




Visitor's Feedback


Add A Question Or Comment


All fields are optional. Messages not regarding the subject may be moderated.


Write 123 here (anti-spam check)

Send me a reminder of this publication.






If you like 360 Facil please share it with your social networks

  


With any camera


360 Degree Interactive Panoramas
In Three Easy Steps



After reading this tutorial you'll be able to create your first 360 degree interactive photography with the camera you already have :

1 - Photograph
1 - Fotografiar

Take one or more pictures of the place you want to show.

2 - Edit
2 - Editar

Convert your pictures into 360 degree panoramas.

3 - Publish
3 - Publicar

Make your panoramas interactive and available to the world on the internet.

Start Tutorial

If a picture is worth a thousand words, a 360 degree interactive panorama is worth a thousand pictures...

Recommended...!!!


Online Virtual Tour Creator



Using the online virtual tour creator you can :


Convert your 360 degree pictures to virtual tours with a single click.


Insert your virtual tours into web sites, emails, blogs or wherever you like by just copying and pasting a text.


Know in a practical way all kinds of 360 degree pictures.


Discover that you can create hundreds of interactive virtual tours just as easily as you take pictures with your camera.


Check that with just one click from your camera and another click from your mouse it is possible to create a 360 degree interactive virtual tour out of nothing. And completely free of charge!!!


You can get started right now, even if you don't have a camera



Create Virtual Tour Now



Find us in Facebook and thank you for your Like.