Thread Subject:

Front to back positioning in GUI

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

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

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

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

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)

"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

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

"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!

"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
 

"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

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

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

Thanks for the insight, Bill

- Yair

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