Overview
Sometimes your client and/or project requires not only an offline project but also one that doesn’t require a web browser when outputting to HTML5.
So, here’s a tip that helps tremendously with these situations. It utilizes a JavaScript platform, called NW.js, and just using a bit of code, you can turn your project into a stand-alone player that will work on the Macintosh Desktop.
This “Pano2VR” tutorial shows you how to Create a Desktop app suitable for use on a desktop Mac and works with both Pano2VR and Object2VR projects. The tutorial is based upon the original published by Garden Gnome Software on their website at https://ggnome.com/doc/tip-desktop-app/.
Note: there is a version for Windows on the Garden Gnome Software website at the URL above. I will have a Windows version on line in the near future
Note: this tutorial is designed for Pano2VR V6.1.10. You can download the software here.
Tutorial Files
In the tutorial folder, Desktop Application, there is an Asset Folder with a Pano2VR output “Test_Project’ and a .png file. There is also an empty Downloads folder (figure #1)
Figure #1: Tutorial Folder
Note: the Test_Project is the final result of the Maintaining the Aspect Ratio of an iFrame tutorial. Check it out if you would like to see how it’s built.
Project Overview
In this tutorial, we will use the sample project and create an app that can be used on a Mac desktop to open the project. Over the course of the tutorial we will;
Download & configure the JSON file
Download & setup the Application development tool
Create an .ICNS Icon
Add the icon to the App
Add a Custom name to the App
Note: this tutorial assumes a basic knowledge of Pano2VR V6
Note: click on any image in the tutorial to enlarge it
Getting Started
1. Download the zipped tutorial folder here
Download and Configure the JSON file
1. Download the package.zip from the Garden Gnome Software website into the Downloads folder in the Tutorial folder (figure #2)
Figure #2: package.zip
2. Double click on the package.zip to unzip it to reveal the package.json file (figure #3)
Figure #3: extracted package.json
3. Right-click on the package.json file and open with TextEdit (figure #4)
Note: you can use any text editor such as BBEdit just make sure it’s set to Plain Text.
Figure #4: Open with TextEdit
Note: this file is used to describe the project; it tells the application what file to open, the window size, etc via the 5 properties below;
name – Add the project’s name.
main – Add the project’s HTML file; for example, index.html.
frame – App’s outside frame. true = visible. false = not visible.
toolbar – Displays a toolbar when set to true. We set ours
to false.
width & height – Adjust the window’s size. (figure #5)
Figure #5: package.json properties
4. Add a new name for the project (in my case I will call it Aspect Ratio but you can name it anything) (figure #6)
Note: we can leave the other fields as default. In regard to the width and height the launched app can be rescaled to any ratio and opened in fullscreen.
Figure #6: name updated
5. Save the updated JSON file
6. Option-drag the updated package.json file into the Assets/Test_Project folder (Figure #7)
Figure #7: updated package.json in Test_Project folder
Set up the Application Tool
1. Rename the Pano2VR output folder Test_Project to app.nw
Note: if you see this system message click Add to continue (figure #8)
Figure #8: system message
Note: the output folder name is updated (figure #9)
Figure #9: project output folder renamed
2. Navigate to the NW.js website at https://nwjs.io (figure #10)
Figure #10: NW.js website
3. Click on the v0.51.1 NORMAL button to start the download (figure #11)
Figure #11: Download the nw.js zip file
4. Save the nwjs-vo.51.1-osx-x64.zip file into the Downloads folder (figure #12)
Figure #12: Save the zip to the Downloads folder
5. Double click on the nwjs-vo.51.1-osx-x64.zip to unzip it to reveal the nwjs-vo.51.1-osx-x64 folder and its content (figure #13)
Figure #13: nwjs-vo.51.1-osx-x64 folder and contents
6. Option-drag the credits.html file into the app.nw folder (figure #14)
Note: This is the application’s license and needs to be included in the app
Figure #14: credits.html in the app.nw
7. Right-click on the nwjs.app and choose, Show Package Contents (figure #15)
Figure #15: Show Package Contents
8. Open the Contents > Resources folder
9. Select and delete everything from the Resources folder (shaded red) except app.icns (figure #16)
Figure #16: delete files from Resources
10. Option-drag the app.nw folder into the Resources folder (figure #17)
Figure #17: app.nw copied into nwjs.app
11. Test the app by Right-clicking on the nwjs.app in the Downloads > nwjs-v0.51.1-osx-x64 folder (figure #18)
Figure #18: Right-click to open the app
Note: if it’s the first time you are launching the app you will see the system notification. After opening once you can double click on the app to launch it.
12. Click Open to continue (figure #19)
Figure #19: System notification
Note: the app opens revealing the Pano2VR Virtual Tour “Aspect Ratio” (figure #20)
Figure #20: Pano2VR Virtual Tour running in the App
Create a .icns Icon
Note: before we can add the icon we need to create a .icns (Apple Icon Image format) graphic
1. Navigate to the CloudConvert website at https://cloudconvert.com/png-to-icns (figure #21)
Figure #21: CloudConvert - PNG to ICNS
2. Click on Select File and load the Assets > Lightbulb_512.png file (figure #22)
Figure #22: Load Mickey_Mouse_512.png
3. Click the Convert button (figure #23)
Figure #23: Click Convert
4. When the conversion is finished click on Download button (figure #24)
Figure #24: Download the converted file
5. Save the file in the Downloads folder (figure #25)
Figure #25: Save to Downloads
Add the Icon to the App
1. Rename the Lightbulb_512.icns to app.icns (figure #26)
Figure #26: rename icns file
2. Show the Package Contents of the app
3. Open the Contents folder
4. Option-drag the custom app.icns into the Contents folder to replace the existing one
5. Select Replace from the system notification window (figure #27)
Figure #27: Replace the existing app.icns in the nwjs.app
Add a Custom Name to the App
1. Show the Package Contents of the app
2. Open the Contents folder
3. Open the Info.plist file with a text editor (in this case I’m using BBEdit) (figure #28)
Figure #28: Open Info.plist file
4. Find the code, <key>CFBundleDisplayName</> <string>nwjs</string> (figure #29)
Figure #29: Info.plist open in BBEdit
5. Change the word nwjs to the name of your project (in my case Aspect Ratio) (figure #30)
Figure #30: CFBundleDisplayName changed
6. Save the Info.plist back to the Contents folder
7. Change the name of the nwjs.app (I’m going to name mine Pano2VR Tutorials.app) (figure #31)
Figure #31: Rename the .app file
Congratulations: You have successfully created a standalone app for a Macintosh desktop
8. You can move your app to the Applications folder and also add it to your dock (figure #32)
Figure #32: The desktop app in the Applications folder
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.
