Publish in PlugXR App

Hover onto the “Publish in PlugXR App” section in the “Home” screen and click onto the ‘+’ button. You will now be directed to the “PlugXR App” under the ‘My Apps’ section.

Creator

Add Marker

  • Click on the box that reads “Add New Marker” (A Marker is a target image which upon scanning shows the AR experience).
  • Upon clicking this, a pop-up appears where you have to do the following:
    • Name your Marker
    • Upload the target image which is less than 2MB
    • Upload target image in the .jpg or jpeg format.
  • Complex images with a lot of contrast tend to work very well by making it easier for the Mobile Camera to recognize the marker. Avoid flat and monochromatic images as much as possible.

Features of Good Markers

  • A Good Marker has a good contrast that has good brightness.
  • There are no repetitive patterns and are rich in detail.
  • A Good marker makes use of good camera focus mode that will ensure the best camera focus conditions.
  • The lighting conditions are stable and easy to control.
  • The recommended size of Good Markers varies based on target rating and the distance to the physical image target.
  • The printed targets need to be flat that will enhance the quality of tracking.

For more details check here.

whyuse

Marker Settings

Once you have uploaded the Marker, go to “My Apps” to find your Marker under the PlugXR App section.

Marker Rating

The stars on the marker icon suggest how easy it is for the camera to identify your Marker. Markers with 5 ratings work the best. Complex images with a lot of contrast tend to work very well as compared to flat and monochromatic images.

Marker Views

The views on your marker can be found on the right top corner of the Marker Icon. You could also find them in the 3 dots on the top right corner of the Marker Icon. Marker views are the number of times your marker has been clicked upon to view the AR Experience.

Privacy Setting

Control the access of your Marker by clicking on the 3 dots on the top right corner of the Marker Icon. Your Marker is Private until you don’t tick on the box provided to make it Public.

Active/Inactive

Activate or Deactivate your project by clicking on the 3 dots on the top right corner of the Marker Icon and clicking the slide bar beside the ‘Active’ option.

Delete

Click on the 3 dots on the top right corner of the Marker Icon and click on ‘Delete’ and ‘Confirm’ to delete the entire Project along with content.

Let’s start

By clicking on the “Let’s Start” icon on the marker, you will be redirected to the grid where you can start creating your Augmented Reality experiences upon the Marker.

whyuse

Grid View (add content)

Once the marker is successfully uploaded, you can be redirected to the grid. The grid is where you can build your AR Experience that will be shown when you scan the above-uploaded Marker. Once you have created an AR Experience in the grid, click on “Save” on the right-top corner of the grid to save your AR Experience. Now click on “Publish” to publish your AR Experience in the PlugXR GO App.

You would have successfully uploaded your AR Experience in the PlugXR App. To view the experience, download PlugXR GO App from Play Store or App Store and log in with your credentials. Click on the “Developer” option which is on the right side of the camera to find your AR App. For others to view your Marker, kindly set your Marker to Public in the Marker Settings.

whyuse

Existing App Integration

The process to integrate the AR Experience created on the PlugXR platform into an existing application is mentioned below. Note that the below-mentioned process can be carried out by a developer or with a developer’s support.

  • Android   (Check the Instructions at Github))

    • Create project or Open existing android project in android studio
      Make sure your project has following versions
      minSdkVersion: 22
      targetSdkVersion: >=28
      gradle version: 3.4.2

      Creator

       

    • Clone plugxr-vuforia-library-android library
      git clone https://github.com/plugxr/plugxr-vuforia-library-android.git


    • Click on File -> New -> Import Module. Then select plugxr-vuforia-library-android as module which is cloned in step 2.

    • Open your app build.gradle and place below code in dependencies section.

      implementation project(':plugxr-vuforia-library-android')

      Creator

    • Add below lines in project build.gradle module under allprojects module flatDir { dirs project(':plugxr-vuforia-library-android').file('libs') } Creator

    • Now Sync your project with gradle files

      Creator

    • Add Permissions to your app AndroidManifest.xml file.

      <uses-permission android:name="android.permission.INTERNET"/>
      <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
      <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
      <uses-permission android:name="android.permission.CAMERA"/>
      <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
      <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
      <uses-permission android:name="android.permission.READ_PHONE_STATE"/>
      <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
      Creator

    • Now open your activity_main.xml file and create button

      < Button
      android:id="@+id/arscene"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="AR SCENE"
      android:layout_gravity="center"/>
      Creator

    • Initialize button in your MainActivity.java file and give click event to button And call PlugXR AR Scene
      // Initialize Plugxr Ar Scene here Plugxr plugxrARScene = new Plugxr(getApplicationContext()); // Set Vuforia license keys here plugxrARScene.setVuforiaKeys(licenceKeyToUnity,accessKeyToUnity,secretKeyToUnity); // Start Plugxr AR when click on the button Button button = (Button)findViewById(R.id.startAr); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { plugxrARScene.start(); } });

    • Run Application

      NOTE: If you are facing any issues, Please raise a issue here. We will issues as soon as possible


      Creator

  • iOS     (Check the Instructions at Github)

    Setup Project in Swift

    • Open your Xcode project (New/Existed)
    • Add the framework folder to your Xcode project folder.
    • Open your project in Xcode , under Project -> General -> Frameworks and Libraries. Click on + button to add Vuforia Framework , UnityFramework and SwiftPlugIn And set all frameworks to Embed & Sign. whyuse
    • Open your File from where you want to open Unity window (Viewcontroller.Swift).
    • Add import SwiftPlugIn in your view controller class.

      import SwiftPlugIn

      whyuse
    • Initialise Keys class in ViewController. Place your Vuforia keys, back button image name from your Assets.xcassets and unique device ID in keysDict.

      Note : All Keys and values are Required and should be proper

      let keys = Keys()
      let keysDict : NSDictionary = ["license_key":"","client_access":"", "client_secret":"", "buttonBackimg":"", "deviceid":""]; keys.sendKeys(keys: keysDict)

    • Place below code in your button action to navigate to unity window.
      DispatchQueue.main.async {
      let path = Bundle.main.path(forResource: "SwiftPlugIn", ofType: "framework", inDirectory: "Frameworks")
      let resource = Bundle(path: path!)
      let storyboard : UIStoryboard = UIStoryboard(name: "Unity", bundle: resource)
      let unityWindow : UIViewController = storyboard.instantiateViewController(withIdentifier: "IntialViewController") as UIViewController unityWindow.modalPresentationStyle = UIModalPresentationStyle.fullScreen self.present(unityWindow, animated: true, completion: nil)
      }
      whyuse

Own AR App (Image AR Tracker)

Below mentioned is the process of creating AR Experiences and publishing it into its own white-labeled application on Android/iOS. Click on to “Own AR App” in the “Home” screen on the platform. A pop-up emerges where you can select the requirements of your application.

Creator

Create App

  • Commercial/Noncommercial
    • Commercial License allows you to create and publish your apps in the play store and app store. Non-commercial License apps cannot be published in play store or app store.
    Creator
  • Online/Offline
    • A cloud app is a Small size application that would give the end-user the flexibility to not update the app when changes are made. In offline application, any changes made in the application the users need to download the whole application again. The prime advantage of this app is the end-users don’t need the internet once they download the application.
    Creator
  • SDK Details
    • Enter the SDK license keys in the respective blanks to proceed with the creation of AR Experience. Guidelines to obtain license keys for SDK are given in a link on the bottom of the pop-up.
  • Online (/Cloud) ARCore Steps:
  • Online (/Cloud) ARFoundation Steps:
  • Online (/Cloud) ARkit Steps:
  • Online (/Cloud) VUFORIA Steps:
    Add Access Keys    (Vuforia )
    • Vuforia Free Licence
      • To obtain Vuforia License Keys:
        • Register with Vuforia for free and provide your details
        • Click on the verification link in the mail that you will receive to get access to the Vuforia developer portal.
        • Click on “Get Development Key”
        • The App License Key obtained can be used during the app creation on PlugXR Creator.
        • Click on “Add Database” and provide database name and select “Cloud”
        • Click on “Database Access Key” to get “Client and Server Access Keys”
    • Purchase Premium Licence
    Add Marker
    • Click on the box that reads “Add New Marker”(A Marker is a target image which upon scanning shows the AR experience).
    • Upon clicking this, a pop-up appears where you have to do the following:
      • Name your Marker
      • Upload the target image which is less than 2MB
      • Upload target image in the .jpg or jpeg format.
    • Complex images with a lot of contrast tend to work very well by making it easier for the Mobile Camera to recognize the marker. Avoid flat and monochromatic images as much as possible.
    Marker Settings

    Once you have uploaded the Marker, go to “My Apps” to find your Marker under the specified section.

    • Marker Rating
      • The stars on the marker icon suggest how easy it is for the camera to identify your Marker. Markers with 5 ratings work the best. Complex images with a lot of contrast tend to work very well as compared to flat and monochromatic images
    • Marker Views
      • The views on your marker can be found on the right top corner of the Marker Icon. You could also find them in the 3 dots on the top right corner of the Marker Icon. Marker views are the number of times your marker has been clicked upon to view the AR Experience.
    • Privacy Setting
      • Control the access of your Marker by clicking on the 3 dots on the top right corner of the Marker Icon. Your Marker is Private until you don’t tick on the box provided to make it Public.
    • Active/Inactive
      • Activate or Deactivate your project by clicking on the 3 dots on the top right corner of the Marker Icon and clicking the slide bar beside the ‘Active’ option.
    • Delete
      • Click on the 3 dots on the top right corner of the Marker Icon and click on ‘Delete’ and ‘Confirm’ to delete the entire Project along with content.
    • Let’s Start
      • By clicking on the “Let’s Start” icon on the marker, you will be redirected to the grid where you can start creating your Augmented Reality experiences upon the Marker.
      Creator
  • Offline App VUFORIA Steps:
    How to generate Offline App .dat file
    • .dat File Generation
      • -
      • -
      • -
      • -
    How to generate Offline App XML file
    • XML File Generation
      • -
      • -
      • -
      • -

App Setup

Watch our tutorial on how to create an AR App here (https://youtu.be/yIanc3t3PyA)

  • Android

    In the top section of the App Setup page, select “Android” in the “Publish your App in” option and click on the “Development Version” option.

    • Development Version
      • To get Development Version in Android, enter App Name and Organisation Name in the space provided.
      • Choose the Status Bar Color from the range of colors provided. Upload suitable images in the Splash Screen, App Icon, and App Logo sections provided and click “Get Android App file”. Preview the outlook of your Development version on the right side of the App Setup page.
      • Visit “Download apk” after a while to find the development apk file, QR Code and Source Link.
    • Library

      The source files available in the library will help you integrate the AR feature that you created in an existing mobile application.

    • Download APK

      Visit this page shortly after you have requested either a developmental or final version of the apk files.

      • Manual Download

        Click on the icon that reads “.APK file” to download the apk file on your system

      • QR Code Scanning

        Scan the QR Code provided to download the .apk file on your mobile device.

      • Copy Link

        Click on the Copy Link option and paste the link on any browser to automatically download the .apk files in your system. It is useful to send the links across for your associates to download the .apk file without any hassle.

  • Final Version
    • To get Final Version in Android, enter App Name and Organisation Name in the space provided.
    • Enter a KeyPass of your choice in the space provided.
    • Enter your City, State, and Country details in the respective spaces.
    • Enter Version number in the space provided.
    • For successive version upgrade, an additional option called Key Store File is available for download.
    • Choose the Status Bar Color from the range of colors provided. Upload suitable images in the Splash Screen, App Icon, and App Logo sections provided and click “Get apk file”.
    • Preview the outlook of your Final version on the right side of the App Setup page.
    • Visit “Download apk” after a while to find the final apk file, QR Code and Source Link.
    • Library

      The source files available in the library will help you integrate the AR feature that you created in an existing mobile application.

    • Download APK

      Visit this page shortly after you have requested either a developmental or final version of the apk files.

      • Manual Download

        Click on the icon that reads “.APK file” to download the apk file on your system

      • QR Code Scanning

        Scan the QR Code provided to download the .apk file on your mobile device.

      • Copy Link

        Click on the Copy Link option and paste the link on any browser to automatically download the .apk files in your system. It is useful to send the links across for your associates to download the .apk file without any hassle.

  • iOS

    In the top section of the App Setup page, select “iOS” in the “Publish your App in” option and click on the “Development Version” option. Watch our tutorial on how to generate .p12 and mobileprovision files and App Specific password to get the ipa file here (https://youtu.be/JRL6OhivMFc)

    • Development Version
      • Upload “p12 file” and “mobileprovision file” in the spaces provided.
      • Enter the “p12 file password” that you would have created.
      • Enter “Build Number” and “Version” of your choice.
      • Upload suitable images in the Splash Screen, App Icon, and App Logo sections provided and click “Get iOS App file”. Preview the outlook of your Development version on the right side of the App Setup page.
      • Visit “Download IPA” after a while to find the development ipa file, QR Code and Source Link.
      • Library

        The source files available in the library will help you integrate the AR feature that you created in an existing mobile application.

      • Download IPA

        Visit this page shortly after you have requested either a developmental or final version of the ipa files.

        • Manual Download

          Click on the icon that reads “.IPA file” to download the .ipa file on your system

        • QR Code Scanning

          Scan the QR Code provided to download the .ipa file on your mobile device.

        • Copy Link

          Click on the Copy Link option and paste the link on any browser to automatically download the .ipa files in your system. It is useful to send the links across for your associates to download the .ipa file without any hassle.

    • Final Version
      • Upload “p12 file” and “mobileprovision file” in the spaces provided.
      • Enter the “p12 file password” that you would have created.
      • Enter “Build Number” and “Version” of your choice.
      • Enter your App Store Email in the respective space.
      • Enter the App Specific Password (xxxx-xxxx-xxxx-xxxx) that you obtained in the process of generating p12 and mobileprovision files.
      • Upload suitable images in the Splash Screen, App Icon, and App Logo sections provided and click “Get ipa file”.
      • Preview the outlook of your Live version on the right side of the App Setup page.
      • Visit “Download IPA” after a while to find the final ipa file, QR Code and Source Link.
      • Library

        The source files available in the library will help you integrate the AR feature that you created in an existing mobile application.

      • Download IPA

        Visit this page shortly after you have requested either a developmental or final version of the ipa files.

        • Manual Download

          Click on the icon that reads “.IPA file” to download the .ipa file on your system

        • QR Code Scanning

          Scan the QR Code provided to download the .ipa file on your mobile device.

        • Copy Link

          Click on the Copy Link option and paste the link on any browser to automatically download the .ipa files in your system. It is useful to send the links across for your associates to download the .ipa file without any hassle.


WebAR

To create WebAR experience, click on the “WebAR” option in the “Home” screen of the platform.

  • Use Themes

    Once you enter the grid, you can choose from the available themes on the left side of the grid. Once you have chosen from the available themes, click on to “Use Theme” on the right bottom of the grid to finalize the selected theme and start building your AR experience upon the chosen theme.

  • Customise Theme

    You can customise the theme.

  • Assets

    Select from a wide range of 3D Models, Text, and Images available on the left side of the screen. You could either choose from the Assets in the PlugXR Assets Library which also contains a plethora of appealing third-party assets or Upload your own assets. In case the format of your assets is not supported, use our converters to optimize your assets in PlugXR Supported Format.

  • Grid Controls

    Transform controls for assets are available on the right side within the grid. The transform controls allow you to Move, Rotate and Scale your object to desired position and size. You could also transform the assets by clicking on them and adjusting their position and size with the help of the colored lines that emerge when the asset is clicked upon. Other features on the right side within the grid include:

    • Scaling

      This option will help you to change the size of the object by entering specific values in the box provided.

    • Rotation

      This option will help you to rotate the object around the axis in 360 degrees.

    • Translate

      This option will help to move the object by simply dragging it.

    • Reset Values

      This option helps you reset the changes made in the position of the object to the original values.

    • Delete Object

      This option lets you delete the selected object from the scene.

  • Save (Publish)

    This option will help you to save the experience that you have created.

  • Share
    • Once you have finalized the assets and their position, you can go ahead and publish it by clicking “Share” on the right top corner of the grid.
    • This will generate the URL and QR Code which upon scanning will open up a 3D Model of the experience that you created.
    • A button named “View in AR” will open your camera when clicked upon.
    • Scan a suitable surface with good lighting to view the Augmented Reality version of the experience that you created.
    • Share the URL link across your associates for them to view your AR Creation.
  • Embed

    This option will generate a link that can be easily used anywhere in the web pages.


Creator