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 Html 5 Panorama Publising



The latest Html standard allows to create and manipulate interactive contents such as Virtual Tours which until the previous version of the language would have been impossible to run, and which work without the need of plugins in all operating systems and all browsers, being even compatible with tablets and cell phones.


For this matter it is considered that this language has a great potential for the near future being a direct competitor for Java and Flash based contents. In spite of these optimistic projections, this future still hasn't arrived and so far, Virtual Tours based in this technology bring up some drawbacks.

The main one of these is that the Html 5 Canvas element upon which a great part of the developments presently in progress is based has no support for most versions of the world's most used browser, Internet Explorer. Only the version 9 and later ones of this program support natively the Canvas tag, although as we'll see there are alternative methods to use it in previous versions. We'll create a Virtual Tour with the following panorama :





Presentation Of A Virtual Tour In Plain Html


The example we'll present in this page is based on a script by Ross Harmes and Ernest Delgado and it basically consists of three files :





Click here to download the three element togheter and uncompress the file to an empty folder as shown above. We'll call this folder Html5. Alternatively you can download each element apart and save each one of them with the file name specified in the link :



utilities.js
panorama.jpg
pagina.htm



As always, we'll work with two programs opened simultaneously. A browser where we'll see the web page and a text editor where we'll see its code. Each time we edit the code of the page we could save the changes and update the browser's view to check out if the changes produce the effect wanted in the page's look. We'll start with a page with no other contents than the basic division between header and body and we can see that the browser shows no contents at all :





Next we'll edit the page to insert a Virtual Tour. In the header, enclosed by a <head> and </head> pair of tags we'll put the reference to the utilities.js file. Likewise, we'll type in references to the presentation style between <style> and </style> tags. Moreover, in this part of the page we'll put the script that creates the Virtual Tour between <script> and </script> tags :


<head>
<script type="text/javascript" src="utilities.js"></script>

<style type="text/css" media="screen">
* { outline : none; -moz-outline : none -moz-mac-focusring; }
#source-img   { position: absolute; left: -999em; }
  canvas         { position: absolute; float:center; top: -90px; }
#screen          { position: absolute; float:center; top: 0px; }
#screen div     { position: absolute; top: 0px; left: 300px; width: 630px; height: 815px;
background: #fffff; }
  div#screen-overlay { position: absolute; top: 0px; left: 0px; margin-left: 0px; height: 715px;
width: 630px; }
</style>


<script type="text/javascript">
var YD = YAHOO.util.Dom,
YE = YAHOO.util.Event;
var canvas, ctx, img, widthSlider, scalingSlider, pw = 630, sf = .490, imgOffset = 0,
stage, stagePos, stageDim, moveInterval, moveDirection, dist = 1, data = []; function init() {
canvas = YD.get('cv');
ctx = canvas.getContext('2d');
canvas.width = 630;
canvas.height = 815;
canvas.style.width = '630px';
canvas.style.height = '815px';
stage = YD.get('screen-overlay');
YE.on(stage, 'mousedown', startMoveBackground);
YE.on(stage, 'mousemove', moveBackground);
YE.on(stage, 'mouseout', stopMove);
YE.on(stage, 'mouseup', stopMoveBackground);
stagePos = YD.getXY(stage);
stageDim = [ YD.getStyle(stage, 'width'), YD.getStyle(stage, 'height') ];
img = YD.get('source-img');
redraw(); }
function startMoveBackground(e) {}
function moveBackground(e) {
dist = Math.abs(e.clientX - (parseInt(stageDim[0], 10) / 2 + stagePos[0])) / 3; var timeInt = 1;
if(e.clientX - stagePos[0] > parseInt(stageDim[0], 10) / 2) {
if(moveDirection === 'left' || !moveDirection) {
clearInterval(moveInterval);
moveInterval = setInterval(function() { moveRight(); }, timeInt); moveDirection = 'right'; }}
else
{ if(moveDirection === 'right' || !moveDirection) {
clearInterval(moveInterval);
moveInterval = setInterval(function() { moveLeft(); }, timeInt);
moveDirection = 'left'; }}}
function stopMove() {
clearInterval(moveInterval);
moveDirection = null; }
function moveRight() {
imgOffset += dist;
redraw(); }
function moveLeft() {
imgOffset -= dist;
redraw(); }
function stopMoveBackground(e) {}
function precalculate(img, x, y, pixelWidth, scalingFactor, offset) {
if(typeof offset === 'undefined') offset = 0;
var h = img.height,
w = (img.width - 2) / 2.5;
var polarity = (pixelWidth > 0) ? 1 : -1;
var widthFactor = Math.abs(pixelWidth) / w;
var delta = Math.abs(pixelWidth);
var dHeight, dWidth, dy, dx;
var constant = Math.pow(100000, scalingFactor); //380;
var firstInc = ((delta / 2) * (delta / 2)) / constant;
for(var n = 0, len = delta, inc = w / delta, incScale = (1 - scalingFactor) / delta; n < len; n++) {
(function(m) {
sx = function(offset) { return ((inc * m + offset) >= 0) ? (inc * m + offset) % img.width : img.width +
((inc * m + offset) % img.width) };})(n);
sy = 0;
sWidth = inc;
sHeight = h;
firstHalf = h + 100 - firstInc + (((len / 2) - n) * ((len / 2) - n)) / constant;
secondHalf = h + 100 - firstInc + ((n - (len / 2)) * (n - (len / 2))) / constant;
dHeight = (n < len / 2) ? firstHalf : secondHalf;
dWidth = inc * widthFactor;
dy = y + (h - dHeight) / 2;
dx = x + (inc * n * widthFactor * polarity);
data.push({
sx: sx,
sy: sy,
sWidth: sWidth,
sHeight: sHeight,
dx: dx,
dy: dy,
dWidth: dWidth,
dHeight: dHeight }); } }
function redraw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
displayImage(ctx, img, 0, 140, pw, sf, imgOffset); }
function displayImage(ctx, img, x, y, pixelWidth, scalingFactor, offset) {
if(data.length === 0) {
precalculate(img, x, y, pixelWidth, scalingFactor, offset); }
var slice, sx;
for(var n = 0, len = data.length; n < len; n++) {
slice = data[n];
ctx.drawImage(img, slice.sx(offset), slice.sy, slice.sWidth, slice.sHeight,
slice.dx, slice.dy, slice.dWidth, slice.dHeight); }}
YAHOO.util.Event.on(window, 'load', init);
</script>
</head>

In the body of the page, there where we want to place the Virtual Tour, between the<body> and </body> tags we'll place the Canvas element containing the reference to the image file :


<body>
<canvas id="cv"></canvas>
<img src="panorama.jpg" id="source-img" />
<div id="screen-overlay"></div>
</body>

Updating the browser's view we find that the Virtual Tour is now visible :





The unusual aspect of it has to do with the characteristics of the Canvas element in which it is based on. The present script cuts in a virtual way the panoramic image in vertical strips which it extends both in width and height in accordance with a mathematical proportion to emulate the deformation produced by moving perspectives in a panorama. Move the mouse cursor over the image to impart motion to it :



Appearance's Change


While the original appeareance of this Virtual Tour is interesting, it is also possible to give it a more tradictional look. For this we'll edit the reference in the page's body to the Canvas tag :





We'll enclose it between pairs of <div> and </div> tags to which we'll add style attributes that let us emulate a window that peeps over the Virtual Tour :





This is the code we have used :


<div id="iframe" style="width:600;height:350;overflow:hidden;scroll;no;">
<div width="600" height="350" style="position:relative;bottom:177px">
<div id="bd">
<canvas id="cv"></canvas>
<img src="panorama.jpg" id="source-img" />
<div id="screen-overlay"></div>
</div>
<div id="ft"></div>
</div>
</div>

This way the interactive Virtual Tour is now a rectangle and it still works when the mouse's cursor moves over the image :





Compatibility With Internet Explorer


Internet Explorer, the world's most widely used browser has only added support to the canvas element, upon which the interactive Virtual Tours are based, from the version 9 which requires to work Windows 7 or Vista. This means a great number of users still using older versions of the operating system and Internet Explorer version 8 or earlier cannot see elements created using the Canvas tag. By opening the pagina.htm file in Internet Explorer 8 we'll ascertain that the page is not presented with its contents. In the first attempt Internet Explorer blocks the active content requiring the user's authorization to execute it :





The user must display the options in the information bar and accept to go on :





Next it is necessary to reload the page. We can ascertain that Internet Explorer still doesn't show the Canvas element that contains the Virtual Tour :





The way around it, somewhat partial, is to add a new file to the system :





The excanvas.js file is a plugin developed by google to allow Internet Explorer's compatibility with the Html 5 Canvas element. It is worth noting that all other main browsers have native support for this element dating from several versions back. This permits to use them to interact with Canvas based elements with a reasonable performance, while the emulation for Internet Explorer does not lack of errors and its performance could be up to 30 times slower that using other browsers. To use excanvas.js it is necessary to include a reference to the element in the code, so it is a good practice to put it in the header and close to the page's beggining :





Ths is the reference's code :


<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->

This way, with the simple adition of an external file an a reference line in the page's code, all the main browsers and even old version of Internet Explorer can be used to play Virtual Tours in plain Html. Regardless of the limitations mentioned for this importat browser, it is worth remarking that they should disappear since the program's version 9.

Virtual Tours in Html 5 are relatively new so it is reasonable to expect that new programs and scripts should come up improving the few that have been published so far. The best of Html 5 is still to come and it is likely that it will become the new standard for interactive contents, for all kind of devices, as the amount of available scripts and the speed of connections and processors increase.

Right click over the links and choose the most adequated option to see the Non-Framed Virtual Tour and the Framed Virtual Tour in Internet Explorer.

For more information about this script head up to the source page of the Script by Ross Harmes and Ernest Delgado .


Visitor's Feedback


Nimrod (nimrod.castillo@hotmail.com) says :

Esta genial! crees que pudieras incluir un codigo para agregar hotspots a este tipo de vistas en 360?

URL :


360 Facil (info@360facil.com) says :

Hola y Gracias por participar en 360 Facil. Nos interesa la respuesta a la inquietud que planteas pero no tenemos la respuesta exacta para darte. Hasta tanto tengamos tiempo de investigar el tema, te sugerimos ver la URL adjunta a este comentario, ya que el ejemplo que alli se muestra es precisamente el caso que planteas. Aparentemente el elemento CANVAS esta incluido dentro de un DIV junto con otros DIVS identificados cada uno con un nombre de clase que remite cada uno a un script con la orden que ejecuta cada hotspot. Atencion: el ejemplo solo funciona en Mozilla Firefox y Google Chrome.

URL : www.visual-experiments.com/demo/Html5VirtualTour/index2.html


Rovermons (rovermonserrat@hotmail.com) says :

Excelente material.... el límite está en nuestra mente... gracias por aportar ideas

URL : URL


360 Facil (info@360facil.com) says :

Gracias a ti, Rovermons!

URL : URL


josue (askraysonyk@gmail.com) says :

exelente tuto me encanto sensillo y rapido pero hay un problema cuando quiero que la imagen sea cuadrada no me lo genera y nose por que me podrias prestar tu codigo para adaptarlo al mi porfa o explicarmelo un poco mas a fondo muchas gracias...

URL : www.360facil.com/esp/fotografia-360-grados-publicacion-tours-virtuales-html5-navegadores.php


JAVIER (javier.dorantes@gmail.com) says :

Gracias por compartir

URL : URL


Claudio (caponce@uc.cl) says :

Hola! Muy util el post. Gracias. Me gustaría poder posicionar el contenido al centro de la pantalla. Cómo se haría para eso? Gracias de antemano.

URL : URL


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.