Place image on canvas at X, Y coordinates (negative x,y values from esp32)

Hi everyone I am new in the community I apologize if I am making some mistakes.

I have implemented a parking aid using an esp32 and 7 ultrasonic sensors via udp I send the data to android, and this works fine.
In implementing the graphic I have a problem, inserting an image with negative X and Y coordinate in a canvas, launching the app I see only a portion of the image (this is what I want), but varying only the X, also Y changes and places the image at Y coordinate 0.I enclose the two ScreenShot of what happens.
an someone help me understand what I'm doing wrong Thanks very much,

Have you read Creating Animated Apps and both

The first link shows how the Canvas display is organized.

The third link explains the center left corner is where the Sprite is located unless you change some property settings. The MoveTo( x , y ) Block moves the ImageSprite so that its left top corner is at the specified x and y coordinates, not the center of the sprite.

This information might help you.

Be aware, a Canvas' coordinates are all positive numbers. If you use negative values, you must code around that issue.


Yes, the canvas is not ordered as a regular graph would be, with 0,0 being the middle. Instead you kinda have to do some mathematical acrobatics to switch between the two. 0,0 is the top left of the canvas, with all the possible coords being positive. I don't know what else to offer other than that; Maybe a power user could give an even better explanation....

1 Like

I can attest much mathematical trickery is required because of this.

1 Like

Good morning everyone and thanks for the informations you have given me.
I understand that canvas does not support negative coordinates even though the properties accept them.
At this point to get around the problem I will have to divide the image into n parts and enable / disable the visible parameter, In this way I will be able to make the image gradually enter in the canvas, once the entire image is in the canvas I can use the positive X Y coordinates , to move image .
I ask, if anyone has a better method?

Thanks a lot for the support.

Several approaches that might work for you Germano:

  1. Add a nominal amount to the output values from your arduino so that the values the App Inventor Canvas works with is never negative. Possibly use a large Canvas (see Scott's examples for a scrolling Canvas?? )

  2. Use a World coordinates to Screen coordinates 'conversion' . Here is an example called Ai2 Flat Maps . This converts latitude/longitude but is adaptable to just plain integers. I use the routine in a graphing app where I have positive and negative values.

  1. Someone may have more ideas if you share an example of what you are trying to do. Post an example of the only the Canvas stuff. It should be easier to experiment to see how you can shift your image without your arduino (either a scrolling screen or a transform of coordinates). Consider a smaller automobile sprite image.

  2. If you run into issues, post what you tried, someone else might be able to provide specific advice then.

Thanks very much Steve
I'll try to modify the app by replacing the ESP32 commands with up and down arrow keys.
Actually I could reduce the size of the image, as it does not give information on the distance from the sensors (it is purely a visual representation). To avoid impact with the sensors the ESP32 implements a hardware / firmware beep warning.
The same implementation is done on the android side (the sensor turns red and a beep sound is generated)

1 Like

hi Steve

I solved the problem by analyzing Scott's examples.
It was enough to increase the height and width of the canvas and transform the negative coordinates X, Y to the new reference system (X = 0, Y = 0 are now virtually out off the screen).
thank you very much

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.