With the options available to us to view locally saved 360˚ files on Mac OS we can go one step further and view these files in the Apple Xcode Simulator to actually see how they appear on a range of Apple products.

From the tutorial ‘Viewing Locally saved 360˚ Files on Mac OS’ we know that we can use either the Pano2VR Integrated Server or the krpano testing server to view our files in a number of browsers including Chrome, Firefox and Safari.

With the Xcode Simulator we can use Safari to open those files in up to 25 Apple devices from iPhone 5s to iPad Pro (3rd Generation)

Essential Tools

In order to proceed you will have to have the latest version of Apple Xcode installed on your computer and either Pano2VR installed or a copy of krpano downloaded.

Getting Started

Apple Xcode:

You can download Apple Xcode from the App Store https://apps.apple.com/au/app/xcode/id497799835?mt=12

Note: You can view and test your files on the Xcode Simulator without an Apple ID or Apple Developer license.

Once it’s downloaded install it to the Applications Folder

Pano2VR:

You can download a trial version of Pano2VR Pro 6 from the Garden Gnome website at https://ggnome.com/pano2vr#downloads

Once it’s downloaded install it to the Applications Folder

krpano:

You can download a copy of krpano 1.19-pr16 from the krpano website at https://krpano.com/download/

Once it’s downloaded unzip it to your desktop

Launching the Simulator

Note: rather than launch Xcode everytime we want to use the Simulator we will create a docked alias to provide direct access to the app. The first step is to locate the app on our computer.

On modern versions of OS X including Xcode 7 and El Capitan, from the Finder, use the key group, Command+Shift+G, to open a ‘go to folder’ window and paste in the following path; (Figure #1)

/Applications/Xcode.app/Contents/Developer/Applications/Simulator.app
On older versions of OS X with Snow Leopard, paste in the following path;

/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/

Note: this opens a folder showing two apps

3. Double Click on the Simulator.app to launch it (Figure #2)

Figure #2: double click on Simulator.app

Note: a instance of the simulator, in this example iPhone Xr, will appear on the computer desktop and an icon will appear in the dock.

4. Rt Click on the dock icon and select ‘Options > Keep in Dock’ & ‘Assign to All Desktops’ (Figure #3)

Figure #3: iPhone Simulator with dock icon

Note: When first opening the simulator it may take several mintues to download and update the iOS software. So if you see a black screen don’t panic just wait for the white Apple Logo to appear. Our next step is to open our local .html project file into either Pano2VR or krpano server

Pano2VR workflow

Note: we need to add the project to our server so we can obtain a URL that we can open in Safari on the Simulator

1. Open an instance of Pano2VR, minimise it and from select Menu > Tools > Integrated Web Server to open the Integrated Web Server window. {Figure #4)

2. Click on ‘Restart Server’ and then drag/drop the index.html file (or the main .html file) of your project into the server window to create a new Base Path. (Figure #5)

3. Click on the Address: link in the top left of the window to open a link to your project. Click through until you see the main index.html file. (Figure #6)

Figure #6: click through to index.html file

4. Click on the index.html link to open the project in your default browser and copy the URL. (Figure #7)

5. Launch Safari in the Simulator, paste the URL into the Address bar and select ‘Return’ on the keyboard to load the project into the Simulator. (Figure #8)

Figure #8: Project loaded into the Simulator via Pano2VR Integrated Server

Note: The responsive skin built into the project reflects the fact that the project is being viewed on a mobile device.

krpano workflow

Note: we need to add the project to our server so we can obtain a URL that we can open in Safari on the Simulator

1. From the krpano-1.19-pr16 folder double click on the krpano Testing Server.app to launch it (Figure #8)

2. In the server window click on the browse button (Figure #9)

3. Navigate to the folder that contains your project and select ‘Choose’ (Figure #10)

Note: The project folder path is loaded into the server Local Folder path and the server address is updated (Figure #11)

4. Right click on the Server Address: URL and select ‘Copy URL’ (Figure #12)

5. Launch Safari in the Simulator, paste the URL into the Address bar and select ‘Return’ on the keyboard to load the project into the Simulator. (Figure #13)

Figure #13: Project loaded into the Simulator via the krpano Testing Server

Summary

I hope you have enjoyed the tutorial and it has helped you to achieve the best possible project outcome. If it has please take a second to consider a donation so that I can continue to add more tutorials.

I'd like to Donate

Using Xcode Simulator with Local Files