[MATLAB] GUI, 인터페이스 만들기

[매트랩] 유저 인터페이스 만들기

1. File -> New -> Function

---

2. 기본 figure를 띄우기

function gui( )

figure

end

 

gui.m이라는 파일로 저장을 하고, path에 해당 경로를 추가하고 매트랩에서 실행하면.

>> gui

그럼 아래와 같은 빈 창이 하나 나온다. 에디터에서 F5를 눌러도 바로 실행이 된다.

이 figure에 설정할 수 있는 것들은

name , menubar , numbertitle, color, units, position
이 있다. 예를 들면,

function gui( )

figure('name' , 'Example' , 'numbertitle' , 'off' , 'menubar' , 'figure')

end

---

3. uicontrol 로 개체 추가하기

uicontrol 함수는 각종 개체들을 추가하는 함수이다. uicontrol의 style 목록은 아래와 같다.

pushbutton, togglebutton, radiobutton, checkbox, edit, test, slider, frame, listbox, popupmenu


예) edit 개체를 추가하기

function gui()
 figure('name' , 'Example' , 'numbertitle' , 'off' , 'menubar' , 'figure', 'color' , [1 1 1]);
 uicontrol('style' , 'edit' , 'units' , 'normalized' , 'position' , [0.25 .25 .15 .05])
end

 

예) edit와 text 개체를 추가하기

function gui()
    figure('name' , 'Example' , 'numbertitle' , 'off' , 'menubar' , 'figure', 'color' , [1 1 1]);
    uicontrol('style' , 'edit' , 'units' , 'normalized' , 'position' , [0.25 .25 .15 .05])
    uicontrol('style' , 'text' , 'units' , 'normalized' , 'position' , [.25 .35 .15 .08], 'backgroundcolor' , [1 1 1] , 'string' , 'Enter Number')
end

 

---

4. 개체의 속성 다루기

get 함수는 해당하는 개체의 속성을 가져올 수 있다. 사용법은 아래와 같다.

get(handle, 'propertyName')

set 함수는 get과는 반대로 속성을 설정할 수 있는 함수이다.

set(handle, 'propertyName' , propertyValue)

예) 특정 개체의 속성을 가져와서 다른 개체의 속성을 설정하기

function gui()
    f = figure('name' , 'Example' , 'numbertitle' , 'off' , 'menubar' , 'figure', 'color' , [1 1 1]);
    edit = uicontrol('style' , 'edit' , 'units' , 'normalized' , 'position' , [0.25 .25 .15 .05])
    text = uicontrol('style' , 'text' , 'units' , 'normalized' , 'position' , [.25 .35 .15 .08], 'backgroundcolor' , [1 1 1] , 'string' , 'Enter Number')

%text개체의 string값을 가져와서 edit에다가 설정한다.
    str = get(text , 'string')
    set(edit , 'string' , str)
end

---

5. 버튼 이벤트 만들기

버튼 이벤트는 uicontrol 함수에 'callback' 속성을 설정함으로써 설정할 수 있다.

uicontrol('style' , 'pushbutton' , 'callback' , @callback)

function callback(varargin)
    %do something
end

예) 버튼 이벤트 추가하기

function gui()
    f = figure('name' , 'Example' , 'numbertitle' , 'off' , 'menubar' , 'figure', 'color' , [1 1 1]);
    edit = uicontrol('style' , 'edit' , 'units' , 'normalized' , 'position' , [0.25 .25 .15 .05])
    text = uicontrol('style' , 'text' , 'units' , 'normalized' , 'position' , [.25 .35 .15 .08], 'backgroundcolor' , [1 1 1] , 'string' , 'Enter Number')
    answer = uicontrol('style' , 'text' , 'units' , 'normalized' , 'position' , [.5 .4 .4 .2], 'backgroundcolor' , [1 1 1] , 'string' , 'Answer will go here' , 'fontsize' , 15)
    uicontrol('style' , 'pushbutton' , 'units' , 'normalized' , 'position' , [.25 .1 .15 .1] , 'string' , 'Push Me' , 'backgroundcolor' , [1 1 1], 'callback' , @go1)
   
    function go1(varargin)
        var=get(edit , 'string');
        x = str2num(var);
       
        y=x^2;
        out=num2str(y);
        set(answer , 'string' , out);
    end
end

---

6. 옵션 선택 개체 띄우기

• uicontrol 함수의 style 속성을 popupmenu로 설정하면 된다.

uicontrol('style' , 'popupmenu' ,...);

예) 옵션 선택 개체 추가하기

function gui()
    f = figure('name' , 'Example' , 'numbertitle' , 'off' , 'menubar' , 'figure', 'color' , [1 1 1]);
    edit = uicontrol('style' , 'edit' , 'units' , 'normalized' , 'position' , [0.25 .25 .15 .05])
    text = uicontrol('style' , 'text' , 'units' , 'normalized' , 'position' , [.25 .35 .15 .08], 'backgroundcolor' , [1 1 1] , 'string' , 'Enter Number')
    answer = uicontrol('style' , 'text' , 'units' , 'normalized' , 'position' , [.5 .4 .4 .2], 'backgroundcolor' , [1 1 1] , 'string' , 'Answer will go here' , 'fontsize' , 15)
   
    uicontrol('style' , 'pushbutton' , 'units' , 'normalized' , 'position' , [.25 .1 .15 .1] , 'string' , 'Push Me' , 'backgroundcolor' , [1 1 1], 'callback' , @go1)
   
    str = get(text , 'string')
    set(edit , 'string' , str)
   
    function go1(varargin)
        var=get(edit , 'string');
        x = str2num(var);
       
        y=x^2;
        out=num2str(y);
        set(answer , 'string' , out);
    end
    ppm = uicontrol('style' , 'popupmenu' , 'units' , 'normalized' , 'position' , [.3 .75 .2 .05] , 'string',{'Choose';'option 1';'option 2'});
end

• 옵션 선택 개체에서 선택된 값을 가져오기

value = get(popupmenu , 'value')

예) 값을 선택하면 선택한 값에 따라 다른 결과값 보여주기

function gui()
    f = figure('name' , 'Example' , 'numbertitle' , 'off' , 'menubar' , 'figure', 'color' , [1 1 1]);
    edit = uicontrol('style' , 'edit' , 'units' , 'normalized' , 'position' , [0.25 .25 .15 .05])
    text = uicontrol('style' , 'text' , 'units' , 'normalized' , 'position' , [.25 .35 .15 .08], 'backgroundcolor' , [1 1 1] , 'string' , 'Enter Number')
    answer = uicontrol('style' , 'text' , 'units' , 'normalized' , 'position' , [.5 .4 .4 .2], 'backgroundcolor' , [1 1 1] , 'string' , 'Answer will go here' , 'fontsize' , 15)
   
    uicontrol('style' , 'pushbutton' , 'units' , 'normalized' , 'position' , [.25 .1 .15 .1] , 'string' , 'Push Me' , 'backgroundcolor' , [1 1 1], 'callback' , @go1)
   
    str = get(text , 'string')
    set(edit , 'string' , str)
   
    function go1(varargin)
        var=get(edit , 'string');
        x = str2num(var);
       
        choice = get(ppm , 'value');
       
        if choice==2
            y=x^2
        elseif choice==3
            y=x^3
        end
       
        out=num2str(y);
        set(answer , 'string' , out);
       
    end
   
    ppm = uicontrol('style' , 'popupmenu' , 'units' , 'normalized' , 'position' , [.3 .75 .2 .05] , 'string',{'Choose';'Square';'Cube'});
end

• 옵션 개체에 다른 옵션을 선택할때 함수를 호출하려면 'callback' 속성을 설정하면 된다.

uicontrol('style' , 'popupmenu' , 'callback' , @callbackFunction);

---

7.  다른 종류의 개체들

• listbox

uicontrol('style' , 'listbox' , ...);

• slider

uicontrol('style' , 'slider' , ...);

예) 리스트와 슬라이더를 추가한 다음에 슬라이더의 값이 바뀌면 자동으로 edit 개체의 값을 바꿔서 결과값을 계산하기

function gui()
    f = figure('name' , 'Example' , 'numbertitle' , 'off' , 'menubar' , 'figure', 'color' , [1 1 1]);
    edit = uicontrol('style' , 'edit' , 'units' , 'normalized' , 'position' , [0.25 .25 .15 .05])
    text = uicontrol('style' , 'text' , 'units' , 'normalized' , 'position' , [.25 .35 .15 .08], 'backgroundcolor' , [1 1 1] , 'string' , 'Enter Number')
    answer = uicontrol('style' , 'text' , 'units' , 'normalized' , 'position' , [.5 .4 .4 .2], 'backgroundcolor' , [1 1 1] , 'string' , 'Answer will go here' , 'fontsize' , 15)
   
    uicontrol('style' , 'pushbutton' , 'units' , 'normalized' , 'position' , [.25 .1 .15 .1] , 'string' , 'Push Me' , 'backgroundcolor' , [1 1 1], 'callback' , @go1)
   
    str = get(text , 'string')
    set(edit , 'string' , str)
   
    function go1(varargin)
        var=get(edit , 'string');
        x = str2num(var);
       
        choice = get(hlb , 'value');
       
        if choice==2
            y=x^2
        elseif choice==3
            y=x^3
        end
       
        out=num2str(y);
        set(answer , 'string' , out);
       
    end
   
    ppm = uicontrol('style' , 'popupmenu' , 'units' , 'normalized' , 'position' , [.3 .75 .2 .05] , 'string',{'Choose';'Square';'Cube'} , 'callback' , @go1);
   
    hlb = uicontrol('style' , 'listbox' , 'units' , 'normalized' , 'position' , [.05 .15 .2 .55] , 'string' , {'Choose';'Square';'Cube'} , 'callback' , @go1);
    hsl = uicontrol('style' , 'slider' , 'units' , 'normalized' , 'position' , [.45 .25 .15 .08] , 'min' , 0 , 'max' , 10 , 'sliderstep' , [0.1 0.2] , 'callback' , @changeSlider);
   
    function changeSlider(varargin)
        x=get(hsl , 'value');
        set(edit , 'string' , num2str(x));
        go1
    end
end

• 예제에서 slider의 값이 바꿀때 changeSlider 함수를 callback 함수로 설정하고 이 함수 안에서 go1 함수를 호출해서 slider의 값을 바꾸기만해도 자동으로 go1까지 호출되는 것을 볼 수 있다.

• 체크박스 개체

uicontrol('style' , 'checkbox' , ...);

예) checkbox를 체크하면 답에 해당하는 글자색을 빨간색으로 바꾸기

function gui()
    f = figure('name' , 'Example' , 'numbertitle' , 'off' , 'menubar' , 'figure', 'color' , [1 1 1]);
    edit = uicontrol('style' , 'edit' , 'units' , 'normalized' , 'position' , [0.25 .25 .15 .05])
    text = uicontrol('style' , 'text' , 'units' , 'normalized' , 'position' , [.25 .35 .15 .08], 'backgroundcolor' , [1 1 1] , 'string' , 'Enter Number')
    answer = uicontrol('style' , 'text' , 'units' , 'normalized' , 'position' , [.5 .4 .4 .2], 'backgroundcolor' , [1 1 1] , 'string' , 'Answer will go here' , 'fontsize' , 15)
   
    uicontrol('style' , 'pushbutton' , 'units' , 'normalized' , 'position' , [.25 .1 .15 .1] , 'string' , 'Push Me' , 'backgroundcolor' , [1 1 1], 'callback' , @go1)
   
    str = get(text , 'string')
    set(edit , 'string' , str)
   
    function go1(varargin)
        var=get(edit , 'string');
        x = str2num(var);
       
        choice = get(hlb , 'value');
       
        if choice==2
            y=x^2
        elseif choice==3
            y=x^3
        end
       
        out=num2str(y);
        set(answer , 'string' , out);
       
    end
   
    ppm = uicontrol('style' , 'popupmenu' , 'units' , 'normalized' , 'position' , [.3 .75 .2 .05] , 'string',{'Choose';'Square';'Cube'} , 'callback' , @go1);
   
    hlb = uicontrol('style' , 'listbox' , 'units' , 'normalized' , 'position' , [.05 .15 .2 .55] , 'string' , {'Choose';'Square';'Cube'} , 'callback' , @go1);
    hsl = uicontrol('style' , 'slider' , 'units' , 'normalized' , 'position' , [.45 .25 .15 .08] , 'min' , 0 , 'max' , 10 , 'sliderstep' , [0.1 0.2] , 'callback' , @changeSlider);
   
    function changeSlider(varargin)
        x=get(hsl , 'value');
        set(edit , 'string' , num2str(x));
        go1
    end
   
    cb = uicontrol('style' , 'checkbox' , 'units' , 'normalized' , 'position' , [.6 .05 .3 .1] , 'string' , 'Colored answer' , 'backgroundcolor' , [1 1 1] , 'callback' , @chk);
    function chk(varargin)
        val=get(cb,'value');
        if val==1
            set(answer,'foregroundcolor' , [1,0,0]);
        else
            set(answer,'foregroundcolor' , [0,0,0]);
        end
    end
end

---

8. 라디오 버튼 개체

 

라디오 버튼 개체는 uibuttongroup을 먼저 생성하고 라디오 버튼 개체들을 생성한 uibuttongroup 에 같이 넣어줘야한다.

예) 라디오 버튼을 추가한다음에 선택에 따라 텍스트를 보여주고 감추기

function gui()
    f = figure('name' , 'Example' , 'numbertitle' , 'off' , 'menubar' , 'figure', 'color' , [1 1 1]);
    edit = uicontrol('style' , 'edit' , 'units' , 'normalized' , 'position' , [0.25 .25 .15 .05])
    text = uicontrol('style' , 'text' , 'units' , 'normalized' , 'position' , [.25 .35 .15 .08], 'backgroundcolor' , [1 1 1] , 'string' , 'Enter Number')
    answer = uicontrol('style' , 'text' , 'units' , 'normalized' , 'position' , [.5 .4 .4 .2], 'backgroundcolor' , [1 1 1] , 'string' , 'Answer will go here' , 'fontsize' , 15)
   
    uicontrol('style' , 'pushbutton' , 'units' , 'normalized' , 'position' , [.25 .1 .15 .1] , 'string' , 'Push Me' , 'backgroundcolor' , [1 1 1], 'callback' , @go1)
   
    str = get(text , 'string')
    set(edit , 'string' , str)
   
    function go1(varargin)
        var=get(edit , 'string');
        x = str2num(var);
       
        choice = get(hlb , 'value');
       
        if choice==2
            y=x^2
        elseif choice==3
            y=x^3
        end
       
        out=num2str(y);
        set(answer , 'string' , out);
       
    end
   
    ppm = uicontrol('style' , 'popupmenu' , 'units' , 'normalized' , 'position' , [.3 .75 .2 .05] , 'string',{'Choose';'Square';'Cube'} , 'callback' , @go1);
   
    hlb = uicontrol('style' , 'listbox' , 'units' , 'normalized' , 'position' , [.05 .15 .2 .55] , 'string' , {'Choose';'Square';'Cube'} , 'callback' , @go1);
    hsl = uicontrol('style' , 'slider' , 'units' , 'normalized' , 'position' , [.45 .25 .15 .08] , 'min' , 0 , 'max' , 10 , 'sliderstep' , [0.1 0.2] , 'callback' , @changeSlider);
   
    function changeSlider(varargin)
        x=get(hsl , 'value');
        set(edit , 'string' , num2str(x));
        go1
    end
   
    cb = uicontrol('style' , 'checkbox' , 'units' , 'normalized' , 'position' , [.6 .05 .3 .1] , 'string' , 'Colored answer' , 'backgroundcolor' , [1 1 1] , 'callback' , @chk);
    function chk(varargin)
        val=get(cb,'value');
        if val==1
            set(answer,'foregroundcolor' , [1,0,0]);
        else
            set(answer,'foregroundcolor' , [0,0,0]);
        end
    end
   
    hr=uibuttongroup('units' , 'normalized' , 'position' , [.55 .75 .45 .125] , 'SelectionChangeFcn', @grv, 'title' , 'Visibility');
    hb1=uicontrol('style' , 'radiobutton' , 'string' , 'On' , 'units' , 'normalized' , 'position' , [0 0 .5 1], 'parent', hr, 'backgroundcolor' , [.7 .8 .9] , 'foregroundcolor' , [0 0 0]);
    hb2=uicontrol('style' , 'radiobutton' , 'string' , 'Off' , 'units' , 'normalized' , 'position' , [0.5 0 .5 1], 'parent', hr, 'backgroundcolor' , [.5 .8 .4] , 'foregroundcolor' , [0 0 0]);
   
    set(hr,'selectedobject' , hb2);
   
    function grv(varargin)
        l=get(hr,'selectedobject');
        if l==hb1
            set(answer,'visible' , 'on')
        else
            set(answer , 'visible' , 'off')
        end
    end
end