helpar

Create your own app using the ViewAR CLI.

Prerequisites

In an IDE of your choice (for example WebStorm) navigate to a suitable directory and make sure that you have the following installed:

  • Node.js (version 6.0.0 or higher)
  • npm package manager (version 3 or higher)

Furthermore, make sure that you have a ViewAR account. It'll provide you storage for your 3D models and an overview of the apps created. Register at: https://developer.viewar.com/

Install the ViewAR CLI

The easiest way to setup a new ViewAR application is to use the ViewAR CLI. In the terminal run:

npm install -g viewar.

Login

It's necessary to login with your ViewAR account. Run:

viewar login

Create your first Project

Now, we need to create a JavaScript project with a copy of all Template files in a proper structure.

There will be common files like package.json, a src directory containing an index.html as well as an index.js, and couple other JavaScript files imported from the index.js.

In addition to those, there will be a .viewar-config file containing information used to deploy the project: appId, appVersion, id, and a token. The id and the token will be unique and are fetched during the new app creation process.

Initialise a new project

Let's initialise a project in a dedicated directory:

viewar init PROJECTNAME

Initialise a template project

  • Select the user account for this app: navigate to your account.
  • Select a project type: Choose the Sample Template to access the Template List.
  • Choose a sample template:
    Helpar Remote Assistance
  • Enter the app ID: Define the App ID you will be using to access your application through the SDK App. We suggest using a syntax of company.project.
  • Enter the app version: Unless you have a really good reason, stick to 1.0 as default.
  • Select tracker(s): In order to use the helpar template you need to activate 2 tracking systems:
    Placenote
    Remote
    You can select multiple trackers by hitting Space and then confirming with the Enter key.

    Run your app (development mode)

    To develop your app you can run it in your local browser.

npm run start:mock

This will start the app without the 3D engine, letting you simulate AR emitters with the buttons in the right lower corner. You will also see a representation of the scene, letting you simulate selections. This mode is ideal for development since it loads very fast. You can also use this mode to connect your device(see further below).

npm run start

This will start the app with the 3D engine (WebGL). It takes a bit longer to load but allows you to load 3D scenes and use VR features. This mode is not recommended for development.

Test on your mobile device

You can test your application while developing using the ViewAR SDK app from the Appstore or Google Play Store. Start the ViewAR SDK app, enter the App ID, enter version, enable LAN development mode and update your IP address in the input field.

Deploy/save your changes

To save your changes to the server, use this command:

viewar deploy APP-ID VERSION

This will build your app in release mode and save the changes to the server. After this, your app will be updated and everyone starting it will get the changes.

Testing release version

There are two options for testing your application: you may either do it directly in the web browser (in the mock or full mode) or run it on a mobile device using the ViewAR SDK app.

More info about testing here.

Experiment!

Now that you have your app all set and running, it's time to play around with it a bit. Feel free to alter the existing functionalities or extend the app with some of your own choosing!

Browse our SDK Documentation for more information.

Here are some topics to get you started:
Basic Concepts
JavaScript API Quickstart

UI Config

Following settings are available in the ui config:

{
  serverUrl: '', // Server url to connect to.
  demo: false    // Enable demo login.
}