科学计算与仿真应用（基于MWORKS）课件 第六章 图形用户界面设计

第6章图形用户界面设计本章目标理解图形用户界面（GUI）的核心定义与价值，明确GUI的友好性体现在视觉控件（窗口、图标、按钮等）的便捷操作上，掌握GUI“即行即得”的运行特点，知晓用户通过选中、激活控件实现与程序交互的核心逻辑。掌握云端版Syslab的GUI编辑特色，明确其与MATLAB等软件的差异，理解Syslab需通过MoHub平台登录使用、借助设计模板定制或创建GUI，且保存时自动生成对应文件的操作模式。通过本章3节内容的学习，熟练掌握云端版Syslab的使用方法，能够借助该平台完成GUI的创建与实操，并通过具体实例深化对GUI设计与应用的理解。知识点总览GUI开发环境与流程：介绍了图形用户界面的基本概念，并详细说明了使用云端版Syslab进行GUI设计的完整流程，包括从MoHub平台登录、打开“应用构建工具”、到界面设计、回调函数编写、最后进行应用打包与安装的步骤。常用GUI组件及其属性：系统介绍了构建GUI的常用可视化组件，如按钮、文本、数字输入框、下拉框、单选框、复选框、曲线图、面板等。讲解了如何通过“定制属性”面板或编程代码（如Julia）来设置组件的标签、数值、选项、布局方向等关键属性。回调函数与事件驱动机制：阐述了GUI的核心运行机制——事件驱动。重点说明了如何为按钮等控件编写回调函数（使用Julia语言），使得用户在操作界面）时，程序能够做出响应，执行相应的计算、更新数据或绘制图形，实现用户与计算机的交互。数据传递与动态更新：讲解了GUI中各组件之间的数据交互方式。例如，如何通过上下文变量在回调函数中存储和传递数据以及如何通过修改组件的属性来动态更新界面上的显示内容。综合应用实例：通过多个具体的实例展示了如何将上述知识点综合运用，以解决实际问题，从而加深对GUI设计流程、组件使用、回调逻辑以及数据可视化的理解。1.云端版Syslab使用教程单机版Syslab没有配置GUI开发工具，但是可以通过安装Python环境、配置QtDesigner实现PyQt的应用开发，实现GUI的交互入口，通过专业算法调用底层函数。单机版Syslab的App开发步骤如图6.1所示。图6.1单机版Syslab的App开发步骤1.云端版Syslab使用教程单机版Syslab创建GUI仅作为App开发的一个步骤，不提供基于Syslab开发的GUI，所以我们使用云端版Syslab进行GUI的创建。进入云端版Syslab的方法如下。（1）打开MoHub网页，单击右上角的“登录/注册”按钮，使用同元账号登录，账号密码与单机版Syslab一致。MoHub使用同元账号登录界面如图6.2所示。（2）为MoHub授权，注册MoHub论坛账号并绑定同元账号。为MoHub授权界面如图

6.3所示，注册MoHub论坛账号并绑定同元账号界面如图6.4所示。图6.2MoHub使用同元账号登录界面图6.3为MoHub授权界面1.云端版Syslab使用教程（3）登录后在MoHub网页上找到“MWORKSOnline”模块，单击“进入工作台”按钮。MoHub网页上的“MWORKSOnline”模块如图6.5所示。图6.4注册MoHub论坛账号并绑定同元账号界面图6.5MoHub网页上的“MWORKSOnline”模块1.云端版Syslab使用教程（4）在首次进入工作台时，用户会有一个默认仓库，单击图标，进入默认仓库，单击右上角的“云端打开”按钮，选中“SyslabOnline”，打开云端版Syslab。也可以直接在工作台中单击“打开SyslabOnline”按钮，打开云端版Syslab。云端版Syslab界面如图6.6所示。图6.6云端版Syslab界面1.云端版Syslab使用教程云端版Syslab内置了App工具箱，为创建GUI提供了一系列工具。这些工具简化了GUI设计、创建程序，工具包含部分GUI控件。在主页面上，单击“APP”选项卡，选择“AppBuildTool”选项，打开“应用构建工具”窗口，如图6.7所示。图6.7“应用构建工具”窗口“应用构建工具”窗口分为以下6部分。①标题栏：显示窗口名称，以及窗口管理按钮。②工具栏：显示常用工具按钮，包括“导入”“导出”“构建”“清空”“页面设置”5个按钮。③组件库：显示支持的所有备选组件，每个组件功能均不一样。④组件浏览器：显示已放入组件的列表，支持选中。⑤画布：App界面构建区域，组件放置区域。⑥属性设置：对组件功能进行详细定义。创建GUI示例-创建GUI的常用选项基元图标创建命令描述HTMLuicontrol插入基础的HTML元素容器（如<div>、<section>），用于自由布局或自定义代码嵌入。下拉框uicontrol提供预定义选项列表，用户可从中选择一个值，支持静态选项配置或动态数据绑定（如API获取选项）。单选框uicontrol展示一组互斥选项，用户只能选择其一，支持垂直/水平布局，可绑定默认值。复选框uicontrol允许用户勾选多个选项，支持全选/反选功能，可独立或分组使用。按钮uicontrol触发交互操作（如提交表单、跳转页面、调用API），支持自定义单击事件和样式。文本uicontrol插入单行文本输入框或静态文本标签，支持绑定动态数据（如用户昵称显示）。多行文本uicontrol提供多行文本编辑区域（如<textarea>），适用于长文本输入。输入框uicontrol显示一系列选项的输入框，用户可以选择一个或多个选项。数字输入框uicontrol仅允许输入数字，支持限制范围（如最小值、最大值）、控制步长（如每次增减1）。文件选择—允许用户上传本地文件，支持限制文件类型（如图片、PDF）和大小。曲线图—静态生成数据可视化图表（如折线图、柱状图）。面板—通用容器，用于分组或嵌套其他组件，支持自定义背景色、边框等样式。Flex面板—基于Flexbox布局的容器，可快速实现响应式排列（如水平居中、等分空间）。标签页—创建多标签页容器，支持单击标签切换内容区域，可嵌套其他组件。2.创建GUI示例示例：单击计数器设计。分析与求解：（1）在云端版Syslab界面上，单击“APP”选项卡，选择“AppBuildTool”选项，打开一个新的“应用构建工具”窗口。（2）先单击左侧的“按钮”图标，然后在右下展示区域按住鼠标左键不放并拖动鼠标，拉出来的形状就是按钮形状，当然还可以根据需要进行修改。带按钮的初始GUI如图6.8所示。图6.8带按钮的初始GUI2.创建GUI示例（3）先单击左侧的“文本”图标，然后在右下展示区域按住鼠标左键不放并拖动鼠标，拉出来的形状就是文本形状。（4）先单击左侧的“数字输入框”图标，然后在右下展示区域按住鼠标左键不放并拖动鼠标，拉出来的形状就是数字输入框形状（这里使用数字输入框是为了方便设定计数值的初值）。（5）将按钮1定制属性名称改为“重置”，按钮2定制属性名称改为“单击次数”；文本1定制属性名称改为“次数”，“value”值改为0，设定初始条件。设计好的GUI如图6.9所示。图6.9设计好的GUI2.创建GUI示例（6）将设计好的GUI保存为“EXAMP06001”，将自动打开GUI的.jl文件。（7）为按钮写入回调函数。回调函数中包含永久变量，可以用该永久变量来计数按钮被单击的次数。每单击一次按钮，云端版Syslab就回调一次函数。回调函数能够根据单击按钮的次数，不停地更新文本内容，将其赋值给文本框的字符串属性，并显示出来。该部分输入的函数执行行以黑体的形式呈现在脚本文件EXAMP06001.j1中。（8）在工具栏中单击“构建”按钮，打开“构建参数配置”对话框，输入构建参数，如图

6.10所示。图6.10“构建参数配置”对话框2.创建GUI示例（9）单击“开始构建”按钮，当打包完成时，右下角弹出构建成功提示，显示App安装文件的位置，如图6.11所示。（10）在云端版Syslab界面左侧的资源管理器中打开生成的App安装文件目录，右击安装文件，在弹出的快捷菜单中选择“安装扩展VSIX”选项，安装扩展VSIX，如图6.12所示。图6.11提示构建状态图6.12安装扩展VSIX2.创建GUI示例（11）安装成功后，右下角弹出安装成功提示，接下来需要先重启命令行窗口，然后按Ctrl+Shift+P组合键，弹出命令输入框，输入我们打包构建的AppId。运行“单击计数”窗口如图6.13所示，更新“单击计数”窗口如图6.14所示。图6.13运行“单击计数”窗口图6.14更新“单击计数”窗口2.创建GUI示例functionEXAMP06001(varargin)context["a"]=VInputNumber["value"]VText["value"]=0context["a"]=context["a"]+1VText["value"]=context["a"]end“按钮”部分代码如下：注意：本章所有关于GUI的创建都应遵循此步骤，即在编写完回调函数后从第8步开始，此后不再赘述。2.创建GUI示例示例：绘制图形的GUI设计。请设计一个典型的GUI，它包含一个下拉框、一个按钮和一个带有坐标系的图形窗口。其完成的功能为，在下拉框中选择一个选项，单击“绘制”按钮，在图形窗口中将绘制出相应图形。绘制图形的GUI如图6.18所示。图6.18绘制图形的GUI2.创建GUI示例分析与求解：（1）借助云端版Syslab打开一个带有坐标系和菜单的GUI。（2）在“应用构建工具”窗口中设置所有组件的属性。例如，先单击左侧的“曲线图”图标，然后在右下展示区域按住鼠标左键不放并拖动鼠标，拉出来的形状就是曲线图形状。（3）将设置完属性的GUI保存为“EXAMP06003”。（4）在预先定义的“绘制”按钮下输入利用Julia语言编写的回调函数。usingTyPlotusingTyBaseif(VSelect["value"]==1)VPlot["lineDatas"]=[Dict("x"=>1:5,"y"=>rand(5),"z"=>1:5,"name"=>"随机图")];elseif(VSelect["value"]==2)VPlot["lineDatas"]=[Dict("x"=>1:0.01:25.99,"y"=>sin.(1:0.01:25.99),"name"=>"正弦波")];elseif(VSelect["value"]==3)X,Y,Z=peaks();con=contour(X,Y,Z,5);clabel(con);elseif(VSelect["value"]==4)figure();X,Y,Z=peaks();mesh(X,Y,Z);elsefigure();X,Y,Z=peaks(20);c=surf(X,Y,Z);colormap(c,"bone");end2.创建GUI示例选“曲面图”菜单，单击“绘图”按钮，绘制结果如图6.19所示。图6.19绘制曲面图的GUI2.创建GUI示例每条曲线需包含以下字段：x（x轴坐标数据）；y（y轴坐标数据）；name（曲线名称）。默认值为空数组，需手动设置数据。使用方法如下。准备数据数组并将数据赋值给组件：注意：在云端版Syslab中输入回调函数时，要在开头对可能用到的所有库函数进行声明，避免出现运行错误的情况。此外，云端版Syslab在输入回调函数时仅支持Julia语言。datas=[Dict("x"=>x1,"y"=>y1,"name"=>"曲线1"),Dict("x"=>x2,"y"=>y2,"name"=>"曲线2")]VPlot["lineDatas"]=datas3.GUI实例示例：电路信号合成。

分析与求解：一个以原点为奇对称中心的方波可以用奇次正弦波的叠加来逼近，即（1）GUI包含的组件有文本和两个按钮，其中两个按钮分别用于生成二维图像和三维图像。GUI设计窗口如图6.23所示。图6.23GUI设计窗口3.GUI实例（2）编写回调函数。usingTyPloty_mat=zeros(10,length(t));x=zeros(length(t))forkin1:2:19x.+=sin.(k*t)./ky_mat[(k+1)÷2,:].=xendplot(t,permutedims(y_mat[1:9,:]))yline(π/4;linestyle="--",color="b",linewidth=1)text(3.2,π/4+0.05,"y=π/4";color="b",fontsize=12)t=0:0.01:2pi;y_mat=zeros(10,length(t))x=zeros(length(t))forkin1:2:19x.+=sin.(k*t)./k;y_mat[(k+1)÷2,:].=x;endhalft=ceil(Int,length(t)/2);s=sur