1 of 30

AR Project

Start your own AR project

2 of 30

Index

3 of 30

IOT Intro

TokyMaker, designed with a WIFI card, is capable of creating IOT projects and sending / receiving data over the internet. Using internet connectivity, sensors, and actuators, TokyMaker can communicate and interact with others over the Internet. It can be remotely monitored and controlled. Today, we will set up IoT technology with a TokyMaker.

You have to include these two blocks in every IOT program you create. They establish connection to the Internet and the Adafruit server

4 of 30

What we use:

Adafruit IO is a platform designed to display, respond, and interact with your project’s data. It is the Internet of Things, for everyone. Click Get Started for Free then create a new account .

io.adafruit.com

5 of 30

IOT Setup

After you signed in, click the Adafruit IO Key to get your personal IO Key ,the key will be used in your IOT block.Then we set a simple program to examine if the IOT is connected or not. The on head LED Is green when IOT is connected, and red if not connected.

Check Connection

It might take a while for the TokyMaker to connect, so give your TokyMaker about 30 seconds to respond. Debug if IOT is not connected.

6 of 30

Visualize Data

Click the create new block button then we use line chart to show the temperature vary.In block setting, enter a block title. Set the Y-Axis minimum as 0, and Y-Axis maximum as 100, because that’s our data range. 

7 of 30

Setup-Feed

Feeds are the core feature of the Adafruit IO system. The feed contains the sensor data values that get pushed to Adafruit IO from your device. It also holds metadata about the data you push to Adafruit IO. You will need to create one feed for each unique source of data you send to the system.Click create new feed and name your feed.

8 of 30

Tokymaker Programming

Receiving your data from Internet. Check the IOT connection .Get your data from feed cup.temp and write a code to make sure the data from moisture sensor shows up on the screen. Then we can know the temprature accurately.

9 of 30

Augmented Reality Programming

Get connected with IOT and set sphere and axes. We could set the sphere position by change the value of X axis and Y, Z. Then we get the info from feed cup.temp to set the color of our sphere. When the temp above 50 then it is still red ,if the temp below 50 ,the sphere becomes blue.

10 of 30

Show your own AR project

After coding your project, then save your project to google drive and use your camera scan the QR code to go to the AR website. Put your camera on the right side picture. You could also print it on platform. Check it out!

11 of 30

Tips

  • Every AR project has one unique QR code, remember to reopen your camera when you saved a new project.

  • All the graph will be based on the black picture of TOKY.

  • If it cannot show anything on your screen, check your code first, then restart your Tokymaker and try it again. Reopen your browser and scan the QR code with a new window.

12 of 30

Set Text in AR

Set String to the AR element. In here the ID could be a string or number. You could free type anything you like to show a text field in AR. In here ,we input TOKYLIFE for example. Just try to show you own idea!

13 of 30

Change the color of your text

  • We could use set color function to change the color of your text , box , sphere and graph. It is easier for you to try different color of your 3D model.

14 of 30

Set Sphere in AR

Create or update a sphere in AR .The ID here could be a string or number. We could set the sphere with different radius in AR.In here, it is given by a sphere which radius is 0.5.

15 of 30

Set Box in AR

  • Create or update a BOX in 3D area. In here, we could set the opacity of Box ,Sphere or any other 3D object.

16 of 30

Use Scale function

And then we could add a scale block to change its scale by changing the value of our IoT feed.In here, we use rotate sensor to control the value of scale.

17 of 30

How to control the scale

  • Imagine your 3D model has a centre which decide the object position in AR as shown in picture below.
  • The size of scale is actually the percentage of your length, width and height. For example if your length equals to 6 then you want to change the scale with 50% then the length comes to 3.

18 of 30

Set Graph in AR

Use set graph block to show a graph from IoT feed in AR. Discover the magic of the graph. In here we set a graph named Gianana at x label 0.5 and y label 0.5.The code is shown below.

19 of 30

Set 3D object

Except the box and sphere we could also import the 3D model into our Toky AR pattern. In here we could import a 3D model into our AR project.

20 of 30

Use rotate function horizontal

You could use rotate block to rotate of your 3D model with different degree on the x, y ,z axes. In here we import a 3D model and use rotate block to rotate the 3D model in AR. If the IoT value is below 50 then we rotate it with 270 degree in y axe. If the IoT value is above 50 then we rotate it with 90 degree.

21 of 30

Use rotate function vertical�

You could also use rotate block to rotate of your 3D model with different degree on the x, y ,z axes vertically.

22 of 30

Use rotate function lateral

You could also use rotate block to rotate of your 3D model with different degree on the x, y ,z axes laterally.

23 of 30

3D object website

Tinkercad is a free, online 3D modeling program that runs in a web browser, known for its simplicity and ease of use.. We could DIY our own 3D project in here and import it into our AR design!

https://www.tinkercad.com/things

24 of 30

Move your 3D project

  • We could use move block to move our 3D project to anywhere of the space. In here, the number of 1 refers to 1cm of our 3D space. position(1,1,2)

25 of 30

Show your Axe

  • Imagine the your space have x axis, y axis and z axis. The axe could be a reference. The number 1 refers to 1cm in one axis in here.

26 of 30

Change opacity of your 3D model

  • The opacity block is to help you to change the transparent value of your 3D model.

27 of 30

Block explanation

Name

Explanation

The simplest "repeat" block runs the code in its body in an endless loop. Will execute the inner instructions continuously, once and again.

At every block, together with the conditioner if/do, runs the code in each period of time specified in milliseconds or minutes.

Break the repeat block

Run and do for the items in list

28 of 30

Block explanation

Name

Explanation

Create a list with any number of items.

Provide a name of your list.

Returns the length of a list.

29 of 30

Block explanation

Name

Explanation

Add a letter, word, or a line of text in this block

Create a piece of text by joining together any number of items

Append some text to variable ‘item’

Returns the number of letters in provided text

30 of 30

Thank you and enjoy!

See you in the community