Page 1 of 2
Round Rect OS X Button
Posted: Tue Apr 29, 2014 5:04 pm
by Mag
There is not this kind of button right? The Square button makes the look of the interface a bit outdated and the Push button is not suitable for every use...
Re: Round Rect OS X Button
Posted: Tue Apr 29, 2014 5:25 pm
by richmond62
"There is not this kind of button right?"
Which kind of button?
Re: Round Rect OS X Button
Posted: Tue Apr 29, 2014 5:41 pm
by Mag
richmond62 wrote:"There is not this kind of button right?"
Which kind of button?
Hi Richmond! Round Rect.
Re: Round Rect OS X Button
Posted: Tue Apr 29, 2014 5:49 pm
by richmond62
This is what passes for a Round Rectangle button on a Macintosh:
- macRR.png (5.44 KiB) Viewed 13110 times
Which is frankly: crap.
Just to "comfort" you, here is a Linux Round Rectangle button:
- LinuxRR.png (5.75 KiB) Viewed 13110 times
Much the same.
Re: Round Rect OS X Button
Posted: Tue Apr 29, 2014 6:09 pm
by richmond62
Here's a thought . . .
as one can set the corner radius of a rectangle graphic with roundRadius, wouldn't it be nice if this could also
be a property of a standard "Aqua" button?
Re: Round Rect OS X Button
Posted: Tue Apr 29, 2014 6:50 pm
by bn
Hi Mag,
http://berndniggemann.on-rev.com/btnsip ... vecode.zip
actually buttons for iPhone (pre system 7)
you have to play around with it a bit to get used to the "user interface"
But it shows that you can actually make a lot of buttons with graphics/gradients/images.
Kind regards
Bernd
Re: Round Rect OS X Button
Posted: Tue Apr 29, 2014 9:52 pm
by bn
Mag,
here is a stack with a round-rect button that is actually a graphic. You can adjust width, height, radius of round corners and textsize.
It uses a gradient and an outerglow.
Kind regards
Bernd
Re: Round Rect OS X Button
Posted: Tue Apr 29, 2014 10:16 pm
by Mag
Thank you so much Bernd, impressive work!
I'm trying to make it thinner and lighter to resemble the OS X version but I'm having some difficulties...
(to the left my try, to the right the original OS X version)
Re: Round Rect OS X Button
Posted: Tue Apr 29, 2014 11:41 pm
by bn
Mag,
I tried to come closer to your image of the MacOS style button.
Kind regards
Bernd
Re: Round Rect OS X Button
Posted: Wed Apr 30, 2014 8:27 pm
by Mag
Thank you so much Bernd! It's perfect. I really appreciated your help.
I just changed the pressed appearence to have it darken of the default state and with black textColor.
Re: Round Rect OS X Button
Posted: Wed Apr 30, 2014 8:53 pm
by bn
Hi Mag,
I knew that the pressed appearance was off. But I was not sure how it should look. So I am glad you liked it in its default state.
The advantage of using a graphic for the button is that it scales with Retina devices if you use it at different resolutions. The drawback is it is a little awkward to use. Try
Code: Select all
set the scalefactor of stack "buttonRoundRectMag_0_3" to 2
from the message box to see how it scales
How about posting your solution so others who want to do the same can use it?
Maybe even Richmond likes it
He vanished from this thread somehow.
If you want to get fancy you could group the graphic and attach a behavior and in the behavior you handle the "mechanics" of the "button" in "before" handlers. But that is a matter of taste.
or do a snapshot of the default and pressed state and use those images in a button, but you will loose the resolution independence.
BTW if you don't like the vertical placement of the text fiddle with the bottom margin of the graphic. Depending on the textSize it maybe 1 pixel off.
Kind regards
Bernd
Re: Round Rect OS X Button
Posted: Wed Apr 30, 2014 9:18 pm
by Mag
Thanks Bernd!
Actually for the press effect I use for all the buttons of my stack this behavior, so I used it also for your button.
Code: Select all
on mouseUp
if the short name of this stack is "TM-CodeLibrary" then exit mouseUp -- to avoid to have errors when you work on this card
set the colorOverlay["opacity"] of me to "00"
performAction -- this is an handler I put in each button and actually execute the command
end mouseUp
on mouseMove
if the short name of this stack is "TM-CodeLibrary" then exit mouseMove -- to avoid to have errors when you work on this card
if the mouse is down then
if the mouseLoc is within the rect of me then
set the colorOverlay["opacity"] of me to "30"
else
set the colorOverlay["opacity"] of me to "00" -- this makes the button unpressed when you move the mouse out of the button like in standard OS X buttons
end if
end if
end mouseMove
Re: Round Rect OS X Button
Posted: Wed Apr 30, 2014 9:24 pm
by Mag
Here is the OS X standard Round Rect Button in its pressed state:
Re: Round Rect OS X Button
Posted: Thu May 01, 2014 12:18 am
by bn
Hi Mag,
here is a version of the roundRectButton stack that tries to set the pressed state from the "button"-graphic itself.
It is an approximation of the MaxOSX pressed round rect button, not quite, but I think it is good enough.
Unfortunately LiveCode does not have the Box-Filter for graphic effects anymore. Now it is all gaussian. Box Filter allowed for sharper edges.
Small changes: handles the vertical positon of text depending on even/odd button heights automatically (changes bottomMargin from 4 for even to 5 for uneven height values)
Min height now 16.
Anyways here it goes for anyone looking for a round rectangle button for MacOSX
Kind regards
Bernd
Re: Round Rect OS X Button
Posted: Thu May 01, 2014 9:39 am
by Mag
You have really done a great job Bernd!