Transparency to a button icon background

[fhs14647]

Dear Experts
I made a little animation. The background of the card itself is outer space. The background icon of an animated button is an image icon earth. But as you can see, there is a white background which is disturbing.
My question: is there a possibility to put a round image like my earth with a transparent background as a button icon?



Thanks a lot
Mike

[richmond62]

Personally I would not use a button, I would use a graphic rectangle instead (it can still
have code in it so it behaves like a button).

This is in the cardScript:

Code: Select all

on openCard
   set the backGroundPattern of grc "FFRAME" to the ID of img "earth"
end openCard

https://www.dropbox.com/s/je0ladx3bjpjn ... e.zip?dl=0

[bogs]

You could try this trick I learned from Jacque...

You can choose the paint bucket tool and right click on the white background. That will turn it transparent. If you accidentally miss, undo works.

[elanorb]

Hi

It looks like the Opaque property of your button might be set to true, try setting it to false. You might also need to set 3-D and Show border to false. It looks like you have already set Show name to false.

Kind regards

Elanor

[fhs14647]

Personally I would not use a button, I would use a graphic rectangle instead (it can still
have code in it so it behaves like a button).

This is in the cardScript:

Code: Select all

on openCard
   set the backGroundPattern of grc "FFRAME" to the ID of img "earth"
end openCard

https://www.dropbox.com/s/je0ladx3bjpjn ... e.zip?dl=0

Screenshot 2021-02-12 at 12.20.08.jpg

Good idea, thanks!!
Mike

[fhs14647]

You could try this trick I learned from Jacque...

You can choose the paint bucket tool and right click on the white background. That will turn it transparent. If you accidentally miss, undo works.

Thanks for your help, that works not completly for me. Just a part of the white background is deleted.
Mike

[fhs14647]

Hi

It looks like the Opaque property of your button might be set to true, try setting it to false. You might also need to set 3-D and Show border to false. It looks like you have already set Show name to false.

Kind regards

Elanor

Thanks Elanor
I found now a solution for the problem. Befor asking my question about getting rid of the background I used a JPG File as Button Icon. But it is not possible with JPG to get transparency (except the rubber tool of the painting tools).
But when I take a PNG File with transparency BEFORE importing to liveCode there no problem with the background (except the things you mentioned above).
Thanks for your help
Mike

[bogs]

You could try this trick I learned from Jacque...

You can choose the paint bucket tool and right click on the white background. That will turn it transparent. If you accidentally miss, undo works.

Thanks for your help, that works not completly for me. Just a part of the white background is deleted.
Mike

Yes, you may have to click more than one time in each area you see the white, it should get rid of each as you go though. Good luck with it

[stam]

An additional tip about PNG files: while you can import them with transparent backgrounds, if you intend to use as a button you have to be aware that the rect is still rectangular and mouse actions will trigger even when clicking on the transparent bits, which you may not want.

You can fix this behaviour by checking if the mouseLoc is within the effective rect of the PNG image, eg:

Code: Select all

On mouseUp
  If the mouseLoc is within the effective rect of me then
  .... do mouseUp stuff 
  end if
On mouseUp

[richmond62]

You can fix this behaviour by checking if the mouseLoc is within the effective rect of the PNG image

Well, Yes, you can.

But I am, by nature, a lazy slob, so I'll use a rectangular graphic so I don't have to spend time and effort
worrying about how effective "my rect" is . . .

[Usually, when I want to know how effective "my rect" is I go to what in America is called a proctologist. ]

[stam]

[Usually, when I want to know how effective "my rect" is I go to what in America is called a proctologist. ]

funny/not funny - and in any case, you'd have to append an 'um' before the proctologist will deign to see you.


But joking aside, there can be an issue with the surrounding space. In the OP's example, (s)he may not want trigger a mouse action unless actually clicking on the globe directly.

A more personal example is what i was designing recently - in cardiology we will often use 'bullseye' plots as multi-parametric imaging or simple scoring to describe heart function in a single image. A common usage is to divide the main pumping chamber of the heart (the left ventricle) into 16 segments corresponding to arterial distribution and to then assign a score and color code to each of the 16 segments.

The problem i had to solve recently was how to trigger an action on clicking on a segment of the bullseye plot. I thought initially the easiest way may be to use built it tools but couldn't find a good way to do this. I ended up using a vector graphics program (Affinity Designer) to create the bullseye plot, built up of individual segments initially exported as SVGs - that kinda worked but it proved impossible to click on the correct segment because of overlapping rects and it seems the 'effective rect' doesn't work on SVGs.

I then re-exported as PNG and put this together in LC - the images below show the 'all normal' state, the issue with the rects overlapping - you can see it would be nigh-on impossible to click on the desired segment.
Using 'the effective rect' excludes the invisible bits and makes it behave directly as intended, being able to on the segment you want without overlapping images due to the invisible bits...

[richmond62]

But joking aside, there can be an issue with the surrounding space.

Indeed.

You can, however, achieve exactly the same thing 'just' using PNG images with transparent areas as buttons.

The point I was making in my last post was that all the "fuss" about 'effective rect' is quite unnecessary if one
does not use buttons.

[stam]

You can, however, achieve exactly the same thing 'just' using PNG images with transparent areas as buttons.

errmmm, not always, and that was my point... in the OP's example, clicking in the invisible bits around the globe will also trigger mouse actions and while that may be fine, it may be a problem depending on design.

in my example with closely stacked images acting as buttons, the problem was that clicking on where you thought you were clicking would activate an adjacent 'button' instead - in the specific example from my project, the lateral segments are orientated such that the rect from the outer ring pretty much completely obscures the rect from the inner ring, making it impossible to click on. And layering it differently didn't solve the issue fully.
This is completely solved by using effective rect.

I just posted this as a tip, as i recently had this issue and it may be of help to others - but I agree, it's not needed in cases where there is nothing clickable in close proximity...

[richmond62]

Try this (excuse my very crude imagery: being lazy I just pinched bits of yours):

And, looking at things, I developed additional areas in my heart previously unknown to science.
-

-
https://www.dropbox.com/s/ekscwr1zrt4h8 ... e.zip?dl=0

[stam]

well, poo.... that's what i get for coding at 2 am after long, long days on-call.
Haven't downloaded your sample but went back to my code and concluded that must really get more sleep and not code at 2 am :-/

I can only assume i mixed up SVGs and PNGs and trying to solve the issue of overlapping buttons i was having with SVGs that i thought weren't fixed by switching to PNGs and tried the 'effective' keyword - but then used that with PNGs that didn't need it anyway.

You are correct, the effective keyword does not help - PNGs respect the invisible space whereas SVGs do not - and the effective keyword does nothing in either case.

Just pretend i didn't post any of the above lol....