Image Mapping

[Askjerry]

I have an image that I want to use as an interface...

The idea being that if they touch different sections of the image it will take them to a different formula calculator. Let's just call them calc01 to calc12 and each would be the pie shapes around the circle.

In a web page (HTML) I could use an image map to lay out the polygons that form the different regions... then have a link assigned to each one.

Reference: Creating HTML Image Maps

How can I do that from BASIC? (Or do I need to create a SWF file?)

The only map references I'm seeing are for navigation.

Thanks,
Jerry

 

[ukimiku]

You can put a transparent panel over your picture. Then you can react to the TOUCH event for that panel and calculate in code onto which segment the user has tapped. I think you would determine the angle between the center coordinates of your selection disk and the coordinates of the touch, and according to that angle determine the section that was tapped. Since panels can be only rectangular, there will be a special case like "user tapped outside the disk", which can be disregarded.

Does this help?

Regards,

 

[hung]

You can create hiden image similar to your front image. Same size and shape but each click area use an unique color.

When click on front image, you get the pixel x and y, the get the pixel of same x and y from the hiden image. The return color indicate the area you click.

 

[ukimiku]

I like hung's idea. But instead of using another picture (which uses up memory), I would use the original picture and just paint the sectors with a slightly different hue, so subtly different from bordering sectors that the human eye can't make out the difference.

Regards,

 

[urikupfer]

You can with webview and webviewextras just write it in js exactly as in the sample and the functions in b4a

Uri

 

[Askjerry]

@Hung:

So in a touch event not only is the X/Y returned... but the color as well. I'll have to look into that... the problem is if their finger is over the black text.​

@Ukimiku:

Instead of a panel over the picture I can evaluate the X/Y returned and then use some IF/THEN statements to determine rectangular areas for the touch. It isn't as nice as having the ability to define an unusual shape... but still may be ok for this project.​

@Urikupfer:

I have not heard of the webviewextras, but if I understand you correctly... it would allow it to act/react like a web page. I like that. I'll look to see if there are any examples of that.​

Thanks everyone,
Jerry

 

[NJDude]

Take a look at the attached project, it will give you an idea how you can do things.

I left the panel colors visible on purpose to better understand what's going on, if you want them transparent, just change their ALPHA to zero.

 

[hung]

@Hung:

So in a touch event not only is the X/Y returned... but the color as well. I'll have to look into that... the problem is if their finger is over the black text.​

The hidden image will only have the areas in color, no text no border :sign0188:

 

[Askjerry]

I got it working with code. I divided the image into zones...

X 0 to 30%, 30% to 50%, 50% to 70%, and 70% to 100%
Y 0 to 30%, 30% to 50%, 50% to 70%, and 70% to 100%

That gave me 16 possible combinations... 4 of the items occupied two zones, the rest only one each. It worked just fine. Once I get the final (free) app published I'll post a link you you can try it.

... now I need to figure out how to set that up and get it published... :sign0104:

But I'll work on that later today.

Thanks for the help!
Jerry