GUIDE: rounded vs square button corners

I am working on a decent sized existing Matlab program with a GUIDE built user interface.

About half the buttons have square edges and half have rounded edges and for the life of me I can't figure out what is the difference or how to specify either format.

I really don't care which one but I'd like to have them consistent.

Here is a sample as far as I can tell from the property inspector they are both the same

Thanks, Joe

[Sean de Wolski]

What shape is a new button if you add it?

[Joseph Areeda]

Sean all the new buttons have square edges, I'm pretty sure. I'm home now and booted in Linux where they are all square.

I'll check windows and see what it looks like.

You may be onto something though, I think the first release of this program was in 2006 so it has gone through many versions of Matlab. Perhaps deleting and recreating the buttons would help. I'll look for some that don't have much code in the callback and give it a try.

Thanks

[Jette]

I guess I just have a very similar problem: I have a GUI created with GUIDE in MATLAB R2006a on Windows XP. Now I have to convert it to MATLAB R2010b on Windows XP and Windows 7. In MATLAB R2010b/Windows XP all buttons look the same, but in Windows 7 some buttons have round edges and BackgroundColor 1 and others have square edges and BackgroundColor 2. This looks ugly and I would like to change it.

I currently run the GUI from a network drive which I can access from two computers - one with Win XP, the other with Win 7. I opened my GUI with MATLAB R2010b GUIDE on both computers (i.e. I access the identical fig-file) - and I get different colors for the same button.

What is going on there? Does MATLAB not store the color information for the single GUI elements inside the fig-file?

[Jiro Doke]

Jette,

I believe each system has its own default background color that is stored internally and may be different. If at some point, you changed the background color, those will be stored in the .fig file, but if you kept some buttons untouched, they will use the system's default background color. Perhaps that's why you see different colors.

If that's the case, try going into each button and manually setting the background color to the same color.

[Joseph Areeda]

I have confirmed that all the buttons are square on Windows 7.

And as stated before the background color is set on ALL the buttons because they seemed to take the background color from the container panel's HIGHLIGHT color.

One more issue I am having with my cross platform validation is button sizes. If text is specified in points and buttons are specified in pixels shouldn't the text fit in the buttons on different systems?

Answer 1

[Vlad Atanasiu]

The shape of button corners changes also when creating the controls programmatically. As you can see from the following image (Matlab R2014b Mac)...

the change occurs between 22 and 23 pixels. The change affects both the corner shape, the entire border shape, as well as the size of the button.

---
CODE FOR TESTING THE SHAPE OF BUTTON CORNERS
---

hMainFigure = figure(...
    'Name','Matlab 2014b',...
    'NumberTitle','off',...
    'Units','pixels',...
    'MenuBar','none',...
    'Toolbar','none',...
    'Position',[0 0 250 60],...
    'Visible','on');
hTXT = uicontrol(...
    'Style','text',...
    'String','Square vs rounded corners',...
    'HorizontalAlignment','left',...
    'Units','pixels',...
    'Position',[10 35 200 20]);
hPB1 = uicontrol(...
    'Style','pushbutton',...
    'String','10 px',...
    'Units','pixels',...
    'Position',[10 10 50 10]);
hPB2 = uicontrol(...
    'Style','pushbutton',...
    'String','22 px',...
    'Units','pixels',...
    'Position',[70 10 50 22]);
hPB3 = uicontrol(...
    'Style','pushbutton',...
    'String','23 px',...
    'Units','pixels',...
    'Position',[130 10 50 23]);
hPB4 = uicontrol(...
    'Style','pushbutton',...
    'String','40 px',...
    'Units','pixels',...
    'Position',[190 10 50 40]);

Answer 2

[Image Analyst]

All mine are the same shape. There is only one type of button available to place in GUIDE, unless you used the custom ActiveX capability to place a third party button. Sometimes the buttons look a little sharper at the corners depending on the background color. If it's not white, for example it's dark gray, you may see a white rectangle behind the buttons with sharp corners. And the button also looks a little different if you just clicked on it and so it "has focus" which means that the dotted line is running around the perimeter of the button, or if you clicked on it in GUIDE so that it has the black handles at the edges and corners. Was your picture an actual screenshot of your app?

[Joseph Areeda]

My development system is a Mac and this is a cross platform project so no ActiveX or 3rd party add ons.

I had an issue with the default background colors being inconsistent across platforms and especially button colors so they are all explicitly set to the same value.

It's not focus because on the main page I have multiple square edged buttons and multiple round edge buttons since only one has focus I think we can discount that as a possiblity.

The screenshot came from inside GUIDE but the running app looks the same.

I think all the buttons are square on Linux and Windows but I don't have those machines at work. I'll check tonight when I get home.

I appreciate the list of things to check.

Joe

[Jiro Doke]

I'm not sure I understand. Are you saying the round-vs-square behavior only shows up in GUIDE, but when you run it, it looks fine? So it's not really an issue for using it?

Also, how are you setting the background colors? Are you doing it in GUIDE (from their properties) or in code (in Open functions, etc)?

There's a known issue in Windows where the button looks different depending on whether the background color is using the default color or non-default color. Since WinXP, the system button (rounded button) didn't allow for a non-default background color, but we saw a need for people to change background colors so we provided it with a side-effect of changing the button look.

When I heard you say something about background colors, I thought that would be the case. I was told that this issue shows up on Windows only, so I wasn't sure why you were seeing it on the Mac. Also, if you manually set all buttons to have the same background color, they should have the same look. The fact that the running app looks the same made me think that maybe you were setting the background color in code during start up.

[Joseph Areeda]

Jiro,

The button look the same in GUIDE and the running program. On Macs some are round and some are square.

All have the background colors set because on Linux and Windows the background color seems to come from the highlight color for the panel they are in.

Also on Ubuntu and Scientific Linux (a Fedora derivative) the buttons are square. I have to check Windows (other problems on that platform).

Joe

Answer 3

[Jeff]

In my setup the rounded vs square look depends on the size of the buttons. Small buttons are square, large are rounded. For example, setting the height to 1.5 makes it square, but 2 makes it rounded. For sizes in between, there is some hysteresis.

I'm using Mac OS 10.9.5, Matlab R2014b.

[Greig]

I have the experience using GUIDE on Mac with 2014a.

Small buttons are square and large buttons have rounded edges. However, if I change the background color of a large rounded edge button, it becomes square.

I find GUIDE is really quirky and not always that convenient to work with. Next time round, I will try it all programmatically.

[Jan]

GUIDE does not save the shapes of the buttons, but the .fig files are actually .mat files with anotehr file extension. You can check the contents of the .fig file by using load and you will see, that it contains only the parameters of the uicontrols. Therefore it is easy to convert the .fig file created by GUIDE to an M-file, which creates exactly the same figure, see e.g. FEX: guidegetter