LogoLogo
DocumentationWebsiteCommunityPortal
  • Get Started
    • Quickstart
    • Tutorials
    • Wizards
  • Features
    • Release Notes
      • 2024
        • 04-05 Apr Update
        • 03-27 Mar Update
        • 02-07 Feb Update
        • 01-23 Jan Update
        • 01-05 Jan Update
      • 2023
        • 12-18 Dec Update
        • 11-30 Nov Update
        • 10-30 Oct Update
        • 10-04 Oct Update
        • 09-18 Sep Update
        • 09-11 Sep Update
        • 08-28 Aug Update
        • 08-14 Aug Update
        • 07-23 July Update
        • 07-14 July Update
        • 06-16 June Update
        • 06-6 June Update
        • 05-16 May Update
        • 03-31 Mar Update
        • 03-16 Mar Update
        • 03-10 Mar Update
        • 02-07 Feb Update
        • 01-24 Jan Update
        • 01-10 Jan Update
      • 2022
        • 12-08 Dec Update
        • 11-13 Nov Update
        • 11-07 Nov Update
        • 10-26 Oct Update
        • 10-14 Oct Update
        • 10-01 Oct Update
        • 08-26 Aug Update
        • 08-02 Aug Update
        • 07-01 July Update
        • 06-08 June Update
        • 05-20 May Update
        • 05-05 May Update
        • 04-25 Apr Update
        • 02-11 Feb Update
        • 01-28 Jan Update
        • 01-10 Jan Update
      • 2021
        • 12-10 Dec Update
        • 12-01 Dec Update
        • 11-26 Nov Update
        • 11-17 Nov Update
        • 11-12 Nov Update
        • 11-09 Nov Update
        • 11-02 Nov Update
        • 10-26 Oct Update
        • 10-21 Oct Update
        • 10-14 Oct Update
        • 09-27 Sep Update
        • 08-31 Aug Update
        • 07-20 July Update
        • 07-02 July Update
        • 06-31 June Update
  • Metaverse
    • Building
      • Portal
        • Team Members
        • Defining Global Variables
      • Editor
        • File Manager
          • Selecting a file
          • Sketchfab Integration
        • Placement in 3D Space
        • Project Settings
          • Preferences
          • Branding
          • Collaborators
          • Menu
          • Variables in Settings
          • Lead Generation
          • Tour Mode
          • Advanced
          • E-Commerce in Settings
        • Preview
          • Headset Testing - WebXR Emulator
        • Viewport Properties
        • Editor Keyboard Shortcuts
      • Scenes
        • 3D Scene
          • Avatar System
          • Colliders
          • Zones
          • Lights
        • 360 Scene
        • Orbit Scene
      • Elements
        • Image
        • Video
        • Audio
        • GIF
        • Text to Speech
        • Character
        • Character AI
        • Actionbar
        • Timer
        • Polygon
        • Linked Popups
        • Variants
      • Rules
        • Shared Rules
        • How Rules Work
        • Number Variable Rules
        • String Variable Rules
        • Boolean Variable Rules
      • Variables
        • Autogenerated Variables
        • String Substitution
        • Capturing User Input
      • Build FAQs
    • Publishing
      • URL or QR Code
      • Embed on your Website
      • Full-Page HTML
      • Embedding within Apps
        • Android Embed
        • React Native Embed
      • Export as SCORM package
      • Authentication
        • SSO
        • Password With Expiry
        • Email with OTP
        • Custom List
        • Token
        • Load from another Experience
      • Publishing FAQs
      • Private Cloud Deployment
    • Multiplayer
      • Host Mode
      • Broadcast Mode
      • Voice Chat
      • Text Chat
      • Video Chat
      • Screenshare
      • Comments
      • Share Reactions
      • Notifications
      • Troubleshooting webcam and microphone
    • Analytics
      • Advanced Analytics
      • Leaderboard
      • Viewer Sessions
    • Integrations
      • GMetri with SCORM
        • Embed a SCORM package in a GMetri experience
      • Live Stream on GMetri
        • Live Stream Zoom on YouTube
        • Live Stream Zoom on Vimeo
          • Zoom Setup
      • E-Commerce with GMetri
        • Shopify Integration
        • WooCommerce Integration
        • Custom Integration
        • Using an E-Commerce Plugin
      • Adding a Chatbot
      • Sending data to GMetri Deployment
    • Viewing
      • Avatars
      • First/Third Person
      • Concurrency
      • Oculus Controls
      • Viewer Keyboard Shortcuts
      • IT Permissions
        • Whitelisting for Viewing Experiences
        • Whitelisting for Editing Experiences
        • Whitelisting for Analytics
        • Subprocessors
    • GMetri SDK
      • GMetri Player
      • GMetri SDK APIs
        • Project
        • Deployment
        • File
        • Viewer Group
      • GMetri Webhooks
      • API Token
      • Examples
  • Guidelines/Compatibility
    • Guidelines
      • Content Creation Guidelines
        • XR Experience Storyboard
        • 360 Degree Video Shoots
        • Avatars vs Characters
        • Designing 3D Models for Immersive VR mode
      • Asset Guidelines
        • 3D Models
          • Export GLB/GLTF from 3DS Max
          • Export GLB/GLTF from Blender
        • 360 Pano Images Render
        • Resources for Assets
        • Asset FAQs
        • Image Aspect Ratio
      • Experience Optimizations
        • Scene Optimizations
          • Performance Monitor
        • Image Optimizations
        • Audio Optimizations
        • Video Optimizations
        • 3D Model Optimizations
      • Workflows
        • Green Screen
          • Apply Green Screen to Videos
          • Accurate Color Selection
        • QR Code Scanner
        • Adding Sprites
        • Adding Background Music & Persistent Logo
        • EmbedHTML Snippets
    • Compatibility
      • Platform Requirements - Viewer
      • Platform Compatibility Matrix
      • Supported File Formats
      • Supported Browsers
      • Capture Network and Console Logs from Chrome Browser
    • Limitations
      • iOS Limitations
      • VR Mode Limitations
  • Platform
    • Billing
    • Platform FAQs
    • Security
    • Legal
Powered by GitBook
On this page
  • Description​
  • Elements Used​
  • Add Elements​
  • Add Rules​
  • Test​
  • Deploy​

Was this helpful?

Edit on GitHub
Export as PDF
  1. Guidelines/Compatibility
  2. Guidelines
  3. Workflows

QR Code Scanner

PreviousAccurate Color SelectionNextAdding Sprites

Last updated 4 months ago

Was this helpful?

Let's learn how to make a simple QR code scanner app.

Description​

Made using the GMetri XR platform, this app demonstrates the versatility of the GMetri platform, for enabling the creation of 2D experiences on the platform. This QR Code app can scan QR Codes to show product information. We have two devices, namely, a coffee maker and a frother. We show YouTube videos corresponding to these elements when their QR codes are scanned!

This app uses QR Code Matcher Element (see Elements Used section below) and hence the experience only works on mobile devices.

The above app can scan QR codes with the words "coffee" and "frother" only. When it reads any of those words, it will open up a YouTube video for the corresponding elements.

Elements Used​

  • Pano Image

  • Image

  • Pop-Up

  • QR Code Matcher

Add Elements​

  1. Create a new experience called Scanner.

  2. Head over to the editor.

  3. Click on the Elements button inside editor.

  4. Choose the Pano Image.

    • Give a name to the Pano Image. Here we named it White_Background.

    • Now, on the right bar, click on the upload button to upload a Pano Image.

      Note: Pano Image is the background of your Scene.

    • Once you click that, the file uploader will open up. Here, either you can upload a background of your choice or chose from the templates. To choose a white background from the templates, go to templates/panos/helpers/ and find white_pano.jpg.

    • Choose a Pano image and click on the Select button. The image will be applied as the background of your Scene.

  5. Click on the Elements button again and now choose the Image element. An image thumbnail will appear in the Editor. We will use this image as a button.

  6. This is the right time for us to use the Gyro lock feature.

    • Click on Scene in the Structure Tab on the Right Bar.

    • Now go to Properties Tab and click on the Gyro Lock.

    See the yellow highlighted setting in the image below.

    • Go ahead and try to click and drag the experience. You can't? That's right. What you just observed is, the experience got locked in 2 dimensions and became non-draggable.

      Gyro lock is used for making 2D applications on the GMetri XR platform.

  7. Next, upload an image to the Image element that we created in step 5. The steps to upload are pretty much the same as those shown in step 4 for uploading the Pano Image. We have used an image that suggests QR Code scanner.

  8. Once you're all set with your image, add 2 Pop-Up elements to the experience using the Elements button. These Pop-Ups will be used to show YouTube videos of the devices that we scan with the QR Code.

    Decide the number of objects that you want to scan the QR code for and create as many Pop-Up elements as devices. Here we choose 2 devices from the office - Coffee Maker and Milk Frother for this demo. Hence we add 2 pano elements in step 8.

  9. Double-click on the newly created Pop-Up Elements in the Structure Tab to change their names to something relevant to the product that will be displayed and click on the Properties Tab to change its properties:

    • Click on the Add button to add Items to the pop-up.

    • Now from the Drop down choose YouTube link.

    • Add the link and details of the product being displayed in the heading and description.

    • Do step 9 for all of the Pop-Ups.

  10. Add a Text Element optionally to show the app name. Here, we use the name Scanner.

  11. Now, we add the most important element for this app, the QR Code Matcher.

    • Once added, head over to the Properties Tab of the QR Code Matcher and add two (or as many devices as you have) items as shown below.

    • QR Matcher matches the string in a scanned QR Code to the strings above, and performs certain activities accordingly. (We will explore how as we go ahead)

Summary:

Once all elements are added, your editor should look something like this:

And the Right Bar Structure Tab should show your elements:

Add Rules​

Now that we have all the Elements in place, we need to add rules between elements for the app to work.

  1. Head over to the rules window by clicking on the Rules button.

  2. Firstly, we need to have a click event for the Image that should open the QR Code Matcher and start scanning for QR codes.

  1. Second, we add 2 rules that tell the Code Matcher to open the respective Pop-Up Elements when a particular string is scanned.

Test​

  • That's it! It now time to test the application. You can do that by clicking the green Play button in Right bar.

  • A QR Code shall appear. Scan this from your phone to preview your app. The changes you make in the editor will be available in the preview as soon as you make them after refreshing the page!

Note that QR Code Matcher and Browser works only on mobile hence this experience should be run on a mobile device.

Deploy​

  • For other to view this app, you must deploy it. To do this head over to the Publish section to know more.

The above app is available to all .

To generate QR codes for any text, head .

QR_Tutorial_Pano
QR_Tutorial_Pano
Gyro
Pop-Up
ADD
ADD youtube
QR Matcher
Editor
Right bar
Rules
Rule
here
here