Augmentations in the Wikitude Studio
- Text Augmentation
- Image Augmentation
- Button Augmentation
- HTML Widget Augmentation
- 3D Model Augmentation
- Video Augmentation
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:
- Fullscreen videos played in the integrated player
- Overlay videos which play on top of the target
- Overlay videos with an alpha channel
Sources:
- Your own hosted video (full-screen and overlay mode)
- Video hosted on Vimeo (full-screen and overlay mode)
- 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
- your own hosted file
- a video hosted on vimeo (e.g. http://vimeo.com/62688266)
- a video hosted on YouTube (e.g. http://www.youtube.com/watch?v=bX98XNv8VL4)
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.