Documentation

Augmentations in the Wikitude Studio

Text

The Text augmentation is the most basic augmentation available in the Wikitude Studio. Add it to your target image to overlay basic text elements. If you want to apply advanced styles to the text augmentation please use HTML Widgets.

Properties

Name: Sets the name of your augmentation which is used as unique identifier by Studio. The name is used in reporting to identify your augmentation. You can set it to anything you like.

Text: The actual text of this augmentation.

Text Color: The color of the text of this augmentation. Select it from the color picker or enter a color value in hexadecimal format.

Background Color: Sets the background color of this augmentation. Select it from the color picker or enter a color value in hexadecimal format.

Text Style: Sets the style of the text augmentation. Available are

  • Normal
  • Italic
  • Bold

Opacity: Sets the opacity of your augmentation. Setting the value to 0% makes the augmentation completely transparent, whereas 100% will render it opaque.

Rotation: Rotates your augmentation according to the angle you set in this control.

Order: Sets the order of your augmentation as it is drawn. With the two controls below you can either bring your augmentation to the front or send it to the back.

Horizontal Position: Sets the horizontal position of your augmentation. The value is relative to the size of the target image. 0% corresponds to the left border, 100% corresponds to the right border.

Vertical Position: Sets the vertical position of your augmentation. The value is relative to the size of the target image. 0% corresponds to the top border, 100% corresponds to the bottom border.

Image

The Image augmentation is used to overlay images. Images can either be referenced from a remote web address or uploaded directly from your computer.

Properties

Name: Sets the name of your augmentation which is used as unique identifier by Studio. The name is used in reporting to identify your augmentation. You can set it to anything you like.

Load Image from URL Enter the web address of an image, which you like to use as augmentation.

Click URL: Enter the web address which should be opened once a user is clicking onto this augmentation.

Opacity: Sets the opacity of your augmentation. Setting the value to 0% makes the augmentation completely transparent, whereas 100% will render it opaque.

Rotation: Rotates your augmentation according to the angle you set in this control.

Order: Sets the order of your augmentation as it is drawn. With the two controls below you can either bring your augmentation to the front or send it to the back.

Horizontal Position: Sets the horizontal position of your augmentation. The value is relative to the size of the target image. 0% corresponds to the left border, 100% corresponds to the right border.

Vertical Position: Sets the vertical position of your augmentation. The value is relative to the size of the target image. 0% corresponds to the top border, 100% corresponds to the bottom border.

Button

Using the Button augmentation will add a pre-styled button to your target image.

Properties

Name: Sets the name of your augmentation which is used as unique identifier by Studio. The name is used in reporting to identify your augmentation. You can set it to anything you like.

Text: The text of your button.

Click URL: Enter the web address which should be opened once a user is clicking onto this augmentation.

Text Color: The color of the text of this augmentation. Select it from the color picker or enter a color value in hexadecimal format.**

Background Color: Sets the background color of this augmentation. Select it from the color picker or enter a color value in hexadecimal format.

Background Image URL: Enter the web address of an image, which you like to use as background for this button. Transparent areas will be filled with the background color of the button.

Border Color: Sets the border color of your button. Select it from the color picker or enter a color value in hexadecimal format.

Opacity: Sets the opacity of your augmentation. Setting the value to 0% makes the augmentation completely transparent, whereas 100% will render it opaque.

Rotation: Rotates your augmentation according to the angle you set in this control.

Order: Sets the order of your augmentation as it is drawn. With the two controls below you can either bring your augmentation to the front or send it to the back.

Horizontal Position: Sets the horizontal position of your augmentation. The value is relative to the size of the target image. 0% corresponds to the left border, 100% corresponds to the right border.

Vertical Position: Sets the vertical position of your augmentation. The value is relative to the size of the target image. 0% corresponds to the top border, 100% corresponds to the bottom border.

HTML Widget

The HTML Widget is the most versatile augmentation available in the Wikitude Studio. Essentially it is a placeholder for HTML code which is rendered on top of your target image. In its basic form you can use them to style text and headings with the in-built editor. You also can easily add list with bullet points, align your text or add any other HTML, CSS and JavaScript snippets.

Make use of it when you want to work with more complex visualizations or real-time data (like weather information). You can also use JavaScript within the HTML Widget, which is executed once a user is accessing your target image.

Note: Only use content, which can actually be rendered on the web-browser of your devices. For example, Flash content will not work on iOS and Android devices.

Properties

Name: Sets the name of your augmentation which is used as unique identifier by Studio. The name is used in reporting to identify your augmentation. You can set it to anything you like.

Content: Enter HTML content in this box, which will be rendered within the HTML Widget.

Opacity: Sets the opacity of your augmentation. Setting the value to 0% makes the augmentation completely transparent, whereas 100% will render it opaque.

Rotation: Rotates your augmentation according to the angle you set in this control.

Order: Sets the order of your augmentation as it is drawn. With the two controls below you can either bring your augmentation to the front or send it to the back.

Horizontal Position: Sets the horizontal position of your augmentation. The value is relative to the size of the target image. 0% corresponds to the left border, 100% corresponds to the right border.

Vertical Position: Sets the vertical position of your augmentation. The value is relative to the size of the target image. 0% corresponds to the top border, 100% corresponds to the bottom border.

3D Model

The augmentation 3D Model allows you to display 3D models on top of your target image. Using 3D models as augmentations is a more advanced topic, why we spent working with 3D models an entire chapter in this help section.

3D models are not previewed in the work area. A placeholder image is shown instead.

Properties

Name: Sets the name of your augmentation which is used as unique identifier by Studio. The name is used in reporting to identify your augmentation. You can set it to anything you like.

3D Model File: Upload your 3D model in wtc-file format. See the section 3D Assets Workflow for a detailed description how to work with 3D models.

3D Model Scale: Sets the scale of your 3D model. The 3D model will be rendered with default size. Scaling the model allows you to control the size of the 3D model. When using the Wikitude 3D Encoder you can roughly estimate the size of the 3D model. If your 3D model fits into the square with the dimension 1 unit in the 3D Encoder as shown in the image below you can use 1 as value for 3D Model Scale. If your model uses 2 grid units, you need to set the value to 0.5 and so on.

Rotation: Rotates your augmentation according to the angle you set in this control.

Horizontal Position: Sets the horizontal position of your augmentation. The value is relative to the size of the target image. 0% corresponds to the left border, 100% corresponds to the right border.

Vertical Position: Sets the vertical position of your augmentation. The value is relative to the size of the target image. 0% corresponds to the top border, 100% corresponds to the bottom border.

Video

The augmentation Video allows you to display videos on top of your target image. Videos in your AR project can be used in two different modes and from several sources

Modes:

  1. Fullscreen videos played in the integrated player
  2. Overlay videos which play on top of the target
  3. Overlay videos with an alpha channel

Sources:

  1. Your own hosted video (full-screen and overlay mode)
  2. Video hosted on Vimeo (full-screen and overlay mode)
  3. Video hosted on YouTube (full-screen mode only)

Read more about working with videos in our separate chapter.

Properties

Name: Sets the name of your augmentation which is used as unique identifier by Studio. The name is used in reporting to identify your augmentation. You can set it to anything you like.

Load Video from URL: Enter the URL to your video. The URL can either point to

Fullscreen Video: Select this mode when you want the video to be played back in fullscreen mode. Videos hosted on YouTube will automatically be played in fullscreen mode.

Overlay Video: Select this mode when you want the video to be played back on top of you target image or at a specific geo-location.

Overlay Video with alpha channel: Select this mode when you want to use a video that contains transparent background.

Start Playback Immediately: Enable this setting when you want the video to start immediately after the target image has been recognized by the user.

Play in a Loop: Enable this setting when you like to play back the video in an endless loop. This setting is only available for overlay videos and overlay videos with alpha channel.

Default Thumbnail: Enable this setting when you want to use the default thumbnail - as provided by YouTube or vimeo - as your thumbnail image. Wikitude Studio will then download the image from YouTube or vimeo.

Custom Thumbnail: This setting allows you to upload a custom thumbnail image for your video, which will be shown to the user as preview of the video.

Opacity: Sets the opacity of your augmentation. Setting the value to 0% makes the augmentation completely transparent, whereas 100% will render it opaque.

Horizontal Position: Sets the horizontal position of your augmentation. The value is relative to the size of the target image. 0% corresponds to the left border, 100% corresponds to the right border.

Vertical Position: Sets the vertical position of your augmentation. The value is relative to the size of the target image. 0% corresponds to the top border, 100% corresponds to the bottom border.

Rotation: Rotates your augmentation according to the angle you set in this control.