详细介绍了matlab APP 的设计，包括GUI设计，代码生成，与硬件结合，MVC模式等，还是比较好的一个matlab设计参考资料。录第1章 MATLAB App Desinger教程1.1如何使用 App designer进行的简单的GUI设计1.11使用 App desinger的条件是什么11121.12 App designer有什么主要的特点1.13如何使用 AppDesinger进行简单的GUI布局1.1.4如何修改 App Designer控件的名字41.1.5如何给App类添加属性1.1.6如何设置GUⅠ控件的初值1.1.7如何给控件添加 callback12详解 App designer生成的代码67991.2.1App属性声明的语法为什么和以前的不一样1.2.2App的构造函数中做了哪些事情101.2.3App的析构函数在何时被调用1.24如何得到 AppDesigner生成的代码121.3如何使用 Gauge,Knob,Lamp,和 Toggle switch1413.1Gage,Knob,Lamp和 Toggle Switch在GUI中有什么用处141.3.2如何利用 Gauge,Knob,Lamp和 Toggle Switch设计一个简单的APP1.3.3如何用Knob控制 Gauge,用 Toggle Switch控制Lamp1714 App designer和硬件结合实例191.41如何使用 MATLAB Arduino Support Package191.4.2如何利用 App Designer给 Arduino设计 Dashboard(控制台)201.4.3如何给 Arduino连线221.4.4如何编写 Dashboard的 callback241.5 MATLAB App Designer NH MVC271.5.1简单回顾什么是MVC模式271.52先设计取款机的 Model类281.53用 App designer布局Ⅴiew1.5.4给Ⅴiew添加 Controller3315.5启动MVC1.5.6 App designer+MVC流程回顾16从 App designer的局限性谈 MATLAB的图形系统35作者简介40MATLAB App Designer教程更多 MATLAB中文论坛技术文章41第1章 MATLAB App Desinger教程1.1如何使用 AppDesigner进行的简单的GUI设计1.1.1使用 App desinger的条件是什么Mathworks在R2016a中正式推出了 GUIDE的替代产品: AppDesigner,这是在MATLAB图形系统转向使用面向对象系统之后(2014b),一个重要的后续产品,它旨在顺应Web的潮流,帮助用户利用新的图形系统方便的设计更加美观的GUI。要使用 App designer,需要最新的 MATLAB R2016a,或者已经安装了R2014b到R2015b之间的任一版本,可以从Mathwork的 File Exchange处下载 App designer的安装包进行安装http://www.mathworks.com/matlabcentral/fileexchange/48142-app-designer唤起 App designer,只需要在命令行中输入 appdesigner就可以了> appdesignerMATLAB中文论坛技术专栏1.12 App designer有什么主要的特点笔者看来 App designer有如下这么几个特点·最明显的特点:自动生成的代码使用了面向对象的语法。最大的优点是:增加了和工业应用相关的控件:比如仪表盘,旋钮,开关,指示灯DESIGNERNew Open Save PackageLearnRunFILERESOURCESRUNbalanceApp mappApp2mapp(xICOMPONENT LIBRARYState ButtonText AreaCONTAINERSNSTRUMENTATION更多新式的控件Linear GaugeDiscrete KnobToggle Switch采用现代且友好的界面,用户更容易自已学习和探索1.1.3如何使用 AppDesinger进行简单的GUI布局在《 MATLAB面向对象编程:从入门到设计模式》第7.1节中,有一个账户存款提款界面的例子,界面如下存款余器1000提款或者取款数目Withdraw取款按钮存款按钮在7.1节中,我们采用了 GUIDE来设计这个界面,在接下来的7.2,7.3节中,进一步循序渐进的介绍了如何用程序的方式,和面向对象的方式来重新设计这个存款提款界面。本MATLAB App designer教程篇教程还是利用同样的例子,同样的顺序,先利用 App designer来设计这个界面,然后再介绍如何通过编程的方式实现。首先我们在 MATLAB中打开 App Designer>> appdesigner模仿书中的例子,从 appdesigner中拖拽两个 Edit field( Numeric)和 Button构成基本界面如下所示o Autospacing o 20 pixels a Show grid Show alignment hintsu Snap to gnd口 Show resizing hintsSave [o k Do Same Size GroupingD bApply Hinterval: 10ALIGNARRANGESPACEVIEWCOMPONENT LIBRARYCOMMONBalanceCheck BoxRMBWithDraw123 Edit Field(Numerabc Edit Field(Text)图11Δ pp Designer在布置画布控件上设计的非常友好,如果用鼠标挪动这些控件,画布会上岀现辅助线帮助对齐控件ance最终调整过后的GUI看上去和用 GUIDE设计类似Design View Code Vlew4MATLAB中文论坛技术专栏值得注意的是,如果点选多个控件, App designer还可以帮助你自动排布它们在横向和纵向的分布等等,这个功能是笔者认为 App designer最友好的地方之DESIGNERCANVASO Autospacingo 50 pixels Show grid≌ show alignment hintsd Snap to gridesizing hintsSave Iu t-- DSame Size GroupingtApply Vertically10左右上下控件太小横向2向均匀纷布VIEWRUN居中对齐M相同COMPONENT LIBRARYDesign ViewCode viewCOMMONButton ButtonCheck BoxRMB123 Edit Field(Numeric)1.1.4如何修改 App designer控件的名字点击 Code view,可以看到 App designer为这个界面自动生成的类的代码,整段代码中有些部分是灰色的,这表示它们不可以在编辑器中*直接*被修改,而要通过 App designer提供的互动方式大修改,本节中我们先尊重 App designer的这样的工作流程,之后我们将会介绍直接修改类定义的方法。在CodeⅤiew中,我们看到,两个 Button分别是类的两个属性,名字叫做 Button,和Button2。这样命名属性对程序逻辑的理解没有帮助,最好把它们的名字修改得有实际的意义EDITORGo To vV Enable app coding alertsIndent目世点击 Code view来到Function PropertyFunction这个⑤U的类的定义NAVIGATEVIEWRUNApp 2. mlapp'(xDesign VieY COMPONENT BROWSERctionsPropertiapp. UIFigure1 classdef App2 matlabapps. AppBaseapp. NumericEditFieldspond to componen23456789 Properties that correspond to app componentsproperties (Access public)UIFiguremat lab ui. FigureUIapp. Button2Labe lume riceditfield matlab ui, control LabeNume ricEditFieldmatlab. ui control Nume ricEditField %abe lNume ricEditField2 matlab, ui control, labelRMI点击这里修改属性Nume ricEditField2matlab, ui control Nume ricEditField %的名字matlab, ui, control, Button%s wime属性的名字分别叫做Bon和Btn2Button2matlab, ui control, ButtonDmethods (Access private)Y BUTTON PROPERTIESInspectorCallbacks%6 Code that executes after component creationfunction startupFcn(app)TEXTAND ICONwith Drawend26endDepositg App initialization and constructioncoaLignmentMATLAB ApP Designer教程可以点击右栏 Component Browser中的app. Button和app. Button2来键入新的属性的名字,*注意*左边代码中的属性名称也将做*自动的*修改,(尽管这些属性的代码是灰色的),如图所示EDITORYo Commentv Enable app coding alertsFunction Property QFindndet目eFunctionINSERTNAVIGATEDesign ViewCode viewCOMPONENT BROWSERctions Propertiesclassdef app2 matLab apps. AppBaseapp. NumericEditFieldespond to component1234567890Properties that correspond to app componentsproperties (Access public)app. withDraw ButtonUIFigurematlab. ui. Figureapp. DepositButtonLabe lNumericeditfield matlab ui control, labelNume ricEditFieldmatlab. ui control. numericeditfieldLabe lNumericeditfield2 matlab ui control, labelRMIatlab ui, control, numericeditfieldWithD rawButtonatlabui, control, ButtonDepos⊥ tButtonatlab. ui, control Button该类中另两个重要的属性是可编辑的文本/数字框,它们的名字分别是 NumericEdit-Field,和 NumericeditField2,同样,这些的名字不利于程序的阅读。我们把它们名字改成View balance, Vierne,如图所示Design ViewCode vierCOMPONENT BROWSERclassdef App2 mat lab apps. AppBaseapp. viewBalance8 Properties that correspond to app componentsproperties (Access= publicUIFigurematlab, ui. FigureUapp. DepositButtonLabelnume riceditfield matlab, ui, control, LabelViewBalancematlab. ui control. NumericEditField %LabelNumericEditField2 matlab ui control LabelViewRMBmatlab. ui control. NumericEditField %ithDrawButtonmatlab, ui control ButtonDepositButtonmatlab, ui control Butto图121.1.5如何给App类添加属性沿用第7章的MVC的设计思想,我们期望至少能把GUI的视图和模型分开(尽管目前看来好像多此一举),在这个应用中, Model中应该包括账户 Balance的值,于是我们给类添加一个叫做 Balance的属性,这可以通过点击 editor-> Property-> Insert Private Property来达到6MATLAB中文论坛技术专栏App DesignerDESIGNEREDITORaa 4Comment 3M Enable app coding alertsSave Callback Function PropertyFindY StartupIndentFunctinINSERTInsert Private PropertyVIE WApp2.Private properties store data to be shared within the appY CODE BROWSERAInsert Publie PropertyPublic properties store data to be shared inside andDesign ViewCode viewCOMPONENT BCallbacks Functions Propertiesv app. LiGure1 classdef App2 mat lab apps. AppBaseapp View BalancaLlback2app. View RMB%g Properties that correspond to app componentsInteractions and eventsproperties (Access= publicappWith DrawEUIFiguremat lab ui. Figure9 UIapp. DepositUmLabe lNumericeditfield matlab ui, control LabelViewBalancematlab. ui controL. NumericEditField ILabe lNumeri cEditField2 matlabui, control, LabelSk RMIViewRMBmatlab. ui, control. NumericEditField %IithDrawButtonmatlab. ui control Buttonss wi.DepositButtonmatlab, ui, control, Button3自动插入的属性定义y APP LAYOUEDIT FIELD (NU15InspectorCallbaBalance doubleVALUEBalanceValuemethods (Access private)LimitsRMBHorizontalAign ment20thRew%s Code that executes after component creationfunction startupFcn(app图13我们看到上图中, App designer自动在类定义中插入一段 property的代码,该 Property的属性是 Private,即无法从外部访问和修改 Balance.1.1.6如何设置GUI控件的初值通常在GUⅠ呈现给用户时,栏目中应该有些初值,这里我们希望Ⅴ iew balance和ViewrmB栏中也能够显示初始值,那么只需修改 startupFcn就可以了,该方法类似MVC模型里面各个类的 Constructor的综合,代码如下9 Code that executes after component creationfunction startupFcn(app)app. Balance =500;app. VieWRMB. Value =0;app. ViewBalance Value= app. Balance;end即初始余额500元,初始要操作(提款或者存款)的数目是O,如图ooo Ul FigureBalanceRMB图14