UI Canvas/Button and Augmented Reality with Vuforia

Hi, I am new to Unity and Vuforia.

I was able to set up an ARCamera and ImageTarget with a child GameObject cube. When I scan my marker with my iPad, I can see the cube hovering over my marker. Great.

Now, I am trying to get the cube to become a clickable button so I tried using a UI Button. However, creating any UI object means that it comes with a UI Canvas as well. So, I want to be able to scan the marker and have the button show up but that is not working. The button is simply just there on the screen regardless of whether or not I scan over the marker.

What should my hierarchy look like?

ARCamera
-> Camera

ImageTarget
-> Canvas
->-> Button
->->-> Text

Or should it be:

ARCamera
-> Camera

Canvas
-> ImageTarget
->-> Button
->->->Text

What do I do with two ImageTargets? Should I use the first hierarchy or second?

Finally, what should my canvas Render Mode be? I currently have it as "Screen Space - Overlay." I tried "Screen Space - Camera" but it didn't really make that much of a difference. The buttons still did not show up when scanning the marker.

 

Sorry that I can't go into detail here, but if you want a button to follow your object in 3D space, the (probably) easier way would be to have the canvas in world space.
You'll have to play with the scale of the canvas, I usually have it be a 1600x900 size, and 0.01 scale on the 3 axis. Otherwise you'll have to position and size everything else inside it with decimal values.

To follow an object from the GUI in screen space, you'd need a script to transform the world coordinates from the object with a function from the camera, and then place the UI element with that. Probably not worth it unless you need the button to be always flat regarding the screen (as in world space it could be viewed from different angles, even from the side).

As for you question on hierarchy, I'd let the canvas as child of the marker. As the marker it's not an UI object, it doesn't need to be under a canvas.

 

Thank you for your reply. Since then, I've modified my hierarchy to look like this:

ImageTarget
-- Empty Game Object
-----Canvas
-------UIButton
---------Text

Canvas is now in world space as well.

But now the button, marker, and text disappears from the editor screen. I've attached a screenshot as to how it looks like now.

In a big picture sense, this is all I'm trying to do. I want to scan around a room with an iPad and then when it sees this marker, it will have a touchable/tap-able button (or object). Once tapped, it opens up a dialog window with information about the marker, etc.

Maybe this can be achieved without having to mess with Canvases or UI objects. If it can just be done with GameObjects, ImageTargets and a script to make the GameObject touchable and have it open into a dialog box, then I am totally open to those suggestions too. Please just point me on the right path.

Any help would be greatly appreciated! Thank you.

 

If that happens while running, it's normal. The marker prefabs come with a script that responds to a marker found or not, and if not, it turns off the hierarchy below the marker. You could comment that if you want, depends on what you need your app to do.

If is during editing, check if it's a matter of scale on the hierarchy.
You could focus the scene window on a specific object by pressing F, I use to do that to find objects that I can't see right away.

 

You need to show button when traceable "ImageTarget" found. i.e. button should be popup on traceable event.

• If you create such simple UI in unity , wherever you place it in hierarchy . it will always display regardless of marker detection.

• You first need to know marker get detected or not using method provided by Vuforia and then have to create button grammatically.

• For this you must understand how to keep a track of trackable events, such as trackable found or trackable lost. Vuforia makes this easy for us by providing a template script named DefaultTrackableEventHandler.
  
  
• This script is by default attached to any ImageTarget prefab. You can use this script or similar script as shown below.
  

if (newStatus == TrackableBehaviour.Status.DETECTED || newStatus == TrackableBehaviour.Status.TRACKED || newStatus == TrackableBehaviour.Status.EXTENDED_TRACKED)

You have to write C# script and attach it to "ImageTarget"

Script below describes how to show (popup) a GUI button overlaid on top of the 3D view in response to a target detection event, using thre Unity extension of the Vuforia SDK.

Here is the Script:

using UnityEngine;
using System.Collections;
using Vuforia;
using System;

public class ButtonPopup : MonoBehaviour, ITrackableEventHandler {

float native_width= 1920f;
float native_height= 1080f;
public Texture btntexture;
public Texture LogoTexture;
public Texture MobiliyaTexture;


private TrackableBehaviour mTrackableBehaviour;

private bool mShowGUIButton = false;


void Start () {


mTrackableBehaviour = GetComponent<TrackableBehaviour>();
if (mTrackableBehaviour) {
mTrackableBehaviour.RegisterTrackableEventHandler(this);
}
}

public void OnTrackableStateChanged(
TrackableBehaviour.Status previousStatus,
TrackableBehaviour.Status newStatus)
{
if (newStatus == TrackableBehaviour.Status.DETECTED ||
newStatus == TrackableBehaviour.Status.TRACKED ||
newStatus == TrackableBehaviour.Status.EXTENDED_TRACKED)
{
mShowGUIButton = true;
}
else
{
mShowGUIButton = false;
}
}

void OnGUI() {

//set up scaling
float rx = Screen.width / native_width;
float ry = Screen.height / native_height;

GUI.matrix = Matrix4x4.TRS (new Vector3(0, 0, 0), Quaternion.identity, new Vector3 (rx, ry, 1));

Rect mButtonRect = new Rect(1920-215,5,210,110);
GUIStyle myTextStyle = new GUIStyle(GUI.skin.textField);
myTextStyle.fontSize = 50;
myTextStyle.richText=true;

GUI.DrawTexture(new Rect(5,1080- 115,350,110),LogoTexture);
GUI.DrawTexture (new Rect (1530, 970, 350, 110), MobiliyaTexture);


if (!btntexture) // This is the button that triggers AR and UI camera On/Off
{
Debug.LogError("Please assign a texture on the inspector");
return;
}

if (mShowGUIButton) {

GUI.Label(new Rect(40, 25, 350, 70), "<b> G E 9 1 0 0 C </b>",myTextStyle);

//GUI.Box (new Rect (0,0,100,50), "Top-left");
//GUI.Box (new Rect (1920 - 100,0,100,50), "Top-right");
//GUI.Box (new Rect (0,1080- 50,100,50), "Bottom-left");
//GUI.Box (new Rect (Screen.width - 100,Screen.height - 50,100,50), "Bottom right");

// draw the GUI button
if (GUI.Button(mButtonRect, btntexture)) {
// do something on button click
OpenVideoActivity();
}
}
}

public void OpenVideoActivity()
{
var androidJC = new AndroidJavaClass("com.unity3d.player.UnityPlayer");
var jo = androidJC.GetStatic<AndroidJavaObject>("currentActivity");
// Accessing the class to call a static method on it
var jc = new AndroidJavaClass("com.mobiliya.gepoc.StartVideoActivity");
// Calling a Call method to which the current activity is passed
jc.CallStatic("Call", jo);
}

}

 

Hi, I'm working on a menu based interaction with AR elements. Once an image target is scanned a menu pops up. Using an on screen cursor or dot ray is cast and when it hits the menu buttons an action is triggered. The action to be triggered is to display the gameobjects which are a child of Image target. Could you please suggest a way to control the display of gameobjects which are a child of image target ?

Thank you.

 

Hi, how can I print a variable ? I want to show it in the camera . I work with vuforia and unity 2017

 

hi ALL, i have problem into my project, how can do canvas follow to camera AR when camera AR rotation ?