final report help
OENG1206 Unit Converter Final Final Program: Unit Converter GUI This part of the project is the last for the unit conversion program and will be based around converting our program to a Graphical User Interface (GUI) with user-defined functions to perform the conversions. Graphical User Interfaces are what we’re most familiar with when using computer programs; they consist of pop-up windows with buttons, text boxes, drop-down menus, radio buttons and other graphical elements that can be interacted with by a user to input information into the program. User-defined functions allow for effective code reuse and is good programming practice when creating programs that require the same or similar code to be executed many times. function out = MyFunction(in1, in2) % Rename function and input/output variables to appropriate name (not MyFunction) % Insert code here to perform appropriate unit conversions. out = % Set output variable to the converted value For this part of the project re-write your unit conversion program so the actual conversions (the mathematics) take place in user-defined functions. Once you have your user-defined functions written, convert your unit conversion program to a graphical user interface (GUI) using App Designer (DO NOT use the menu() function or GUIDE!!!). You will need to think not only about the way your program will calculate the output required to solve the problem (its functionality) but also how your GUI will look (its aesthetics) and how simple it is for a user to input and receive output from your program (its usability). Think about the structure of your program, will you use one or many function scripts to convert the units required? Where will error checks be performed? What should the input(s) to the function(s) be? Output(s)? Use comments in your scripts to explain how your function(s) operate. Due date and further details on this task: The final submission for this project is due at the end of week 9 (Friday, before 11:59pm). You are required to submit your MATLAB files (including GUI file (.mlapp) and user-defined function files (.m)) and a report containing an introduction, design methodology, output/evidence of testing and conclusion/future scope. More details on this can be found on Canvas under Modules -> Week 1 -> Assessment Task Instructions (IMPORTANT) -> Individual Project Instructions. The final submission should consist of what we’ve done up until now. To fulfil the requirements, you need to do the following: - Design and implement a unit converter app that requests input from a user on which unit type, direction (imperial to/from metric) and value they want to convert. - Your program must now be in the form of a graphical user interface (GUI) designed using App Designer (not GUIDE). - Your conversions should also be performed in separate user-defined functions. OENG1206 Lectorial 7 OENG1206 – Digital Fundamentals Graphical User Interfaces in MATLAB Lecturer: Dr Katrina Neville Lectorial Overview • This lectorial is going to look at one of the more advanced features in MATLAB, creating GUIs (Graphical User Interfaces). • This lectorial will run through how to use the App Designer tool to help you create a GUI. Graphical User Interfaces • We’ve seen in our MATLAB scripting that there’s the ability for textual interfacing with users. • We’ve used the input() function in some of the tutorials to get user input from the command line. • MATLAB also has a Graphical User Interface (GUI) design tool called App Designer. • GUIs are more sophisticated interfaces than the command line and can help make your programs more user-friendly. • MATLAB’s App Designer feature can be used to design and program GUIs. • To start this tool all you need to do is enter appdesigner on the command window. • This will open a blank layout screen where you can drag and drop in GUI elements. App Designer App Designer Interface • A MATLAB App Designer GUI is made up of two views: • Design View: contains the graphical window with the controls (buttons, graphs, textboxes, etc). • Code View: contains the functionality of the GUI (the code that makes it work). The Component Library • Components are what a user sees on your GUI and include: buttons, labels, axes, check boxes, radio buttons, etc. • Users can input data via edit fields (text or numeric), radio buttons or check boxes, etc. • Users can receive output as a label, or on an axis (graphical output). • It’s wise to design the layout of a GUI first to make sure it looks good and has easy navigation. • Draw your layout first then use App Designer to place your components on the window. Component Properties • Every component on your GUI has properties that you can access or alter in your program. • All possible properties for a particular component can be found by right-clicking on the component and selecting ‘Help on Selection.’ • For a button some properties that may be useful to change are: • Text. What the user sees written on the button. • Visible. Will the user see the button. • Font properties (FontName, FontSize, FontWeight, etc). The Component Browser • The Component Browser is a list of components that you’ve put on your GUI with the name you’ll use to access its properties. • Components have names starting with app, then a full-stop and the name you’ve called your component. • E.g. app.MyButton, app.MyDropDown or app.EditField Programming GUIs: Callback Functions • Components such as buttons, toggle-buttons and pop-up menus need code behind them to make them do anything. • A function called a callback can be created to execute code if a user interacts with a particular component. • A callback is a type of function that will only execute once a certain action has occurred, for example a user clicks on a button. Programming GUIs: Callback Functions • To create a callback in App Designer you can right-click the component your user will interact with and select Callbacks → Add ButtonPushedFnc callback (for example). • This adds a callback function to your code that will execute when a user clicks on a button. Programming GUIs • A callback function for a button would look like: % Button pushed function: MyButton function MyButtonPushed(app, event) Code goes here to make the button do something end Accessing Properties • Each component on a GUI has its properties stored in an object datatype. • The base object is the app itself (e.g. app). • Each component is then an object within that base object (e.g. app.EditField) • Within each of those objects is all the properties for that component (e.g. app.EditField.Value) • To access data within these objects a full-stop is used between the app, the component name and the property (object’s attributes) you’re accessing. selection = app.RadioButton.Value; app.MyDropDown.Items = {‘Item 1’, ‘Item 2’}; Accessing Properties using Objects • This is how properties for GUI components are stored: • The app object contains all the GUI components which in turn contains the editable properties for each control. • This example GUI contains a number of text fields (both text and numeric) as well as a button and a graph. Accessing Properties using Objects • If we drill in on the button for example we will see all the properties for that component: • Information about a component can be accessed as you’d usually access a variable in MATLAB. • For example, if you want to find the selected value of a drop- down menu, the property you want to access is its ‘Value.’ • From a button callback function you can get the selected item in the list by: selection = app.DropDown.Value; Getting Information from a Component app.DropDown.Value will contain ‘e’ when the user selects it. When the button is clicked the contents of the variable selection will equal ‘e’ in the Workspace. Changing the Properties of a Component • Again this process is much the same as setting a variable to a certain value in normal MATLAB code. • For example to change the text in a textbox depending on a radio button selection you can do the following. • After getting the information about the radio buttons’ values we can set the text using: app.FavouriteLabel.Text = 'My favourite drink is Lift'; Populating Menus in Design View • You’ll often need to initialise items in a drop down menu in your projects this semester. • This can be done in Design or Code View, but is simplest in Design View. • When the drop down menu is selected a menu called “Drop Down & Label Properties” appears. • Here you can manually enter the menu items by clicking in the Items box and adding what you want. Populating Menus in Code View • To do the same thing using code you need to create a StartupFnc callback. • Right-click on app.UIFigure in the Component Browser and select Callbacks → Add StartupFnc callback. • Now you can add code to this callback function which runs when you start your application. Populating Menus in Code View • To do the same thing as the previous