Re: Set the Opacity of a Button Background

[RM]

On 1.03.2016 21:11, Sannyasin Brahmanathaswami wrote:

I may have asked this before, but am I the only one who wishes we could set the 
opacity of the background of a button to discrete levels without having to 
change the blend level of the whole button?

Yes, I realize that we can create a graphic object behind the button and set 
that, then make the button 100% transparent, set the graphic 1 layer below the 
buttonand group the two etc.

But if one is dynamically creating buttons based on some JSON or XML then you 
have to double-up so to speak on creating objects, making sure the layer of the 
graphic is just right etc..

Worth of an enhancement request? or perhaps there is a way already that I have 
not discovered?

BR




Do you mean that you want a button where an icon/image is set at 100% 
opacity and the rest of

the button to, say, 50% transparency?

Would be grateful if you could clarify this.

Richmond.

___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: Set the Opacity of a Button Background

[Sannyasin Brahmanathaswami]

We looking at very simple button design:

1)  Border color is on/white/2px
2)  background is set to clear (no color assignment and no icon)
3)  background opacity set to 50% # if we can figure out how
4)  Button name/label white

Now... I realize that if # 2 above is true, then possibly, since there are no 
pixels at all in the background that the algorithm might not be possible from a 
video card point of view... so we *could* set the background to white and set 
the opacity to a grayscale?transparency value of say... 50%  but the idea is 
that the text of the button name/label remains fully, 100% opaque, even thought 
background has an alpha channel value (some level of transparency)

>From my fiddling... (I could be missing something) this is not possible either 
>with buttons of fields  or graphics.

The use case is, again, as discussed in another thread: we want visibility of 
the text on top of *any* image to be visible. We do this in print all the 
time... but we cannot separate the blending of the text label or text itself 
and the background of a button/field in LC... at least I have not found a way.





On March 1, 2016 at 9:15:36 AM, RM 
(richmondmathew...@gmail.com) wrote:

Do you mean that you want a button where an icon/image is set at 100%
opacity and the rest of
the button to, say, 50% transparency?

Would be grateful if you could clarify this.

Richmond.
___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: Set the Opacity of a Button Background

[RM]

On 1.03.2016 21:25, Sannyasin Brahmanathaswami wrote:

We looking at very simple button design:

1)  Border color is on/white/2px
2)  background is set to clear (no color assignment and no icon)
3)  background opacity set to 50% # if we can figure out how
4)  Button name/label white

Now... I realize that if # 2 above is true, then possibly, since there are no 
pixels at all in the background that the algorithm might not be possible from a 
video card point of view... so we *could* set the background to white and set 
the opacity to a grayscale?transparency value of say... 50%  but the idea is 
that the text of the button name/label remains fully, 100% opaque, even thought 
background has an alpha channel value (some level of transparency)

 From my fiddling... (I could be missing something) this is not possible either 
with buttons of fields  or graphics.

The use case is, again, as discussed in another thread: we want visibility of 
the text on top of *any* image to be visible. We do this in print all the 
time... but we cannot separate the blending of the text label or text itself 
and the background of a button/field in LC... at least I have not found a way.


Um, well, at the risk of annoying you somewhat . . .

I have almost always "rolled my own" buttons just because of the 
limitations on Livecode-native

buttons.

I use GIMP with a series of layers (nothing particularly original or 
difficult there): one for the
'button' (rectangle with rounded edges), one for the image, and one for 
the label. Then one can

fiddle around with levels of transparency as much as one likes.

Richmond.






On March 1, 2016 at 9:15:36 AM, RM 
(richmondmathew...@gmail.com) wrote:

Do you mean that you want a button where an icon/image is set at 100%
opacity and the rest of
the button to, say, 50% transparency?

Would be grateful if you could clarify this.

Richmond.
___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode



___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: Set the Opacity of a Button Background

[RM]

On 1.03.2016 21:30, RM wrote:



On 1.03.2016 21:25, Sannyasin Brahmanathaswami wrote:

We looking at very simple button design:

1)  Border color is on/white/2px
2)  background is set to clear (no color assignment and no icon)
3)  background opacity set to 50% # if we can figure out how
4)  Button name/label white

Now... I realize that if # 2 above is true, then possibly, since 
there are no pixels at all in the background that the algorithm might 
not be possible from a video card point of view... so we *could* set 
the background to white and set the opacity to a 
grayscale?transparency value of say... 50%  but the idea is that the 
text of the button name/label remains fully, 100% opaque, even 
thought background has an alpha channel value (some level of 
transparency)


 From my fiddling... (I could be missing something) this is not 
possible either with buttons of fields  or graphics.


The use case is, again, as discussed in another thread: we want 
visibility of the text on top of *any* image to be visible. We do 
this in print all the time... but we cannot separate the blending of 
the text label or text itself and the background of a button/field in 
LC... at least I have not found a way.


Um, well, at the risk of annoying you somewhat . . .

I have almost always "rolled my own" buttons just because of the 
limitations on Livecode-native

buttons.

I use GIMP with a series of layers (nothing particularly original or 
difficult there): one for the
'button' (rectangle with rounded edges), one for the image, and one 
for the label. Then one can

fiddle around with levels of transparency as much as one likes.

Richmond.


Oh, I'm sorry, I fired that one off a bit too quickly.

The faux buttons made in GIMP have to be imported and used as images in 
Livecode, because PNG
images with differing levels of transparency seem to lose the 
transparency when they are used

as icons inwith actual buttons.

R.







On March 1, 2016 at 9:15:36 AM, RM 
(richmondmathew...@gmail.com) wrote:


Do you mean that you want a button where an icon/image is set at 100%
opacity and the rest of
the button to, say, 50% transparency?

Would be grateful if you could clarify this.

Richmond.
___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your 
subscription preferences:

http://lists.runrev.com/mailman/listinfo/use-livecode





___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: Set the Opacity of a Button Background

[RM]

Here's a demo of what I just wrote:

https://www.dropbox.com/s/63u8h6sb0gk2yjo/Button%20Games.livecode.zip?dl=0

Richmond.

On 1.03.2016 21:25, Sannyasin Brahmanathaswami wrote:

We looking at very simple button design:

1)  Border color is on/white/2px
2)  background is set to clear (no color assignment and no icon)
3)  background opacity set to 50% # if we can figure out how
4)  Button name/label white

Now... I realize that if # 2 above is true, then possibly, since there are no 
pixels at all in the background that the algorithm might not be possible from a 
video card point of view... so we *could* set the background to white and set 
the opacity to a grayscale?transparency value of say... 50%  but the idea is 
that the text of the button name/label remains fully, 100% opaque, even thought 
background has an alpha channel value (some level of transparency)

 From my fiddling... (I could be missing something) this is not possible either 
with buttons of fields  or graphics.

The use case is, again, as discussed in another thread: we want visibility of 
the text on top of *any* image to be visible. We do this in print all the 
time... but we cannot separate the blending of the text label or text itself 
and the background of a button/field in LC... at least I have not found a way.





On March 1, 2016 at 9:15:36 AM, RM 
(richmondmathew...@gmail.com) wrote:

Do you mean that you want a button where an icon/image is set at 100%
opacity and the rest of
the button to, say, 50% transparency?

Would be grateful if you could clarify this.

Richmond.
___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode



___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: Set the Opacity of a Button Background

[Randy Hengst]

It sounds to me that you want the color of the button to be 50% … meaning that 
the card (or whatever) below it will show though. And, you want the border and 
name of button to be opaque… if all that is correct, you might want to give 
this a try.

create an image in the color you want the button background to be … perhaps 
white (you can do that within LC with import snapshot). Then assign that image 
as the icon for the button (you’ll have to fiddle with sizing the image). Set 
the iconGravity of the button to “center”. Then adjust the blendLevel of the 
image and you’ll see that reflected in the button’s background.

If you just set the blendLevel of the button, then the name and border will 
also change opacity.

be well,
randy

Randy Hengst
www.classroomFocusedSoftware.com


> On Mar 1, 2016, at 1:25 PM, Sannyasin Brahmanathaswami  
> wrote:
> 
> We looking at very simple button design:
> 
> 1)  Border color is on/white/2px
> 2)  background is set to clear (no color assignment and no icon)
> 3)  background opacity set to 50% # if we can figure out how
> 4)  Button name/label white
> 
> Now... I realize that if # 2 above is true, then possibly, since there are no 
> pixels at all in the background that the algorithm might not be possible from 
> a video card point of view... so we *could* set the background to white and 
> set the opacity to a grayscale?transparency value of say... 50%  but the idea 
> is that the text of the button name/label remains fully, 100% opaque, even 
> thought background has an alpha channel value (some level of transparency)
> 
> From my fiddling... (I could be missing something) this is not possible 
> either with buttons of fields  or graphics.
> 
> The use case is, again, as discussed in another thread: we want visibility of 
> the text on top of *any* image to be visible. We do this in print all the 
> time... but we cannot separate the blending of the text label or text itself 
> and the background of a button/field in LC... at least I have not found a way.
> 
> 
> 
> 
> 
> On March 1, 2016 at 9:15:36 AM, RM 
> (richmondmathew...@gmail.com) wrote:
> 
> Do you mean that you want a button where an icon/image is set at 100%
> opacity and the rest of
> the button to, say, 50% transparency?
> 
> Would be grateful if you could clarify this.
> 
> Richmond.
> ___
> use-livecode mailing list
> use-livecode@lists.runrev.com
> Please visit this url to subscribe, unsubscribe and manage your subscription 
> preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode

___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: Set the Opacity of a Button Background

[Paul Hibbert]

By adjusting some colour values and the ink mode I could achieve what I think 
you are looking for, however I may have misunderstood, because I don’t quite 
understand the bit about having 50% opacity of a clear background!

Link to demo stack with my interpretation: 
https://www.dropbox.com/s/xhjqlx0zhdeyq2f/Button%20Demo.livecode?dl=0

HTH

Paul

> On Mar 1, 2016, at 11:25 AM, Sannyasin Brahmanathaswami  
> wrote:
> 
> We looking at very simple button design:
> 
> 1)  Border color is on/white/2px
> 2)  background is set to clear (no color assignment and no icon)
> 3)  background opacity set to 50% # if we can figure out how
> 4)  Button name/label white
> 
> Now... I realize that if # 2 above is true, then possibly, since there are no 
> pixels at all in the background that the algorithm might not be possible from 
> a video card point of view... so we *could* set the background to white and 
> set the opacity to a grayscale?transparency value of say... 50%  but the idea 
> is that the text of the button name/label remains fully, 100% opaque, even 
> thought background has an alpha channel value (some level of transparency)
> 
> From my fiddling... (I could be missing something) this is not possible 
> either with buttons of fields  or graphics.
> 
> The use case is, again, as discussed in another thread: we want visibility of 
> the text on top of *any* image to be visible. We do this in print all the 
> time... but we cannot separate the blending of the text label or text itself 
> and the background of a button/field in LC... at least I have not found a way.

___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: Set the Opacity of a Button Background

[J. Landman Gay]

On 3/1/2016 1:25 PM, Sannyasin Brahmanathaswami wrote:

We looking at very simple button design:

1)  Border color is on/white/2px
2)  background is set to clear (no color assignment and no icon)
3)  background opacity set to 50% # if we can figure out how
4)  Button name/label white

...

The use case is, again, as discussed in another thread: we want

> visibility of the text on top of *any* image to be visible.


If you set the icon of the button to the image rather than its 
backpattern, you can do it by adjusting the opacity of the referenced image.


--
Jacqueline Landman Gay | jac...@hyperactivesw.com
HyperActive Software   | http://www.hyperactivesw.com

___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: Set the Opacity of a Button Background

[Scott Rossi]

Another option similar to Randy's is to create an image tile -- for
example, a 48x48 white PNG that's 50% opaque -- and assign this as the
backPattern of the button.  Using this method you can scale the button to
any size and the translucency will fill accordingly.  You can also assign
a separate icon if desired.

Unless you REALLY need the properties of a button control, you can also
consider other objects to act as buttons, such as graphics, where you can
employ a translucent gradient fill to the control, or fields, where you
can create the effect of a label that has multiple text styles.  There are
several options for create button-style controls.

Regards,

Scott Rossi
Creative Director
Tactile Media, UX/UI Design




On 3/1/16, 12:20 PM, "use-livecode on behalf of Randy Hengst"

wrote:

>It sounds to me that you want the color of the button to be 50% Š meaning
>that the card (or whatever) below it will show though. And, you want the
>border and name of button to be opaqueŠ if all that is correct, you might
>want to give this a try.
>
>create an image in the color you want the button background to be Š
>perhaps white (you can do that within LC with import snapshot). Then
>assign that image as the icon for the button (you¹ll have to fiddle with
>sizing the image). Set the iconGravity of the button to ³center². Then
>adjust the blendLevel of the image and you¹ll see that reflected in the
>button¹s background.
>
>If you just set the blendLevel of the button, then the name and border
>will also change opacity.
>
>be well,
>randy
>
>Randy Hengst
>www.classroomFocusedSoftware.com
>
>
>> On Mar 1, 2016, at 1:25 PM, Sannyasin Brahmanathaswami
>> wrote:
>> 
>> We looking at very simple button design:
>> 
>> 1)  Border color is on/white/2px
>> 2)  background is set to clear (no color assignment and no icon)
>> 3)  background opacity set to 50% # if we can figure out how
>> 4)  Button name/label white
>> 



___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: Set the Opacity of a Button Background

[Sannyasin Brahmanathaswami]

Aloha Paul:

wow... awesome.. you did it! this works perfectly as needed.

So I can just set up a template button and store this and create all new 
buttons according.

Outstanding.. Big Mahalo from Hawaii

BR

On March 1, 2016 at 11:26:57 AM, Scott Rossi 
(sc...@tactilemedia.com) wrote:

By adjusting some colour values and the ink mode I could achieve what I think 
you are looking for, however I may have misunderstood, because I don’t quite 
understand the bit about having 50% opacity of a clear background!

Link to demo stack with my interpretation: 
https://www.dropbox.com/s/xhjqlx0zhdeyq2f/Button%20Demo.livecode?dl=0

HTH

Paul
___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: Set the Opacity of a Button Background

[Sannyasin Brahmanathaswami]

@ Scott

Thank you.


Actually all these other methods have their use cases. Yes, am familiar with 
using other controls as "buttons" anything with a mouseUp script will do the 
job in 80% of the cases.

BR


On March 1, 2016 at 11:26:57 AM, Scott Rossi 
(sc...@tactilemedia.com) wrote:

Another option similar to Randy's is to create an image tile -- for
example, a 48x48 white PNG that's 50% opaque -- and assign this as the
backPattern of the button. Using this method you can scale the button to
any size and the translucency will fill accordingly. You can also assign
a separate icon if desired.

Unless you REALLY need the properties of a button control, you can also
consider other objects to act as buttons, such as graphics, where you can
employ a translucent gradient fill to the control, or fields, where you
can create the effect of a label that has multiple text styles. There are
several options for create button-style controls.
___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: Set the Opacity of a Button Background

[Paul Hibbert]

You are more than welcome, like most people on this list I’m just pleased to 
help. :)

I’m sure you’ll realize, but the key to this effect is using the Ink setting 
‘blendHardLight' with neutral colours, then any tone above 50% will darken the 
colours below and any tone less than 50% will lighten the colours below.

Regards,

Paul

> On Mar 2, 2016, at 2:54 PM, Sannyasin Brahmanathaswami  
> wrote:
> 
> Aloha Paul:
> 
> wow... awesome.. you did it! this works perfectly as needed.
> 
> So I can just set up a template button and store this and create all new 
> buttons according.
> 
> Outstanding.. Big Mahalo from Hawaii
> 
> BR
> 
> On March 1, 2016 at 11:26:57 AM, Scott Rossi 
> (sc...@tactilemedia.com) wrote:
> 
> By adjusting some colour values and the ink mode I could achieve what I think 
> you are looking for, however I may have misunderstood, because I don’t quite 
> understand the bit about having 50% opacity of a clear background!
> 
> Link to demo stack with my interpretation: 
> https://www.dropbox.com/s/xhjqlx0zhdeyq2f/Button%20Demo.livecode?dl=0
> 
> HTH
> 
> Paul
> ___
> use-livecode mailing list
> use-livecode@lists.runrev.com
> Please visit this url to subscribe, unsubscribe and manage your subscription 
> preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode


___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: Set the Opacity of a Button Background

[Scott Rossi]

This a great solution Paul.  And by using a roundrect graphic in place of
a button, you can create pill-style (fully radiused) button -- unless
there's a radius setting for roundrect buttons I've missed somewhere.

Regards,

Scott Rossi
Creative Director
Tactile Media, UX/UI Design




On 3/3/16, 6:41 AM, "use-livecode on behalf of Paul Hibbert"

wrote:

>You are more than welcome, like most people on this list I¹m just pleased
>to help. :)
>
>I¹m sure you¹ll realize, but the key to this effect is using the Ink
>setting ŒblendHardLight' with neutral colours, then any tone above 50%
>will darken the colours below and any tone less than 50% will lighten the
>colours below.
>
>Regards,
>
>Paul
>
>> On Mar 2, 2016, at 2:54 PM, Sannyasin Brahmanathaswami
>> wrote:
>> 
>> Aloha Paul:
>> 
>> wow... awesome.. you did it! this works perfectly as needed.
>> 
>> So I can just set up a template button and store this and create all
>>new buttons according.
>> 
>> Outstanding.. Big Mahalo from Hawaii
>> 
>> BR
>> 
>> On March 1, 2016 at 11:26:57 AM, Scott Rossi
>>(sc...@tactilemedia.com) wrote:
>> 
>> By adjusting some colour values and the ink mode I could achieve what I
>>think you are looking for, however I may have misunderstood, because I
>>don¹t quite understand the bit about having 50% opacity of a clear
>>background!
>> 
>> Link to demo stack with my interpretation:
>>https://www.dropbox.com/s/xhjqlx0zhdeyq2f/Button%20Demo.livecode?dl=0
>> 
>> HTH
>> 
>> Paul



___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode