© 2015 The MathWorks, Inc. · 6 Key features till Write, execute, and test code in a single...
Transcript of © 2015 The MathWorks, Inc. · 6 Key features till Write, execute, and test code in a single...
![Page 1: © 2015 The MathWorks, Inc. · 6 Key features till Write, execute, and test code in a single interactive environment Generate results and graphics in the Live Editor alongside the](https://reader034.fdocuments.us/reader034/viewer/2022042101/5e7def5c7c2dd4692f42a67d/html5/thumbnails/1.jpg)
1© 2015 The MathWorks, Inc.
![Page 2: © 2015 The MathWorks, Inc. · 6 Key features till Write, execute, and test code in a single interactive environment Generate results and graphics in the Live Editor alongside the](https://reader034.fdocuments.us/reader034/viewer/2022042101/5e7def5c7c2dd4692f42a67d/html5/thumbnails/2.jpg)
2© 2015 The MathWorks, Inc.
Interactive programming
and enhanced GUI
Hyunuk Ha
![Page 3: © 2015 The MathWorks, Inc. · 6 Key features till Write, execute, and test code in a single interactive environment Generate results and graphics in the Live Editor alongside the](https://reader034.fdocuments.us/reader034/viewer/2022042101/5e7def5c7c2dd4692f42a67d/html5/thumbnails/3.jpg)
3
Table of contents
✓ Live editor
✓ Short introduction to live editor
✓ Key features till
✓ Feature highlights in
✓ App designer
✓ (Not so) Short introduction to app designer
✓ Key features till
✓ Feature highlights in
![Page 4: © 2015 The MathWorks, Inc. · 6 Key features till Write, execute, and test code in a single interactive environment Generate results and graphics in the Live Editor alongside the](https://reader034.fdocuments.us/reader034/viewer/2022042101/5e7def5c7c2dd4692f42a67d/html5/thumbnails/4.jpg)
4
Conventional plain text script
✓ Plain-text editing
✓ Output goes to
Command Window
✓ Multiple figure windows
appear
✓ Equations, images, and
hyperlinks only appear
if published
![Page 5: © 2015 The MathWorks, Inc. · 6 Key features till Write, execute, and test code in a single interactive environment Generate results and graphics in the Live Editor alongside the](https://reader034.fdocuments.us/reader034/viewer/2022042101/5e7def5c7c2dd4692f42a67d/html5/thumbnails/5.jpg)
5
What is the Live Editor?
✓ Live editor = script + (fully formatted)text + result
✓ Write, edit(debug), and run code in a single
interactive environment
✓ Generate results and graphics within the
integrated developing environment
✓ Include (WYSWYG)images, (LaTeX)equations,
hyperlinks and table of contents to create an
interactive narrative
✓ Share your script as a richly formatted and
executable document with code and its results
The Live Editor provides a new way to
create, edit and run MATLAB code.
![Page 6: © 2015 The MathWorks, Inc. · 6 Key features till Write, execute, and test code in a single interactive environment Generate results and graphics in the Live Editor alongside the](https://reader034.fdocuments.us/reader034/viewer/2022042101/5e7def5c7c2dd4692f42a67d/html5/thumbnails/6.jpg)
6
Key features till
✓ Write, execute, and test code in a single
interactive environment
✓ Generate results and graphics in the Live
Editor alongside the code that produced
them
✓ Find errors at the location in the file where
they occur
✓ Suggests corrections for mistyped
commands and variables
✓ Edit a figure interactively
✓ Add images, and hyperlinks as supporting
material
✓ Export report in pdf, html, LaTeX fomat
![Page 7: © 2015 The MathWorks, Inc. · 6 Key features till Write, execute, and test code in a single interactive environment Generate results and graphics in the Live Editor alongside the](https://reader034.fdocuments.us/reader034/viewer/2022042101/5e7def5c7c2dd4692f42a67d/html5/thumbnails/7.jpg)
7
Key features of Live Editor in
✓ Create functions with formatted documentation
✓ Use the Help Browser to view function documentation
✓ Debug functions and scripts
✓ Run to here
✓ Set breakpoints
✓ Step into functions
✓ Use interactive controls to control values
✓ Sliders and combo boxes
✓ Easy insertion of annotation to figure
![Page 8: © 2015 The MathWorks, Inc. · 6 Key features till Write, execute, and test code in a single interactive environment Generate results and graphics in the Live Editor alongside the](https://reader034.fdocuments.us/reader034/viewer/2022042101/5e7def5c7c2dd4692f42a67d/html5/thumbnails/8.jpg)
8
Create functions with formatted documentation
![Page 9: © 2015 The MathWorks, Inc. · 6 Key features till Write, execute, and test code in a single interactive environment Generate results and graphics in the Live Editor alongside the](https://reader034.fdocuments.us/reader034/viewer/2022042101/5e7def5c7c2dd4692f42a67d/html5/thumbnails/9.jpg)
9
Debug function and script in live editor
![Page 10: © 2015 The MathWorks, Inc. · 6 Key features till Write, execute, and test code in a single interactive environment Generate results and graphics in the Live Editor alongside the](https://reader034.fdocuments.us/reader034/viewer/2022042101/5e7def5c7c2dd4692f42a67d/html5/thumbnails/10.jpg)
10
Help function and variable’s Contextual hints
![Page 11: © 2015 The MathWorks, Inc. · 6 Key features till Write, execute, and test code in a single interactive environment Generate results and graphics in the Live Editor alongside the](https://reader034.fdocuments.us/reader034/viewer/2022042101/5e7def5c7c2dd4692f42a67d/html5/thumbnails/11.jpg)
11
Report generation to pdf, html, and LaTeX
Export
to
pdf,
html,
LaTeX
<Live editor> <html for web sharing> <pdf for report>
<Automatic contents generation>
with section title
![Page 12: © 2015 The MathWorks, Inc. · 6 Key features till Write, execute, and test code in a single interactive environment Generate results and graphics in the Live Editor alongside the](https://reader034.fdocuments.us/reader034/viewer/2022042101/5e7def5c7c2dd4692f42a67d/html5/thumbnails/12.jpg)
12
What is App Designer?
✓ A new environment for
building MATLAB Apps
✓ Broad set of UI components
including instrumentation
controls
✓ Integrates the two primary
tasks of app building
✓ laying out visual components
✓ programming app behavior
✓ Generates code as a
MATLAB class
![Page 13: © 2015 The MathWorks, Inc. · 6 Key features till Write, execute, and test code in a single interactive environment Generate results and graphics in the Live Editor alongside the](https://reader034.fdocuments.us/reader034/viewer/2022042101/5e7def5c7c2dd4692f42a67d/html5/thumbnails/13.jpg)
13
The App Designer Desktop – Design View
✓ Design and layout the
app's interface
✓ Component Library
✓ Select components and
add them to the canvas
✓ Design Canvas
✓ Layout components
✓ Toolstrip
✓ Align, space, and group
components
✓ Properties panel
✓ Set common component
properties
![Page 14: © 2015 The MathWorks, Inc. · 6 Key features till Write, execute, and test code in a single interactive environment Generate results and graphics in the Live Editor alongside the](https://reader034.fdocuments.us/reader034/viewer/2022042101/5e7def5c7c2dd4692f42a67d/html5/thumbnails/14.jpg)
14
The App Designer Desktop – Code View
✓ Write code to control the
app's behavior
✓ Editor
✓ Write code for callbacks
and other functions
✓ Code Browser
✓ Navigate to callbacks
and app properties
✓ Toolstrip
✓ Add new code elements –
properties, callbacks, and
functions
![Page 15: © 2015 The MathWorks, Inc. · 6 Key features till Write, execute, and test code in a single interactive environment Generate results and graphics in the Live Editor alongside the](https://reader034.fdocuments.us/reader034/viewer/2022042101/5e7def5c7c2dd4692f42a67d/html5/thumbnails/15.jpg)
15
App Designer Components
uiaxes
uicheckbox
uidropdown
uilabel
uilistbox
uislider
uispinner
uitable
uitextarea uimenu
uitabgroup
uipanel
uigauge
uiknob
uilamp
uiswitch
✓ New javascriptuifigure component
✓ New uiaxes
component for web
graphics
✓ Expanded set of
standard components
✓ New instrumentation
components
✓ Other components
being considered
✓ file picker
✓ date picker
✓ toolbar
uieditfield
uibutton
uibuttongroup
uitree
![Page 16: © 2015 The MathWorks, Inc. · 6 Key features till Write, execute, and test code in a single interactive environment Generate results and graphics in the Live Editor alongside the](https://reader034.fdocuments.us/reader034/viewer/2022042101/5e7def5c7c2dd4692f42a67d/html5/thumbnails/16.jpg)
16
Design and Layout – Basic Steps
✓ Select a component from
the library and drag it to
the canvas
✓ Name the component
✓ Set the component
properties
✓ Position manually or align
with other components
![Page 17: © 2015 The MathWorks, Inc. · 6 Key features till Write, execute, and test code in a single interactive environment Generate results and graphics in the Live Editor alongside the](https://reader034.fdocuments.us/reader034/viewer/2022042101/5e7def5c7c2dd4692f42a67d/html5/thumbnails/17.jpg)
17
Coding App Behavior – Basic Steps
✓ Select a component
✓ Create a callback
✓ Add callback code
✓ Use hints to avoid
common programming
errors
![Page 18: © 2015 The MathWorks, Inc. · 6 Key features till Write, execute, and test code in a single interactive environment Generate results and graphics in the Live Editor alongside the](https://reader034.fdocuments.us/reader034/viewer/2022042101/5e7def5c7c2dd4692f42a67d/html5/thumbnails/18.jpg)
18
App Code Structure
✓ Code created for the App
is a MATLAB class
✓ Controls and shared data
are stored as properties
of the class
✓ Callbacks and helper
functions are stored as
methods of the class
✓ App Designer generates
the code for all the app
components
![Page 19: © 2015 The MathWorks, Inc. · 6 Key features till Write, execute, and test code in a single interactive environment Generate results and graphics in the Live Editor alongside the](https://reader034.fdocuments.us/reader034/viewer/2022042101/5e7def5c7c2dd4692f42a67d/html5/thumbnails/19.jpg)
19
Key features of App designer in
✓ More HMI friendly components
✓ Web deploy
✓ GUIDE to App designer tool
✓ + append : Integrating with Simulink
(Not the latest feature)
![Page 20: © 2015 The MathWorks, Inc. · 6 Key features till Write, execute, and test code in a single interactive environment Generate results and graphics in the Live Editor alongside the](https://reader034.fdocuments.us/reader034/viewer/2022042101/5e7def5c7c2dd4692f42a67d/html5/thumbnails/20.jpg)
20
More HMI-friendly components
![Page 21: © 2015 The MathWorks, Inc. · 6 Key features till Write, execute, and test code in a single interactive environment Generate results and graphics in the Live Editor alongside the](https://reader034.fdocuments.us/reader034/viewer/2022042101/5e7def5c7c2dd4692f42a67d/html5/thumbnails/21.jpg)
21
GUIDE App designer
Use figure functions and figure properties Use uifigure functions and UI Figure properties
Essential components for GUI More HMI friendly components
Standalone deployable Standalone deployable + Web deployable
Use get, set functions Use dot notation using class
Differences between GUIDE and App Designer
More HMI friendly components
![Page 22: © 2015 The MathWorks, Inc. · 6 Key features till Write, execute, and test code in a single interactive environment Generate results and graphics in the Live Editor alongside the](https://reader034.fdocuments.us/reader034/viewer/2022042101/5e7def5c7c2dd4692f42a67d/html5/thumbnails/22.jpg)
22
Standalone desktop app & Web Deploy
![Page 23: © 2015 The MathWorks, Inc. · 6 Key features till Write, execute, and test code in a single interactive environment Generate results and graphics in the Live Editor alongside the](https://reader034.fdocuments.us/reader034/viewer/2022042101/5e7def5c7c2dd4692f42a67d/html5/thumbnails/23.jpg)
23
Standalone desktop app & Web Deploy
app.exe
https:\\www.app.com
![Page 24: © 2015 The MathWorks, Inc. · 6 Key features till Write, execute, and test code in a single interactive environment Generate results and graphics in the Live Editor alongside the](https://reader034.fdocuments.us/reader034/viewer/2022042101/5e7def5c7c2dd4692f42a67d/html5/thumbnails/24.jpg)
24
Sharing apps before
Standalone
App
MATLABRuntime
MATLAB compiler
![Page 25: © 2015 The MathWorks, Inc. · 6 Key features till Write, execute, and test code in a single interactive environment Generate results and graphics in the Live Editor alongside the](https://reader034.fdocuments.us/reader034/viewer/2022042101/5e7def5c7c2dd4692f42a67d/html5/thumbnails/25.jpg)
25
MATLAB compiler
URL
Sharing apps after
![Page 26: © 2015 The MathWorks, Inc. · 6 Key features till Write, execute, and test code in a single interactive environment Generate results and graphics in the Live Editor alongside the](https://reader034.fdocuments.us/reader034/viewer/2022042101/5e7def5c7c2dd4692f42a67d/html5/thumbnails/26.jpg)
26
URL
App Designer
MATLAB
Runtime
.ctf
Web Apps Server
MATLAB Compiler
Installer
.ctf
App
![Page 27: © 2015 The MathWorks, Inc. · 6 Key features till Write, execute, and test code in a single interactive environment Generate results and graphics in the Live Editor alongside the](https://reader034.fdocuments.us/reader034/viewer/2022042101/5e7def5c7c2dd4692f42a67d/html5/thumbnails/27.jpg)
27
+ Additional feature for HMI : Integrating with Simulink
▪ Objective: Use an app to
write and read block values
in a Simulink model
▪ What we'll see
– Open an app from a model
– Set a model parameter from
the app
– Display a value from the
model in the app
![Page 28: © 2015 The MathWorks, Inc. · 6 Key features till Write, execute, and test code in a single interactive environment Generate results and graphics in the Live Editor alongside the](https://reader034.fdocuments.us/reader034/viewer/2022042101/5e7def5c7c2dd4692f42a67d/html5/thumbnails/28.jpg)
28
Any questions on interactive programming in MATLAB?