put a button on an image

[arthur bled]

Hello I would like to know if it is possible to put a button on an image. Thank you

[SteveJG]

You can place an image in a Button.   set Button1.BackgroundImage to   ... yourImage.png     Will that work?

You can also set an Image as a screen background and then place the Button on the screen.   set Screen1.BackgroundImage to ..... yourImage.png.

Will that work?

Regards,

Steve

[SteveJG]

Hi Arthur,

1) Please do not reply directly.  Reply in the Forum thank you.   What you really wanted to do is "I have to create a chessboard with App Inventor and what I'm trying to do is put a chessboard picture and put buttons on each box. I already try to put a picture in the background and buttons over it but when I call the phone application the image is distorted"

2) You could try this modification of my 36 Buttons example

The chess board image must be 300 x 300 pixels for the blocks to work as described. The chess squares are numbered in columns  1-8, 9-16 .

To use these Canvas buttons like an event handler in a Button.Click, you  need some logic blocks.   Something like  if  button=10 then do this, else if button=45 then do something else ...with an if statement for each button number.  The example simply show which chess tile a user clicks.

Is this perhaps what you want?

Regards,

Steve

[arthur bled]

Could I have a more detailed part about the designer because I do not understand how after creating the canvas what to put in.
But for the rest, that's what I'm trying to do.
Is here also a way to save the data for example if I open the application and I start a game, and then I restart the application later, I would like the pieces to stay at their position the last time.
Thanks you for taking your time to explain to me

[SteveJG]

Create a Canvas

Load a png image that is 300x300 pixels into the Canvas background    

If you want a marker, place a Ball with a radius of 15 pixels on to the Canvas, then all you need is the provided blocks. Easier to play checkers with balls than provide 16 chess piece sprites in one color and then 16 in another color.

Perhaps this will help:

• Chapter 17. Creating Animated Apps

Is there a way to save the 'data'?  Sure, you need to learn how to use a TinyDB control.  Search in the Forum for  TinyDB.

We want you to have fun with App Inventor so here are some resources to help you learn to use the AI2 tools  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  .

You might also visit the MIT Gallery (it is on the Designer MENU) and search for Chess,   there are probably a few examples of various quality of chess games that might provide some useful code blocks you can use in your App. You can download an aia that is shared by other App Inventor developers there.

[arthur bled]

Thank you for your help

[Abraham Getzler]

You can also copy text representations of the chess pieces from

https://en.wikipedia.org/wiki/Chess_symbols_in_Unicode

ABG

[TimAI2]

^^^^ very nice ABG :)