Class Prep

1
Class Prep

• Bring to Class
• In-Class Exercises
• Paper for Classroom Printer
• Run MATLAB

2
Week 10-c(not in text)

• Publishing Solutions to the Web
• Graphical User Interface GUIDE

3
Review for Final Exam

• Sample Test 3 is accessible via a link on course
  schedule on course web page
• cs.union.edu/csc070/tests
• Once you have had a chance to work on the
  questions, feel free to send me an email message
  requesting the answers
• Reminder Final Exam will be in this room at 830
  AM on Tuesday, March 18, 2008

4
Topics for Test 3 (Final Exam)"Open Book" up to
4 Sheets of Notes

• Recursion
• 2-D 3-D Plotting
• Images
• Matrix Computation
• Numerical Methods
• Solving Simultaneous Linear Equations
• Interpolation
• Roots of Polynomials
• Curve Fitting (Least Squares)
• Integration Differentiation

5
Algorithm Study for CSc-70 Test

• Take Practice Test, then Request Answers
• Don't understand something? Email or see HannayD
• Redo In-Class Exercises
• Don't understand something? Email or see HannayD
• Redo HW Without Help from Others
• Don't understand something? Email or see HannayD
• Go Over Lecture Notes
• Don't understand something? Email or see HannayD
• Study Textbook, make up 4 sheets of Notes
• Don't understand something? Email or see HannayD

6
Portfolio Due at Beginning of Final

• Notebook
• Name Course Info on Cover
• Table of Contents
• Graded Homework
• In-Class Exercises
• Tests 1 2
• Grading
• -4 if Missing
• -3 down to -1 for Incompleteness

7
Overview of Publishing

• When you have completed writing and debugging an
  M-file script, use the Editor/Debugger Cell
  features to quickly publish the M-file and its
  results.
• This allows you to share your work with others,
  presenting not only the code, but also commentary
  on the code and results from running the file.
• Publishing features evaluate each Cell in the
  M-file script and display the contents of the
  Cell along with the results in a presentation
  quality document.

8
(No Transcript)
9
Sample MATLAB Programs on Web

• http//minerva.union.edu/hannayd/csc070/Sample.htm
  l
• http//minerva.union.edu/hannayd/csc070/Heart.html

10
Hands-On DEMO Dividing Script into Cells

• Create a new script
• x016pi
• ysin(x)
• plot(x,y)
• xlabel('x'), ylabel('sin(x)')
• Divide into 3 Cells
• Define Data Function
• Plot Function
• Add Labels

11
Hands-On DEMO Add Title

• Add another comment at the top
• First of two comments becomes title
• Title followed by comment lines
• Second will be Cell Heading for first Cell
• Use Your Name's First MATLAB Page as the overall
  title
• e.g. Dave Hannay's First MATLAB Page
• NOTE Lines must start with two percent signs
  followed by space

12
Cell Guidelines

• You can, of course, define a cell at the start of
  a new file, enter code for the cell, define the
  start of the next cell, enter its code, and so
  on...
• For program control statements, such as if...end,
  a cell must contain both the opening and closing
  statements, that is, it must contain both the if
  and the end statements.
• If there are no cell dividers in an M-file,
  MatLab understands the entire file to be a single
  cell.

13
Publishing Results

• Run Publishing DEMO on instructor's console
• (sound on)
• gtgt demo
• ? Desktop Tools and Development Environment
• ? Publishing M Code from the Editor

14
Text Markup

• You can use the special mark-up language to have
  Greek letters, superscripts, subscripts, etc.
  appear on the web.
• \omega, \uparrow, \newline, etc.

15
Hands-On DEMO Publish to HTML

• Make sure that your Current Directory is set
  correctly
• Save Script as FirstWebPage
• Click the "Save and Publish to HTML" button (or
  File Menu ? Publish to HTML)
• Files end up in a subdirectory called HTML inside
  your current directory

16
Copy to World Wide Web

• See Handout for Windows Instructions
• I brought a few MAC instruction sheets as well
• ltAlt/Fgt to show MENU bar in Internet Explorer
• File accessible at URL
• http//minerva.union.edu/username/FirstWebPage.htm
  l
• Tell your family and friends they can now check
  out your CSc-70 class work!

17
Graphical User Interface

• A Graphical User Interface (GUI) is a user
  interface built with graphical objects, such as
  buttons, text fields, sliders, and popup menus
• Applications that provide GUIs are generally
  easier to use since the person using the
  application does not need to know what commands
  are available or how they work
• The action that results from a particular user
  action can be made clear by the design of the
  interface

18
GUIDE (Graphical User Interface Development
Environment)

• GUIDE is primarily a set of layout tools
• GUIDE also generates an M-file that contains code
  to handle the initialization and launching of the
  GUI
• This M-file also provides a framework for the
  implementation of the callbacks - the functions
  that execute when users activate a component in
  the GUI.

19
Hands-On DEMO GUI Sample
20
DEMO GUI Student HW from Previous Term
21
Demo on GUIDE (GUI Development Environment)

• Demo (sound on) ? MATLAB ? Creating
  Graphical User Interfaces

22
Hands-On DEMO Create GUI

• Click GUIDE Button (or type guide in Command
  Window)
• Create New GUI (Blank)
• Click Green Arrow to run
• Save as cs70ex10c in correct directory
• Close the GUI
• Click on background, Click on Property Inspector
  Button
• (or right-click background and select Property
  Inspector)
• Set the Name property to cs70ex10c by Your
  Name
• Run again and check on Form Title

23
Hands-On DEMO Add Axes

• Select the Axes tool and draw axes covering
  approximately 1/4 of the grid
• Place in upper left-hand corner
• Run again and check display of axes
• Close GUI and go back to Design (Control) Window

24
Push Buttons

• Push buttons generate an action when pressed
  (e.g., an OK button may close a dialog box and
  apply settings)
• When you click on a push button, it appears
  depressed
• when you release the mouse, the button's
  appearance returns to its non-depressed state
• and its callback executes on the button up event

25
Hands-On DEMO Add Push Button

• Select the Push Button tool and draw a push
  button in the lower right-hand corner of the grid
• Select the new Push Button, and go to Property
  Inspector
• Set String Property to PLOT
• Set Tag Property to pushbutton_plot
• Set FontSize to 18
• Set FontWeight to bold
• Run again and check display of the button
• Close GUI and go back to Design (Control) Window

26
Check Boxes

• Generate an action when clicked and indicate
  their state as checked or not checked
• Useful when providing the user with a number of
  independent choices that set a mode
• The Value property indicates the state of the
  check box by taking on the value 1 or 0
• Value 1, box is checked.
• Value 0, box is not checked.

27
Hands-On DEMO Try Check Boxes

• Select the Check Box tool and add two check boxes
  to the grid
• If we were designing a form for a user to order a
  car, we might have check boxes to add options
  such as anti-lock brakes or side airbags
• As opposed to being able to select only one of
  several different options such as color (handled
  using radio buttons instead of check boxes)

28
Radio Buttons

• Similar to check boxes, but are intended to be
  mutually exclusive within a group of related
  radio buttons (i.e. only one button is in a
  selected state at any given time)
• To make radio buttons mutually exclusive within a
  group, the action for each radio button sets the
  Value property to 0 on all other radio buttons in
  the group

29
Hands-On DEMO Add Radio Buttons

• Select the Button Group tool and draw the group
  box in the upper right-hand corner of the grid
• Select the new Button Group, and go to Property
  Inspector
• Set Title Property to Colors
• Add 3 Radio Buttons to the Button Group
• Set String Properties to Red, Green, and Blue
• Set ForegroundColor Properties to Match
• Set Tag Properties to radiobutton_red, _green,
  _blue
• Check out your new Radio Buttons

30
Editable Text

• Fields that enable users to enter or modify text
  strings
• Use edit text when you want text as input
• The String property contains the text entered by
  the user.
• We will not be using Edit Text in our Sample

31
Static Text

• Displays lines of text
• Typically used to label other controls, provide
  directions to the user, or indicate values
  associated with a slider
• Users cannot change static text interactively.

32
Hands-On DEMO Add Static Text

• Select the Static Text tool and draw a Static
  Text box in the lower left-hand corner of the
  grid
• Select the new Text Box, and go to Property
  Inspector
• Set String Property to Line Width

33
Properties that Control the Slider

• Value - contains the current value of the slider
• Max - defines the maximum slider value.
• Min - defines the minimum slider value.
• SliderStep - specifies the size of a slider step
  with respect to the range.

34
Sliders - Value Property

• Contains the numeric value of the slider
• Can set this property to specify an initial
  condition and query it in the slider's callback
  to obtain the value set by the user
• For example, your "PushButton" callback could
  contain the statement
• line_width get(handles.slider_LineWidth,'Value')
  

35
Hands-On DEMO Add Slider

• Select the Slider tool and draw a slider under
  the Line Width Label
• Select the new Slider, and go to Property
  Inspector
• Set Max Property to 6
• Set Min Property to 1
• Set Value to 2
• Set Tag to slider_LineWidth
• Run again and check action of the slider
• Close GUI and go back to Design (Control) Window

36
Hands-On DEMO SliderStep Property

• Controls the amount the slider Value property
  changes when you click the mouse on the arrow
  button or on the slider trough
• Specify SliderStep as a two-element vector
• The default, 0.01 0.10, provides a 1 percent
  change for clicks on an arrow and a 10 percent
  change for clicks in the trough
• The actual step size is a function of the slider
  step and the slider range
• Change SliderStep to 0.2 0.2
• 20 change each click (1?2?3?4?5?6)

37
Popup Menus

• Open to display a list of choices (defined using
  the String property) when users press the arrow
• When not open, a popup menu displays the current
  choice, which is determined by the index
  contained in the Value property
• The first item in the list has an index of 1,
  second 2, etc.
• You can query the Value property in the callback
  routine to determine which choice the user made
• WhichFunction get(handles.popup_Function,
  'Value')

38
Hands-On DEMO Popup Menu

• Select the Pop-up Menu tool and draw a Pop-up
  Menu above the PLOT Button
• Select the new Pop-up, and go to Property
  Inspector
• Set String Property (on 3 lines) to
• sin(x)
• sqrt(x)
• x2
• Set Tag Property to popup_Function
• Run again and check action of the Pop-up Menu
• Close GUI and go back to Design (Control) Window

39
Two Files associated with a GUI

• FIG-file contains a complete description of the
  GUI figure and all of its children (uicontrols
  and axes), as well as the values of all object
  properties

• M-file contains the functions that launch and
  control the GUI and the callbacks, which are
  defined as sub-functions

40
Callback

• Routine that executes whenever you activate the
  uicontrol object
• We will only program the Pushbutton callback
• Click the M-File Editor button
• function pushbutton_plot_Callback(hObject,
  eventdata, handles)
• (pushbutton_plot was the Tag we gave our button)

41
In-Class Exercise 10c Making GUI Come to Life

• Program pushbutton callback to retrieve values of
  popup menu, slider, radio buttons
• if get(handles.radiobutton_red, 'value')
• color 'r'
• elseif get(handles.radiobutton_green, 'value')
• color 'g'
• elseif get(handles.radiobutton_blue, 'value')
• color 'b'
• end
• line_width get(handles.slider_LineWidth,
  'value')
• which_function get(handles.popup_Function,
  'value')
• x 00.110
• if which_function 1
• plot(x,___,___,___,___)
• title('sin(x)', 'FontSize',12)
• elseif which_function 2
• title('sqrt(x)', 'FontSize', 12)
• elseif which_function 3
• title('x2', 'FontSize', 12)

42
END