Building an Augmented Reality-based Data Visualization Block

This tutorial explains the steps involved in building an Augmented Reality Block to visualize temperature and humidity readings from the Temperature & Fire Monitoring & Alerting Tinker Block Application.

Before building Chatbot Block, please make sure to build:

1. Temperature Block, Processor Block and Power Block

2. IoT-based Server Block 

3. Device Integration Block 

1. Visit ZapWorks Augmented Reality platform website: https://zap.works, click "Login" and login with your Google account.

2. Click "+" to create a new project.

3. Scroll down through the type of projects, and select "Studio" as shown in the below image:

4. Click "Continue with Studio".

5. Give a name to your project such as "AR Integration with Tinker Blocks".

6. Download the Zapcode in PNG format to your computer.  You will need it later.

7. Click "Download Studio" button in the above screen, or visit this link: https://my.zap.works/downloads and download ZapWorks Studio, an augmented reality developer tool.  

8. Once it downloads, double-click the same and follow the on-screen prompts and instructions to install ZapWorks Studio on your computer.

9. Once installed, open ZapWorks Studio tool.  

10. Next, download the below ZapWorks project file (.ZPP file) to your computer by clicking the below button:

11. Click the "Import a ZPP File" button to import the downloaded ZPP file into ZapWorks Studio tool. 

12. Select the imported project file and click "Open Selected" in the above screen.

13. Click "Close" button in the pop-up window that appears.

14. Click on "Show" option to reveal the project code as shown in the below screen:

15. In the code, edit line #14 as follows:

• Replace 99999 with your ThingSpeak Channel ID.

• Replace XXXXXXXXXXXXXXXX with your ThingSpeak Read API Key.

16. Click "Publish" menu option.

17. Click "Login with your Browser" to login to ZapWorks, login to Zap.works with your Google account.

18. Click "Authorize" to allow ZapWorks Studio to access your Zapworks account.

19. Come back to ZapWorks Studio and select the name of the project you created earlier in ZapWorks platform and click "Choose Selected" button as shown in the below screen.

20. Click the "Publish" button.

21. The project is now published and can be experienced in Augmented Reality view by scanning the Zapcode displayed on your ZapWorks Studio tool - similar to the one shown below.

22. Open Google "PlayStore" App on your Smartphone, and download & install the "Zappar" app on your Smartphone.

23. Once the Zappar App is installed, open the App and scan the published ZapCode displayed on your ZapWorks Studio tool.

24. You will then see the temperature and humidity sensor readings displayed in an augmented reality view within the Zappar App.

25.  As a next step, print the ZapCode on physical paper or sticker (downloaded earlier in PNG format from ZapWorks tool) and stick it on a the Temperature Tinker Block:

26.  Ask your friends to scan the Zapcode on the Temperature Block using the Zappar App.  As soon as they scan the zapcode, the temperature and humidity reading will be displayed in augmented reality view within their smartphone.

27. In the augmented reality view, the temperature and humidity readings are augmented over and above the physical Temperature Block.  It gives the appearance of temperature and humidity readings coming alive by just looking at the physical block.