Vuforia Studio Tutorials and FAQs > Beginner > Add 2D Widgets to a Mobile Experience
Add 2D Widgets to a Mobile Experience
What You’ll Need
Access to Vuforia Studio
An existing mobile project that you can add 2D elements to (for example, the Use a 3D Model in a Tabletop AR Experience tutorial)
For this tutorial we’ll add 2D widgets to the Fan experience we created previously.
1. Open Vuforia Studio and then open an existing mobile project.
2. Select 2D from the canvas toolbar.
You can switch back and forth between the 3D and 2D overlay using this toolbar.
3. Drag and drop a Image widget onto the top panel on the canvas.
4. Under PROPERTIES, click the green + sign next to the drop-down menu under the Source field. The Add Resource window appears.
5. Click Select File, and navigate to the image file you want to add. For this example, we’ll add the Vuforia View.png file. Click Open, and then click Add on the Add Resource window.
6. Once the file has been added, the graphic appears on the canvas.
You can use the Width and Height fields to play around with the size of the image. You can use percentage (as shown above), or you can use fixed pixel values. For example, 128px.
7. Scroll down in the list of widgets, and drag and drop a Label widget onto center panel on the canvas. Ensure that your canvas looks similar to this:
8. Under PROPERTIES in the DETAILS pane, enter the text you want displayed in the experience in the Text field.
9. Click Preview on the project toolbar. This automatically saves your progress first, and then open the Preview page.
10. Ensure that your preview looks similar to this:
When you’re finished viewing the preview, close the Preview tab in your browser.
11. If no other changes need to be made, click Publish in the project toolbar.
12. When the progress indicator shows a success message, your project is published to your Experience Service, and you can use Vuforia View to scan the ThingMark you associated to your experience (for example, 100:2).