Design Challenge -- Round Corner mask on images

classic Classic list List threaded Threaded
64 messages Options
1234
Reply | Threaded
Open this post in threaded view
|

Design Challenge -- Round Corner mask on images

Sannyasin Brahmanathaswami
Our design team finished a design for a mobile app. The used rounded corners everywhere.

see

http://wiki.hindu.org/screenshots/radius-all-corners.jpg

Something I wished we had in LC for all controls (groups included) is corner radius, but is is only available for graphics objects.


set the roundRadius of grc "roundRectAngleButton" to pValue

I'm digging in the forums for info an masks etc... but I'm out of my depth here.

I'm thinking this is probably (I hope)  not that hard to implement.

it's obviously easy enough to create a background graphic with round corners, add a small field on the left site that is transparent, lock that, put an image on the right side, make this a small group and give the name of a target and we have a nice cool "button" but how do I get the image in the right half of the group to take the rounded corners of the background graphic?

BR
_______________________________________________
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
|

Re: Design Challenge -- Round Corner mask on images

xtalkprogrammer
I had a mobile app project where the designers did exactly the same.
They put round corners everywhere, around every element in the app. The
result was a lot of unused space. It was cumbersome and inefficient and
in the end it didn't look well. We decided to use straight corbers and
the app looked a gazillion times better than before.

If you still want this, you can create round rectangles and adjust the
corners dynamically using the roundRadius. Use the rectangles as
backgrounds of groups.

Kind regards,

Mark Schonewille
http://economy-x-talk.com
https://www.facebook.com/marksch

Buy the most extensive book on the
LiveCode language:
http://livecodebeginner.economy-x-talk.com

Op 28-Mar-16 om 00:26 schreef Sannyasin Brahmanathaswami:

> Our design team finished a design for a mobile app. The used rounded corners everywhere.
>
> see
>
> http://wiki.hindu.org/screenshots/radius-all-corners.jpg
>
> Something I wished we had in LC for all controls (groups included) is corner radius, but is is only available for graphics objects.
>
>
> set the roundRadius of grc "roundRectAngleButton" to pValue
>
> I'm digging in the forums for info an masks etc... but I'm out of my depth here.
>
> I'm thinking this is probably (I hope)  not that hard to implement.
>
> it's obviously easy enough to create a background graphic with round corners, add a small field on the left site that is transparent, lock that, put an image on the right side, make this a small group and give the name of a target and we have a nice cool "button" but how do I get the image in the right half of the group to take the rounded corners of the background graphic?
>
> BR
> _______________________________________________
> 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
Kind regards,

Drs. Mark Schonewille

Economy-x-Talk Consultancy and Software Engineering
Homepage: http://economy-x-talk.com
Twitter: http://twitter.com/xtalkprogrammer
Facebook: http://facebook.com/LiveCode.Beginner
KvK: 50277553
Reply | Threaded
Open this post in threaded view
|

Re: Design Challenge -- Round Corner mask on images

Sannyasin Brahmanathaswami
Did you look at the screenshot?

They are using 10 px radius and there really is not a lot of wasted space

I'm testing now... create a graphic 410 wide and 100 tall, set roundradius to 1, then put a small image on top over on the right half ... oddly to my eye, if I set the right of the image to e.g 411 and the right of the graphic to 412.. it *appears* as of the image is masked... I suspect we will see her sharp corner of the image on a retina display though, so this is just a temp hack for now.



On March 27, 2016 at 12:54:14 PM, Mark Schonewille ([hidden email]<mailto:[hidden email]>) wrote:

I had a mobile app project where the designers did exactly the same.
They put round corners everywhere, around every element in the app. The
result was a lot of unused space. It was cumbersome and inefficient and
in the end it didn't look well. We decided to use straight corbers and
the app looked a gazillion times better than before.

If you still want this, you can create round rectangles and adjust the
corners dynamically using the roundRadius. Use the rectangles as
backgrounds of groups.
_______________________________________________
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
|

Re: Design Challenge -- Round Corner mask on images

ScottR
In reply to this post by Sannyasin Brahmanathaswami
One way is using ink effects.  In a group with the roundRect graphic
layered above the image:
blendSrcOver applied to the group
blendDstIn applied to the graphic

You might want to take a look at the stack provided in this article for
ideas:
http://tactilemedia.com/blog/2015/11/04/livecode-basics-masking-objects/


Regards,

Scott Rossi
Creative Director
Tactile Media, UX/UI Design




On 3/27/16, 3:26 PM, "use-livecode on behalf of Sannyasin
Brahmanathaswami" <[hidden email] on behalf of
[hidden email]> wrote:

>Our design team finished a design for a mobile app. The used rounded
>corners everywhere.
>
>see
>
>http://wiki.hindu.org/screenshots/radius-all-corners.jpg
>
>Something I wished we had in LC for all controls (groups included) is
>corner radius, but is is only available for graphics objects.
>
>
>set the roundRadius of grc "roundRectAngleButton" to pValue
>
>I'm digging in the forums for info an masks etc... but I'm out of my
>depth here.
>
>I'm thinking this is probably (I hope)  not that hard to implement.
>
>it's obviously easy enough to create a background graphic with round
>corners, add a small field on the left site that is transparent, lock
>that, put an image on the right side, make this a small group and give
>the name of a target and we have a nice cool "button" but how do I get
>the image in the right half of the group to take the rounded corners of
>the background graphic?
>
>BR
>_______________________________________________
>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
|

Re: Design Challenge -- Round Corner mask on images

Sannyasin Brahmanathaswami
Scott, thanks stack downloaded

Fascinating technique.

But your example uses an oval... but if I use  graphic style  "round rectangle" -- the technique fails -- or I am missing something.

Can you try it there?

tks


On March 27, 2016 at 1:42:52 PM, Scott Rossi ([hidden email]<mailto:[hidden email]>) wrote:

One way is using ink effects. In a group with the roundRect graphic
layered above the image:
blendSrcOver applied to the group
blendDstIn applied to the graphic

You might want to take a look at the stack provided in this article for
ideas:
http://tactilemedia.com/blog/2015/11/04/livecode-basics-masking-objects/


Regards,

Scott Rossi
Creative Director
Tactile Media, UX/UI Design




On 3/27/16, 3:26 PM, "use-livecode on behalf of Sannyasin
Brahmanathaswami" <[hidden email] on behalf of
[hidden email]> wrote:

>Our design team finished a design for a mobile app. The used rounded
>corners everywhere.
>
>see
>
>http://wiki.hindu.org/screenshots/radius-all-corners.jpg
>
>Something I wished we had in LC for all controls (groups included) is
>corner radius, but is is only available for graphics objects.
>
>
>set the roundRadius of grc "roundRectAngleButton" to pValue
>
>I'm digging in the forums for info an masks etc... but I'm out of my
>depth here.
>
>I'm thinking this is probably (I hope) not that hard to implement.
>
>it's obviously easy enough to create a background graphic with round
>corners, add a small field on the left site that is transparent, lock
>that, put an image on the right side, make this a small group and give
>the name of a target and we have a nice cool "button" but how do I get
>the image in the right half of the group to take the rounded corners of
>the background graphic?
>
>BR
>_______________________________________________
>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
_______________________________________________
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
|

Re: Design Challenge -- Round Corner mask on images

ScottR
An oval is the same as a roundRect, just with larger radii.  The technique
doesn't "fail" as shown in the demo stack, so yes, you may indeed be
missing something.  Make sure you have the inks applied properly.

go url "http://tactilemedia.com/download/RoundCornerSample.livecode"

Regards,

Scott Rossi
Creative Director
Tactile Media, UX/UI Design




On 3/27/16, 6:52 PM, "use-livecode on behalf of Sannyasin
Brahmanathaswami" <[hidden email] on behalf of
[hidden email]> wrote:

>Scott, thanks stack downloaded
>
>Fascinating technique.
>
>But your example uses an oval... but if I use  graphic style  "round
>rectangle" -- the technique fails -- or I am missing something.
>
>Can you try it there?
>
>tks
>
>
>On March 27, 2016 at 1:42:52 PM, Scott Rossi
>([hidden email]<mailto:[hidden email]>) wrote:
>
>One way is using ink effects. In a group with the roundRect graphic
>layered above the image:
>blendSrcOver applied to the group
>blendDstIn applied to the graphic
>
>You might want to take a look at the stack provided in this article for
>ideas:
>http://tactilemedia.com/blog/2015/11/04/livecode-basics-masking-objects/
>
>
>Regards,
>
>Scott Rossi
>Creative Director
>Tactile Media, UX/UI Design
>
>
>
>
>On 3/27/16, 3:26 PM, "use-livecode on behalf of Sannyasin
>Brahmanathaswami" <[hidden email] on behalf of
>[hidden email]> wrote:
>
>>Our design team finished a design for a mobile app. The used rounded
>>corners everywhere.
>>
>>see
>>
>>http://wiki.hindu.org/screenshots/radius-all-corners.jpg
>>
>>Something I wished we had in LC for all controls (groups included) is
>>corner radius, but is is only available for graphics objects.
>>
>>
>>set the roundRadius of grc "roundRectAngleButton" to pValue
>>
>>I'm digging in the forums for info an masks etc... but I'm out of my
>>depth here.
>>
>>I'm thinking this is probably (I hope) not that hard to implement.
>>
>>it's obviously easy enough to create a background graphic with round
>>corners, add a small field on the left site that is transparent, lock
>>that, put an image on the right side, make this a small group and give
>>the name of a target and we have a nice cool "button" but how do I get
>>the image in the right half of the group to take the rounded corners of
>>the background graphic?
>>
>>BR
>>_______________________________________________
>>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
>_______________________________________________
>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
|

Re: Design Challenge -- Round Corner mask on images

Sannyasin Brahmanathaswami
Thanks for the re-assurance and, that's a relief, that its a simple solution...

Are you working in LC8 dp 16?

BUT: What's happening here is:  I'm getting some serious rendering issues. Your stack opens fine and I could see the lovely roundrect grc mask... then as soon as I touch anything we get this kind of behavior

http://wiki.hindu.org/screenshots/IDE-rendering-ssues.jpg

If I save the stack the whole effect is lost. Thinking this is a temporary rendering issue, I saved, quit and reboot LC

but then we get this:

http://wiki.hindu.org/screenshots/round-corner-after-save.jpg

And the group, inks etc. are all corrupted in the saved stack... at least here on my mac.

What version of LC are you working in?

I thought dp16 was stable enough to work in, and I want to pitch in on the beta testing so that LC team could get as much feedback on 16 as I could provide, but now I have to get real work done, so i think I need to step back from this bleeding edge... DP15 was actually pretty stable. What are you using?

Can anyone else test this please?  Open Scotts stack in LC8 DP16

go url "http://tactilemedia.com/download/RoundCornerSample.livecode"

then set the selectGroupedControls to True, choose the selection tool and move the graphic mask around...does everything stay OK?  If the problem can be duplicated elsewhere... I will bug it....

actually I bugged it anyway

http://quality.livecode.com/show_bug.cgi?id=17247

BR





On March 27, 2016 at 4:12:58 PM, Scott Rossi ([hidden email]<mailto:[hidden email]>) wrote:

An oval is the same as a roundRect, just with larger radii. The technique
doesn't "fail" as shown in the demo stack, so yes, you may indeed be
missing something. Make sure you have the inks applied properly.



Regards,

Scott Rossi
Creative Director
Tactile Media, UX/UI Design




On 3/27/16, 6:52 PM, "use-livecode on behalf of Sannyasin
Brahmanathaswami" <[hidden email] on behalf of
[hidden email]> wrote:

>Scott, thanks stack downloaded
>
>Fascinating technique.
>
>But your example uses an oval... but if I use graphic style "round
>rectangle" -- the technique fails -- or I am missing something.
>
>Can you try it there?
>
>tks
>
>
>On March 27, 2016 at 1:42:52 PM, Scott Rossi
>([hidden email]<mailto:[hidden email]>) wrote:
>
>One way is using ink effects. In a group with the roundRect graphic
>layered above the image:
>blendSrcOver applied to the group
>blendDstIn applied to the graphic
>
>You might want to take a look at the stack provided in this article for
>ideas:
>http://tactilemedia.com/blog/2015/11/04/livecode-basics-masking-objects/
>
>
>Regards,
>
>Scott Rossi
>Creative Director
>Tactile Media, UX/UI Design
>
>
>
>
>On 3/27/16, 3:26 PM, "use-livecode on behalf of Sannyasin
>Brahmanathaswami" <[hidden email] on behalf of
>[hidden email]> wrote:
>
>>Our design team finished a design for a mobile app. The used rounded
>>corners everywhere.
>>
>>see
>>
>>http://wiki.hindu.org/screenshots/radius-all-corners.jpg
>>
>>Something I wished we had in LC for all controls (groups included) is
>>corner radius, but is is only available for graphics objects.
>>
>>
>>set the roundRadius of grc "roundRectAngleButton" to pValue
>>
>>I'm digging in the forums for info an masks etc... but I'm out of my
>>depth here.
>>
>>I'm thinking this is probably (I hope) not that hard to implement.
>>
>>it's obviously easy enough to create a background graphic with round
>>corners, add a small field on the left site that is transparent, lock
>>that, put an image on the right side, make this a small group and give
>>the name of a target and we have a nice cool "button" but how do I get
>>the image in the right half of the group to take the rounded corners of
>>the background graphic?
>>
>>BR
>>_______________________________________________
>>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
>_______________________________________________
>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
_______________________________________________
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
|

Re: Design Challenge -- Round Corner mask on images

ScottR
If you have acceleratedRendering enabled, try disabling it.

Regarding your second screenshot, you're likely getting that result
because you repositioned the graphic within the group.

LC8 might be more sensitive to acceleratedRendering than previous
versions, but enabling the property in general sometimes causes
idiosyncrasies that need to be worked around.  It's possible ink effects
won't work for your situation, so you may need to resort to other methods.

Regards,

Scott Rossi
Creative Director
Tactile Media, UX/UI Design




On 3/27/16, 8:00 PM, "use-livecode on behalf of Sannyasin
Brahmanathaswami" <[hidden email] on behalf of
[hidden email]> wrote:

>Thanks for the re-assurance and, that's a relief, that its a simple
>solution...
>
>Are you working in LC8 dp 16?
>
>BUT: What's happening here is:  I'm getting some serious rendering
>issues. Your stack opens fine and I could see the lovely roundrect grc
>mask... then as soon as I touch anything we get this kind of behavior
>
>http://wiki.hindu.org/screenshots/IDE-rendering-ssues.jpg
>
>If I save the stack the whole effect is lost. Thinking this is a
>temporary rendering issue, I saved, quit and reboot LC
>
>but then we get this:
>
>http://wiki.hindu.org/screenshots/round-corner-after-save.jpg
>
>And the group, inks etc. are all corrupted in the saved stack... at least
>here on my mac.
>
>What version of LC are you working in?
>
>I thought dp16 was stable enough to work in, and I want to pitch in on
>the beta testing so that LC team could get as much feedback on 16 as I
>could provide, but now I have to get real work done, so i think I need to
>step back from this bleeding edge... DP15 was actually pretty stable.
>What are you using?
>
>Can anyone else test this please?  Open Scotts stack in LC8 DP16
>
>go url "http://tactilemedia.com/download/RoundCornerSample.livecode"
>
>then set the selectGroupedControls to True, choose the selection tool and
>move the graphic mask around...does everything stay OK?  If the problem
>can be duplicated elsewhere... I will bug it....
>
>actually I bugged it anyway
>
>http://quality.livecode.com/show_bug.cgi?id=17247
>
>BR
>
>
>
>
>
>On March 27, 2016 at 4:12:58 PM, Scott Rossi
>([hidden email]<mailto:[hidden email]>) wrote:
>
>An oval is the same as a roundRect, just with larger radii. The technique
>doesn't "fail" as shown in the demo stack, so yes, you may indeed be
>missing something. Make sure you have the inks applied properly.
>
>
>
>Regards,
>
>Scott Rossi
>Creative Director
>Tactile Media, UX/UI Design
>
>
>
>
>On 3/27/16, 6:52 PM, "use-livecode on behalf of Sannyasin
>Brahmanathaswami" <[hidden email] on behalf of
>[hidden email]> wrote:
>
>>Scott, thanks stack downloaded
>>
>>Fascinating technique.
>>
>>But your example uses an oval... but if I use graphic style "round
>>rectangle" -- the technique fails -- or I am missing something.
>>
>>Can you try it there?
>>
>>tks
>>
>>
>>On March 27, 2016 at 1:42:52 PM, Scott Rossi
>>([hidden email]<mailto:[hidden email]>) wrote:
>>
>>One way is using ink effects. In a group with the roundRect graphic
>>layered above the image:
>>blendSrcOver applied to the group
>>blendDstIn applied to the graphic
>>
>>You might want to take a look at the stack provided in this article for
>>ideas:
>>http://tactilemedia.com/blog/2015/11/04/livecode-basics-masking-objects/
>>
>>
>>Regards,
>>
>>Scott Rossi
>>Creative Director
>>Tactile Media, UX/UI Design
>>
>>
>>
>>
>>On 3/27/16, 3:26 PM, "use-livecode on behalf of Sannyasin
>>Brahmanathaswami" <[hidden email] on behalf of
>>[hidden email]> wrote:
>>
>>>Our design team finished a design for a mobile app. The used rounded
>>>corners everywhere.
>>>
>>>see
>>>
>>>http://wiki.hindu.org/screenshots/radius-all-corners.jpg
>>>
>>>Something I wished we had in LC for all controls (groups included) is
>>>corner radius, but is is only available for graphics objects.
>>>
>>>
>>>set the roundRadius of grc "roundRectAngleButton" to pValue
>>>
>>>I'm digging in the forums for info an masks etc... but I'm out of my
>>>depth here.
>>>
>>>I'm thinking this is probably (I hope) not that hard to implement.
>>>
>>>it's obviously easy enough to create a background graphic with round
>>>corners, add a small field on the left site that is transparent, lock
>>>that, put an image on the right side, make this a small group and give
>>>the name of a target and we have a nice cool "button" but how do I get
>>>the image in the right half of the group to take the rounded corners of
>>>the background graphic?
>>>
>>>BR
>>>_______________________________________________
>>>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
>>_______________________________________________
>>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
>_______________________________________________
>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
|

Re: Design Challenge -- Round Corner mask on images

J. Landman Gay
In reply to this post by Sannyasin Brahmanathaswami
On 3/27/2016 5:26 PM, Sannyasin Brahmanathaswami wrote:

> I'm thinking this is probably (I hope)  not that hard to implement.
>
> it's obviously easy enough to create a background graphic with round
> corners, add a small field on the left site that is transparent, lock
> that, put an image on the right side, make this a small group and
> give the name of a target and we have a nice cool "button" but how do
> I get the image in the right half of the group to take the rounded
> corners of the background graphic?
>

I could reproduce it this way:

Have your designer create the entire content of the image area,
including the beige left-side label area, but without any text. Import
the image.

Make a button the same dimensions as the image. Set the button
properties to:

Showborder: false
Opaque: true
Backpattern: the ID of the image
Margins: 4,4,250,4
Textsize: 28
Label: set it in the msg box or script:
    set the label of btn x to "Three" &cr& "Line" &cr& "Label"

You can't type in a multi-line label in the inspector, but you can set
one via script.

This gives you a regular button that you can attach a script to normally.

--
Jacqueline Landman Gay         |     [hidden email]
HyperActive Software           |     http://www.hyperactivesw.com

_______________________________________________
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
|

Re: Design Challenge -- Round Corner mask on images

Alejandro Tejada
In reply to this post by Sannyasin Brahmanathaswami
Reply | Threaded
Open this post in threaded view
|

Re: Design Challenge -- Round Corner mask on images

ScottR
In reply to this post by J. Landman Gay
Jacque's backPattern idea is an option purely for masking images as well,
though you're more limited using that option.  The image and graphic need
to be the same height, and you need to have "extra" image on the left side
so you can crop off the rounded corners on the left.

The advantage of that option is you probably won't get any rendering
artifacts with acceleratedRendering enabled (no ink effects needed).  The
disadvantage is the image needs to be fit precisely to the masking
graphic, while in a group with ink effects, you have more flexibility in
placing/sizing the image.

Regards,

Scott Rossi
Creative Director
Tactile Media, UX/UI Design




On 3/27/16, 8:38 PM, "use-livecode on behalf of J. Landman Gay"
<[hidden email] on behalf of
[hidden email]> wrote:

>On 3/27/2016 5:26 PM, Sannyasin Brahmanathaswami wrote:
>
>> I'm thinking this is probably (I hope)  not that hard to implement.
>>
>> it's obviously easy enough to create a background graphic with round
>> corners, add a small field on the left site that is transparent, lock
>> that, put an image on the right side, make this a small group and
>> give the name of a target and we have a nice cool "button" but how do
>> I get the image in the right half of the group to take the rounded
>> corners of the background graphic?
>>
>
>I could reproduce it this way:
>
>Have your designer create the entire content of the image area,
>including the beige left-side label area, but without any text. Import
>the image.
>
>Make a button the same dimensions as the image. Set the button
>properties to:
>
>Showborder: false
>Opaque: true
>Backpattern: the ID of the image
>Margins: 4,4,250,4
>Textsize: 28
>Label: set it in the msg box or script:
>    set the label of btn x to "Three" &cr& "Line" &cr& "Label"
>
>You can't type in a multi-line label in the inspector, but you can set
>one via script.
>
>This gives you a regular button that you can attach a script to normally.
>
>--
>Jacqueline Landman Gay         |     [hidden email]
>HyperActive Software           |     http://www.hyperactivesw.com
>
>_______________________________________________
>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
|

Re: Design Challenge -- Round Corner mask on images

J. Landman Gay
My method doesn't use a graphic at all. The button itself just uses the
image as a backpattern.

I'll leave my test stack here for a while:
<https://www.dropbox.com/s/ho56oaaaqjvbe26/RoundRect%20Button%20example.livecode?dl=0>

On 3/27/2016 11:03 PM, Scott Rossi wrote:

> Jacque's backPattern idea is an option purely for masking images as well,
> though you're more limited using that option.  The image and graphic need
> to be the same height, and you need to have "extra" image on the left side
> so you can crop off the rounded corners on the left.
>
> The advantage of that option is you probably won't get any rendering
> artifacts with acceleratedRendering enabled (no ink effects needed).  The
> disadvantage is the image needs to be fit precisely to the masking
> graphic, while in a group with ink effects, you have more flexibility in
> placing/sizing the image.
>
> Regards,
>
> Scott Rossi
> Creative Director
> Tactile Media, UX/UI Design
>
>
>
>
> On 3/27/16, 8:38 PM, "use-livecode on behalf of J. Landman Gay"
> <[hidden email] on behalf of
> [hidden email]> wrote:
>
>> On 3/27/2016 5:26 PM, Sannyasin Brahmanathaswami wrote:
>>
>>> I'm thinking this is probably (I hope)  not that hard to implement.
>>>
>>> it's obviously easy enough to create a background graphic with round
>>> corners, add a small field on the left site that is transparent, lock
>>> that, put an image on the right side, make this a small group and
>>> give the name of a target and we have a nice cool "button" but how do
>>> I get the image in the right half of the group to take the rounded
>>> corners of the background graphic?
>>>
>>
>> I could reproduce it this way:
>>
>> Have your designer create the entire content of the image area,
>> including the beige left-side label area, but without any text. Import
>> the image.
>>
>> Make a button the same dimensions as the image. Set the button
>> properties to:
>>
>> Showborder: false
>> Opaque: true
>> Backpattern: the ID of the image
>> Margins: 4,4,250,4
>> Textsize: 28
>> Label: set it in the msg box or script:
>>     set the label of btn x to "Three" &cr& "Line" &cr& "Label"
>>
>> You can't type in a multi-line label in the inspector, but you can set
>> one via script.
>>
>> This gives you a regular button that you can attach a script to normally.
>>
>> --
>> Jacqueline Landman Gay         |     [hidden email]
>> HyperActive Software           |     http://www.hyperactivesw.com
>>
>> _______________________________________________
>> 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
>


--
Jacqueline Landman Gay         |     [hidden email]
HyperActive Software           |     http://www.hyperactivesw.com

_______________________________________________
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
|

Re: Design Challenge -- Round Corner mask on images

J. Landman Gay
Addendum: I forgot to make the background around the image transparent.
You'd need to do that.

On 3/27/2016 11:25 PM, J. Landman Gay wrote:

> My method doesn't use a graphic at all. The button itself just uses the
> image as a backpattern.
>
> I'll leave my test stack here for a while:
> <https://www.dropbox.com/s/ho56oaaaqjvbe26/RoundRect%20Button%20example.livecode?dl=0>
>
>
> On 3/27/2016 11:03 PM, Scott Rossi wrote:
>> Jacque's backPattern idea is an option purely for masking images as well,
>> though you're more limited using that option.  The image and graphic need
>> to be the same height, and you need to have "extra" image on the left
>> side
>> so you can crop off the rounded corners on the left.
>>
>> The advantage of that option is you probably won't get any rendering
>> artifacts with acceleratedRendering enabled (no ink effects needed).  The
>> disadvantage is the image needs to be fit precisely to the masking
>> graphic, while in a group with ink effects, you have more flexibility in
>> placing/sizing the image.
>>
>> Regards,
>>
>> Scott Rossi
>> Creative Director
>> Tactile Media, UX/UI Design
>>
>>
>>
>>
>> On 3/27/16, 8:38 PM, "use-livecode on behalf of J. Landman Gay"
>> <[hidden email] on behalf of
>> [hidden email]> wrote:
>>
>>> On 3/27/2016 5:26 PM, Sannyasin Brahmanathaswami wrote:
>>>
>>>> I'm thinking this is probably (I hope)  not that hard to implement.
>>>>
>>>> it's obviously easy enough to create a background graphic with round
>>>> corners, add a small field on the left site that is transparent, lock
>>>> that, put an image on the right side, make this a small group and
>>>> give the name of a target and we have a nice cool "button" but how do
>>>> I get the image in the right half of the group to take the rounded
>>>> corners of the background graphic?
>>>>
>>>
>>> I could reproduce it this way:
>>>
>>> Have your designer create the entire content of the image area,
>>> including the beige left-side label area, but without any text. Import
>>> the image.
>>>
>>> Make a button the same dimensions as the image. Set the button
>>> properties to:
>>>
>>> Showborder: false
>>> Opaque: true
>>> Backpattern: the ID of the image
>>> Margins: 4,4,250,4
>>> Textsize: 28
>>> Label: set it in the msg box or script:
>>>     set the label of btn x to "Three" &cr& "Line" &cr& "Label"
>>>
>>> You can't type in a multi-line label in the inspector, but you can set
>>> one via script.
>>>
>>> This gives you a regular button that you can attach a script to
>>> normally.
>>>
>>> --
>>> Jacqueline Landman Gay         |     [hidden email]
>>> HyperActive Software           |     http://www.hyperactivesw.com
>>>
>>> _______________________________________________
>>> 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
>>
>
>


--
Jacqueline Landman Gay         |     [hidden email]
HyperActive Software           |     http://www.hyperactivesw.com

_______________________________________________
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
|

Re: Design Challenge -- Round Corner mask on images

ScottR
In reply to this post by J. Landman Gay
Oh, I understand -- I'm just saying a graphic + backPattern may be a good
option because you have control over the shape (the roundRadius of the
corners be changed), the radius will auto-scale across different screen
sizes, and you don't have to pre-process all the images with rounded
corners.

Regards,

Scott Rossi
Creative Director
Tactile Media, UX/UI Design




On 3/27/16, 9:25 PM, "use-livecode on behalf of J. Landman Gay"
<[hidden email] on behalf of
[hidden email]> wrote:

>My method doesn't use a graphic at all. The button itself just uses the
>image as a backpattern.
>
>I'll leave my test stack here for a while:
><https://www.dropbox.com/s/ho56oaaaqjvbe26/RoundRect%20Button%20example.li
>vecode?dl=0>
>
>On 3/27/2016 11:03 PM, Scott Rossi wrote:
>> Jacque's backPattern idea is an option purely for masking images as
>>well,
>> though you're more limited using that option.  The image and graphic
>>need
>> to be the same height, and you need to have "extra" image on the left
>>side
>> so you can crop off the rounded corners on the left.
>>
>> The advantage of that option is you probably won't get any rendering
>> artifacts with acceleratedRendering enabled (no ink effects needed).
>>The
>> disadvantage is the image needs to be fit precisely to the masking
>> graphic, while in a group with ink effects, you have more flexibility in
>> placing/sizing the image.
>>
>> Regards,
>>
>> Scott Rossi
>> Creative Director
>> Tactile Media, UX/UI Design
>>
>>
>>
>>
>> On 3/27/16, 8:38 PM, "use-livecode on behalf of J. Landman Gay"
>> <[hidden email] on behalf of
>> [hidden email]> wrote:
>>
>>> On 3/27/2016 5:26 PM, Sannyasin Brahmanathaswami wrote:
>>>
>>>> I'm thinking this is probably (I hope)  not that hard to implement.
>>>>
>>>> it's obviously easy enough to create a background graphic with round
>>>> corners, add a small field on the left site that is transparent, lock
>>>> that, put an image on the right side, make this a small group and
>>>> give the name of a target and we have a nice cool "button" but how do
>>>> I get the image in the right half of the group to take the rounded
>>>> corners of the background graphic?
>>>>
>>>
>>> I could reproduce it this way:
>>>
>>> Have your designer create the entire content of the image area,
>>> including the beige left-side label area, but without any text. Import
>>> the image.
>>>
>>> Make a button the same dimensions as the image. Set the button
>>> properties to:
>>>
>>> Showborder: false
>>> Opaque: true
>>> Backpattern: the ID of the image
>>> Margins: 4,4,250,4
>>> Textsize: 28
>>> Label: set it in the msg box or script:
>>>     set the label of btn x to "Three" &cr& "Line" &cr& "Label"
>>>
>>> You can't type in a multi-line label in the inspector, but you can set
>>> one via script.
>>>
>>> This gives you a regular button that you can attach a script to
>>>normally.
>>>
>>> --
>>> Jacqueline Landman Gay         |     [hidden email]
>>> HyperActive Software           |     http://www.hyperactivesw.com
>>>
>>> _______________________________________________
>>> 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
>>
>
>
>--
>Jacqueline Landman Gay         |     [hidden email]
>HyperActive Software           |     http://www.hyperactivesw.com
>
>_______________________________________________
>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
|

Re: Design Challenge -- Round Corner mask on images

Sannyasin Brahmanathaswami
In reply to this post by ScottR
The "mess" you saw in the screen shots was present immediately after

a) starting LC
b) downloading your stack
c) acclerated rendering is false for this stack
d) Mask looks perfect
d) choose pointer tool
e) start moving objects
f) inks are "wrecked" and artifacts appear on screen
g) masking effect is gone
h) save, close, quit restart
i) open the stack again.
j) the graphic and the group have the inks applied
g) no masking effect though




On March 27, 2016 at 5:16:41 PM, Scott Rossi ([hidden email]<mailto:[hidden email]>) wrote:

If you have acceleratedRendering enabled, try disabling it.

Regarding your second screenshot, you're likely getting that result
because you repositioned the graphic within the group.

LC8 might be more sensitive to acceleratedRendering than previous
versions, but enabling the property in general sometimes causes
idiosyncrasies that need to be worked around. It's possible ink effects
won't work for your situation, so you may need to resort to other methods.
_______________________________________________
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
|

Re: Design Challenge -- Round Corner mask on images

Sannyasin Brahmanathaswami
This all works but for one thing. For image processing I really, really don't want to have a requirement that the image be fully composed with the left area blank.  I just need to say

"Give me all your curated thumbs at 150h x 412w jpg quality 75, save each one with the name of the link you want it to serve under."


I had thought of the pattern option, because we did use it already in the Gurudeva app.

Our work flows would probably require us to use a full width image, then perhaps I can try setting that as a pattern then place a graphic on top of that and a field on top of that...

OR   (fingers crossed)

HQ will fix the mysterious bugs behind this problem.

more experiments tomorrow.








On March 27, 2016 at 8:49:13 PM, Sannyasin Brahmanathaswami ([hidden email]<mailto:[hidden email]>) wrote:

I could reproduce it this way:

Have your designer create the entire content of the image area,
including the beige left-side label area, but without any text. Import
the image.

Make a button the same dimensions as the image. Set the button
properties to:

Showborder: false
Opaque: true
Backpattern: the ID of the image
Margins: 4,4,250,4
Textsize: 28
Label: set it in the msg box or script:
set the label of btn x to "Three" &cr& "Line" &cr& "Label"

You can't type in a multi-line label in the inspector, but you can set
one via script.

This gives you a regular button that you can attach a script to normally.
_______________________________________________
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
|

Re: Design Challenge -- Round Corner mask on images

Sannyasin Brahmanathaswami
In reply to this post by Sannyasin Brahmanathaswami
Duh! and Eureka at the same time

I got it to work!  I kept thinking, if it works for Scott, and his stack opens in LC8 and it appears correctly, there has to be something I'm missing... indeed there was. I went back to the mask option stack from Scott site, on card one there is the automobile in an oval.

I tried moving the graphic around. Ahha!  The missing part of the puzzle is simple

1) I have to ignore the artifacts/strange mess of selection handle squares being rendered in streams on the card...this is some anamolous behavior in the IDE that is completley unrelated to our quest. I was mixing them up in my head.

2) the graphic and the mask have to be precisely on top of each other. The clue that Scott said I had moved the graphic...  I had made the  wrong assumption that group ink was somehow going to pick up the background from the card, and mask everything outside the graphic mask that was still inside the group boundaries.. but that's not what is happening.  with BlendDisIn, it is the graphic mask that does that and.... all that it picks up from the background is some mysterious default dimension of pixels, like an exterior padding, of about 10 pixels all around the graphic. Outside that.. it is "pixel life as usual" and the background image appears thru on the outside of the graphic mask.

Ok solution simple: set the rect of grc "mask" to the rect of image "lizard"  and voila, it works...

save, close, quit, reopen, all is perfect.

programatically then we can just import the image, create graphic to the same rect, set locs to the same loc, field half size, set the left, insert the "label" group set the script.

Probably better to create the group as a kind of template, set it's loc to -1000,-1000 and then copy it over and over again to instantiate all these "buttons"

And... happy ending: you can layer a field between the background image and the mask on top, set it's left to the left of the others and it too has it's corners masked.

Case closed...Thanks for your patience!

On March 27, 2016 at 8:49:13 PM, Sannyasin Brahmanathaswami ([hidden email]<mailto:[hidden email]>) wrote:

Regarding your second screenshot, you're likely getting that result
because you repositioned the graphic within the group.
_______________________________________________
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
|

Re: Design Challenge -- Round Corner mask on images

sanke
In reply to this post by Sannyasin Brahmanathaswami
Another contribution to this thread from the past.


<www.metaworx.net/MoreAboutMasksRev3.zip> and

<www.metaworx.net/DynamicImageButtons.zip>


Stacks from 2009:

The first one is a result of a longer discussion and experimentation with Bernd Niggemann showing different approaches to create and use masks, the second is a short example stack demonstrating round-corner-buttons whose labels can be dynamically changed by script during runtime.


Kind regards,


Wilhelm Sanke


---
Diese E-Mail wurde von Avast Antivirus-Software auf Viren gepr├╝ft.
https://www.avast.com/antivirus


_______________________________________________
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
|

Re: Design Challenge -- Round Corner mask on images

Alejandro Tejada
In reply to this post by Sannyasin Brahmanathaswami
Hi All,

By trial and error, (the worse kind of error)
I finally find a script that mask an image using
a vector graphic. Follow these steps to make
it work.

1)  create a new stack and import an image

2) over this image, draw a closed vector graphic
using any drawing tool (including freehand
or freehand polygon)

3) in this same stack, (that only have two objects:
an image and a single vector graphic)
create a button and set the script of this button
to this:

on mouseUp

    set the locklocation of img 1 to true
   import snapshot from img 1
   set the loc of img 2 to the loc of img 1
   delete img 1
   -- after deleting img 1, img 2 becomes img 1
 
   crop img 1 to the rect of grc 1
   
   set the opaque of grc 1 to true
   set the foregroundColor of grc 1 to black
   set the linesize of grc 1 to 0
   set the ink of grc 1 to srcCopy
   set the width of grc 1 to the width of img 1
   set the height of grc 1 to the height of img 1
   
   import snapshot from grc 1 -- this snapshot created image 2

   set the alphadata of image 1 to the alphadata of image 2
   
   delete grc 1 -- vector graphic
   delete img 2 -- image
end mouseUp

Works fine here, but could be enhanced
in many ways, for example:

Who wants to extend this script to mask
images using the alphadata from
transparent png and static transparent
gif images?

Thanks in advance!

Alejandro
Reply | Threaded
Open this post in threaded view
|

Re: Design Challenge -- Round Corner mask on images

Sannyasin Brahmanathaswami
Alejandro:

Nandri, Mahalo, Merci, Thank you!

Awesome.... extremely useful


On March 28, 2016 at 7:44:22 PM, Alejandro Tejada ([hidden email]<mailto:[hidden email]>) wrote:

Hi All,

By trial and error, (the worse kind of error)
I finally find a script that mask an image using
a vector graphic. Follow these steps to make
it work.

1) create a new stack and import an image

2) over this image, draw a closed vector graphic
using any drawing tool (including freehand
or freehand polygon)

3) in this same stack, (that only have two objects:
an image and a single vector graphic)
create a button and set the script of this button
to this:

on mouseUp

set the locklocation of img 1 to true
import snapshot from img 1
set the loc of img 2 to the loc of img 1
delete img 1
-- after deleting img 1, img 2 becomes img 1

crop img 1 to the rect of grc 1

set the opaque of grc 1 to true
set the foregroundColor of grc 1 to black
set the linesize of grc 1 to 0
set the ink of grc 1 to srcCopy
set the width of grc 1 to the width of img 1
set the height of grc 1 to the height of img 1

import snapshot from grc 1 -- this snapshot created image 2

set the alphadata of image 1 to the alphadata of image 2

delete grc 1 -- vector graphic
delete img 2 -- image
end mouseUp

Works fine here, but could be enhanced
in many ways, for example:

Who wants to extend this script to mask
images using the alphadata from
transparent png and static transparent
gif images?

Thanks in advance!

Alejandro




--
View this message in context: http://runtime-revolution.278305.n4.nabble.com/Design-Challenge-Round-Corner-mask-on-images-tp4702659p4702723.html
Sent from the Revolution - User mailing list archive at Nabble.com.

_______________________________________________
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
1234