Round Rect OS X Button

[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...

[richmond62]

"There is not this kind of button right?"

Which kind of button?

[Mag]

"There is not this kind of button right?"

Which kind of button?

Hi Richmond! Round Rect.

[richmond62]

This is what passes for a Round Rectangle button on a Macintosh:

macRR.png (5.44 KiB) Viewed 13097 times

Which is frankly: crap.

Just to "comfort" you, here is a Linux Round Rectangle button:

LinuxRR.png (5.75 KiB) Viewed 13097 times

Much the same.

[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?

[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

[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

[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)

[bn]

Mag,

I tried to come closer to your image of the MacOS style button.

Kind regards

Bernd

[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.

[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

[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

[Mag]

Here is the OS X standard Round Rect Button in its pressed state:

[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

[Mag]

You have really done a great job Bernd!