Create an AR Business Card
Introduction
Follow the sections below to build a demo. While doing so, you will become familiar with a whole range of augmented reality (AR) widgets, and see them in action. Upon completing this document, you will end up with an interesting demo that can easily be customized for your own purposes.
Prerequisites
Before starting this guide, make sure you have completed the following prerequisites:
- Install Studio Pro and the latest Make It Native Apps with AR capabilities.
- Download the AR widgets (version 2 or higher) from the Mendix Marketplace.
- Create a new empty page with Container (AR) and ImageTracker (AR) widgets.
- Add your business card png as the Image to the ImageTracker (AR).
- Obtain 3D objects to add to your AR business card (this document uses Twitter and LinkedIn logos).
- Have a PNG of your business card.
Download these widgets:
- Container (AR)
- ImageTracker (AR)
- Square (AR)
- 3D Object (AR)
When you have completed the prerequisites, your work should look like this:
Creating an AR Business Card Demo
For this app you will need to start a new app based on the Blank Native Mobile App, or use another app with the Native Mobile Resources module imported from the Mendix Marketplace. First you will lay a virtual business card over your real business card. You will need the Square (AR) widget and the imported PNG of the business card you wish to use.
Ideally you should have several recognizable features on your image, specifically an image with a lot of edges and contrast. The business card you are using in this document possesses these traits:
After you have added your business card as an image, remember to adjust the physical size in Image Tracker (AR) to the exact size of your business card. Choose the width (the longest side) of your business card for this. This will probably be around 8.5 centimeters:
Next you will add a virtual image of your business card to overlap the physical business card. To do this, add a Square (AR) widget to your app’s home page. Note we already added a Container (AR) and an ImageTracker(AR) beforehand:
-
Double-click the Square (AR) widget.
-
Select the Material tab.
-
Select Material type > Texture.
-
Select the image of your business card for the Texture. This should be the same image as you selected for your Image Tracker (AR). When finished your dialog box will look like this:
-
Go back to the General tab and fill out the size of your business card. The important sizes are X for the width of your business card and Y for the height.
-
Set Rotation > X to -90 to ensure the virtual image is rotated correctly.
Once this is all set up, run the app and check if it works in the Make It Native app. Here you should see the virtual business card overlaying your physical card:
Next, add a picture of yourself to your virtual business card. Drag another Square (AR) widget into ImageTracker (AR) and add a picture of yourself to this. In our case we have used a square image with transparent edges to make it appear round:
Go to the General tab and place it about 8 cm (0.08,0,0) to the right of the first image and match the size with the size of our business card image. You should now have this image right next to your business card image.
To finish this business card demo you need something people can click to find out more about your work. For this you will add two social media logos: a Twitter one and a LinkedIn one. You can use any 3D object.
The following settings correctly place them underneath our business card (since scale can differ between 3D objects, this is not guaranteed to work with all 3D objects):
You can alter the color or texture of the 3D objects within Mendix. Currently, Twitter has a color of #1DA1F2 and LinkedIn has #0A66C2:
Now all that is left is to add a nanoflow that opens a URL to the Events > On click functionality. Create a new nanoflow with the Open URL action. Add your Twitter profile URL here:
Congratulations, you now have a functioning AR business card demo with custom 3D objects!