When you tap a button it puts a white tint on it - how can I toggle that off?
It’s white washing the image of my button and I’d like to turn it off.
When you tap a button it puts a white tint on it - how can I toggle that off?
It’s white washing the image of my button and I’d like to turn it off.
Hey @exploriverse.com,
Are you referring to touch feedback on a button? A recent Thunkable update allows for lots of new components to detect clicks. Images are one of these supported components.
To my knowledge, this should not show any touch feedback.
@eoinparkinson this is not the same as there is no access to click-hold & click-up, but this will not put an opacity on the item.
It seems to be an opacity change built into the button component. Please give access to Opacity so I can set it to 100% on touch down OR make it a setting of the button. Please.
My desired result is for this piano key button interface. Visually all the keys look up. Let’s say you tap the purple key, on tap it displays an image of it looking like its pressed down. I don’t want it to get transparent.
Check it (Turn the button 180 degrees and turn off the display of its backfaceVisibility on Advanced tab).
https://x.thunkable.com/projects/5f2a9c927951ff39c2fd0350/project/properties/designer/
I’m not going to turn the button 180 degrees.
What does backfaceVisibility do?
I can’t find anywhere in your project how you make the tap state orange?
Turn the button 180 degrees and turn off the display of its backfaceVisibility on Advanced tab - this is an instruction of what to do on using the properties on the Advanced tab. In my example, this is already done.
The Advanced tab has properties that you can use to do this. Write to us if you have carefully reviewed all the properties, but could not find them.
I appreciate your response. I have played with your example app and you would know best what thunkable is capable of.
But this setting does not work for how I’m using the button. To be clear I’m using images in my button to display a “Touch down” state to make the button look like its being pressed down.
I can not afford to rotate the button as it will look like its upside down.
The setting “backfaceVisibility” makes the image disappear, so that is not an option.
Perhaps there is another way to do this? At this point I exhausted the options and just have to accept this is how button components work in thunkable and its a hard coded attribute I can’t change.
See this image of how i’m doing the visual states and what the result is in the LIVE app.
I see that you don’t understand what needs to be done. The transparent button is only used for generating events, and the images themselves must change on the element below it - the Column. Now do you understand what you need to do? If you don’t understand, I can show an example in your public app if you give a link to it.
Yea you’re the best, my mind was blown a bit.
I understand now, the button contains the image for up state. The column contains the image for the down state. Using the “backfaceVisibility” = hidden on tap. Though on tap it isnt hidden completely, I can still see it a bit.
Notice you can’t press two buttons at once, is this solve-able?
It was necessary to change the image to Column when pressing and releasing the button ))
To simultaneously click on buttons, you need to use a component that allows you to process two or more clicks. This Is Canvas. In this case, you need to use sprites for the keys. When you click on the sprite, a sound appears and the image of the key changes. If sprites can’t handle events as buttons at the same time, then you will have to do everything through the canvas and detect clicks on the canvas.
I spent a lot of time, but I couldn’t solve your problem on Android. I think it is not solved due to Thunkable X’s performance limitations.
You can either press several coavish simultaneously without changing the key pattern, or press one key at a time with changing the key pattern. You can’t use Canvas to simultaneously press several keys and display them in the pressed state.
https://x.thunkable.com/projects/5f30fa8ecc615c9515de1f8b/project/properties/designer/
I’m not sure that this can solve the problem, but you can try to reduce the size of all the files as much as possible.
I wonder could you put an invisible button set to fill height and width in a column, and use the column to change images. This button would be set to invisible. Haven’t tried this though.
@exploriverse.com here is a quick example with invisible button on a column. This shows no touch feedback and reacts when you touch down/up. Is this what you were looking for? https://x.thunkable.com/copy/79b6f7a91fa4efe7fc93c7af692eb5fc
@actech Thank you for taking the time. Your blocks are impressive and although canvas seems like a lot of work to get it to function closer what I have in mind. It’s something more advanced that I’d like to learn later.
What I learned here that is a game-changer is the approach of loading image in the column and using lotti/image/button component to load on top as if its on a higher layer. This gives a professional look of animated popups, messages.