spotting a mouseclick in the transparent area of an image

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

spotting a mouseclick in the transparent area of an image

Mark Waddingham via use-livecode
I have a group containing a grid of square images.

Some of the images are gifs, some are pngs, and some of the latter have an
alpha channel with some transparent bits.

The images are all used as buttons, to control something else - the images in
essence are labels or icons for the buttons. The images have 3d borders to
make them look more button-like.

The problem is that the if the user happens to click in the transparent area
of an image, the target of the mouseup isn't the image but the card. But the
image is a button, so I want to catch mouseup anywhere in this square image.

I thought that I might be able to use 'the mousecontrol', when the target was
the card, to find out which image the mouse was in when; but this too takes
account of the transparency of the image.

I can see this is a really useful feature - but in this case I want the
opposite! Is there a flag somewhere, or another easy way to achieve this?

The non-easy ways I'm aware of are:
        - hide all the images and replace them with buttons referencing the images
        - re-compositing the images to flatten the alpha channel
        - iterating through all the images - there are many, in a scrolling group -
testing for the mouseloc within the rect of each


Is there anything simpler than this, to treat an image as opaque for the
purposes of hit-testing?

TIA

Ben



_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: spotting a mouseclick in the transparent area of an image

Mark Waddingham via use-livecode
Place a grc of the right size behind the image. Make sure the grc is set to
opaque. Group the grc and the image and place your mouseup handler in the
group.  If they click a visible portion of the image it'll fire the groups
mouseup, if they click a trasnarent spot, the (blended and invisible) grc
will still cause the mouseup to fire.



On Thu, Mar 30, 2017 at 11:52 AM, Ben Rubinstein via use-livecode <
[hidden email]> wrote:

> I have a group containing a grid of square images.
>
> Some of the images are gifs, some are pngs, and some of the latter have an
> alpha channel with some transparent bits.
>
> The images are all used as buttons, to control something else - the images
> in essence are labels or icons for the buttons. The images have 3d borders
> to make them look more button-like.
>
> The problem is that the if the user happens to click in the transparent
> area of an image, the target of the mouseup isn't the image but the card.
> But the image is a button, so I want to catch mouseup anywhere in this
> square image.
>
> I thought that I might be able to use 'the mousecontrol', when the target
> was the card, to find out which image the mouse was in when; but this too
> takes account of the transparency of the image.
>
> I can see this is a really useful feature - but in this case I want the
> opposite! Is there a flag somewhere, or another easy way to achieve this?
>
> The non-easy ways I'm aware of are:
>         - hide all the images and replace them with buttons referencing
> the images
>         - re-compositing the images to flatten the alpha channel
>         - iterating through all the images - there are many, in a
> scrolling group - testing for the mouseloc within the rect of each
>
>
> Is there anything simpler than this, to treat an image as opaque for the
> purposes of hit-testing?
>
> TIA
>
> Ben
>
>
>
> _______________________________________________
> use-livecode mailing list
> [hidden email]
> Please visit this url to subscribe, unsubscribe and manage your
> subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode
>
_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: spotting a mouseclick in the transparent area of an image

Mark Waddingham via use-livecode
In reply to this post by Mark Waddingham via use-livecode
Ben, if you could edit the PNGs to add a 1% tone to the transparent areas (maybe with a batch process) this allows LC to accept the clicks within the image area.

The advantage of this is you could have a 1 % tone inside the area you need be active and completely transparent where you don’t want clicks to be active for example a circular button. The 1% tone should be indistinguishable from the transparent area and will still show the background through.

Paul


> On Mar 30, 2017, at 10:52 AM, Ben Rubinstein via use-livecode <[hidden email]> wrote:
>
> I have a group containing a grid of square images.
>
> Some of the images are gifs, some are pngs, and some of the latter have an alpha channel with some transparent bits.
>
> The images are all used as buttons, to control something else - the images in essence are labels or icons for the buttons. The images have 3d borders to make them look more button-like.
>
> The problem is that the if the user happens to click in the transparent area of an image, the target of the mouseup isn't the image but the card. But the image is a button, so I want to catch mouseup anywhere in this square image.
>
> I thought that I might be able to use 'the mousecontrol', when the target was the card, to find out which image the mouse was in when; but this too takes account of the transparency of the image.
>
> I can see this is a really useful feature - but in this case I want the opposite! Is there a flag somewhere, or another easy way to achieve this?
>
> The non-easy ways I'm aware of are:
> - hide all the images and replace them with buttons referencing the images
> - re-compositing the images to flatten the alpha channel
> - iterating through all the images - there are many, in a scrolling group - testing for the mouseloc within the rect of each
>
>
> Is there anything simpler than this, to treat an image as opaque for the purposes of hit-testing?
>
> TIA
>
> Ben
>
>
>
> _______________________________________________
> use-livecode mailing list
> [hidden email]
> Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode


_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: spotting a mouseclick in the transparent area of an image

Mark Waddingham via use-livecode
Hi Paul,

Thanks for this - this was the perfect solution for my needs.

(I just modified the loading script to add three lines: grab the alphaData,
replace numtobyte(0) with numtobyte(1), put it back...).

cheers,

Ben

On 03/04/2017 04:29, Paul Hibbert via use-livecode wrote:

> Ben, if you could edit the PNGs to add a 1% tone to the transparent areas (maybe with a batch process) this allows LC to accept the clicks within the image area.
>
> The advantage of this is you could have a 1 % tone inside the area you need be active and completely transparent where you don’t want clicks to be active for example a circular button. The 1% tone should be indistinguishable from the transparent area and will still show the background through.
>
> Paul
>
>
>> On Mar 30, 2017, at 10:52 AM, Ben Rubinstein via use-livecode <[hidden email]> wrote:
>>
>> I have a group containing a grid of square images.
>>
>> Some of the images are gifs, some are pngs, and some of the latter have an alpha channel with some transparent bits.
>>
>> The images are all used as buttons, to control something else - the images in essence are labels or icons for the buttons. The images have 3d borders to make them look more button-like.
>>
>> The problem is that the if the user happens to click in the transparent area of an image, the target of the mouseup isn't the image but the card. But the image is a button, so I want to catch mouseup anywhere in this square image.
>>
>> I thought that I might be able to use 'the mousecontrol', when the target was the card, to find out which image the mouse was in when; but this too takes account of the transparency of the image.
>>
>> I can see this is a really useful feature - but in this case I want the opposite! Is there a flag somewhere, or another easy way to achieve this?
>>
>> The non-easy ways I'm aware of are:
>> - hide all the images and replace them with buttons referencing the images
>> - re-compositing the images to flatten the alpha channel
>> - iterating through all the images - there are many, in a scrolling group - testing for the mouseloc within the rect of each
>>
>>
>> Is there anything simpler than this, to treat an image as opaque for the purposes of hit-testing?
>>
>> TIA
>>
>> Ben

_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Loading...