Many button in one image extension

ClassicExtensions
#1

Hello,

Can anyone develop an extension which allows to add many buttons in a single image.

Let me explain–

If screen1 has an image , i want to place 4 buttons in that image at different locations.
So that when one button clicked call an action and same as for other 3 buttons.

As present we can add an image to single button only.

Can anyone make an extension so that this can possible.

#2

what about using a canvas and its Touched event?
you can define several areas of the canvas to trigger different actions…
Taifun

3 Likes
#3

Add image under buttons, as backgroud picture, or use more arrangements in which you can add buttons and also change image background. If i understood your request :sweat_smile:

2 Likes
#4

Yes but it not works totally for me.

#5

Try to put the image as screen background and arrange your button with arrangements, alignment and even empty label. Then try to set buttons background to none so you can see the image trough them.

1 Like
#6

I understood your trick but, i have an image which has two circles, i want call an action when one circle is clicked and same for other. And it is not possible with your trick because button can not be shaped as circle. :joy::joy:

#7

im looking for this :point_right: I want to call an action when a specific area of the image is clicked.

#8

Shure it can! Select “oval” shape. I made an app with all buttons round.
Or you can leave them square but users will click anyway on round area.
Try anyway with oval shape, with background in buttons too.

#9

I will try.

#10

@Kiranmadde

Continuing and adding to what @giorgiospugnesi said in his above reply, below is the tutorial by @domhnallohanlon to help you a bit further :wink:

Circular buttons. Have a look at it. :slight_smile: :+1:

2 Likes
#11

Thanks vaibhav,

It will help me but little.
My image has circle in circle so i have to use button in button.

Is it possible???
Any extension???

#12

you probably now are ready to look into a canvas solution?
see also https://groups.google.com/d/msg/mitappinventortest/ttjjP_yH4xE/OhAccaIZBgAJ

Taifun

#13

Thanks Taifun,

But canvas blocking is very difficult for me as i neved used it before.

Can anyone show me canvas blocking for following image. I will be very thankful.

25
252508×1254 64.6 KB

This image has 4 circles, 2 are in each other.
I want call 4 actions when 4 cicles are clicked.

#14

as already said, use the canvas and its Touched event
you then can compare the background color of the coordinate, which has been clicked

if color = red then the red part has been clicked
else if color = yellow then the yellow part of the button has been clicked
else the canvas outside the red and yellow buttons has been clicked

Taifun

Check out the Thunkable YouTube channel, there are lots of great videos for getting started:
https://www.youtube.com/channel/UCTVZRyybOCDBL2zLXSeQVsw

A very good way to learn App Inventor is to read the free Inventor’s Manual here in the AI2 free online eBook http://www.appinventor.org/book2 … the links are at the bottom of the Web page. The book ‘teaches’ users how to program with AI2 blocks.
There is a free programming course here http://www.appinventor.org/content/CourseInABox/Intro and the aia files for the projects in the book are here: http://www.appinventor.org/bookFiles
How to do a lot of basic things with App Inventor are described here: http://www.appinventor.org/content/howDoYou/eventHandling .

Also do the tutorials http://appinventor.mit.edu/explore/ai2/tutorials.html to learn the basics of App Inventor, then try something and follow the Top 5 Tips: How to learn App Inventor