# Matlab Appdesigner简单UI

**Repository Path**: Wind_to_valley/Appinventor

## Basic Information

- **Project Name**: Matlab Appdesigner简单UI
- **Description**: matlab Appdesigner 制作的简单UI界面
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-04-04
- **Last Updated**: 2022-06-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Matlab

## README

# appdesigner
图形用户界面（GUI）也称为应用程序，提供对软件应用程序的点击控制，从而无需学习其他语言或键入命令来运行应用程序, 可以打包成matlab内部app或桌面应用. 传统的guide也可以做ui, 但用起来不如appdesigner好用, 已经即将要被淘汰了.

在matlab命令行输入**appdesigner**即可进入

![在这里插入图片描述](https://img-blog.csdnimg.cn/cccd281dc7164883ba82c037f89e0484.png)


![在这里插入图片描述](https://img-blog.csdnimg.cn/0ad1a6b5b33b4078b6ada1bc2c16862a.png)

首页有比较多实例, 这些可以慢慢看, 我们先新建空白app

![在这里插入图片描述](https://img-blog.csdnimg.cn/3817304536da4117943287957fff8e41.png)

左边有很多MATLAB之前就设置好的UI组件，可以直接拖动到画布上使用, 中间可以切换查看设计视图和代码。代码区的灰色代码是不可更改的, 右边为组件浏览器, 可以查看和编辑组件属性.

# 杨氏干涉

我们有一个已写好的杨氏干涉程序
```matlab
clear,clc;
%波长（典型值：600）
Lambda = input('输入光的波长（单位为nm）：');
Lambda = Lambda * 1e-9;
%缝间隙（典型值：1）
d = input('输入两个缝的间距（单位为mm）：');
d = d * 1e-3;
%缝到屏的距离（典型值：1）
D = input('输入缝到屏的距离（单位为m）：');
%设置空间坐标的边界
Xmax = 3 * Lambda * D/d; 
Ymax = Xmax;
Tmax = Xmax;
%坐标取样1001份
x = linspace(-Xmax, Xmax, 1001);      
y = linspace(-Ymax, Ymax, 1001);
t = linspace(-Tmax, Tmax, 1001);
%生成二维网格
[x, y] = meshgrid(x, y);
%计算复振幅
r1 = sqrt((x+d/2).^2+D^2);   
r2 = sqrt((x-d/2).^2+D^2);
phi = 2*pi*(r2-r1)/Lambda;  
E1 = 1;
E2 = 1 * exp(-1i * phi);
E = E1 + E2;
%合成波光强
I = abs(E) .^ 2; 
I = I ./ 4;
%取y轴的中线处的光强
I0 = I(501, :);     
%合成光强灰度分布图
subplot(2,1,1);     
imshow(I);            
xlabel('空间坐标x');
ylabel('空间坐标y');
title('杨氏双缝干涉合成光强空间分布');
% 合成光强函数分布图
subplot(2,1,2);
%设置坐标轴
axis([-Tmax,Tmax,0,1]);
plot(t, I0);
xlabel('空间坐标x'), ylabel('合成光强度');
title('杨氏双缝干涉合成光强空间分布函数');
```

程序的效果是输入光波波长, 双缝间隙和屏缝距离, 输出干涉结果和光强度分布.

![在这里插入图片描述](https://img-blog.csdnimg.cn/55c25bf816394d5da014f834a492eef6.png)

但一次次手动输入太麻烦了, 对该变量的认识也不够直观, 我们想将所有输入量改为实时输入, 改动一个变量就能查看输出结果.

# 组件摆放

从左边的组件库中拖进来三个滑块组件, 放好位置, 在中间修改长度和名字, 在右边的组件浏览器的**Value**和**Limit**分别修改三个滑块的默认值和范围

![在这里插入图片描述](https://img-blog.csdnimg.cn/8862426bf6244f9d8f6a4682f0d15793.png)

再从组件库中拖进来三个坐标区, 两个用来显示实时图像, 一个可以显示原理图或者北京, 再在右边修改它们的标题和坐标轴

![在这里插入图片描述](https://img-blog.csdnimg.cn/6a27bcefff3d4aad871f4302344050e9.png)

# 代码
点击中间区域右上角的代码视图进入代码区, 点击菜单-属性-公共属性添加公共类, 这可以理解为一些全局变量, 因为有三个输入控件, 一个量在修改时其他量都不能改变, 这里把所有变量都定义为全局变量
```matlab
properties (Access = public)
    Property % Description
    Lambda = 600 * 1e-9 % 输入光的波长（单位为nm）
    d = 1 * 1e-3% 输入两个缝的间距（单位为mm）
    D = 1 % 输入缝到屏的距离（单位为m）
    Xmax,Ymax,Tmax % 空间坐标边界
    x,y,t % 绘图变量
    r1,r2 % 光源距离
    phi % 相位差
    E1,E2,E % 合成波
    I,I0 % 光强
end
```

在其他函数中调用全局变量时, 都需要加一个前缀`app.`, 包括函数名和组件的调用.

点击代码浏览器一个绿色的+号, app选择`YoungS`(工程的名字),回调选`StartupFcn`, 添加初始函数. 

![在这里插入图片描述](https://img-blog.csdnimg.cn/e65ca271abf141e4b57aa60765fab91b.png)

在启动函数第一行我们可以显示原理图`imshow('杨氏双缝干涉.png','Parent',app.UIAxes3);`, 和matlab代码其实一样, 只是最后多了`app.UIAxes3`, 就是图像要显示到哪一个窗口, 窗口对应的窗口名可在组件浏览器看到.

然后就是计算显示部分, 所有全局变量的调用都带有前缀`app.`
```matlab
function startupFcn(app)
    app.Xmax = 3 * 600*1e-9 * app.D/app.d;
    app.Ymax = app.Xmax;
    app.Tmax = app.Xmax;
    %坐标取样1001份
    app.x = linspace(-app.Xmax, app.Xmax, 1001);
    app.y = linspace(-app.Ymax, app.Ymax, 1001);
    app.t = linspace(-app.Tmax, app.Tmax, 1001);
    %生成二维网格
    [app.x, app.y] = meshgrid(app.x, app.y);
    %计算复振幅
    app.r1 = sqrt((app.x+app.d/2).^2+app.D^2);
    app.r2 = sqrt((app.x-app.d/2).^2+app.D^2);
    app.phi = 2*pi*(app.r2-app.r1)/app.Lambda;
    app.E1 = 1;
    app.E2 = 1 * exp(-1i * app.phi);
    app.E = app.E1 + app.E2;
    %合成波光强
    app.I = abs(app.E) .^ 2;
    Imax1 = max(max(app.I));app.I = app.I ./ Imax1;
```

然后再显示到两个坐标图组件上
```matlab
imshow(app.I,'Parent',app.UIAxes);
app.I0 = app.I(501, :);
axis(app.UIAxes2,[-0.0018,0.0018,0,1]);
plot(app.UIAxes2,app.t, app.I0);
```

这时点一下菜单栏的运行, 就会以默认值绘图

![在这里插入图片描述](https://img-blog.csdnimg.cn/7186efd7bc2246ca834c29797a0ec89d.png)

这时三个滑块还是没有作用的, 我们回到设计视图, 右击光波长滑块, 添加回调函数`ValueChangingFcn`, 意思是每当这个滑块被拖动, 值发生改变, 就会执行这个函数, 另一个`ValueChangedFcn`则是滑块拖动结束时才执行一次函数.

![在这里插入图片描述](https://img-blog.csdnimg.cn/56ae5a6015b046798a98f5b9683a6c2d.png)

在代码视图中找到刚刚添加的回调函数, `event.Value`是此刻滑块的数值, 我们获取他并再次计算绘图
```matlab
function T1LambdaValueChanging(app, event)
    %% T1 波长（典型值：600）
    app.Lambda = event.Value * 1e-9; % 获取改变的波长值
    app.phi = 2*pi*(app.r2-app.r1)/app.Lambda;
    app.E2 = 1 * exp(-1i * app.phi);
    app.E = app.E1 + app.E2;
    %合成波光强
    app.I = abs(app.E) .^ 2;
    Imax1 = max(max(app.I));app.I = app.I ./ Imax1;
    imshow(app.I,'Parent',app.UIAxes);
    app.I0 = app.I(501, :);
    plot(app.UIAxes2,app.t, app.I0);
```
这时再运行, 每次拖动这个滑块时都会执行一次回调函数并重新绘图, 就可以查看干涉条纹随波长变化的实时变化了.

![](https://img-blog.csdnimg.cn/55ab432f8c8544bda32d3e4a01fe1ea5.gif)

剩下两个滑块的原理也是一样的, 自行添加即可.

# 打包
在上方**设计工具** - 共享可以看到三个打包选项
## MATLAB App
![在这里插入图片描述](https://img-blog.csdnimg.cn/425ab7a00d6f46bc848942d4102c8faf.png)

第一个可以得到一个`mlappinstall`文件, 可以在matlab主界面的app处安装, 之后在这里可以打开使用

![在这里插入图片描述](https://img-blog.csdnimg.cn/1ce0be461c1747e8976cdba15f1156b1.png)

## 独立桌面 APP

这里生成的是一个exe文件, 可以自定义启动界面和图标, 但exe文件需要matlab的runtime运行环境, 还是需要在有matlab的设备上, 或者将运行环境整个打包, 但这样软件体积就会非常庞大.

# 下载
关注公众号**小电动车**,下载工程文件

![](https://img-blog.csdnimg.cn/04fe96b678d3405cb2ed6c4f2bfb09b9.png)