Discover MakerZone

MATLAB and Simulink resources for Arduino, LEGO, and Raspberry Pi

Learn more

Discover what MATLAB® can do for your career.

Opportunities for recent engineering grads.

Apply Today

Thread Subject:
Front to back positioning in GUI

Subject: Front to back positioning in GUI

From: Sermed

Date: 16 Dec, 2009 16:23:06

Message: 1 of 13

Hi all
how can I design a multi-layer GUI (without using GUIDE) so I can bring a uicontrol or figure to the front or send it to the background?

thanx in advance
Sermed

Subject: Front to back positioning in GUI

From: Matt Fig

Date: 16 Dec, 2009 16:55:09

Message: 2 of 13

If I understand correctly, see the example GUI corresponding to question #31.

http://www.mathworks.com/matlabcentral/fileexchange/24861-35-complete-gui-examples

Subject: Front to back positioning in GUI

From: Sermed

Date: 16 Dec, 2009 17:22:20

Message: 3 of 13

Thanx Matt
I'm actually using your files to learn designing GUI by programming, as I experienced that GUIDE is unstable. Your files are really good.. .you have done a great job.

my question was how to bring objects to the front of my GUI?
Using GUIDE one can right-click on the object and choose "bring to front"

I had actually a second question if you can help me:
I want to load *jpg image to the background of my GUI, how can I decide its position?

thanx in advance
Sermed

Subject: Front to back positioning in GUI

From: Sermed

Date: 16 Dec, 2009 17:38:21

Message: 4 of 13

Hi again
I've just found out how to solve the first problem;
simply the object that is defined first remains at the background ;o)

Subject: Front to back positioning in GUI

From: Matt Fig

Date: 16 Dec, 2009 17:43:03

Message: 5 of 13

"Sermed " <sermadrid@hotmail.com> wrote in message <hgb50c$kkl$1@fred.mathworks.com>...
> Thanx Matt
> I'm actually using your files to learn designing GUI by programming, as I experienced that GUIDE is unstable. Your files are really good.. .you have done a great job.
>
> my question was how to bring objects to the front of my GUI?
> Using GUIDE one can right-click on the object and choose "bring to front"



I haven't used GUIDE in a while, but I assume all that "Bring to front" does is change the stacking order. For example, if you have three uicontrols whose positions overlap, the order in which they are created programmatically will determine which one is underneath. You can also change the order once the GUI is launched by accessing the children and rearranging the order of the handles to suit.



> I had actually a second question if you can help me:
> I want to load *jpg image to the background of my GUI, how can I decide its position?
>
> thanx in advance
> Sermed



I am actually going to do an update to the FEX submission which will have an example like this. Since you ask, here is the work in progress which will end up being an example GUI. This is not finished, so it is likely some things will change before it ends up on the FEX, but I think the general idea is there. I hope this answers your question!




function [] = image_back2()
% Put an image on a GUI
S.fh = figure('units','pixels',...
              'position',[400 400 480 300],...
              'menubar','none',...
              'resize','off',...
              'numbertitle','off');
S.ax = axes('units','pixels',...
            'position',[0 0 480 300],...
            'xtick',[],'ytick',[]);
X = load('clown');
S.IMG = ind2rgb(X.X,X.map);
S.IH = image(S.IMG);
S.BTP = {[10 10 60 48];[10 68 60 48];...
         [10 126 60 48];[10 184 60 48];...
         [10 242 60 48]};
S.BST = {'Restore';'Gray';'Red';'Green';'Blue'};

for ii = 1:5
    F = getframe(S.ax,S.BTP{ii});
    S.pb(ii) = uicontrol('style','push',...
                         'units','pix',...
                         'position',S.BTP{ii},...
                         'string',S.BST{ii},...
                         'fontsize',10,...
                         'fontweight','bold');
    set(S.pb(ii),'cdata',F.cdata,...
        'foregroundc',[1 1 1])
end

set(S.pb(1),'callback',{@pb1_call})
set(S.pb(2),'callback',{@pb2_call})
set(S.pb(3:5),'callback',{@pb345_call})

    function [] = pb1_call(varargin)
    % Callback for the Restore button.
        set(S.IH,'cdata',S.IMG)
        colorbal
    end

    function [] = pb2_call(varargin)
    % Callback for the Gray button.
        tmp = get(S.IH,'cdata');
        tmp(:,:,1) = tmp(:,:,2);
        tmp(:,:,3) = tmp(:,:,2);
        set(S.IH,'cdata',tmp)
        colorbal
    end

    function [] = pb345_call(varargin)
    % Callback for the Green button.
         switch get(gcbo,'string')
             case 'Red'
                 ind = 1;
             case 'Green'
                 ind = 2;
             case 'Blue'
                 ind = 3;
             otherwise
                 error('An unknown error occured in the callback.')
         end
         tmp = get(S.IH,'cdata');
         tmp(:,:,ind) = min(1,tmp(:,:,ind)*1.1);
         set(S.IH,'cdata',tmp)
         colorbal
    end

    function [] = colorbal()
        set(S.pb(:),'visible','off')
        for jj = 1:5
            F = getframe(S.ax,S.BTP{jj});
            set(S.pb(jj),'cdata',F.cdata)
        end
        set(S.pb(:),'visible','on')
    end
end

Subject: Front to back positioning in GUI

From: Sermed

Date: 16 Dec, 2009 19:04:25

Message: 6 of 13

Thanx a lot Matt


I have three small questions:
  1- How can protect the axes from changing its size when I load different images?
  2- How did you make the (red, green ...) push buttons have an invisible background?
  3- Where did you find all these smart properties, like 'screensize, foregroundc ect' :)

Thanx in advance
Sermed


"Matt Fig" <spamanon@yahoo.com> wrote in message <hgb677$9dv$1@fred.mathworks.com>...
> "Sermed " <sermadrid@hotmail.com> wrote in message <hgb50c$kkl$1@fred.mathworks.com>...
> > Thanx Matt
> > I'm actually using your files to learn designing GUI by programming, as I experienced that GUIDE is unstable. Your files are really good.. .you have done a great job.
> >
> > my question was how to bring objects to the front of my GUI?
> > Using GUIDE one can right-click on the object and choose "bring to front"
>
>
>
> I haven't used GUIDE in a while, but I assume all that "Bring to front" does is change the stacking order. For example, if you have three uicontrols whose positions overlap, the order in which they are created programmatically will determine which one is underneath. You can also change the order once the GUI is launched by accessing the children and rearranging the order of the handles to suit.
>
>
>
> > I had actually a second question if you can help me:
> > I want to load *jpg image to the background of my GUI, how can I decide its position?
> >
> > thanx in advance
> > Sermed
>
>
>
> I am actually going to do an update to the FEX submission which will have an example like this. Since you ask, here is the work in progress which will end up being an example GUI. This is not finished, so it is likely some things will change before it ends up on the FEX, but I think the general idea is there. I hope this answers your question!
>
>
>
>
> function [] = image_back2()
> % Put an image on a GUI
> S.fh = figure('units','pixels',...
> 'position',[400 400 480 300],...
> 'menubar','none',...
> 'resize','off',...
> 'numbertitle','off');
> S.ax = axes('units','pixels',...
> 'position',[0 0 480 300],...
> 'xtick',[],'ytick',[]);
> X = load('clown');
> S.IMG = ind2rgb(X.X,X.map);
> S.IH = image(S.IMG);
> S.BTP = {[10 10 60 48];[10 68 60 48];...
> [10 126 60 48];[10 184 60 48];...
> [10 242 60 48]};
> S.BST = {'Restore';'Gray';'Red';'Green';'Blue'};
>
> for ii = 1:5
> F = getframe(S.ax,S.BTP{ii});
> S.pb(ii) = uicontrol('style','push',...
> 'units','pix',...
> 'position',S.BTP{ii},...
> 'string',S.BST{ii},...
> 'fontsize',10,...
> 'fontweight','bold');
> set(S.pb(ii),'cdata',F.cdata,...
> 'foregroundc',[1 1 1])
> end
>
> set(S.pb(1),'callback',{@pb1_call})
> set(S.pb(2),'callback',{@pb2_call})
> set(S.pb(3:5),'callback',{@pb345_call})
>
> function [] = pb1_call(varargin)
> % Callback for the Restore button.
> set(S.IH,'cdata',S.IMG)
> colorbal
> end
>
> function [] = pb2_call(varargin)
> % Callback for the Gray button.
> tmp = get(S.IH,'cdata');
> tmp(:,:,1) = tmp(:,:,2);
> tmp(:,:,3) = tmp(:,:,2);
> set(S.IH,'cdata',tmp)
> colorbal
> end
>
> function [] = pb345_call(varargin)
> % Callback for the Green button.
> switch get(gcbo,'string')
> case 'Red'
> ind = 1;
> case 'Green'
> ind = 2;
> case 'Blue'
> ind = 3;
> otherwise
> error('An unknown error occured in the callback.')
> end
> tmp = get(S.IH,'cdata');
> tmp(:,:,ind) = min(1,tmp(:,:,ind)*1.1);
> set(S.IH,'cdata',tmp)
> colorbal
> end
>
> function [] = colorbal()
> set(S.pb(:),'visible','off')
> for jj = 1:5
> F = getframe(S.ax,S.BTP{jj});
> set(S.pb(jj),'cdata',F.cdata)
> end
> set(S.pb(:),'visible','on')
> end
> end

Subject: Front to back positioning in GUI

From: Matt Fig

Date: 16 Dec, 2009 19:59:06

Message: 7 of 13

"Sermed " <sermadrid@hotmail.com> wrote in message <hgbavo$ifd$1@fred.mathworks.com>...
> Thanx a lot Matt
>
>
> I have three small questions:
> 1- How can protect the axes from changing its size when I load different images?
> 2- How did you make the (red, green ...) push buttons have an invisible background?
> 3- Where did you find all these smart properties, like 'screensize, foregroundc ect' :)
>
> Thanx in advance
> Sermed


1. The axes shouldn't change size after a new image is put up, but if it does, just reset it's position property immediately after calling IMAGE.
2. I didn't make the buttons have an invisible background. I put a snapshot of the picture, taken on a rectangle coinciding with their positions, in the their cdata property. This technique only works with pushbuttons and togglebuttons.
3. docsearch('root properties')
docsearch('figure properties')

There might be a way to set the objects to transparent using JAVA, but I think I will leave that one to Yair Altman.

Calling Yair Altman!

Subject: Front to back positioning in GUI

From: Yair Altman

Date: 16 Dec, 2009 22:15:09

Message: 8 of 13

"Matt Fig" <spamanon@yahoo.com> wrote in message
[snip]
> There might be a way to set the objects to transparent using JAVA, but I think I will leave that one to Yair Altman.
>
> Calling Yair Altman!


Unfortunately, Matlab uicontrols are encased within heavyweight java.awt.Panel containers, which cannot be made transparent. I don't know why MathWorks chose to use heavyweight Panels instead of lightweight javax.swing.JPanels that would have enabled transparent controls and used less resources. I have suggested this improvement a year or two ago to the relevant people, but received no feedback. Maybe the reason is that when Java-based figures were first developed a decade ago, Swing was not yet available, and today nobody really wants to touch this code ("don't fix it if it ain't broke...").

A more technical description: http://java.sun.com/products/jfc/tsc/articles/mixing/index.html

BTW, this is also the reason uicontrols always appear on top of axes, regardless of their Java z-order or Matlab stack order. It is also the reason Matlab controls are all Java Peers instead of regular Swing components.

Yair Altman
http://UndocumentedMatlab.com
 

Subject: Front to back positioning in GUI

From: Yair Altman

Date: 16 Dec, 2009 22:47:05

Message: 9 of 13

"Yair Altman" <altmanyDEL@gmailDEL.comDEL> wrote in message <hgbm5d$rvm$1@fred.mathworks.com>...
> "Matt Fig" <spamanon@yahoo.com> wrote in message
> [snip]
> > There might be a way to set the objects to transparent using JAVA, but I think I will leave that one to Yair Altman.
> >
> > Calling Yair Altman!
>
>
> Unfortunately, Matlab uicontrols are encased within heavyweight java.awt.Panel containers, which cannot be made transparent. I don't know why MathWorks chose to use heavyweight Panels instead of lightweight javax.swing.JPanels that would have enabled transparent controls and used less resources. I have suggested this improvement a year or two ago to the relevant people, but received no feedback. Maybe the reason is that when Java-based figures were first developed a decade ago, Swing was not yet available, and today nobody really wants to touch this code ("don't fix it if it ain't broke...").
>
> A more technical description: http://java.sun.com/products/jfc/tsc/articles/mixing/index.html
>
> BTW, this is also the reason uicontrols always appear on top of axes, regardless of their Java z-order or Matlab stack order. It is also the reason Matlab controls are all Java Peers instead of regular Swing components.
>
> Yair Altman
> http://UndocumentedMatlab.com


Strike the sentence about uicontrols always appearing on top of axes because of the lightweight/heavyweight issue - it's not exactly correct: axes also use an opaque AxisCanvas and you can actually hide uicontrols beneath axes if you switch their parent containers' z-order. Sorry if this addendum doesn't clarify things - sometimes an attempt to simplify and be concise causes inadvertent inaccuracies.

Yair

Subject: Front to back positioning in GUI

From: Sermed

Date: 18 Dec, 2009 13:57:02

Message: 10 of 13

Thanx a lot guys


"Yair Altman" <altmanyDEL@gmailDEL.comDEL> wrote in message <hgbo19$q9i$1@fred.mathworks.com>...
> "Yair Altman" <altmanyDEL@gmailDEL.comDEL> wrote in message <hgbm5d$rvm$1@fred.mathworks.com>...
> > "Matt Fig" <spamanon@yahoo.com> wrote in message
> > [snip]
> > > There might be a way to set the objects to transparent using JAVA, but I think I will leave that one to Yair Altman.
> > >
> > > Calling Yair Altman!
> >
> >
> > Unfortunately, Matlab uicontrols are encased within heavyweight java.awt.Panel containers, which cannot be made transparent. I don't know why MathWorks chose to use heavyweight Panels instead of lightweight javax.swing.JPanels that would have enabled transparent controls and used less resources. I have suggested this improvement a year or two ago to the relevant people, but received no feedback. Maybe the reason is that when Java-based figures were first developed a decade ago, Swing was not yet available, and today nobody really wants to touch this code ("don't fix it if it ain't broke...").
> >
> > A more technical description: http://java.sun.com/products/jfc/tsc/articles/mixing/index.html
> >
> > BTW, this is also the reason uicontrols always appear on top of axes, regardless of their Java z-order or Matlab stack order. It is also the reason Matlab controls are all Java Peers instead of regular Swing components.
> >
> > Yair Altman
> > http://UndocumentedMatlab.com
>
>
> Strike the sentence about uicontrols always appearing on top of axes because of the lightweight/heavyweight issue - it's not exactly correct: axes also use an opaque AxisCanvas and you can actually hide uicontrols beneath axes if you switch their parent containers' z-order. Sorry if this addendum doesn't clarify things - sometimes an attempt to simplify and be concise causes inadvertent inaccuracies.
>
> Yair

Subject: Front to back positioning in GUI

From: Bill York

Date: 11 Jan, 2010 14:48:04

Message: 11 of 13

Hello Yair, and others, here's a bit of back-story on the heavyweight UIControls.

UIControls have only drawn in front of axes. This has been the way since before I started working here in the early 1990s.

When Java figures came out, we had the primary goal of "make it work like it works today" - so the UIControls kept their behavior of staying in front of the axes.

As Yair points out, we implemented the stacking using a heavyweight AWT panel as the container for the controls. Hosting controls this way allows for a few simplifications on our part.

1) this forces the uicontrols to always sit in front of the axes with no explicit Java side child management code
2) this allows the axes contents to draw independently of the uicontrols

The second benefit is the most important. As the drawing for axes is done on the MATLAB thread, we need to allow the axes to draw at random times independent of uicontrol drawing.

So, our architectural benefit has the up-side of us reusing existing drawing technology (see Yair's previous comment about if it aint broke, don't fix it) and at the same time imposes limits on how much you can customize the peer hierarchy.

Hope this helps explain the why.

Bill

Subject: Front to back positioning in GUI

From: Yair Altman

Date: 11 Jan, 2010 15:36:05

Message: 12 of 13

Thanks for the insight, Bill

- Yair

Subject: Front to back positioning in GUI

From: BenoƮt

Date: 9 Sep, 2011 23:11:26

Message: 13 of 13

I tried this technique on my GUI, but obviously I'm doing something wrong since my pushbutton is displayed in some verly light blue color...

here is the code I used:

    h.fig = figure('units','pixels',...
              'position',[450 250 500 500],...
              'menubar','none',...
              'name','GUI_1',...
              'numbertitle','off',...
              'resize','off');
          h.pb1 = uicontrol('style','pushbutton',...
                 'units','pix',...
                 'position',[45 450 180 40],...
                 'fontsize',14,...
                 'String','Load data',...
                 'callback',{@pb_load,h});

h.ax = axes('units','pixels',...
            'position',[0 0 500 500],...
            'xtick',[],'ytick',[]);
I=imread('background.png');
imagesc(I)
F = getframe(h.ax,[45 450 180 40]);
set(h.pb1,'cdata',F.cdata,...
        'foregroundc',[1 1 1])

Can anyone point out where I went wrong?

grtz


"Matt Fig" wrote in message <hgb677$9dv$1@fred.mathworks.com>...
> "Sermed " <sermadrid@hotmail.com> wrote in message <hgb50c$kkl$1@fred.mathworks.com>...
> > Thanx Matt
> > I'm actually using your files to learn designing GUI by programming, as I experienced that GUIDE is unstable. Your files are really good.. .you have done a great job.
> >
> > my question was how to bring objects to the front of my GUI?
> > Using GUIDE one can right-click on the object and choose "bring to front"
>
>
>
> I haven't used GUIDE in a while, but I assume all that "Bring to front" does is change the stacking order. For example, if you have three uicontrols whose positions overlap, the order in which they are created programmatically will determine which one is underneath. You can also change the order once the GUI is launched by accessing the children and rearranging the order of the handles to suit.
>
>
>
> > I had actually a second question if you can help me:
> > I want to load *jpg image to the background of my GUI, how can I decide its position?
> >
> > thanx in advance
> > Sermed
>
>
>
> I am actually going to do an update to the FEX submission which will have an example like this. Since you ask, here is the work in progress which will end up being an example GUI. This is not finished, so it is likely some things will change before it ends up on the FEX, but I think the general idea is there. I hope this answers your question!
>
>
>
>
> function [] = image_back2()
> % Put an image on a GUI
> S.fh = figure('units','pixels',...
> 'position',[400 400 480 300],...
> 'menubar','none',...
> 'resize','off',...
> 'numbertitle','off');
> S.ax = axes('units','pixels',...
> 'position',[0 0 480 300],...
> 'xtick',[],'ytick',[]);
> X = load('clown');
> S.IMG = ind2rgb(X.X,X.map);
> S.IH = image(S.IMG);
> S.BTP = {[10 10 60 48];[10 68 60 48];...
> [10 126 60 48];[10 184 60 48];...
> [10 242 60 48]};
> S.BST = {'Restore';'Gray';'Red';'Green';'Blue'};
>
> for ii = 1:5
> F = getframe(S.ax,S.BTP{ii});
> S.pb(ii) = uicontrol('style','push',...
> 'units','pix',...
> 'position',S.BTP{ii},...
> 'string',S.BST{ii},...
> 'fontsize',10,...
> 'fontweight','bold');
> set(S.pb(ii),'cdata',F.cdata,...
> 'foregroundc',[1 1 1])
> end
>
> set(S.pb(1),'callback',{@pb1_call})
> set(S.pb(2),'callback',{@pb2_call})
> set(S.pb(3:5),'callback',{@pb345_call})
>
> function [] = pb1_call(varargin)
> % Callback for the Restore button.
> set(S.IH,'cdata',S.IMG)
> colorbal
> end
>
> function [] = pb2_call(varargin)
> % Callback for the Gray button.
> tmp = get(S.IH,'cdata');
> tmp(:,:,1) = tmp(:,:,2);
> tmp(:,:,3) = tmp(:,:,2);
> set(S.IH,'cdata',tmp)
> colorbal
> end
>
> function [] = pb345_call(varargin)
> % Callback for the Green button.
> switch get(gcbo,'string')
> case 'Red'
> ind = 1;
> case 'Green'
> ind = 2;
> case 'Blue'
> ind = 3;
> otherwise
> error('An unknown error occured in the callback.')
> end
> tmp = get(S.IH,'cdata');
> tmp(:,:,ind) = min(1,tmp(:,:,ind)*1.1);
> set(S.IH,'cdata',tmp)
> colorbal
> end
>
> function [] = colorbal()
> set(S.pb(:),'visible','off')
> for jj = 1:5
> F = getframe(S.ax,S.BTP{jj});
> set(S.pb(jj),'cdata',F.cdata)
> end
> set(S.pb(:),'visible','on')
> end
> end

Tags for this Thread

What are tags?

A tag is like a keyword or category label associated with each thread. Tags make it easier for you to find threads of interest.

Anyone can tag a thread. Tags are public and visible to everyone.

Contact us