set clickable areas in a single image

moster67

Expert
Licensed User
Longtime User
Let's say I have an image of a piano-keyboard and I want to identify/act on touch of events when different parts of the image are touched (touching a key on the keyboard). Another scenario could be a Word-map image where each country is separated either by lines or colours and you need to locate the country touched.

Clearly the images must be rather large to allow precise touching with fingers (why did they abandon the stylus?).

Is there a way to either:

1. Identify the coordinates of which point has been touched?
2. Define sub areas on the image and get click/touch-event (setClickOnListener) for those areas?
3. Is it possible to detect 2 or 3 click/touch-events simulatenously (a chord on the piano involves pressing more than one key on the keyboard at the same time)

In Windows Mobile I believe this was called Skinning.

Of course the piano-keyboard could be done with image-buttons but for this question (example) I need to use a lovely image of a piano-keyboard.
 
Last edited:

Erel

B4X founder
Staff member
Licensed User
Longtime User
Use a Panel instead of an ImageView. It will allow you to handle the Touch event. This event includes the coordinates.
You can either set the image by calling Panel.SetBackgroundImage, or by creating a BitmapDrawable and setting it as the background of the panel.
The second option will allow you to set the Gravity property for the image.

You can detect multiple touch events with the Gestures library.
 
Upvote 0
Top