Background Color of UIAxes

I am trying to use the new html style ui graphics as it looks that Matlab will soon be moving away from the Java-based graphics. With the Java-based graphics, it is possible to stack multiple axes on top of each other -- all with transparent backgrounds so as to be able to see through all the curves plotted on all the axes. This is the standard way of displaying more than 2 curves with the same x-axis but different y-axes. The commands are quite simple:

hf = figure;
ha1 = axes(hf,'Position',[0.1 0.2 0.7 0.5]);
ha2 = axes(hf,'Position',[0.2 0.25 0.7 0.5]); % This axes position is offset from previous for illustration.
set(ha2,'Color','none')

The last command makes the back of axes ha2 transparent. Now a curve in ha1 (using a plot command) will be visible together with a curve in ha2.

I have tried to do the same with the new style ui graphics both using App Designer as well as programmatically and have thus been unsuccessful. Specifically, I've used the following commands:

uihf = uifigure;
uiha1 = uiaxes(uihf,'Position',[50 50 400 300]);
uiha2 = uiaxes(uihf,'Position',[100 100 400 300]);
set(uiha2,'Color','none')

Unlike with the Java-based graphics, the last command makes the plot area transparent; but the color seen is now that specified in the BackgroundColor property of the uiaxes defined as the "Color of margin around plot area". That property does not exist for the old style axes. Apparently, when the Color property of uiaxes is set to 'none' the BackgroundColor property color is assigned to the entire area of the uiaxes object. From within App Designer, clicking on the color pull down menu of the BackgroundColor shows "None" as one of the selections, indicating that this option should be selectable (unless it's there as a placeholder for future versions). However, clicking on it generates an error message: "Cannot set UIAxes BackgroundColor to 'none'". The same error occurs, if I were to type command

set(uiha2,'BackgroundColor','none')

I searched the KB and did a general google search on this topic and found close to nothing on this topic (for typical plot commands -- I am not interested in other types of graphs/images). So, is this a known limitation of the new style graphics, or is there another way to stack multiple axes on top of each and see through all of them?

Thanks for the help.

Answer 1

[Benjamin Kraus]

This behavior of uiaxes has changed in MATLAB R2020b.

If you check the release notes for R2020b:

BackgroundColor property of UIAxes has no effect

Behavior change

Setting the BackgroundColor property on a UIAxes object no longer has any effect. The area around the plot box is transparent regardless of the value of the BackgroundColor property.

To produce the same effect as setting the background color in previous releases, create a panel with the desired BackgroundColor value, and then place the UIAxes in the panel.

[J. Alex Lee]

This new behavior seems marginally more rational, but still doesn't address the original question about the white background in the axes itself and not the panel behind it.

To be blunt, it never made sense for the uiaxes "background" to refer to the thing behind the axes itself...is there some reason TMW no longer wants users to be able to set to color of the white background in a uiaxes?

[Benjamin Kraus]

I agree that there is some confusing things going on here, but you can set the color of the uiaxes.

• The only color limitation in R2020a (and before) was that uiaxes could not be transparent. This is why the author of the original question could not get two uiaxes to overlap, with the top uiaxes transparent. This limitation has been removed in R2020b.
• In R2020b, the margins around the uiaxes are always transparent, and if you set the Color to 'none' the uiaxes becomes fully transparent. This means that you can overlap uiaxes as requested in the original question.

Some of the confusion is that there are two property names (BackgroundColor and Color) that are inconsistently named across figures, panels, and axes. This is largely due to historical reasons.

• Figures have a Color property which controls the color of the body/background of the figure. This is the green in the pictures above.
• Panels have a BackgroundColor property which controls the color of the body/background of the panel. This is the red in the pictures above.
• Regular axes (not uiaxes) have a Color property which controls the color of what I call the "plot box". This is the part of the axes that is white by default, but yellow in the picture above. I think this is what you are calling the "white background".

In R2020a there were two properties on UIAxes:

• BackgroundColor: The color of the margins around the axes, the cyan in the picture from R2020a.
• Color: The color of the main body of the axes (the "plot box"). If you set Color to 'none' the plot box of the axes would become transparent and you would see the BackgroundColor instead. In the R2020a picture above, if you set Color to 'none' the yellow will be replaced with cyan.

In R2020b there is just one property:

• Color: The color of the plot box of the axes. If set you Color to 'none' the plot box of the axes will become transparent, and you will see the color of the parent container. In the R2020b picture above, if you set Color to 'none' the yellow will be replaced with red from the panel.

Looking at the original question, setting the Color property of the uiaxes to 'none' in R2020b will work like the author of the original question was expecting:

uihf = uifigure;
uiha1 = uiaxes(uihf,'Position',[50 50 400 300]);
uiha2 = uiaxes(uihf,'Position',[100 100 400 300]);
set(uiha2,'Color','none')

[Apostolos Rigopoulos]

When I read about the change to the Background property of the UIAxes in R2020b's Release Notes, I immediately downloaded the update and confirmed that this was indeed a solution to my original problem. So, thank you Mathworks for that.

I will say that as appdesigner is the new kid on the block, I had expected Mathworks to be pushing out a flurry of enhancements/improvements at each Matlab release. Instead, all I see in recent releases is a trickle of new features and/or small tweaks like this one. Given that uifigure does not support ActiveX controls, in some ways, we have less functionality now than we have had with the Java-based graphics. A simple example is the lack of a datetime control -- not date control, but datetime control. I have had to resort to using comboboxes for hours and minutes next to a date control. This doesn't sound right. And don't get me started with what events (or lack thereof) each control exposes to the programmer...

I am looking forward to Mathworks truly embracing html-based graphics and producing a full-featured suite of controls that allows for integration with third-party controls.

[J. Alex Lee]

Oh right, I forgot about the Color vs BackgroundColor...touche.

So the relevant update in 2020b is not the obsolecence of BackgroundColor, but finally the addition of the Color property! Great news!

Answer 2

[J. Alex Lee]

It is possible to create a regular "axes" within a "uifigure". Can you try that and see if you can accomplish what you need? This gives the advantage that it preserves ui interactions like buttondownfcn, where uiaxes still does not.

I read in some tmw community thing (can't remember what) that uiaxes was just a wrapper for an axes in a uipanel.

Answer 3

[Apostolos Rigopoulos]

Well, yes your suggestion works. What I don't know is whether the axes object is considered to be part of the new-style html-based graphics. If it is not, then that would indicate that at some future release the axes object will no longer be supported. And if axes is part of the "new" graphics, then why would anyone use uiaxes that appears to have less functionality than axes? True, adding an axes oject into a uifigure does not generate a warning in the Matlab command window -- unlike attempting to add activex controls using a javacomponent command, which fails with Matlab stating that adding components this way on a uifigure is not supported and that this command will be removed from a future release.

So, what does using a uifigure with axes in it make the application? "New" html-based style, "old" java-based, or some type of (possibly nasty) hybrid?

I've seen statements by Mathworks that it intends to remove GUIDE from a future Matlab release -- I suspect in 2020. Now, that doesn't mean that support for the "old" style graphics will go away any time soon, but it does mean that there will be stronger push to use the new non-Java based style graphics to build any new applications. What I find surprising (and as I found out I am only the last one in a long list of other users/contributors) is that the new set of graphics objects do not provide at least the same functionality as the old ones (you mentioned, for instance, the lack of events in the uiaxes object). I suspect that as new Matlab versions come out, there will be more features, but they are not here right now. So, transitioning to the new style graphics now, while keeping the existing functionality, may not be possible.

[J. Alex Lee]

Good question. For me, at the moment the important thing is that regular old "axes" appears to be supported in web-apps (2019b anyway), which suits my "functional" definition of "new html-based style". Thankfully I don't immediately have the need to write apps with long-term support, so i am happy to keep adapting how i accomplish axes in apps as TMW updates how they let us make GUIs.

[Benjamin Kraus]

There are no plans to remove the 'axes' object. You can safely use it in your "new html-based style" apps.

[J. Alex Lee]

Benjamin, thanks for clarifying that it is safe to use axes in the html-styled apps!

I haven't checked in 2020b, but as of 2019b, the appdesigner does complain when it seems plot-like commands with a first argument that isn't a uiaxes.

Answer 4

[Martin Dunda]

Ah thanks you started this topic, I investigated today how much efforit it would be changing to App Designer and I pretty fast came to this limitation which prevents me from moving my GUIs. I am on R2019b and just looked in the R2020 changelog but couldn't find anything. Has anyone tried if that prbolem still persists with R2020a?

[J. Alex Lee]

Martin,

As I indicated (maybe it wasn't clear), there appears to be no limitation in appdesigner that would disallow creating an axes() object (of class matlab.graphics.axis.Axes) in an appdesigner app (even if deployed as web app).

Some caveats:

• the appdesigner gui does not let you add an axes() object, so you have to create a container for it in the gui layout editor, and then "programmatically" create the axes (such as in a startupfcn).

• whenever you specify an axes() as the parent to a plot object, appdesigner does give you a warning that the parent should be a uiaxes. In practice (as of 2019b) this does not result in run-time warnings or errors. who knows, this could change.

[Martin Dunda]

Thanks for your help Alex. You were clear the first time (although i didn't get that axes object work in web apps aswell), I just had the same uncertain feeling that the axes() are maybe not allowed for much longer, who knows. I just hoped Mathworks allowed the 'none' Background Color property in the latest version.

[J. Alex Lee]

Yea, I'm also uneasy and a bit frustrated at TMW's tight control over seemingly benign or straightforward properties, but I don't pretend to know all the considerations!

Another work-around could be to expose the underlying matlab.graphics.axis.Axes object of the uiaxes

uax = uiaxes();
S = struct(uax);
ax = S.Axes % or S.Axes_I? they seem to be the same...
ax.Color = "none"

seems to work. I'm sure this is just as "forward incompatible" as the other option, but at least you get to keep your UIAxes and all its features/capabilities as well. I'm no expert, but it seems more likely to produce conflicts when you want to mix and match features/capabilities of both at the same time.

Answer 5

[junziyang]

It's not wise to abandon GUIDE when the new APP Desinger is still so immature. New components related to the uifigure have many different propertie names and different behavor, like the one menthioned in this post. It's VERY frastrating to use Figure in MATLAB and UIFigure in APP Desinger. The two sets of graphics ought to be unified in the future.