genARate Studio offers the possibility to create more advanced and interactive Augmented Reality(AR) content elements by using basic Javascript, CSS and HTML coding.

What does that mean for you?

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.

Once decided to add an HTML overlay to your AR.Create WonderPage follow the explanation below.

Here you can find out how to

How to add an HTML element:

Step 1: Click on the HTML icon in the toolbar on the left side of your screen.

Second 2: A thumbnail appears inside the scenario editor.

Step 3: Click on the thumbnail inside the scenario editor to move/position the element via drag & drop and to access the HTML editor and settings.

Step 4: To get to the input fields click on CONTENT.

Note: Enlarge the input fields by clicking on the 4-arrows icon based in the lower right corner of each input field.

Important: As soon as you included your HTML/JS/CSS code you have to click the button "RUN" in the settings. Only then the thumbnail will show your created scenario inside the editor.

Settings

ATTRIBUTES

Name: Select a unique name for your HTML Fragment.

Size: Set individual size of HTML Fragment (by width and height, the 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 target image and fixes it to screen so it will always be shown in the same position, no matter how the target image is moved.

Hidden: Makes HTML Fragment invisible at the 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 the content element, mostly used for referencing inside HTML fragments.

CONTENT

HTML editor:

  • Click on tab “CONTENT” to access the editor fields for Javascript, CSS and HTML.

  • Include your code into the according field(s).

  • Click on the “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 the result within the scenario editor.

ANIMATIONS

Animations make your WonderPage more appealing as they add some motion to static content. For each content element, you can easily define how it should appear/disappear as soon as a target image is scanned or lost.

See how to animate your AR elements here.


Maybe interesting too:

Feel free to use different overlays in a single AR.Create WonderPage.

Further AR.Create overlay types are:

Image

Video

Audio

Text Box

Social Media

Buttons

Contact

Calendar Event

3D-Model

Did this answer your question?