Image/button => Need help with my app

[bobymarlous]

Hi all,
I'm a beginner (french, sry for my english), and I'm looking for help to move forward on my project.
I would like to make a series of clickable buttons, which would change color when clicked.
I used images for this (3 versions, depending on the state) and tried to code something.
It almost works but when I click 4 times on my button the initial state disappears. The button remains clickable all the same and the cycle continues but the initial state is no longer displayed.
an idea?
there may also be a different way of doing things from the one I used because I'm going to need 26 buttons on the same page, and the same on about ten pages 26 buttons / page that would keep the state they were in given.

TY if you understand me

I am attaching an example of how I would like to put my buttons, as well as their three states.

[ChrisWard]

Hello David

It's very difficult to read you screenshot. Please upload another by right-mouse click in the Blocks work area.

The way to handle multiple components of the same type would usually be to use the "any component" Block. Every button should be in a Block List to make this possible and thus avoid having an individual event block for every singe button.

How many buttons are there?

[bobymarlous]

[bobymarlous]

ok sorry, i have send a new picture

[ChrisWard]

...also, it's good practice to retain the component type in it's name:

Button_image1, Button_image2 etc so we don't have to guess what the components are.

Thanks for the new screenshot

I can see you are using a global image index - but isn't the image state of each button intended to be independent of the other buttons?

@bobymarlous

I used because I'm going to need 26 buttons on the same page, and the same on about ten pages 26 buttons / page that would keep the state they were in given.

You would in reality need just one screen of 26 buttons and change the data for that set of buttons as required. Each set can have the button states recorded in TinyDb so they could be recalled quickly

[bobymarlous]

@ChrisWard

I can see you are using a global image index - but isn't the image state of each button intended to be independent of the other buttons?

indeed the state of each button is independent.
I don't know TinyDb, I'll see what it looks like.
sorry I'm just starting, so I expect to encounter a lot of problems.

[ChrisWard]

You will no doubt grow some grey hair but still enjoy the process

[ChrisWard]

Currently, you cannot arrange buttons in the way you wish (you cannot have buttons in the shape of a Hexagon). You could however use a Canvas with Sprites as Buttons.....

[TIMAI2]

I made a guide a while ago to build a Catan game board. This is constructed of hexagons displayed on a canvas (see the second column of blocks in the aia). This might give you some ideas about how to construct your own "board". You can use the imageSprite Touched event to action a touch/click on a particular sprite.

Catan Board

[ChrisWard]

Here is a quick example to show how to "any component" in this context. It also shows that you either need large buttons or large spaces between them to avoid tapping more than one button at a time

Run it on your phone via the Companion.
btns26.aia (8.5 KB)

[TIMAI2]

And best you can hope for if using buttons:

hexButtons.aia (3.5 KB)

(Thanks @ChrisWard for the button images )

[ABG]

If you want to stretch your math muscles, it's also possible to do this with a Canvas and no Sprites, redrawing the hex grid dynamically, and using touch coordinates together with a list of hex center coordinates (which you can calculate and keep) to decide which hex was touched.

The Canvas has blocks to draw shapes based on lists of corner coordinates.

[Jocelyn_Humphries]

In the designer, on the button properties, the picture is set to "pad.png". In img list, the first entry is just "pad". The app opens the first time with the properties panel setting. It fails after that due to the code not being able to find a file named seulement "pad".

[TIMAI2]

@ABG

If you want to stretch your math muscles

Couldn't resist

A procedure to draw a hexagon, if you provide the top left coordinates and length of a side. (draggable blocks)

Usage:

[bobymarlous]

hello to all, sorry for the delay in answering your answers helped me a lot, especially those of CHRISWARD who has already made a lot of progress for me.
I finally used your "btns26" file and I slightly modified the spacing of the Sprite images. I will try to continue all this. thank you again to all for your responsiveness, it's a pleasure for a beautiful community with so much mutual aid.