I am confused by the virtual button dev guide https://developer.vuforia.com/resources/dev-guide/virtual-buttons

because there's no explanation of how the button scaled and how it can get negative value .For example ,how could (    90, 850)(  290, 925) becomes (-108.68, -53.52)(-75.75, -65.87) ? why 90 scaled to -108.68 ?

or is that value is defined by the system? how should I get those value from?

Hi,

the "negative/scaled" coordinates are expressed in the 3D reference frame of the target, i.e. you have to imagine that the origin (0,0) of your reference frame is in the center of your target, and the values are based on the size of your target (not in pixels of the image).

( 90, 850) is in pixels, with origin in the top/left corner of your image; this becomes (-108.68, -53.52) because it is converted to 3D coordinates with origin in the center of the target and size as defined in your DataSet XML for your target size.

Hello, I'm confused with this scaled coordinates as well. My question is how to do I convert the values into 3D coordinates? Is there a formula for doing it?

Hi,

Suppose your image is Width (pixels) x Height (pixels), for instance suppose it is 1000 x 500

Suppose you have a point on the image, located at:

px = 950 (i.e. close to right border, which is at 1000)
py = 450 (i.e. close to the bottom of the image, which is at 500)

u = px / Width; //this gives normalized value in range [0,1]
v = py / Height; //this gives normalized value in range [0,1]

In the example with numbers, this will mean:

u = 950 / 1000 = 0.95;
v = 450 / 500 = 0.9;

now, let's flip v vertically, because the image origin is at the top;

v = 1 - v;

i.e., in example numbers,
v = 1 - 0.9 = 0.1

then, let's rescale them in range [-1,1]

u = -1 + 2 * u; // now in range [-1,1]
v = -1 + 2 * v; // now in range [-1,1]

in example numbers this becomes:

u = -1 + 2 * 0.95 = 0.9
v = -1 + 2 * 0.1 = -0.8

then, the 3D coordinates of the point on the target plane are:

x = u * target_size_x
y = v * target_size_y

for instance, if target_size_x is 200 and target_size_y is 100 (i.e. if target size is [200, 100] in the XML dataset file)

x = 0.9 * 200 = 180.0
y = -0.8 * 100 = -80.0

I hope this helps.

Thanks a lot for the explanation. This should help.

You're welcome.

2013-05-06 12:24:29.753 VirtButton[2007:907] QCAR OpenGL flag: 2

2013-05-06 12:24:29.829 VirtButton[2007:907] QCARutils onCreate()

2013-05-06 12:24:29.830 VirtButton[2007:907] APPSTATUS_INIT_APP

2013-05-06 12:24:29.832 VirtButton[2007:907] APPSTATUS_INIT_QCAR

2013-05-06 12:24:29.836 VirtButton[2007:907] ARVC: Rotating to Portrait

2013-05-06 12:24:29.838 VirtButton[2007:907] ARParentVC: appearing

2013-05-06 12:24:29.840 VirtButton[2007:907] ARVC: Rotating to Portrait

2013-05-06 12:24:29.841 VirtButton[2007:907] ARVC: viewWillAppear

2013-05-06 12:24:29.843 VirtButton[2007:907] ARVC: viewWillAppear

2013-05-06 12:24:29.848 VirtButton[2007:907] EAGLView: layoutSubviews

2013-05-06 12:24:29.955 VirtButton[2007:4303] INFO/AR(2007) 2013-05-06 12:24:29: QCAR SDK version 2.0.32

2013-05-06 12:24:30.055 VirtButton[2007:907] ARVC: viewDidAppear

2013-05-06 12:24:30.056 VirtButton[2007:907] QCARutils onResume()

2013-05-06 12:24:30.057 VirtButton[2007:907] ARParentVC: appeared

2013-05-06 12:24:30.058 VirtButton[2007:907] ARVC: viewDidAppear

2013-05-06 12:24:30.100 VirtButton[2007:907] APPSTATUS_INIT_TRACKER

2013-05-06 12:24:30.119 VirtButton[2007:907] Successfully initialized ImageTracker.

2013-05-06 12:24:30.120 VirtButton[2007:907] APPSTATUS_INIT_APP_AR

2013-05-06 12:24:30.122 VirtButton[2007:4507] INFO/AR(2007) 2013-05-06 12:24:30: ImageTracker: Successfully created dataset

2013-05-06 12:24:30.152 VirtButton[2007:4507] ERROR/AR(2007) 2013-05-06 12:24:30: Failed to load dataset 'Wood.xml'.

2013-05-06 12:24:30.215 VirtButton[2007:4507] Failed to load data set.

Hi, please post this question in our iOS specific section:

https://developer.vuforia.com/forum/ar-technical-discussion/ios

Hi, i need a clear clarification about how to calculate the virtual button co-ordinates. And i saw a sample calculation here and tried to use the same wth your sample VirtualButton app with 'Red' button

From the above sample                                                               Sample app (Button: Red)

Image width: 1000px                                                                      Image width: 1500px

Image height: 500px                                                                      Image height: 1050px

TargetSizeX: 200px                                                                       TargetSizeX: 247px

TargetSizeY:100px                                                                       TargetSizeY:173px

(i.e. if target size is [200, 100] in the XML dataset file)              (i.e. if target size is [247, 173] in the XML)

Virtual button Point (px): 950                                                        Virtual button Point (px): 90

Virtual button Point (py): 450                                                        Virtual button Point (py): 850

U = 950/1000 = 0.95                                                                   U = 90/1500 = 0.06

V = 450/500 = 0.9                                                                      V = 850/1050 = 0.80

V = 1 - V   =>  (1 - 0.9) = 0.1                                                       V = 1 - V   =>  (1 - 0.80) = 0.2

U =  -1 + 2 * U => (-1 + 2 * 0.95) = 0.9                                        U =  -1 + 2 * U => (-1 + 2 * 0.06) = -0.88

V = -1 + 2 * V => (-1 + 2 * 0.1) = -0.8                                         V = -1 + 2 * V => (-1 + 2 * 0.80) = -0.6

finally V = -0.8 and U = 0.9                                                        finally V = -0.6 and U = -0.88

x = U * TargetSizeX => (0.9 * 200) = 180                                   x = U * TargetSizeX => (-0.88 * 247) = -217.36

y = V * TargetSizeY => (-0.8 * 100) = -80                                  y = V * TargetSizeY => (-0.6 * 173) = -103.8

so Point (px): 950 will be 180                                                  so Point (px): 90 will be -217.36

(but in sample app its: -108.68)

and Point (py): 450 will be -80                                                 and Point (py): 850 will be -103.8

( in sample: -53.52)

here how you got this -108.68 and -53.52 instead of -217.36 and -103.8

please give me a elaborate calculation method.

Thanks

Shinurag KR

I would also like to know how to calculate。

Have you checked the developer guide:

https://developer.vuforia.com/resources/dev-guide/virtual-buttons

?

AlessandroB wrote:

Have you checked the developer guide:

https://developer.vuforia.com/resources/dev-guide/virtual-buttons

?

yes, i have, but  i don't know how could (90, 850)(290, 925) becomes (-108.68, -53.52)(-75.75, -65.87)

The VB rectangle is defined within the local coordinate space of the target, and the origin of that coordinate space is the center of the target. So a VB below the center of the target and to the left ( Bottom Left ) will have negative X & Y values for both corners, one below the target but to the right ( Bottom Right ) will have positive X values and negative Y values, Top Left will have positive Y and negative X and Top Right will have positive values for both X and Y.

The documentation is presenting a case where you need to need to convert from a system w/ the origin at the Top Left to one the one Vuforia uses which places the origin at the center.

If you download the free version of Unity, you can use that environment - along w/ the Vuforia Extension - to observe what the position of a VB is in the local space of the target. This is helpful if you are going to be working w/ VBs and need a visual reference.

Hi Hope this helps,

Convert X =   - [(Width * Ratio) / 2] + (X * Ratio)

Convert Y = [(Height * Ratio) / 2] - (Y * Ratio)

Works only on Red and Blue Button... Up to you to figure out the computation for Yellow and Green.

 X Y Converted X Converted Y RED L 90 850 -108.677754 -53.51556068 RED R 290 925 -75.74510127 -65.86530545 Ratio 0.16466 Orig Width 1500 246.9948954 Orig Height 1050 172.8964268 (Orig Width x Ratio)/2 123.497 (Orig Height x Ratio)/2 86.4482

Regards to All!

Hi, may i know how to get that ratio or is it a fixed number?

Hello Sir  AlessandroB

I tried your equations with your sample and found that the result not the same then I founded that at the end the result is divided by 2.

Is that true or it is a coincidence?

Hi AlessandroB,

I think that there is a confusion about these calculations

I tried it on my own marker, but it doesn't work ... so I think that something wrong on the calculations or there are a specifications for the marker, right?

Could you please tell me how can i use the attached image as a virtual button marker?

Thank you,

AttachmentSize
1.96 MB