Creating a Desktop Application

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 all system platforms. Don’t worry, it’s painless.

This is for the HTML5 outputs from both Pano2VR and Object2VR.

Windows

  1. Output your HTML5 project.
    ◊ NOTE: There’s no need for the Flash Fallback file, so you can deselect this in the HTML tab. Also select Fullscreen in the HTML file to ensure the project stays in the center.
  2. Download the tool that will create the application. Go to [nwjs.io] and download the proper Windows version.
  3. Copy the ZIP to the desktop and open the folder.
  4. Drop the project’s output folder in to the nwjs folder.
  5. Download this file, unzip it and add the package.json file to the nwjs folder.
    This file is used to describe the project; it tells the application what file to open, the window size, etc.
  6. Edit the package.json file. Open the file with a text editor (right-click and choose Open with Notepad).
    • name: – Add the project’s name.
    • main: – Add the project’s HTML file; for example, project/index.html.
    • frame: – App’s outside frame. true = visible. false = not visible.
    • toolbar: – Displays a navigation toolbar when set to true. We set ours to false.
    • width: & height: – Adjust the window’s size.
  7. Double-click the EXE to open and test the application!

Custom name and icon

To have a custom name in the menu bar of the app, just make sure you’ve added a Title in the User Data of Pano2VR or Object2VR.

To change the icon, create an application shortcut and change the icon.

Swapping projects

It’s easy to create multiple apps without recreating the app. If, for example, you would like to make an application with an Object2VR project, just change the file path in the JSON file and then adjust the window size.

Mac OS

  1. Output your Pano2VR and/or Object2VR HTML5 project.
    ◊ NOTE: There’s no need for the Flash Fallback file, so you can deselect this in the HTML tab. Also select Fullscreen in the HTML file to ensure the project stays in the center.
  2. Download this file, unzip it and add the package.json file to the Pano2VR or Object2VR’s output folder.
    This file is used to describe the project; it tells the application what file to open, the window size, etc.
  3. Edit the package.json file.
    Open the file with a text editor; right-click and choose Open with Text Edit. Make sure it is set to Plain Text.
    • 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.
  4. Save the JSON file.
  5. Rename the Pano2VR or Object2VR’s output folder to, app.nw.
  6. Download the tool that will create the application. Go to nwjs.io and download the Mac OS version.
  7. Add the credits to the app.
    This is the application’s license and needs to be included in the app.
    1. Open the folder that contains the nwjs.app.
    2. Move or copy nwjs.app somewhere (like your desktop).
    3. Right-click on the app and choose, Show Package Contents.
    4. Move or copy credits.html inside the nwjs app.
  8. Go to the Contents folder and open Resources.
  9. Delete everything from the folder except nw.icns. This is the icon for the app.
  10. Drag in your output folder that’s been named, app.nw.
  11. Now open the app!
    You might get a warning that it’s from an unverified developer. This will depend on your settings in System Preferences > Security. You can open the app via the context menu and choosing, Open. And then hit Open in the dialog that pops up. This is only for the initial launch.

Custom name and icon

To change the icon, do the following.

◊ NOTE: We recommend adding the icon before changing the application name.

  1. Right-click the app and choose Show Package Contents.
  2. Open Contents > Resources.
  3. Drag in your own icon, making sure it has the same name (nw.icns) so that it replaces the current icon.

To have a custom name in the menu bar do the following:

  1. Right-click the app and choose Show Package Contents.
  2. Open the Contents folder.
  3. Open Info.plist with a text editor or Xcode if you have it installed.
  4. Change the Bundle name.
  • To change the application name, select the app’s name and replace nwjs.app with your app name, like My Project. app

Swapping projects

To swap out one project for another, to the following:

  1. Right-click on the app and choose, Show Package Contents.
  2. Navigate to Contents > Resources.
  3. Rename the current app (i.e. old_app.nw) and remove it out of the Resources folder.
  4. Drag in the new project’s output folder.
  5. Rename the folder to app.nw
  6. Copy package.json in to the project’s output folder. Update the necessary parameters, like window size.

See also

Download: package.json
Download: the nwjs app.
Format for the Manifest file (JSON)
HTML5 Output (Object2VR)

Privacy Policy – Terms of Service – Contact / Imprint
Facebook-f Twitter Youtube