Add an Interface to the Object
The interface of a Hybrid Object is what a user will see augmented onto a Hybrid Object. To add an interface to your Hybrid Object, click the “Add Interface” button in the row of your newly created object.
The Object allready has a “hello world” example stored. The index.html embeds the bird.png image into the webpage. The name index.html indicates that this file is the starting point. The object.js file always needs to be included in your project. It provides functions that allow the Reality Editor to communicate with the Hybrid Object.
If you want to add a new interface to the page, simply drag and drop your new pages into this page. They will overwrite the previous files.
Let’s take a closer look at the index.html file. <!doctype html><html> <head> <meta charset="UTF-8"> <title>demo</title> <script src="object.js"></script> </head> <body> <img src="bird.png" width="300" height="300" alt=""/> </body></html>
The script tag including object.js is necessary for your HTML page to interact with the Hybrid Object. For this reason, it should not (and cannot) be deleted in order to function. Otherwise, anything in this file can be altered. This particular file tells us to expect the bird.png image to appear when we use the interface. Always make sure that you add object.js to your interfaces.
Once you are satisfied with your interface files, you can move on to interacting with your Hybrid Object. Remember you can always come back and alter your object’s interface later! Click the “Back” link to return to the main page.
Using your Device with a Target
When you are ready to interact with your Hybrid Object, open the Reality Editor App on your device.
Next, point your device at the target image you have chosen for your object.
When you point your device at your chosen target image, you will see the content of you index.html file (the HTML file in the object’s Interface) appear.
To scale all interfaces, you can push the Developer button (the third icon on an iPad or the last icon on an iPhone) to get in to a menu where you can switch on the developer mode.
Once you have switched the mode, you will be able to move interfaces around by simply dragging them with a finger. For scaling the interface, use one finger to select the interface and the second finger to change the scale.