Setup 3D Wayfinder kiosk app

To use the 3D Wayfinder application on a touch screen kiosk, you need to use a browser in kiosk mode or use a special kiosk software.

We recommend using NW.js (previously called node-webkit). It is an open-source software which you can download for free. NW.js is an application runtime based on Chromium and node.js. It is fast and also secure for use as a kiosk browser. Download the normal version for production environment. It is smaller and doesnt have DevTools enabled.

Windows and NW.JS example config

Download addons for better setup: NW Addons for Windows

Copy the contents of the nw_addons.zip into the nw.js folder (containing nw.exe and other files).

In the nw.js folder there is a example package.json file. We need to modify the file package.json to disable the toolbar and set the start page to your 3D Wayfinder project as follows:

{
  “main”:   "http://static.3dwayfinder.com/projects/YOUR_WAYFINDER_PROJECT_ID/TEMPLATE/?kiosk=ID&managed=1&v=1”,
  “name”: “3D Wayfinder”
  “window”: {
    “kiosk”: true,
    “toolbar”: false,
    “frame”: true
  },
  "chromium-args": "--disable-pinch --disable-devtools --disable-http-cache --allow-file-access-from-files --allow-file-access"
}

NW.JS Settings

You have to change the “YOUR_WAYFINDER_PROJECT_ID” to your actual 3D Wayfinder project unique ID and the “TEMPLATE” (you can use Default) to the template name, you are going to use in your kiosk. When you don’t specify the template, the project will be shown with our default template.

chromium-args in the package.json file disable pinch to zoom, devtools, browser cache and enable local file loading.

To close the NW.js window, just use the keyboard shortcut ALT+F4 or use Task Manager.

Multiple kiosks and starting points

When you have many wayfinding kiosks, then you can change the You-Are-Here to different place in your floor plan for each kiosk. For this you need to specify the kiosk in the URL by adding ?kiosk=ID to the end of the URL, where “ID” is the kiosk node ID. For setting kiosk view, please see the user manual. So the URL with the kiosk location provided will look like this:

/projects/demo/default/?kiosk=3

Starting nw.js on startup and restarting when closed

In a typical kiosk solution you want that the main application is always on top. We usually use a tool called RestartOnCrash.exe (by https://w-shadow.com/) to start and restart nw.js. This programm is included in the nw_addons.zip. Launch it and choose the nw.exe file location as the starting location. Also on the Settings page enable running on Windows startup . This way you do not have to add it manually. Check the box Start minimized. You can test if this works by closing nw.js. It should restart it in few seconds. Also test rebooting your machine.

Disabling explorer

When nw.js closes the user can see Windows Explorer (this includes all the icons to other applications). And this is a security risk. Users can launch other websites or turn off the machine. So we close Windows Explorer on startup. For this You have to launch Task Scheduler and import Kill Explorer.xml from nw_addons folder.

The imported script has embedded the user information which isn’t valid to your machine. You have to select your own user for this script to work. Look at the above screenshot how you can change these.

Restarting windows every day

We usually also restart Windows every night so it will take new updates and clear RAM etc. This is done similarly as disabling the explorer. Import Restart.xml to Task Scheduler.

Using snapshots

Snapshots are static representations of your project. Usually for offline use when not using a on premise Enterprise Server.

Generate a snapshot in our Admin area under Snapshots page by clicking Create Snapshot. Then wait few minutes and refresh the page to see a new entry. When the entry is generated then click on the Download button. A zip file containing your project is downloaded.

Using snapshots with nw.js

To use snapshots You have to enable file access with chromium-args (see abow examples):

--allow-file-access-from-files --allow-file-access

Replace the main field URL with a local file location. Rename the folder to something more common like just “snapshot”. Easiest way is to set a relative path like this:

snapshot/projects/PROJECT_ID/Default/index.html

Or with a absolute path

file://C:/3DWayfinder/snapshot/projects/PROJECT_ID/Default/index.html

NB! the file path is UNIX style where folder is noted with a forward slash. If using Windows you have to change from \ to /. Also You have to append the file:// protocol handle.

Syncing snapshots automatically

The easiest way to update snapshots with multiple kiosks is to use some kind of file syncing software like Dropbox, Google Drive, Syncthing etc.

Using snapshots with Fully Kiosk on Android

Download the snapshot on your Android device and unzip the file. In the zip file there is the following file. Go to this file and copy its location snapshot/projects/PROJECT_ID/Default/index.html

It should look something like /storage/emulated/0/Download…
but this can be different on different devices. Just use file manager.

NB! If you are on Android 11 or later you have to use Fully Kiosk’s side loaded .apk (read more from here) or copy the contents into Fully Kiosk app folder because of Android security policies.

Go to Fully Kiosk settings then Web Content Settings and open Start URL. Add file:// before the copied location. Reload.

Using custom templates with snapshots

When You have custom made Template (UI) then currently this isn’t included in the snapshot. You have to add it manually. Just copy the template folder into snapshot/project/PROJECT_ID/.

Let’s say your template name is MyTemplate the url to start would be snapshot/project/PROJECT_ID/MyTemplate/index.html.

You can delete the other templates in that folder to use less space on drive.