Stacks Image 204

Stacks Image 391
Stacks Image 393
Stacks Image 395




iOSVR Step By Step Tutorial




Getting some basics down and doing them correctly is very important otherwise you will get stuck down the track, you won't know where you made a mistake and you will either waste a lot of time looking or you will have to start again from the start which is not very productive.

This is a Step By Step Tutorial on making your iOSVR virtual tour,

Note: in this Tutorial we are only showing one setup, which you can apply to both devices eg: iphone.html and ipad.html as they are now practically the same

tutorial


Commenting Out


In this tutorial you will see lot's of references about Commenting Out sections or lines of code. The term Commenting Out means simply Turning Off a function without actually deleting the code, so that at a later stage you can Turn that feature back on if you want without having to remember how the line of code looked.

It is a very simple process however Commenting Out in a HTML page is done using different symbols from a .JS file, take a look at examples below.
IPHONE.HTML & IPAD.HTML example:
Commenting out a line in a html

<!-- Should look like this -->

DATA.JS example
Commenting out a line in a DATA.JS file

/* should look like this */




UPLOADING To Your Server



Before you do anything you MUST upload your iOSVR tour folder to your server so that you can continuously check on your iPhone and iPad what you are doing.

The way to upload the tour to your server is by using an FTP program, there are a few options all work very well and are inexpensive or free.

Option 1) Mac users: The best FTP client is TRANSMIT from Panic.com, this is a fast FTP software and very secure.

Option 2) CyberDuck (Free), FileZilla (Free)


Stacks Image 3276

TRANSMIT



Panic Software -
www.panic.com/transmit

transmitscreen



HTML Editors for editing iOSVR files



Mac) Mac Users: We recommend first and foremost for all Mac users to use CODA2 from Panic.com, this is basically two software in one package, CODA is a HTML, CSS, JSON Editor which we strongly recommend you should use, as it helps you autocomplete code lines, gives you examples of how to make text bold or create breaks etc.

CODA is also an FTP software allowing you to log in to your server, and then edit your files in real time which is what you can must do regardless even if you are using just an FTP clients and a HTML editor separately.

MAC FREE ) Top 10 FREE HTML Editors for MAC: CLICK HERE

Windows FREE ) Here is a list of 10 FREE HTML Editors: CLICK HERE
Stacks Image 3835

CODA 2



Panic Software -
www.panic.com/coda

Coda2


previewing

Previewing iOSVR while creating your tour



DO NOT work on iOSVR tours while folders are still on your hard drive, as you will be unable to check what you are doing until you upload the tour to your server and look at your work on your iPhone & iPad. If you have made changes to the files and code while still on your hard drive and notice something is not working after you have uploaded the folder it will be impossible to work out where you have made a mistake. The only solution then is to delete and start again.

UPLOAD iOSVR TOUR FOLDER TO YOUR SERVER FIRST !

Once you have uploaded your tour take your iPhone and iPad and go to the url address of the index.html file located in your iOSVR tour folder. Check that your tour is working and the first 6 panoramas are loading.

While you are working on your tour it is important that after every time you make add any changes you SAVE and then reload your iPhone and iPad to see the changes you have made. If you see the tour is not working properly after the last change, go back to your HTML Editor select UNDO or Command Z then SAVE, and reload your browser on iPhone and iPad if the tour is working again go back to your code and this time be careful to ensure you are doing everything correctly again.

NOTE: iOSVR has a built in Image and Pano security protection code to safeguard your panoramas and images from other people stealing them.

You will NOT be able to preview iOSVR on a computer browser, iOSVR will ONLY work on iPhone iPad and the Apple iOS Simulator which only runs on Mac.

Alternative Testing Method:


If you don't have an iPhone, iPad or a Mac but still want to create iOSVR tours you can use this service HERE, it is a monthly membership that allows you to use the Apple iOS Simulator remotely even with a Windows PC. For more information go to: www.browserstack.com

Previewing iOSVR on Apple iOS Simulator OSX 10.6 Snow Leopard




understanding

Understanding the ONE Folder System


iOSVR uses a ONE folder for both devices, and the same file directory. Below is a screen shot of the Main Folder, the files have been coloured so you can see which are shared, independent and device specific.
Blue
These files and folders are used by both devices, things like Audio, Video, Photos and Thumbnails can now all be the same size as iOSVR automatically scales them to size if necessary.
Red
This is your main URL for your iOSVR tours. Use this as your main link / address nd it will automatically redirect iPhone and iPad to their iphone.html & ipad.html files.
Yellow
ipad_cubes: After converting your large panorama into 1024px cube faces place your cubes into the yellow ipad_cubes folder.

ipad.html: This is the index for your iPad tour, here you can change text like Contact, URL links, Adding and Naming of Thumbnails, Photos, Audio/Video files and anything else that can be seen onscreen when viewing your tour.

ipad.css: The CSS file is used for styling, background colour, and positioning of onscreen elements
Orange
iphone_cubes: After converting your large panorama into 512px cube faces place your cubes into the yellow iphone_cubes folder.

iphone.html: This is the index for your iPad tour, here you can change text like Contact, URL links, Adding and Naming of Thumbnails, Photos, Audio/Video files and anything else that can be seen onscreen when viewing your tour.

iphone.css: The CSS file is used for styling, background colour, and positioning of onscreen elements
Stacks Image 2393


tools

STEP 1)


Preparing Panorama Cubes


1) Rename your Panoramas to: pano1,jpg, pano2.jpg, etc
2) Convert your Panoramas into cube faces using PTGui (or another stitching software) and export the cubes to: (512px iPhone) & (1024px iPad)
3) Place your cubes into folders called iphone_cubes & ipad_cubes.

In this example we are using PTGui Pro




tools

STEP 2)


Adding Panorama Cubes To Your Project


The iOSVR Download Template already has 6 panoramas inside it - the cubes are located in ipad_cubes & iphone_cubes folders. The cubes are already named pano1, pano2 etc.
To add your panorama cubes to your tour do the following.

1) Drop your ipad_cubes & iphone_cubes folder containing your converted cubes in the iOSVR tour folder
2) A message will show asking you: "Do You Want to Overwrite Existing Folders with the new ones you are moving?" Click "YES"


Coding

STEP 3)


Adding Panorama Code to "DATA.JS Shared File"


INSTRUCTIONS:


1) Open "data.js" file with your HTML Editor and go down to Line 144, this is where the Pano section starts.

The first instance is all about p1 which stands for 'Panorama 1'.
In this section is the name of your panorama cubes: p1.name = 'pano1'; you will notice that we are only using the first part of your cube names without the extra underscore and letter e.g.: _f.jpg


EXAMPLE CODE:


var p1 = {};
p1.name = 'pano1'; //this is just the name of the pano cube file - this is NOT the name that will show up in the tour as the pano name
p1.ext = extension;
p1.info = 'info/p1.html'; // this is for your Info text scrolling page, the info text files are located in the "info" folder



The template is setup with 6 of these fields already filled in for you, depending on how many panoramas you have in your tour you can either Delete or copy and paste the entire p1 section over as many times as you have panoramas.

You will need to ensure that you follow the numbering all the way through for each panorama section, p1, p2, p3 and so on just like the example code in your data.js file.



tools

STEP 4)


Adding Thumbnails


Now that you have added all your panoramas to the Data.js file it is time to move over to the iPhone.html and iPad.html files

NOTE: Adding Thumbnails is a 2 Step process.

Step 1) Creating and Naming your Thumbnails


A) Open one of the existing template thumbnails in PhotoShop (any version is fine) this will automatically create a project for you that is the correct size eg: 247x97px
B) Drag a cube face or the actual EquiRectangular panorama into the photoshop work area, and rescale it until it fits to your taste inside the thumbnail
C) Now you can export the thumbnail which you will use as the trigger for opening that panorama
D) Name your Thumbnails in the order you will have the tour eg: thumb1.jpg, thumb2.jpg and so on
E) Save the thumbnails in a folder called " thumbs " or where ever you like
F) Now drop either the new created " cubes " folder into the main iOSVR Tour folder and overwrite the folder that is there with the one you are moving. OR. Drop all your thumbnails in the : cubes " folder inside the main iOSVR Tour folder and overwrite the existing thumbnails with the ones you are moving

Coding

Step 2) Adding Thumbnail Code to the iphone.html and ipad.html files


Here we are only going to show you setting up the iphone.html file, Whatever you do to the iphone.html you must also do to the ipad.html file

In this bit of code you can add Thumbnails and give your panoramas a NAME, as you can see at the start of the code line there is "p1", then further along is "thumbs/thumb1.jpg" and at the very end the actual name of the panorama >FIrst Pano Name<

EXAMPLE CODE


iphone.html Line Number: 61
ipad.html Line Number: 236

<div id="content">
    <div id="navbar" class="cooldiv1">
        <ul id="navlist">
            <li  onclick="newPano(p1,1);" class="active"><img src="thumbs/thumb1.jpg" width="245" height="97">First Pano Name</li>
            <li  onclick="newPano(p2,2);"><img src="thumbs/thumb2.jpg" width="245" height="97">Second Pano Name</li>
            <li  onclick="newPano(p3,3);"><img src="thumbs/thumb3.jpg" width="245" height="97">Third Pano Name</li>
            <li  onclick="newPano(p4,4);"><img src="thumbs/thumb4.jpg" width="245" height="97">Fourth Pano Name</li>
            <li  onclick="newPano(p5,5);"><img src="thumbs/thumb5.jpg" width="245" height="97">Fifth Pano Name</li>
            <li  onclick="newPano(p6,6);"><img src="thumbs/thumb6.jpg" width="245" height="97">Sixth Pano Name</li>
            <br>                
        </ul>
        
    </div>


INSTRUCTIONS:


  1. Open the iPhone.html file with your HTML Editor and go down to "iphone.html Line number 61" or "ipad.html Line Number 236" this is where the Scrolling Thumbnail Menu gets its info from
  2. Give each of the first 6 panoramas a name here by replacing the current placeholders "Charcuterie: "The Courtyard: and so on as seen above in the EXAMPLE CODE
  3. If you have any more panoramas which you have already added to the data.js file then just copy the bottom line of this code and paste it over as many times for the number of extra panoramas you have
  4. Ensure that you strictly follow the numbering method taking care to number consecutively
  5. If you have less than 6 panoramas then just remove an entire line starting with the very bottom line " p6 " and continue until it matches the total number of panoramas you have

Thumbnail File Details:


a) The Thumbnails are in a shared folder called "thumbs"
b) The size is: 247x97px
c) File type: jpg
d) File name: thumb1.jpg, thumb2.jpg etc

In this example we are using CODA from Panic.com



tools

STEP 5)


Adding Photos to the Gallery



Adding photos is done in 2 steps

Step 1) Exporting And Naming Your Photos


Export your photos from Photoshop or another Image Editing Software at 630x450pixels @ 50-65% compression, remember to keep the file sizes down as it will speed up loading times. The same photos will be used by iPhone and iPad, our code will automatically resize your photos on the fly.

Select all your new photos you have just exported and named correctly maintaining our number structure and drop them in the ' photos ' folder, you will be asked if you want to overwrite the existing photos in that folder with the ones you are moving, click YES and hit ENTER. This will replace / overwrite the old template photos with your new photos.


Step 2) Adding Photo Code to the iphone.html and ipad.html files


Adding the code data to the iphone.html & ipad.html files so that the code knows how many photos you have.


EXAMPLE CODE: "iphone.html Line Number 190" & ipad.html Line Number 84"


    <div id="photos">
        <div id="photoscroller">
            <ul id="Gallery" class="gallery">
                <!-- The href points to the full size image, the img source is the thumbnail (resized) and alt is the image caption -->
                <li><a href="photos/1.jpg"><img src="resizeimage.php?image=photos/1.jpg&width=150" alt="Image 001" /></a></li>
                <li><a href="photos/2.jpg"><img src="resizeimage.php?image=photos/2.jpg&width=150" alt="Image 002" /></a></li>
                <li><a href="photos/3.jpg"><img src="resizeimage.php?image=photos/3.jpg&width=150" alt="Image 003" /></a></li>
                <li><a href="photos/4.jpg"><img src="resizeimage.php?image=photos/4.jpg&width=150" alt="Image 004" /></a></li>
                <li><a href="photos/5.jpg"><img src="resizeimage.php?image=photos/5.jpg&width=150" alt="Image 005" /></a></li>
                <li><a href="photos/6.jpg"><img src="resizeimage.php?image=photos/6.jpg&width=150" alt="Image 006" /></a></li>
                <li><a href="photos/7.jpg"><img src="resizeimage.php?image=photos/7.jpg&width=150" alt="Image 007" /></a></li>
                <li><a href="photos/8.jpg"><img src="resizeimage.php?image=photos/8.jpg&width=150" alt="Image 008" /></a></li>
                <li><a href="photos/9.jpg"><img src="resizeimage.php?image=photos/9.jpg&width=150" alt="Image 009" /></a></li>
                <li><a href="photos/10.jpg"><img src="resizeimage.php?image=photos/10.jpg&width=150" alt="Image 010" /></a></li>
                <li><a href="photos/11.jpg"><img src="resizeimage.php?image=photos/11.jpg&width=150" alt="Image 011" /></a></li>
                <li><a href="photos/12.jpg"><img src="resizeimage.php?image=photos/12.jpg&width=150" alt="Image 012" /></a></li>                
            </ul>
        </div>
    </div>



Coding

INSTRUCTIONS:


The template is already setup with 12 photo gallery, if you only have 12 photos which are all correctly numbered '1.jpg, 2.jpg etc' all you need to do is replace the existing photos in the "photos" folder and you are done.

The "photos" folder is shared by both devices.

1) Open the following files with your HTML Editor iphone.html go to line number 190 & ipad.html go to line number 84
2) If you have more than 12 photos just copy the very last line and paste it underneath once for each additional photo you have
2) Ensure that you are maintaining the correct numbering sequence as you are adding photos eg: photos/12.jpg, photos/13.jpg
3) You can add a name to each photo by renaming the following bolded text near the end of each line of the photo gallery code alt="Image 001"
4) If you have less photos just delete entire lines starting with the very bottom one until you reach the desired number

I DONT WANT PHOTOS IN MY TOUR!


If you don't have photos and don't need a photo gallery then you can just comment out the PHOTO icon from the sliding menu so that doesn't show in the tour.

1) Commenting Out The Photo Icon
To comment out the Photo icon go to the menu section in these files: "iphone.html line number 244" and "ipad.html line number 219"and then comment out the photos icon line as seen in the example below by adding the shown code to the start and at the end of the line.

Example:

<!--  <div id='b_photo' onclick="slideObj('photos',480)">PHOTOS</div> -->


Observe below how the PHOTOS line is unhighlighted "commented out"

<div id="footer">
        <div id="menu">
            <div id='b_change' onclick="slideObj('navbar',480)">SELECT VIEW</div>
            <div id='b_info' onclick="slideObj('info',480)">PANO INFO</div>
        <!-- <div id='b_photo' onclick="slideObj('photos',480)">PHOTOS</div> -->
            <div id='b_video' onclick="slideObj('video',480)">VIDEO</div>    
               <div id='b_map' onclick="slideObj('map',480)">MAP</div>
            <div id='b_help' onclick="slideObj('help',480)">HELP</div>
            <div id='b_rotate' onclick="toggleSpin()">ROTATE</div>
            <div id='b_gyro' onclick="toggleGyro()">GYRO</div>            
            <div id='b_twitter' onclick="slideObj('twitter',480)">TWITTER</div>
            <div id='b_contact' onclick="slideObj('contact',480)">CONTACT</div>                
            <div id='b_email' onclick="location='mailto:info@YOURWEBSITE.com';">EMAIL</div>    
            <div id='b_phone' onclick="location='tel:+61881210867';">PHONE</div>    
            <div id='b_urllink' onclick="location='http://www.YOURWEBSITE.com';">WEBSITE</div>
        </div>
    </div>


File Details:


1) The Photos are in a shared folder called "photos"
2) The size is: 5x7" = 630x450 pixels
3) File type: jpg
4) File name: 1.jpg, 2.jpg, 3.jpg


Text

STEP 6)


Adding Info Text for Each Panorama


NOTE: If you are using the Apple iOS iPhone & iPad Simulator to preview iOSVR on your Mac Computer, you will NOT be able to see the Info text code inside the simulator if you are previewing the files locally from your hard drive. You MUST first upload the iOSVR Tour folder to your server and preview the tour with the iOS Simulator over the internet in order to see the true functionality and the info text.

Each panorama has it's own scrolling info text panel, you are able to add text, url links and images such as jpg, png, gif & animated gif all with url links if needed.
The info text is stored as individual html files called p1.html, p2.html etc and they are located in the folder called ' info '
The info folder is shared by both devices. It doesn't matter how much txt you add iOSVR takes care of it.
If you are using Apple iOS iPhone/iPad Simulator for previewing iOSVR on your Mac you will NOT be able to see the Info text if the tour is still stored locally on your hard drive. As mentioned earlier in this tutorial you MUST upload your tour to your server before starting to make any changes and working on the code.
tools

INSTRUCTIONS:


Adding Info Text to your tour is done in 2 steps.

STEP 1) Creating the text and files


1) Open the ' info ' folder, there you will find 6 x html files which contain the text for panoramas 1-6, each file carries the pano identifier the file belongs to e.g.: . p1.html is for Panorama 1, p2.html is for Panorama 2 etc

2) Right click on p1.html and chose to open it with your HTM Editor, then proceed to replace the example text with your text, what text you put there is up to you, it can be about the panorama, about the location, the client etc

3) You can also add url links, and images such as jpg, png, gif and animated gif all with url links if needed.
4) If you have more than 6 panoramas in your project you will need the same number of Info text files, in this case just duplicate one of the info text files once for every additional panorama you have added and then rename the files to reflect the numbers e.g.: p7.html, p8.html and add the correct text associated with teach pano you have added etc

Coding

STEP 2) Adding the code to DATA.JS file


Now that you have all your text done it's time to make sure the code knows how many info text panels there are.

1) Open the shared data.js file with your HTML Editor and scroll down to line 147 which is where the first pano has the info text section, as you can see the Info text code is located as the bottom line of every pano section.

2) The first 6 panoramas here already have the info text code inserted it looks like this (p1.info = 'info/p1.html';)

3) if you have more than 6 panoramas then ensure you are adding the correct info text number to the bottom of each pano section as seen in the example code below.

EXAMPLE CODE:


var p1 = {};
p1.name = 'pano1'; //this is just the name of the pano cube file - this is NOT the name that will show up in the tour as the pano name -  do not use the full extention _f.jpg etc etc
p1.ext = extension;
p1.info = 'info/p1.html'; // this is for your Info text scrolling page, the info text files are located in the "info" folder


File Details:


1) The Info text files are in a shared folder called "info"
3) File type: .html
4) File name: p1.html, p2.html etc


gmaps

STEP 7)


Setting Up Google Maps in DATA.JS Share File


Open DATA.JS file with your HTML Editor
Go to line number 59, this is the first line of the Google Map Marker code


INSTRUCTIONS:


STEP 1) Getting the latitude / longitude from Google Maps


At the top of the data.js file you will find the Google Map code, this is where you need to put in the latitude and longitude numbers as well as ensuring you are connecting all links to panoramas or set your own external links as you wish.

Pay attention to the code below, it's very simple just follow all numbering as you see it there, p1, p2, etc is referring to Pano 1, Pano 2 etc, to add more spots just ensure you copy and duplicate entire sections as you see them here and then just systematically go through and rename, replace and correct the numbers to match your project.

Coding

1) Adding the CODE: DATA.JS File Line Number 59


The example below shows all sections of the map code, ensure to read the code and note there are the following sections to pay attention to.

a) "First Pano Name" You have to replace this text with the actual name of your panorama, this is the same text that appears on your thumbnail for that panorama
b) '-33.890542, 151.274856, is the google map coordinates
c) '-33.890542, 151.274856, 4,' The single number at the end of the coordinates code is the marker depth i.e.: which marker sits in front of which
d) 'mapicons/hotel.png' is the folder where you map icons are located and after the / is the actual name of the map icon you are using for this marker
e) pano="p1" The p1 stands for which panorama will open once you tap on the thumbnail in the popup window
f) infoScroll.scrollToPage(0, 0, 200) this line scrolls the navigation thumbs and opens the right pano, this must match your navmenu in the iphone.html and ipad.html eg; the second ZERO is assigned to p1 (pano1) ensure the numbers are followed correctly eg: 0 / p1, 1 / p2, 2 / p3, etc
f) "thumbs/thumb1.jpg" stands for the thumbnail folder and for the actual thumbnail that will show inside the popup image on the google map.

BUT I ONLY NEED ONE MAP MARKER!


Cool simply select all code as seen below from where ['The Courtyard starts and remove it

var loadMap = function ()
{
    var locations = [
      ['First Pano Name', -33.890542, 151.274856, 4,'mapicons/hotel.png','<p onclick="newPano(p1,1);" class="active"><img src="thumbs/thumb1.jpg" width="245" height="97">></p>'],
      ['Second Pano Name', -33.923036, 151.259052, 5,'mapicons/food.png','<p onclick="newPano(p2,2);" class="active"><img src="thumbs/thumb2.jpg" width="245" height="97"></p>'],
      ['Third Pano Name', -34.028249, 151.157507, 3,'mapicons/scenic.png','<p onclick="newPano(p3,3);" class="active"><img src="thumbs/thumb3.jpg" width="245" height="97"></p>'],
      ['Fourth Pano Name', -33.80010128657071, 151.28747820854187, 2,'mapicons/airport.png','<p onclick="newPano(p4,4);" class="active"><img src="thumbs/thumb4.jpg" width="245" height="97"></p>'],
      ['Fifth Pano Name', -33.950198, 151.259302, 1,'mapicons/building.png','<p onclick="newPano(p5,5);" class="active"><img src="thumbs/thumb5.jpg" width="245" height="97"></p>']
    ];

SINGLE MARKER WITH NO POPUP THUMBS


If you just want a simple 'standard' google map with just ONE normal marker that doesn't do anything when you tap on it, then here below is some code that will do just that for you:

INSTRUCTIONS:
1) Copy the code here below
2) Open data.js file
3) Select entire section from Line Number: 56 to 98
4) Paste the copied code over
5) Set Latitude/Longitude in the new google map code you have just copied over

var latitude='39.716166';
var longitude='-104.826851';

var loadMap = function ()
{
    var latlng = new google.maps.LatLng(latitude,longitude);
    var myOptions = {
      zoom: 11,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map"), myOptions);
    mapLoaded = true;
    var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      title:"Here"
  });
  mapLoaded = true;  
}

How do I get latitude & longitude coordinates?


1) Type in the address of your virtual tours location into google maps, when the map loads place your mouse exactly over the pin in the centre of the map,
2) Right click and select “what’s here?” this will show the latitude / longitude numbers in Google Maps search bar.
long_lat
gmap



twitter

STEP 8)


Adding / Removing Twitter


iOSVR has Twitter built in ready to use, all you need to do is change the Twitter Account Name in both iphone.html and ipad.html files and Twitter will switch over to your or your clients Twitter Feed. Below we will also show you how to turn Twitter OF if you don't need it.

INSTRUCTIONS:


Adding Twitter to your tour is done in 2 steps.

STEP 1) Twitter Account


You must have an existing Twitter account or create one at twitter.com, Only use the actual Twitter Account name without the '@' symbol at the start

STEP 2) Adding the code


With your HTML Editor go to iphone.html Line Number 153 and ipad.html Line Number 139 and replace the word (iOSVR) with your Twitter Account Name

TWITTER LINE EXAMPLE:


}).render().setUser('iOSVR').start();

Coding

I DONT NEED TWITTER IN MY TOUR!


1) Commenting Out The TWITTER Icon


To comment out the Twitter icon, open your HTML Editor and go to the menu section in these files: "iphone.html line number 250" and "ipad.html line number 221"and then comment out the Twitter icon line as seen in the example below by adding the shown code to the start and at the end of the line.
Once you have commented out the Twitter icon Twitter will no longer be available inside your tour. Leave all other Twitter code as is for your next project, so long as you have the Twitter icon commented out you are fine.

Example:

<!-- <div id='b_twitter' onclick="slideObj('twitter',480)">TWITTER</div> -->


Observe below how the TWITTER line is unhighlighted "commented out" the code below is from the iphone.html

EXAMPLE CODE:


<div id="footer">
        <div id="menu">
            <div id='b_change' onclick="slideObj('navbar',480)">SELECT VIEW</div>
            <div id='b_info' onclick="slideObj('info',480)">PANO INFO</div>
            <div id='b_photo' onclick="slideObj('photos',480)">PHOTOS</div>
            <div id='b_video' onclick="slideObj('video',480)">VIDEO</div>
        <div id='b_map' onclick="slideObj('map',480)">MAP</div>
        <div id='b_help' onclick="slideObj('help',480)">HELP</div>
        <div id='b_rotate' onclick="toggleSpin()">ROTATE</div>
        <div id='b_gyro' onclick="toggleGyro()">GYRO</div>
<!-- <div id='b_twitter' onclick="slideObj('twitter',480)">TWITTER</div> -->
        <div id='b_contact' onclick="slideObj('contact',480)">CONTACT</div>
        <div id='b_email' onclick="location='mailto:info@YOURWEBSITE.com';">EMAIL</div>
        <div id='b_phone' onclick="location='tel:+61881210867';">PHONE</div>
        <div id='b_urllink' onclick="location='http://www.YOURWEBSITE.com';">WEBSITE</div>
        </div>
    </div>



Contact

STEP 9)


Adding CONTACT Information


The CONTACT page is a valuable asset to your virtual tours, here you can add items like: Address, Contact details and brief text about the tour owner, location etc
Coding

INSTRUCTIONS:


Adding CONTACT text to your tour is done in the iphone.html & ipad.html files separately.

STEP 1) iphone.html Line number 160


1) Open the iphone.html file with your HTML Editor and go to line number 160
2) Replace each line of info with your own


STEP 2) ipad.html Line Number 77


1) Open the ipad.html file with your HTML Editor and go to line number 77
2) Replace each line of info with your own

NOTE: do not just copy the text from one file to the other as the iphone.html CONTACT text has different size heading tags compared to the ipad.html

NOTE: If you are a STANDARD License holder DO NOT REMOVE the iOSVR Branded line at the very bottom of the CONTACT code as instructed.

EXAMPLE CODE:


    <div id="contact" class="cooldiv1">
            <h3>Wolf Blass Visitor Centre</h3>
            <h4> ADDRESS<br>
                97 Sturt Highway Nuriootpa <br>
                South Australia 5005
            <br>
                Phone (618) 83035905
            <br><br>
            <a href="http://wolfblass.com" target="_blank">WEBSITE</a> -
            <a href="mailto:visitorcentre@wolfblass.com">EMAIL</a></h4>
            <!-- Add your company website below, Your company name text will be a live URL link-->
            <h5><a href="http://YOUR COMPANY.com" target="_blank">Produced by: Your Company</a></h5>
            <!-- DONT REMOVE THIS LINE-->
            <h6><a href="http://iosvr.com" target="_blank">iOSVR</a></h6><!-- LEAVE THIS TAG - DO NOT DELETE or ALTER unless you have purchased an Unbranded Domain License - if you remove this code without authorisation your domain will be blocked - You can purchase an Unbranded Domain License or upgrade your current License to an Unbranded License from our website-->



I DONT NEED A CONTACT PAGE IN MY TOUR!


1) Commenting Out The CONTACT Icon


To comment out the CONTACT icon, open your HTML Editor and go to the menu section in these files: "iphone.html line number 258" and "ipad.html line number 226"and then comment out the CONTACT icon line as seen in the example below by adding the shown code to the start and at the end of the line.
Once you have commented out the CONTACT icon the CONTACT page will no longer be available inside your tour.

Example:

<!-- <div id='b_contact' onclick="slideObj('contact',480)">CONTACT</div> -->



Coding

STEP 10)


Adding AUDIO


You are able to have multiple AUDIO Files either per panorama or as a playlist.

The AUDIO Icon will Pulsate on first load to indicate there is AUDIO available for that Panorama.

INSTRUCTIONS:


STEP 1) iphone.html Line number 205 & ipad.html Line Number 268


Here you can add all the AUDIO files names so they appear as a scrollable list.

1) Open your HTML Editor and go to iphone.html line number 205 & ipad.html line number 268
2) Add the names of your audio files by replacing the example names "Wolf Blass History" etc
3) If you have less Audio then delete the extra lines you don't need, if you have more, copy one line and paste underneath as per example

EXAMPLE CODE: iphone.html

    <div id="player" class="cooldiv1">
        <audio id="audio" src="" onended="this.play();" controls="controls" autobuffer></audio>
        AutoPlay On/Off
        <div class="iphone-toggle-buttons">
            <label for="autoplaybutton"><input type="checkbox" name="autoplaybutton" id="autoplaybutton" checked="checked" /><span></span></label>
        </div>
        <div id="audioplaylist">
               <ul>
                  <li><a href="#" onclick="setAudio('audio/audio.mp3')"><strong>Wolf Blast History</strong></a></li>
                  <li><a href="#" onclick="setAudio('audio/music.mp3')"><strong>Music</strong></a></li>
                  <li><a href="#" onclick="setAudio('audio/audio.mp3')"><strong>Next Audio Track</strong></a></li>
                  <li><a href="#" onclick="setAudio('audio/music.mp3')"><strong>Next Audio Track</strong></a></li>
                  <br>
               </ul>
        </div>

    </div>


STEP 2) Adding AUDIO Code to the DATA.JS SHARED file


1) Add the Default VIDEO File Name to the Data.js VAR section Line Number 120 this will ensure that the video file is the first in the list
eg:

var defaultAudio = "audio/audio.mp3";


2) If you have any videos that you want to assign to a panorama add them to the pano section as shown below this will ensure that Audio file is specifically assigned to that panorama.

p5.audio = 'audio/music.mp3';

Audio Autoplay On/Off


By default Autoplay is already turned ON, after the tour first loads any audio files that are setup per Panorama will automatically start to play unless you turn Autoplay OFF by deleting the word "checked" in the Audio Playlist.

Step1) iPhone Turning Autoplay Off
iphone.html: Line Number 201 (delete the word "checked")

Step2) iPad Turning Autoplay Off
ipad.html: Line Number 264 (delete the word "checked")

I DONT NEED AUDIO IN MY TOUR!


Commenting out AUDIO is done in 3 steps:

Step1) iPhone Comment out
iphone.html: Entire Line Number 50 (audio icon)
iphone.html: From Line Number 197 to 214 (audio playlist)

Step2) iPad Comment Out
ipad.html: Line Number 61 (audio icon)
ipad.html: from Line Number 259 to 276 (audio playlist)

Step 3) Also ensure to remove any AUDIO that might be assigned to any Panoramas and VAR section in the Data.Js file (keeping things tidy is always good)


Coding

STEP 11)


Adding VIDEO


You are able to have multiple VIDEO Files either per panorama or as a playlist.

The VIDEO Icon will Pulsate at first load to indicate there is VIDEO available for that Panorama.

INSTRUCTIONS:


STEP 1) iphone.html Line number 177 & ipad.html Line Number 146


Here you can add all the VIDEO file names so they appear as a scrollable list.

1) Open your HTML Editor and go to iphone.html line number 177 & ipad.html line number 146
2) Add the names of your video files by replacing the example names "Wolf Blass TVC" etc
3) If you have less Videos then delete the extra lines you don't need, if you have more, copy one line and paste underneath as per example

EXAMPLE CODE: iphone.html

    <div id="video" class="cooldiv1">

        <p id="novideo">There is no video for this pano.</p>
        <video id="videoplayer" width="300" height="150" src="" controls="controls">
              <source src="" type="video/mp4" />
        </video>
        <div id="videoplaylistdiv">
            <div id="videoplaylist">
               <ul>
                  <li><a href="#" onclick="setVideo('video/wolfblass.mp4')"><strong>Wolf Blast TVC</strong></a></li>
                  <li><a href="#" onclick="setVideo('video/wolf_blass_history.mp4')"><strong>Wolf Blass History</strong></a></li>
                  <li><a href="#" onclick="setVideo('video/Barossa Valley.mp4')"><strong>Barossa Valley</strong></a></li>
                  <br>
               </ul>
            </div>
        </div>    
    </div>


STEP 2) Adding VIDEO Code to the DATA.JS SHARED file


1) Add the Default VIDEO File Name to the Data.js VAR section Line Number 120 this will ensure that the video file is the first in the list
eg:

var defaultVideo = "video/yourvideo.mp4";


2) If you have any videos that you want to assign to a panorama add them to the pano section as shown below this will ensure that Audio file is specifically assigned to that panorama.

p5.video = "video/yourvideo.mp4";


I DONT NEED VIDEO IN MY TOUR!


Commenting out VIDEO is done in 3 steps:

Step1) iPhone Comment out
iphone.html: Entire Line Number 245 (menu video icon)
iphone.html: From Line Number 177 to 194 (video playlist)

Step2) iPad Comment Out
ipad.html: Line Number 220 (menu video icon)
ipad.html: from Line Number 146 to 159 (video playlist)

Step 3) Also ensure to remove any VIDEO that might be assigned to any Panoramas and VAR section in the Data.Js file


Coding

STEP 12)


Intro Splash Screen



Just like in a native iOS App, you are able to have an Intro Splash Screen when your tour first loads this is a perfect spot to have your or your clients branding, logos, artwork or anything else you can think of.

NOTE: You don't have to do anything to the Code, it has already been setup for you, all you need to do is create your Intro Splash images and name them as shown and drop your images into the images folder.

INSTRUCTIONS:


Create your Intro Splash Screen artwork


1) iPhone
File Size: 320x480px
File Name: splash_iphone.jpg
Folder: images
Code Location: iphone.html Line Number: 43

2) iPad
File Size: 768x919px
File Name: splash_ipad.jpg
Folder: images
Code Location: ipad.html Line Number: 54


Coding

STEP 13)


Splash Loader



You are able to have an image that shows onscreen while your next panorama is loading, this is great for branding continuity, however you are able to remove the image and have text instead

NOTE: You don't have to do anything to the Code, it has already been setup for you, all you need to do is create your Intro Splash images and name them as shown and drop your images into the images folder.

IMPORTANT: Unless you own an UNBRANDED license please do NOT remove the small iOSVR tag underneath the Splash Loader otherwise your domain will be blocked. You can purchase an Unbranded Upgrade from our online store.

INSTRUCTIONS:


Create your Splash Loader artwork


1) iPhone & iPad use the same image
File Size: 320x290px
File Name: splash_loader.jpg
Folder: images
Code Location: iphone.html Line Number: 218
Code Location: ipad.html Line Number: 69

If you want a different Splash Loader image to show inside the iPad then change the file name name in iPad.html Line Number 69 to mach that of your iPad splash loader image.


STEP 14)




Get your custom loading Icons below…
loading_icon
Here you can create your own Animated loading Gifs and replace the default ones we have provided in the IMAGES folder.

Ensure that you do NOT select Transparent background when creating your loading gifs below
Ensure that you experiment with the size of your loading gif and fine-tune the positioning so that it is centred or positioned as you like.

The positioning of the loading gifs is done in DATA.JS file
There you will be able to adjust how far the loader is positioned from the top and from the left of screen, very easy to do.
File: DATA.JS
Line Number 108 for iPhone
Line Number 114 for iPad

Loading Gifs are located in:
Folder: IMAGES
File Names:
iphone_loader.gif
ipad_loader.gif


STEP 15)


QR Code Generator



Now that you have successfully created your iOSVR tour you might want to create a QR Code for your or your clients tour, to do so you can use the QR Code Generator here:
QRCode1





iOSVR Panorama Player


View iPhone/iPad Example


(You will need an iPhone or iPad otherwise just the Flash tour will play)

The industry leading iOS virtual tour software which looks and feels just like a real iPhone or iPad App. Built ground up for the iOS platform iOSVR is fully customisable offering industry leading features, intuitive easy to use interfaces, already setup as a working template.
HTML5 - iOS4 / iOS5 / iOS6

ptgui_logo



App Development


View iPhone App Example


(You will need an iPhone or iPad otherwise iTunes store only will open)

1) Offer your clients their own Virtual Tour App
On the App Store within two weeks. Send us your panoramas and we will deliver an awesome feature packed VR App including geo find me, built in maps and offline viewable to name a few.
2) We also develop standalone iOS Apps for all industries, VR technology included.

nodalninja_logo


ffc_iosvr