General:
genARate Studio offers the possibility to create more advanced and interactive AR content elements by using basic Javascript, CSS and HTML coding
On low end this allows you to copy and paste embedded code snippets e.g. provided by youtube, google maps, and others, or to include simple iframe connections to external websites.
On high end, you can create advanced content elements like interactive image galleries, video carousels or similar.
How to:
- Click on the HTML icon in the toolbar
- A thumbnail appears inside the scenario editor
- Click on the thumbnail inside the scenario editor to move/position the element via drag & drop and to access the HTML editor and settings
Settings
Name: Select a unique name for your HTML Fragment
Size: Set individual size of HTML Fragment (by width and height, aspect ratio is fixed)
Position: Set individual position of HTML Fragment (by x and y)
Rotation: Set rotation of HTML Fragment (by °)
Arrange: Define hierarchy in between different content elements
Fix to Screen: Disconnects HTML Fragment from trigger image and fixes it to screen so it will always be shown on same position, no matter how trigger image is moved
Hidden: Makes HTML Fragment invisible at start of AR experience (to e.g. make it appear by Button interaction later)
Transparent Background: Makes Background of HTML Fragment transparent
Unique ID: Internal ID of content element, mostly used for referencing inside HTML fragments
HTML editor:
- Click on tab “Content” in to access the editor fields for Javascript, CSS and HTML
- Include your code into the according field(s)
- Click on “Run” button below the three fields to execute the included script, a preview becomes visible inside the scenario editor
JS: Enter Javascript Code here
CSS: Enter CSS Code here
HTML: Enter HTML Code here
RUN: Runs the code you have included and shows result within scenario editor
Animations:
Explanation can be found here.
Debugging HTML Fragments
- Currently there is no debugging available inside the genARate GUI, yet
- Advanced users can debug HTML fragments using Android the Developer Console
- Learn More Here