GUI development with Matlab by EzfADt

VIEWS: 144 PAGES: 67

									GUI development with Matlab: GUI Front Panel Components




             GUI front panel components
       In this section, we will look at
       - GUI front panel components
       - Programming the components




                                                          1
GUI development with Matlab: GUI Front Panel Components



             Classes of GUI components
       1.      Analog input
       2.      Discrete input
       3.      Display output
       4.      Groups




                                                          2
GUI development with Matlab: GUI Front Panel Components



                                       Analog input
       An analog input component receives user-
          defined choices that are analog

       The GUI components in this class are
       - Edit text
       - Slider



                                                          3
GUI development with Matlab: GUI Front Panel Components



                                     Discrete input
       A discrete input component receives user-
          defined choices that are discrete (clear
          cut choices)




                                                          4
GUI development with Matlab: GUI Front Panel Components



                                     Discrete input
       Discrete input components
       - Radio button
       - Checkbox
       - Popup menu
       - Listbox
       - Push button
       - Toggle button

                                                          5
GUI development with Matlab: GUI Front Panel Components



                                    Display output
       A display output component is used to
          show the result of the GUI
          calculation/processing

       The GUI components in this class are
       - Axes
       - Static text
       They have no Callbacks
                                                          6
GUI development with Matlab: GUI Front Panel Components



                                                Groups
       A groups component is used to put several
          components together as ‘one package’

       GUI components in this class
       - Panel
       - Button group



                                                          7
GUI development with Matlab: GUI Front Panel Components



                                          Example 1
       Create a GUI that says ‘Hello’ when you
          press a Push button.




                                                          8
GUI development with Matlab: GUI Front Panel Components



                          Example 1 (solution)
       -       Start GUIDE
       -       Drag and drop a Push Button to
               the front panel




                                                          9
GUI development with Matlab: GUI Front Panel Components



                          Example 1 (solution)




                                                          10
GUI development with Matlab: GUI Front Panel Components



                          Example 1 (solution)
       -       Double click on the Push Button to
               change its properties (String and
               Tag)




                                                          11
GUI development with Matlab: GUI Front Panel Components



                          Example 1 (solution)
                                                          The ‘String’ field is what will be
                                                          seen by the GUI user.
                                                          You can change it to e.g.
                                                          ‘Say Hello’




                                                            The ‘Tag’ is the name that
                                                            Matlab recognizes for this
                                                            component.
                                                            It is recommended that you
                                                            change it to e.g.
                                                            ‘PB_hello’



                                                                                               12
GUI development with Matlab: GUI Front Panel Components



                          Example 1 (solution)
       -       You’ve finished designing the front
               panel.
       -       Now program the Callback (in an
               mfile).




                                                          13
GUI development with Matlab: GUI Front Panel Components



                          Example 1 (solution)




                                                          Press this to open the
                                                          ‘mfile editor’ and program
                                                          the Callback.

                                                          PS – be prepared to give it
                                                          a filename to save



                                                                                        14
GUI development with Matlab: GUI Front Panel Components



                          Example 1 (solution)
       -       Now look for a function
               ‘PB_hello_Callback’.
               The mfile automatically creates a function using
               the name that you gave the component (PB_hello)
               and adds ‘Callback’ behind it.
       -       Under the function, write the
               commands that you want it to
               execute.
                                                                  15
GUI development with Matlab: GUI Front Panel Components



                          Example 1 (solution)




                                                   This is the command
                                                   that you have typed


                                                                         16
GUI development with Matlab: GUI Front Panel Components



                          Example 1 (solution)
       -       Now you’re ready to go!
       -       Execute the GUI




                                                          Press to execute




                                                                             17
GUI development with Matlab: GUI Front Panel Components



                          Example 1 (solution)
       -       It will appear as a Figure.




                                                          18
GUI development with Matlab: GUI Front Panel Components



                          Example 1 (solution)
       -       The result




                                                          Displays ‘Hello’ as
                                                          commanded



                                                                                19
GUI development with Matlab: GUI Front Panel Components



                          Example 1 (solution)
       -       The result




                                                          Displays ‘Hello’ as
                                                          commanded



                                                                                20
GUI development with Matlab: GUI Front Panel Components



                       You have just seen …
       -       How to design the front panel
       -       The use of a Tag and String
       -       How to program a Callback
       -       The process of creating and executing
               a simple GUI

       Now we’ll look at the how to program each
         GUI component, and the syntax
                                                          21
GUI development with Matlab: GUI Front Panel Components



                                             Edit Text


       A component that allows the user to enter
          text – string or number.




                                                          22
GUI development with Matlab: GUI Front Panel Components



                           Edit Text (Callback)
                                          A variable. You can
                                          call it anything.


                                                                Retrieves the ‘string’
       >>K=get(hObject,'string');                               entered by user. This is a
                                                                standard command.



       If you entered ‘abc’ into the Edit Text, then the
            command above will make K = ‘abc’




                                                                                             23
GUI development with Matlab: GUI Front Panel Components



                           Edit Text (Callback)

       At this point, K is a string. If the user enters a number,
            it will still be a string. To change it to a number,

       >>K_num=str2double(K);


                                               Another variable that
                                               you can call anything.




                                                                        24
GUI development with Matlab: GUI Front Panel Components



                           Edit Text (Callback)
       To pass the variable K for processing (to another
           Callback), type
                                                          Another variable. But must be in
                                                          the format ‘handles.anyname’

       >>handles.K=K;
       >>guidata(hObject,handles);

                                                          Standard command line used to
                                                          ‘save’ all handles information.




                                                                                             25
GUI development with Matlab: GUI Front Panel Components



                                                  Slider


       A component that allows the user to select
          a value from the slider, between the
          pre-specified minimum and maximum.




                                                           26
GUI development with Matlab: GUI Front Panel Components



                                                  Slider


                                                           The maximum and
                                                           minimum values of the
                                                           slider can be set in the
                                                           Property Inspector.




                                                                                      27
GUI development with Matlab: GUI Front Panel Components



                                Slider (Callback)

                                                             This is a standard command.
       >>K=get(hObject,'value');                             A slider will always return a
                                                             numerical value, that’s why
                                                             the label ‘value’.
       >>handles.K=K;
       >>guidata(hObject,handles);


                                                          Reminder: These
                                                          commands are used if you
                                                          want the value of ‘K’ to be
                                                          passed to other Callbacks
                                                          for further processing.

                                                                                         28
GUI development with Matlab: GUI Front Panel Components



                                       Radio button


       A radio button acts as an option to be
          chosen by the user. The user clicks on
          the button the make the choice.




                                                          29
GUI development with Matlab: GUI Front Panel Components



                    Radio button (Callback)

                                                          ‘value’ will be equal to 1 if the
       >>K=get(hObject,'value');                          user selects the radio button.
                                                          Otherwise it will be 0.




                                                                                          30
GUI development with Matlab: GUI Front Panel Components



                                           Checkbox


       Identical to the Radiobutton, except in a
          different form.




                                                          31
GUI development with Matlab: GUI Front Panel Components



                         Checkbox (Callback)

                                                          ‘value’ will be equal to 1 if the
       >>K=get(hObject,'value');                          user selects the checkbox.
                                                          Otherwise it will be 0.




                                                                                          32
GUI development with Matlab: GUI Front Panel Components



                                     Pop-up menu


       A pop-up menu, when clicked, displays a
          list of options for the user to choose
          from.




                                                          33
GUI development with Matlab: GUI Front Panel Components



                                     Pop-up menu
       To generate the list of options for the user
                                                              1. Press this button
                                                              in the ‘String’ field




                                                    2. And this window
                                                    will appear




                                                                                      34
GUI development with Matlab: GUI Front Panel Components



                                     Pop-up menu
       To generate the list of options (cont.)


          3. Type in the options,
          each separated by
          ‘Enter’




                                                          35
GUI development with Matlab: GUI Front Panel Components



                   Pop-up menu (Callback)

                                                          ‘value’ will indicate the index
       >>K=get(hObject,'value');                          of the choice made.
                                                          Example: If the 2nd choice is
                                                          made, then ‘value’=2.




                                                                                            36
GUI development with Matlab: GUI Front Panel Components



                                                Listbox




       Identical to the Pop-up menu, except that
          the options are already visible without
          being clicked on. (To see options in
          Pop-up menu, need to click on it first).

                                                          37
GUI development with Matlab: GUI Front Panel Components



                                         Pushbutton


       A push-button is one that will execute a
          series of commands when pushed.

       No specific Callback commands. Just type
          in the commands you want to execute.

                                                          38
GUI development with Matlab: GUI Front Panel Components



                                     Toggle button


       Gives a state when pressed.




                                                          39
GUI development with Matlab: GUI Front Panel Components



                   Toggle button (Callback)

                                                          ‘value’ will be equal to 1 if the
       >>K=get(hObject,'value');                          toggle button is pressed.
                                                          Otherwise it will be 0.




                                                                                          40
GUI development with Matlab: GUI Front Panel Components



                                           Static text

       Allows you to type text on your GUI.

       Also allows you to output text depending
          on the user’s actions.




                                                          41
GUI development with Matlab: GUI Front Panel Components



                                           Static text

       No Callback generated for Static Text.

       To output ‘user-dependent’ text, type
                                                                                  Text to
                                                                                  output
       >>set(handles.StaticText,'string',‘Your text’);
                    Standard                                  Standard
                    command                                   command

                                                    The Tag of the Static Text (you
                                                    assigned). Format is handles.Tag
                                                                                            42
GUI development with Matlab: GUI Front Panel Components



                                                   Axes



        Allows the user to plot graphs




                                                          43
GUI development with Matlab: GUI Front Panel Components



                                                   Axes

       No Callback generated for Axes.

       To plot a graph, type
                       Standard                           The Tag of the axes (you assigned).
                       command                            Format is handles.Tag

       >>axes(handles.axes1);

       You have now referred to a specific graph. Now type
           whatever plotting commands you wish to.
                                                                                            44
GUI development with Matlab: GUI Front Panel Components



                        Extra: Retrieving data

       You can also retrieve data from
         another component without that
         Callback sending out the data (see
         example on Edit Text and Slider)

       e.g. – you want to retrieve the data
          (choice) from a Listbox
                                                          45
GUI development with Matlab: GUI Front Panel Components



                        Extra: Retrieving data

       In the Listbox Callback
       >>K=get(hObject,'value');                          To send
                                                          data out
       >>K=handles.K;
       >>guidata(hObject,handles);


       Then in the Pushbutton Callback
       >>K=handles.K;                                       Retrieve
                                                            data
       >>guidata(hObject,handles);
                                                                       46
GUI development with Matlab: GUI Front Panel Components



                        Extra: Retrieving data

       You don’t have to do that!
       There is an alternative!

       In the Pushbutton Callback
       >> get(handles.tag, ‘value’);


                                                          The value returned by
              The tag of                                  the Listbox
              the Listbox
                                                                                  47
GUI development with Matlab: GUI Front Panel Components



                        Extra: Retrieving data

       If the component is not activated, the
           default returned value will be 1




                                                          48
GUI development with Matlab: GUI Front Panel Components



                                          Example 2
       Create a GUI that plots the function
          entered by the user when the user
          pushes a Push Button
       - The user can enter the upper and lower
          bounds of the x-axis, and the
          resolution.
       - A pop-up menu enables the user to
          choose the graph colour – blue
          (default), red, green or yellow.
                                                          49
GUI development with Matlab: GUI Front Panel Components



                          Example 2 (solution)




                                                          50
GUI development with Matlab: GUI Front Panel Components



                          Example 2 (solution)

       Now let’s look at how to program the
         Callbacks

       It can all be done within the Push Button
           Callback




                                                          51
GUI development with Matlab: GUI Front Panel Components



                          Example 2 (solution)
       >>lowbound=get(handles.Edtxt_lowbound,'string');

                                        Retrieve data              Tag of the Edit Text box
                                                                   which enters the lower
                                                                   bound of the x-axis



       >>lowbound_no=str2double(lowbound);

                                                      Converts the string to a
                                                      numeric value



                                                                                              52
GUI development with Matlab: GUI Front Panel Components



                          Example 2 (solution)

       Do the same for the
       - Upper bound
       - Interval
       - Function entered by the user (but no
          need to convert to number)



                                                          53
GUI development with Matlab: GUI Front Panel Components



                          Example 2 (solution)
       >>for i=1:((upbound_no-lowbound_no)/interval_no)+1;
       >> u(i)=lowbound_no+interval_no*(i-1);
       >> x=u(i);
       >> y(i)=eval(graph_func);
       >>end
                                                          Data retrieved by the
                                                          graph function
       >>hline=plot(u,y);

                                     Giving the plotted line a name,
                                     to set properties later
                                                                                  54
GUI development with Matlab: GUI Front Panel Components



                          Example 2 (solution)
       >>1+1                                         This will give a number 2



       >>‘1+1’
                                                    This will still give a string ‘1+1’


       >> eval(‘1+1’)                                 This will give a number 2


       >> x=3; eval(‘x+4’)                                     This will give a number 7s




                                                                                            55
GUI development with Matlab: GUI Front Panel Components



                          Example 2 (solution)
       >>linecolour=get(handles.Popup_colour,'value');
       >>linestyle=get(handles.Listbox_style,'value');



                                                          Retrieve data on what user
                                                          specified with regard to line
                                                          colour and style




                                                                                          56
GUI development with Matlab: GUI Front Panel Components



                          Example 2 (solution)
                                                          This is why we gave the line
       >>switch linecolour                                a name earlier

       >> case 1
       >>     set(hline,'color','b');
       >> case 2
       >>     set(hline,'color','r');                         A property field (standard
                                                              command) of the line
       >> case 3
       >>     set(hline,'color','y');
       >>end



                                                                                           57
GUI development with Matlab: GUI Front Panel Components



                          Example 2 (solution)
       >>switch linestyle
       >> case 1
       >>     set(hline,'linestyle','-');
       >> case 2
       >>     set(hline,'linestyle',':');
       >> case 3
       >>     set(hline,'linestyle','--');
       >>end



                                                          58
GUI development with Matlab: GUI Front Panel Components



                          Example 2 (solution)
       >>grid_on=get(handles.Radio_grid,'value');
       >>if grid_on==1
       >> grid on;
                                    If the Radio button is clicked,
       >>else                       it will return a value of 1
       >> grid off;
       >>end




                                                                      59
GUI development with Matlab: GUI Front Panel Components



                          Example 2 (solution)
       Now, test the GUI
       - Enter the function in terms of ‘x’
       - Enter the lower bound, upper bound,
         and interval
       - Press the Plot It button
       - Make other modifications in terms of
         line colour, style and grid


                                                          60
GUI development with Matlab: GUI Front Panel Components



                                          Example 3
       Create a GUI with the following features
       - Calculates the volume of a cuboid
          when the user enters the height, width
          and depth
       - Outputs the result in a Static Text box




                                                          61
GUI development with Matlab: GUI Front Panel Components



                          Example 3 (solution)

                                                           Tag – Edtxt_height


                                                            Tag – Edtxt_width

                                                           Tag – Edtxt_depth


                                                          Tag – Pb_calculate



                                                          Tag – Sttxt_result



                                                                                62
GUI development with Matlab: GUI Front Panel Components



                          Example 3 (solution)
       In the Edtxt_height Callback
       >>height=get(hObject,'String');
       >>height_num=str2double(height);
       >>handles.height_num=height_num;
       >>guidata(hObject, handles);




                                                          63
GUI development with Matlab: GUI Front Panel Components



                          Example 3 (solution)
       In the Edtxt_width Callback
       >>width=get(hObject,'String');
       >>width_num=str2double(width);
       >>handles.width_num=width_num;
       >>guidata(hObject, handles);




                                                          64
GUI development with Matlab: GUI Front Panel Components



                          Example 3 (solution)
       In the Edtxt_depth Callback
       >>depth=get(hObject,'String');
       >>depth_num=str2double(depth);
       >>handles.depth_num=depth_num;
       >>guidata(hObject, handles);




                                                          65
GUI development with Matlab: GUI Front Panel Components



                          Example 3 (solution)
       In the PB_calculate Callback
       >>depth_num=handles.depth_num;
       >>width_num=handles.width_num;
       >>height_num=handles.height_num;

       >>result=depth_num*width_num*height_num
       >>result_str=num2str(result)                       Convert the number
       >>set(handles.Sttxt_result,'string',result_str)    to a string first before
                                                          sending out to the
                                                          Static Text

                                                                                 66
GUI development with Matlab: GUI Front Panel Components



                                         Conclusion
       •       Looked at the GUI front-panel buttons
       •       Looked at how to program them
       •       2 examples for practice




                                                          67

								
To top