Changing a button size

79 views
Skip to first unread message

aquanaut

unread,
Jun 17, 2012, 5:37:58 PM6/17/12
to objec...@googlegroups.com
I am newbie to cappuccino and so far I find it quite impressive. As a learning exercise, I decided to develop a clone of OSX Lion's calculator app, I aimed to mimmic the UI as close as possible. Using the interface builder, I was able to replicate most objects with the exception of the equal button. Some how nib2cib doesn't know how to handle square or texture buttons and when I tried to change the size programmatically with code below, I don't get the expected result.

- (void)awakeFromCib

{

    size = [equalButton frameSize];

    

    size.height = size.height * 5;

    

    [equalButton setFrameSize:size];

    

    [theWindow setFullPlatformWindow:YES];

}


Since changing the button type in Interface Builder and coding the button size didn't work. I am reaching out to your collective expertise for some advise. 

Thanks,

Jaime

Aparajita Fishman

unread,
Jun 17, 2012, 8:30:38 PM6/17/12
to objec...@googlegroups.com
> size.height = size.height * 5;

You could also do:

size.height *= 5;


> Since changing the button type in Interface Builder and coding the button size didn't work. I am reaching out to your collective expertise for some advise.

Button heights in Cappuccino are currently fixed, because buttons are drawn using a three-part image-based bezel (left, center, right), which means there is no way to stretch them vertically without looking bad.

Theoretically buttons could be done with a nine-part bezel, which would allow them to resize vertically. Maybe a talented artist out there could come up with a nine-part bezel that would have a nice vertical gradient that would look ok when it is resized vertically.

Regards,

Aparajita
Cappuccino Core Developer

aquanaut

unread,
Jun 18, 2012, 7:21:02 PM6/18/12
to objec...@googlegroups.com

Theoretically buttons could be done with a nine-part bezel, which would allow them to resize vertically. Maybe a talented artist out there could come up with a nine-part bezel that would have a nice vertical gradient that would look ok when it is resized vertically.

Do you know if cocoa buttons also based on images, instead of real-time renders? Could you please point me out to the implementation source and resources? I am planing to ask some of my graphics friends to implement your suggestion.

Aparajita Fishman

unread,
Jun 18, 2012, 9:15:12 PM6/18/12
to objec...@googlegroups.com
> Do you know if cocoa buttons also based on images, instead of real-time renders?

They are drawn, no images. We probably could draw buttons as well, but gradients don't do well in VML, and there is no Canvas until IE 9.


> Could you please point me out to the implementation source and resources? I am planing to ask some of my graphics friends to implement your suggestion.

The original artwork is here:

https://github.com/madebysofa/aristo/tree/master/aristo-1

In order to switch to a nine-part image, you would generate the nine parts and change ThemeDescriptors +button to use nine elements in the array passed to PatternColor(). For an example of a nine-part PatternColor, see +themedStandardTextField.

Aparajita Fishman

unread,
Jun 18, 2012, 9:15:37 PM6/18/12
to objec...@googlegroups.com
> I am planing to ask some of my graphics friends to implement your suggestion.

Thank you!

Alexander Ljungberg

unread,
Jun 19, 2012, 5:57:43 AM6/19/12
to objec...@googlegroups.com
In my experience, drawing widgets using code is rarely a good idea even in Cocoa. Many programmers are not used to dealing with artistic considerations and are more of the engineer mindset, so you end up having to iterate for a long time to come up with pixel perfect drawing code. Images provide precision and flexibility for the designer.

There is one type of drawing which is best done in code: if a widget needs to stretch in the direction of a gradient, or if it needs to stretch and has a noise pattern. If you use images for this the result cannot be perfect. Scaling noise isn't possible at all - your pattern of 1x1 noise dots turns into 1x1.34 dots or other arbitrary sizes. Scaling gradients is somewhat possible if done lightly, but if you scale a gradient to be to be larger you may get banding and destroy any dithering effect.

If you try to switch buttons to use a 9-part image you'll get this problem as well. The taller the button is made, the more wrong the vertical gradient in it will look.

Alexander
> --
> You received this message because you are subscribed to the Google Groups "Cappuccino & Objective-J" group.
> To post to this group, send email to objec...@googlegroups.com.
> To unsubscribe from this group, send email to objectivej+...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/objectivej?hl=en.
>

Todd Freese

unread,
Jun 19, 2012, 9:10:36 AM6/19/12
to objec...@googlegroups.com
Should you decide to draw the GUI, check this app out. http://www.paintcodeapp.com/ It is a vector drawing program that generates Obj-C code. I find it very helpful in these situations. 

Todd

D. Rimron

unread,
Jun 19, 2012, 1:52:28 PM6/19/12
to objec...@googlegroups.com
On 19/06/2012 02:15, Aparajita Fishman wrote:
>> Do you know if cocoa buttons also based on images, instead of real-time renders?
> They are drawn, no images. We probably could draw buttons as well, but gradients don't do well in VML, and there is no Canvas until IE 9.
And I presume some designer magic via a css3 background image, that
degrades to a "less than perfect" scaled PNG in the 9-part for IE, etc.
would be totally against the Cappuccino way? Neglecting a long-dead
browser for sake of awesome[0]...

-Dx

[0] Troll? eh, pardon? ;-)
Reply all
Reply to author
Forward
0 new messages