Transparent uipanels
Posted By Yair Altman On April 9, 2014 | 17 Comments
A well-known Matlab limitation is that component position vectors must be specified as either ‘normalized’ or some fixed-sized value, but not in combination. For example, we cannot place a button in the center of the screen (normalized x/y=0.5) with a fixed sized width/height. Either all position elements are normalized, or all are fixed. Most Matlab GUIs that I’ve seen keep the normalized units, with the result that buttons look bloated or shrunken when the figure is resized:
hButton = uicontrol('Units','norm', 'Position',[0.5,0.5,0.15,0.15], 'String','click me!');
A common way to address this latter limitation is to use a borderless containing uipanel at the requested normalized position, and place a fixed-sized component as a child of that panel:
bgColor = get(gcf,'Color');
hPanel = uipanel('Units','norm', 'Position',[0.5, 0.5, 0.45, 0.45], 'BorderType','none', 'BackgroundColor',bgColor);
hButton = uicontrol('Parent',hPanel, 'Units','pixels', 'Position',[0,0,60,20], 'String','click me!');
This works well in simple figures, where there is nothing beneath the panel/control. Resizing the figure will keep the button centered, while preserving its 60×20 size. But what happens if we have an axes beneath? In this case we encounter another Matlab limitation, that a top-most control always occludes (hides) an overlapped component. This is due to the fact that Matlab GUI uses heavyweight controls and containers, which do not allow transparency. For this reason, we cannot show a plot chart as the background of a table or listbox, for example. The result is that our panel will occlude the axes for a horrible-looking effect:
t = 1:.01:100;
plot(t, cos(t), 'r');
bgColor = get(gcf,'Color');
hPanel = uipanel('Units','norm', 'Position',[0.5, 0.5, 0.45, 0.45], 'BorderType','none', 'BackgroundColor',bgColor);
hButton = uicontrol('Parent',hPanel, 'Units','pixels', 'Position',[0,0,60,20], 'String','click me!');
Which is where today’s undocumented feature comes in handy: simply set the uipanel’s BackgroundColor to ‘none’ and the panel will become transparent:
set(hPanel,'BackgroundColor','none')
The reason that uipanel does not obey the occlusion limitation is simply because it is not really a control at all: Most Matlab GUI controls are simple wrappers for the standard Java Swing component (buttons for
JButton, listboxes for JListbox etc.). However, uipanel is not a wrapper for JPanel, as we might have expected, but rather implemented as as internal Matlab component that groups HG objects for onscreen display, and possibly paints the border (a uipanel‘s title is a simple text control once again) as a simple rectangle. This is the reason why Matlab’s borders look so different than JPanel‘s. This enabled Matlab to include the back-door of the ‘none’ BackgroundColor, which works for panels but not for any other GUI control.While BackgroundColor is a well-documented property [1], the ability to specify a colorspec [2] of ‘none’ is not documented.
Note that setting the BackgroundColor to ‘none’ issues the following warning that you can ignore at your own risk:
Warning: "Setting the ColorSpec to 'none' for a uicontainer will not be allowed in a future release."
To ignore (and stop issuing) such warnings, simply issue the following Matlab command:
warning off MATLAB:hg:ColorSpec_None
warning('off', 'MATLAB:hg:ColorSpec_None'); % equivalent alternative
p.s. – using a transparent panel in this manner is not necessary in certain cases (e.g., when the axes is added after the control, not before it as above). However, relying on such side-effects is not advised at all, for obvious reasons.
I look forward to the day when Matlab controls will be able to become truly transparent, and when the position and size units could be specified separately, so that use of such back-door kludges will not be necessary. After all, designing a GUI is supposed to resemble an art, not brain surgery…
Addendum for HG2 (R2014b onward)
In HG2, the panel’s BackgroundColor can no longer be set to 'none'. Luckily, in HG2 we have a direct reference to the underlying Java JPanel component, as I explained here [3]. We can use this reference by setting it, as well as its direct parent and child components, to be non-opaque, as follows:
jPanel = hPanel.JavaFrame.getPrintableComponent; % hPanel is the Matlab handle to the uipanel
jPanel.setOpaque(false)
jPanel.getParent.setOpaque(false)
jPanel.getComponent(0).setOpaque(false)
jPanel.repaint
Categories: GUI, Handle graphics, Medium risk of breaking in future versions, Undocumented feature
17 Comments (Open | Close)
Article printed from Undocumented Matlab: https://undocumentedmatlab.com
URL to article: https://undocumentedmatlab.com/articles/transparent-uipanels
URLs in this post:
[1] well-documented property: http://www.mathworks.com/help/matlab/ref/uipanelproperties.html#bqxrv6x
[2] colorspec: http://www.mathworks.com/help/matlab/ref/colorspec.html
[3] as I explained here: http://undocumentedmatlab.com/blog/customizing-matlab-uipanels
[4] Panel-level uicontrols : https://undocumentedmatlab.com/articles/panel-level-uicontrols
[5] Transparent legend : https://undocumentedmatlab.com/articles/transparent-legend
[6] Customizing Matlab uipanels : https://undocumentedmatlab.com/articles/customizing-matlab-uipanels
[7] Persisting transparent colors in HG2 : https://undocumentedmatlab.com/articles/persisting-transparent-colors-in-hg2
[8] Transparent labels : https://undocumentedmatlab.com/articles/transparent-labels
[9] Transparent Matlab figure window : https://undocumentedmatlab.com/articles/transparent-matlab-figure-window
[10] : https://undocumentedmatlab.com/blog/transparent-uipanels#comment-328781
Click here to print.
17 Comments To "Transparent uipanels"
#1 Comment By Dani On April 11, 2014 @ 00:24
I also look forward to the day when Matlab will provide 2D graphics that one can proudly show to somebody else, 3D graphics that that at least go in the same direction as what we have with the free ParaView, and indeed a GUI toolset that is both fast and functional. Every time a new release comes out I check if they made any progress. Nothing ever happens. Maybe a new ribbon design here and there. It looks like some time in the past they developed something that was marginally better than gnuplot and ever since they have been happy with that achievement. In the meantime we are well into the third millennium and every web browser can, with the help of javascript libraries, make plots that look like they were made today and not in the dark ages.
I am sorry about this nonconstructive rant, but I am frustrated that we have to make such efforts to circumvent the inadequate limitations of Matlab. At least with Yair’s help it is a bit easier.
#2 Comment By Ralf Hielscher On April 19, 2014 @ 13:16
Hi Yair,
maybe you could explain at this point how Mathworks achieves the positioning of the colorbar, which is of fixed width and relative position as well.
Thanks,
Ralf.
#3 Comment By Patrick Hogan On July 29, 2014 @ 17:00
Another solution for the example given above is to set the uipanel location outside the figure. For example, to anchor the uicontrol to the center-top of the figure, use:
hPanel = uipanel('Units','norm', 'Position',[0.5, 1, 0.01, 0.01]); hButton = uicontrol('Parent',hPanel, 'Units','pixels', 'Position',[-30,-20,60,20], 'String','click me!');It can cause some odd (but manageable) stacking effects, but it works well for keeping a title or header line centered and top — and you don’t have to worry about it going away in a future version or about a transparent uipanel preventing user interaction with a plot/uicontrol.
#4 Comment By Yair Altman On July 29, 2014 @ 19:48
@Patrick – nice idea, I like it.
#5 Comment By Ortmann On February 24, 2015 @ 05:53
It seems, that the ‘none’ option also works for the TextBoxHandle-BackgroundColor of a DataCursor.
#6 Comment By Chris On April 29, 2015 @ 12:35
The solution
does not work in MATLAB versions 2014b and 2015a.
Is there an another solution for the above-mentioned releases?
Thanks a lot,
Chris
#7 Comment By Yair Altman On April 29, 2015 @ 14:32
@Chris – perhaps [10] above can help you in HG2 (R2014b+).
#8 Comment By Chris On April 29, 2015 @ 17:02
@ Yair Altman:
Thank you for the hint. I think that I can’t use Patrick’s solution for my gui problem.
I need a specific position of the panel (with some buttons) on the plot,
because if the mouse cursor of the user is on the panel area then the panel is shown.
#9 Comment By Chris On April 30, 2015 @ 09:04
I now have a solution for my specific problem:
I use for the axes and the buttons a parent panel and create the buttons after the creation of the axes.
If the mouse cursor is in a specific defined area, then the buttons’ visibility property is on, else off.
It seems to work for my problem.
Thanks a lot, nice website!
Best regards,
Chris
#10 Comment By Bruce On October 16, 2015 @ 10:07
It seems in 15b things got really difficult. I would like to very simply place a rectangular outline on the figure telling the user to ‘look here’, regardless of what is under the box.
This would be easy if panels could be transparent – but they can’t anymore.
Additionally Patrick’s solution doesn’t work any more because panels ALWAYS clip their contents so that I cannot hide the panel outside the figure and then offset a rectangle to be in the figure. I have wanted panels to clip their controls for ages and now they overdo it. Careful what you wish for…
Any ideas how to simply overlay a rectangle on a figure regardless of what is underneath it?
#11 Comment By Martin Kabelka On June 26, 2017 @ 12:32
Hi Yair
Have you had any thoughts how to add a transparent uipanel to the GUI in recent Matlab versions (post 15a)? I’m using GUILayout toolbox and so all my uicontrols and text labels are positioned on uipanels and I’d like to add a background image to the whole GUI.
Thanks to your other posts I can make various uicontrols and text labels transparent but the same trick doesn’t work with uipanels, so as soon as the uncontrol/label is positioned within a panel the transparency doesn’t work.
Any ideas?
#12 Comment By Yair Altman On June 27, 2017 @ 19:22
@Martin – I am not aware of a solution to make uipanels transparent in 15b onward
#13 Comment By Yair Altman On January 10, 2018 @ 22:26
I just added an addendum to the main post that explains how to set the uipanel’s background to transparent in HG2 (R2014b onward)
#14 Comment By Tom Benson On December 26, 2018 @ 10:54
Hi Yair
Thanks for all your great workarounds.
I tried your last suggestion and indeed the uipanel becomes invisible. However, if the panel has any children then this does not appear to work. Is this something you have observed? I have basically been stuck on R2014a for years now because I can’t find a solution.
My application uses uipanels as GIS layers so they need to be transparent. Of course I could try recoding to just use axes, but the panels allows simpler resizing and moving of the layers and the code is large so would require a lot of work.
#15 Comment By Maurizio Giardina On March 3, 2020 @ 10:14
Hi Yair,
make transparent panel background is what I need for my application, but I have a problem:the panels I use have also a title, and the background of the title is not transparent. The effect is not so good, but I don’t know how can I do.
Any suggestions?
Is it possible apply a setOpaque method also to the title?
Thank
#16 Comment By Yair Altman On March 3, 2020 @ 11:29
@Maurizio – instead of using the integrated Panel title, you can use a separate label control (
uicontrol('Style','text',...)or aJLabel). Alternatively, you can customize the uipanel’s title.* [6]
* [4]
#17 Comment By Matthias Brenneis On September 18, 2020 @ 19:10
Hi,
thank you so much for the inspiring work and comments!
My issue is: As soon as the panel gets an axes, the panel is no longer transparent:
f = figure('Units','pixels','Position',[0 0 1000 800]); p1 = uipanel(f,'Units','pixels','Position',[0 0 500 500] , 'BorderType','none'); a = axes(p1,'Units','pixels','Position',[0 0 400 200]); p2 = uipanel(f,'Units','pixels','Position',[200 0 500 500 ] , 'BorderType','none'); drawnow; j = p2.JavaFrame; jPanel = j.getPrintableComponent; jPanel.setOpaque(false) jPanel.getParent.setOpaque(false) jPanel.getComponent(0).setOpaque(false) jPanel.repaint pause( 2 ) % till now panel2 is transparent and axes1 is fully visible... a2 = axes(p2,'Units','pixels','Position',[0 200 400 200]); % This line breaks panel 2 transparency somehow...It would be so helpful to have invisible Panels with axes! Especially because of the fact, that axes can not overlay “foreign” panels…
Does anybody have a clue?