Find xy Coordinate of an Element on the Screen

[mafokken]

Hey!

Just trying to figure out how to find the x,y coordinates of an element on the screen in App Inventor.

I can find the width and height, but need to know the upper left x,y of the element to do the rest of my logic.

Thanks!

[TimAI2]

If you mean on a canvas then simply use the X and Y blocks for the ball or sprite from the drawer

If you mean on a normal screen layout, you will need to do some maths, know the dimensions of the screen display, what happens to these dimensions if you use "responsive" sizing (or understand the percentage relationship)

Say you have a component, let us use a label, sized 100x200.

Screen is set to centre / centre

Screen dimensions are 360 wide by 480 high (from screen1.width / screen1.height)

X = 360/2 - 100/2 = 130

Y = 480/2 - 200/2 = 140

From this base you should be able to devise further calculations for more complex layouts

[mafokken]

I'm not using a Canvas. But that does make sense for the canvas part. 

Is there another example that goes into depth with what you explained in the second example?

Unfortunately, I'm not centering stuff on the screen. I have four square images that I'm going to place on the screen and then detect when people touch them (Not in a canvas). But with what I'm doing I need to be able to figure out one of the x,y coordinates of one of the corners of the image. Is there anything like get X coordinate or get Y coordinate for each type of element?

Because what if there is text above one of the images that is changing and that moves the image up or down on the screen? Then the x,y coordinates will change, right?

[Chris Ward]

Hi mafokken

All you need to do is place each image on it's own button..........?

You can place the text in a Label Component and that Label in a Vertical Scroll Arrangement such that if the text changes, the screen layout does not.

[mafokken]

That makes sense. I'm trying to make a bluetooth rc car controller. Using Buttons, I can't do multi-touch. Meaning, I can only press forward or back or left or right. Not left while going forward.

I'm trying to use this idea for implementing Multi-touch - https://community.thunkable.com/t/multitouch-piano-multitouch-you-can-click-in-several-keys-concurrently-studio-multitouch/12093/2

If I can figure out how to determine the x,y coordinates of one of the corners of an image element then I could get multi-touch working for where ever I want to put the buttons. I tried Canvas because then I could find the x,y coordinates of the image, but the multi touch didn't work in the Canvas.

[TimAI2]

Have you used Juan's multitouch extension?

As Chris says, use buttons for your images (then you get the touch events for the button, which will tell you which button)

You will then have to use the available blocks for screen dimensions, button dimensions etc., to calculate the x,y coordinates on the fly

[Chris Ward]

Hi mafokken

As Tim says concerning multi-touch, as App Inventor currently does not support multi-touch natively, needs an extension:

Scale Detector. Adds as multitouch scale gesture detector to a Canvas by MIT

http://appinventor.mit.edu/extensions  

Multitouch Extension by Juan Antonio

https://community.thunkable.com/t/free-multitouch-you-can-touch-concurrently-zones-in-screen/11659  

Multitouch in Canvas. Touch with concurrently fingers and get coordinates and draw points by Juan Antonio

https://community.thunkable.com/t/extension-multitouch-in-canvas-touch-with-concurrently-fingers-and-get-coordinates-and-draw-points/12381?u=taifun 

Customize any touchscreen event including any multi touch screen Extension by Zhangzqs

https://community.thunkable.com/t/free-customize-any-touchscreen-event-including-any-multi-touch-screen/37716?u=taifun

[Chris Ward]

...or you could use more buttons, thus not needing multi-touch: