集成计算器，日期差，绘制函数图像功能的Matlab App Designer 开发

目录

一、引言

         1.实验背景

2.实验内容

二、实验过程

1.实验原理

2.Matlab代码

（1）Matlab关键代码解读

（2）完整代码

三、运行输出结果

---

一、引言

1.实验背景

本实验的构思启发来源于自身日常生活与学习。

（1）开发计算器功能的实验背景

本人平时极大依赖ipad来学习等，但少有人知道的是，ipad上缺乏很基础的计算器App，而本人在日常生活中会涉及记账，题目运算，时间规划等事项对计算器的需要，所以决定将开发计算器作为实验内容。

（2）计算日差功能的实验背景

生活中，在一些有截止日期的重要事情上，以及亲戚朋友的生日，假期时长等，我们往往需要清楚或了解距离截止日期还剩多少天，生日还有多久到来，寒暑假有多长，或还剩多少假期，以便我们更合理地规划和利用时间，来处理与准备待办事项。因此本人决定开发可以计算日期差的功能。

（3）开发函数图像绘制功能的实验背景

在学习数学过程中，为了我们更好地理解函数的性质，对复杂函数的可视化，尤其是三维函数图像，来降低空间想象的难度，本人于是决定开发绘制函数图像的功能来助力于数学的学习。

2.实验内容

综合上面的实验背景介绍，可以概括本实验内容包括：

（1）基础计算器功能的开发

（2）日期差，倒数日的计算功能开发

（3）二维和三维函数图像绘制功能的开发

从开发实验的便捷度，功能的使用频率等因素综合考虑，决定将集三种功能为一体的App开发作为实验框架内容。

二、实验过程

1.实验原理

Matlab的App Designer板块可以为我们提供App制作平台。

（1）计算器

计算器功能包括加减乘除四则运算，功能键有清空，退格，小数点等，此外还有一个显示屏显示要运算的式子和运算结果。

（2）日期差计算

需要确定的基本数据是起始日期和截止日期，通过两者可以计算出相差天数。

（3）函数图像绘制

输入需要一个函数表达式，一元函数或二元函数，函数图像的显示需要给出一个坐标区。

2.Matlab代码

（1）Matlab关键代码解读

①计算器代码

计算器的10个基础数字的输入需要显示在显示屏上，可以通过数字字符赋值于编

辑字段中。例如数字1按键的回调函数代码如下：

 

strcat函数接续了前面的输入，并整个输出在编辑字段中。其余9个数字按钮，小数点按钮和运算符号按钮同理，只需将单引号里的内容更改为对应数字或符号。

退格按钮的回调函数设计思路是只输出字符数组前n-1个字符，n为字符数组长度，其代码如下：

清空按钮的回调函数即将空字符赋值于编辑字段中：

等于按钮的实现路径是利用eval函数执行输入的字符串语句得到数值型运算结果，再将运算结果转换为字符赋值于编辑字段中，

②日期差计算代码

通过日期选择器组件可以实现起始与截止日期的选择，datenum函数可以得出一个日期相较于0000 年 1 月 0 日的天数，两个日期得到的天数之差亦是两个日期之间的天数差值。

③函数图像绘制代码

同理用eval函数实现输入的函数表达式的执行，其产生因变量y或z的图像绘制的数据，由默认输入格式y=...,z=...，辨别出是一元函数还是二元函数的实现思路是判断输入的字符数组第一个元素是y还是z。

其中由于绘出的三维图像过于黑导致难以辨识，通过FaceAlpha调节透明度可淡化黑色，使图像清晰。改善前后对比如下：

         

此外，值得一提的是，为了使界面更加的美观，本人采取了渐变色的颜色搭配方案，

其中每一个按键背景色都是一个一个精心选取与调整的结果，输出界面如下所示：

（2）完整代码

完整代码如下：

classdef app2 < matlab.apps.AppBase

% Properties that correspond to app components
properties (Access = public)
UIFigure matlab.ui.Figure
Label_2 matlab.ui.control.Label
DatePicker matlab.ui.control.DatePicker
DatePicker_2Label matlab.ui.control.Label
DatePicker_2 matlab.ui.control.DatePicker
calculatedate matlab.ui.control.Button
tianshu matlab.ui.control.NumericEditField
Panel matlab.ui.container.Panel
num1 matlab.ui.control.Button
xianshi matlab.ui.control.EditField
num2 matlab.ui.control.Button
plus matlab.ui.control.Button
equal matlab.ui.control.Button
backspace matlab.ui.control.Button
clear matlab.ui.control.Button
num3 matlab.ui.control.Button
sub matlab.ui.control.Button
multiply matlab.ui.control.Button
devide matlab.ui.control.Button
num4 matlab.ui.control.Button
num5 matlab.ui.control.Button
num6 matlab.ui.control.Button
num7 matlab.ui.control.Button
num8 matlab.ui.control.Button
num9 matlab.ui.control.Button
num0 matlab.ui.control.Button
point matlab.ui.control.Button
picture matlab.ui.control.UIAxes
func matlab.ui.control.EditField
draw matlab.ui.control.Button
expression matlab.ui.control.Label
end

% Callbacks that handle component events
methods (Access = private)

% Button pushed function: calculatedate
function calculatedatePushed(app, event)
app.tianshu.Value=datenum(app.DatePicker_2.Value)-datenum(app.DatePicker.Value);
end

% Button pushed function: num1
function num1Pushed(app, event)
text=app.xianshi.Value;
text=strcat(text,'1');
app.xianshi.Value=text;
end

% Button pushed function: num2
function num2ButtonPushed(app, event)
text=app.xianshi.Value;
text=strcat(text,'2');
app.xianshi.Value=text;
end

% Button pushed function: plus
function plusButtonPushed(app, event)
text=app.xianshi.Value;
text=strcat(text,'+');
app.xianshi.Value=text;
end

% Button pushed function: equal
function equalButtonPushed(app, event)
text=app.xianshi.Value;
text=eval(text);
app.xianshi.Value=num2str(text);
end

% Button pushed function: backspace
function backspaceButtonPushed(app, event)
text=app.xianshi.Value;
n=length(text);
text=text(1:n-1);
app.xianshi.Value=text;
end

% Button pushed function: clear
function clearButtonPushed(app, event)
app.xianshi.Value=' ';
end

% Button pushed function: draw
function drawButtonPushed(app, event)
expression=app.func.Value;
switch expression(1)
case 'y'
x=0:0.1:15;
eval(expression);
plot(app.picture,x,y);
case 'z'
[x,y]=meshgrid(0:0.1:15,0:0.1:15);
eval(expression);
surf(app.picture,x,y,z,'FaceAlpha',0.99);
end
end

% Button pushed function: num4
function num4ButtonPushed(app, event)
text=app.xianshi.Value;
text=strcat(text,'4');
app.xianshi.Value=text;
end

% Button pushed function: num3
function num3ButtonPushed(app, event)
text=app.xianshi.Value;
text=strcat(text,'3');
app.xianshi.Value=text; 
end

% Button pushed function: num5
function num5ButtonPushed(app, event)
text=app.xianshi.Value;
text=strcat(text,'5');
app.xianshi.Value=text;
end

% Button pushed function: num6
function num6ButtonPushed(app, event)
text=app.xianshi.Value;
text=strcat(text,'6');
app.xianshi.Value=text; 
end

% Button pushed function: num7
function num7ButtonPushed(app, event)
text=app.xianshi.Value;
text=strcat(text,'7');
app.xianshi.Value=text;
end

% Button pushed function: num8
function num8ButtonPushed(app, event)
text=app.xianshi.Value;
text=strcat(text,'8');
app.xianshi.Value=text;
end

% Button pushed function: num9
function num9ButtonPushed(app, event)
text=app.xianshi.Value;
text=strcat(text,'9');
app.xianshi.Value=text;
end

% Button pushed function: num0
function num0ButtonPushed(app, event)
text=app.xianshi.Value;
text=strcat(text,'0');
app.xianshi.Value=text;
end

% Button pushed function: point
function pointButtonPushed(app, event)
text=app.xianshi.Value;
text=strcat(text,'.');
app.xianshi.Value=text;
end

% Button pushed function: sub
function subButtonPushed(app, event)
text=app.xianshi.Value;
text=strcat(text,'-');
app.xianshi.Value=text;
end

% Button pushed function: multiply
function multiplyButtonPushed(app, event)
text=app.xianshi.Value;
text=strcat(text,'*');
app.xianshi.Value=text;
end

% Button pushed function: devide
function devideButtonPushed(app, event)
text=app.xianshi.Value;
text=strcat(text,'/');
app.xianshi.Value=text;
end
end

% Component initialization
methods (Access = private)

% Create UIFigure and components
function createComponents(app)

% Create UIFigure and hide until all components are created
app.UIFigure = uifigure('Visible', 'off');
app.UIFigure.Color = [0.6 0.5922 0.5922];
app.UIFigure.Position = [100 100 637 572];
app.UIFigure.Name = 'MATLAB App';

% Create Label_2
app.Label_2 = uilabel(app.UIFigure);
app.Label_2.BackgroundColor = [0.7373 0.8941 0.9608];
app.Label_2.HorizontalAlignment = 'right';
app.Label_2.Position = [375 484 53 22];
app.Label_2.Text = '起始日期';

% Create DatePicker
app.DatePicker = uidatepicker(app.UIFigure);
app.DatePicker.BackgroundColor = [0.7373 0.8941 0.9608];
app.DatePicker.Position = [443 486 150 22];

% Create DatePicker_2Label
app.DatePicker_2Label = uilabel(app.UIFigure);
app.DatePicker_2Label.BackgroundColor = [0.5725 0.8314 0.9412];
app.DatePicker_2Label.HorizontalAlignment = 'right';
app.DatePicker_2Label.Position = [375 437 53 22];
app.DatePicker_2Label.Text = '截止日期';

% Create DatePicker_2
app.DatePicker_2 = uidatepicker(app.UIFigure);
app.DatePicker_2.BackgroundColor = [0.5725 0.8314 0.9412];
app.DatePicker_2.Position = [443 437 150 22];

% Create calculatedate
app.calculatedate = uibutton(app.UIFigure, 'push');
app.calculatedate.ButtonPushedFcn = createCallbackFcn(app, @calculatedatePushed, true);
app.calculatedate.BackgroundColor = [0.451 0.7804 0.9216];
app.calculatedate.Position = [375 383 61 26];
app.calculatedate.Text = '相差天数';

% Create tianshu
app.tianshu = uieditfield(app.UIFigure, 'numeric');
app.tianshu.BackgroundColor = [0.4039 0.7529 0.902];
app.tianshu.Position = [443 385 150 22];

% Create Panel
app.Panel = uipanel(app.UIFigure);
app.Panel.Title = '计算器';
app.Panel.BackgroundColor = [0.902 0.9255 0.9294];
app.Panel.FontName = '新宋体';
app.Panel.FontSize = 14;
app.Panel.Position = [15 62 315 446];

% Create num1
app.num1 = uibutton(app.Panel, 'push');
app.num1.ButtonPushedFcn = createCallbackFcn(app, @num1Pushed, true);
app.num1.BackgroundColor = [0.6549 0.7961 0.851];
app.num1.Position = [23 221 55 37];
app.num1.Text = '1';

% Create xianshi
app.xianshi = uieditfield(app.Panel, 'text');
app.xianshi.HorizontalAlignment = 'right';
app.xianshi.Position = [23 345 270 42];

% Create num2
app.num2 = uibutton(app.Panel, 'push');
app.num2.ButtonPushedFcn = createCallbackFcn(app, @num2ButtonPushed, true);
app.num2.BackgroundColor = [0.5804 0.7647 0.8392];
app.num2.Position = [95 220 55 38];
app.num2.Text = '2';

% Create plus
app.plus = uibutton(app.Panel, 'push');
app.plus.ButtonPushedFcn = createCallbackFcn(app, @plusButtonPushed, true);
app.plus.BackgroundColor = [0.3804 0.6745 0.7882];
app.plus.FontSize = 20;
app.plus.Position = [242 220 51 38];
app.plus.Text = '+';

% Create equal
app.equal = uibutton(app.Panel, 'push');
app.equal.ButtonPushedFcn = createCallbackFcn(app, @equalButtonPushed, true);
app.equal.BackgroundColor = [0.1451 0.5569 0.7216];
app.equal.Position = [169 60 55 37];
app.equal.Text = '=';

% Create backspace
app.backspace = uibutton(app.Panel, 'push');
app.backspace.ButtonPushedFcn = createCallbackFcn(app, @backspaceButtonPushed, true);
app.backspace.BackgroundColor = [0.6275 0.8 0.8706];
app.backspace.Position = [169 269 127 39];
app.backspace.Text = '退格';

% Create clear
app.clear = uibutton(app.Panel, 'push');
app.clear.ButtonPushedFcn = createCallbackFcn(app, @clearButtonPushed, true);
app.clear.BackgroundColor = [0.7647 0.8549 0.8902];
app.clear.FontColor = [0.149 0.149 0.149];
app.clear.Position = [23 269 127 39];
app.clear.Text = '清空';

% Create num3
app.num3 = uibutton(app.Panel, 'push');
app.num3.ButtonPushedFcn = createCallbackFcn(app, @num3ButtonPushed, true);
app.num3.BackgroundColor = [0.5176 0.7333 0.8196];
app.num3.Position = [169 221 55 37];
app.num3.Text = '3';

% Create sub
app.sub = uibutton(app.Panel, 'push');
app.sub.ButtonPushedFcn = createCallbackFcn(app, @subButtonPushed, true);
app.sub.BackgroundColor = [0.2627 0.6118 0.749];
app.sub.FontSize = 20;
app.sub.Position = [242 163 51 38];
app.sub.Text = '-';

% Create multiply
app.multiply = uibutton(app.Panel, 'push');
app.multiply.ButtonPushedFcn = createCallbackFcn(app, @multiplyButtonPushed, true);
app.multiply.BackgroundColor = [0.1412 0.6 0.7804];
app.multiply.FontSize = 20;
app.multiply.Position = [242 109 51 38];
app.multiply.Text = '×';

% Create devide
app.devide = uibutton(app.Panel, 'push');
app.devide.ButtonPushedFcn = createCallbackFcn(app, @devideButtonPushed, true);
app.devide.BackgroundColor = [0.0431 0.549 0.749];
app.devide.FontSize = 20;
app.devide.Position = [242 59 51 38];
app.devide.Text = '÷';

% Create num4
app.num4 = uibutton(app.Panel, 'push');
app.num4.ButtonPushedFcn = createCallbackFcn(app, @num4ButtonPushed, true);
app.num4.BackgroundColor = [0.5333 0.7686 0.8588];
app.num4.Position = [23 163 55 37];
app.num4.Text = '4';

% Create num5
app.num5 = uibutton(app.Panel, 'push');
app.num5.ButtonPushedFcn = createCallbackFcn(app, @num5ButtonPushed, true);
app.num5.BackgroundColor = [0.3922 0.698 0.8196];
app.num5.Position = [95 162 55 38];
app.num5.Text = '5';

% Create num6
app.num6 = uibutton(app.Panel, 'push');
app.num6.ButtonPushedFcn = createCallbackFcn(app, @num6ButtonPushed, true);
app.num6.BackgroundColor = [0.3373 0.6549 0.7804];
app.num6.Position = [169 163 55 37];
app.num6.Text = '6';

% Create num7
app.num7 = uibutton(app.Panel, 'push');
app.num7.ButtonPushedFcn = createCallbackFcn(app, @num7ButtonPushed, true);
app.num7.BackgroundColor = [0.4431 0.7333 0.851];
app.num7.Position = [23 109 55 37];
app.num7.Text = '7';

% Create num8
app.num8 = uibutton(app.Panel, 'push');
app.num8.ButtonPushedFcn = createCallbackFcn(app, @num8ButtonPushed, true);
app.num8.BackgroundColor = [0.2941 0.6706 0.8196];
app.num8.Position = [95 108 55 38];
app.num8.Text = '8';

% Create num9
app.num9 = uibutton(app.Panel, 'push');
app.num9.ButtonPushedFcn = createCallbackFcn(app, @num9ButtonPushed, true);
app.num9.BackgroundColor = [0.2353 0.6235 0.7804];
app.num9.Position = [169 109 55 37];
app.num9.Text = '9';

% Create num0
app.num0 = uibutton(app.Panel, 'push');
app.num0.ButtonPushedFcn = createCallbackFcn(app, @num0ButtonPushed, true);
app.num0.BackgroundColor = [0.3294 0.6824 0.8196];
app.num0.Position = [23 58 55 37];
app.num0.Text = '0';

% Create point
app.point = uibutton(app.Panel, 'push');
app.point.ButtonPushedFcn = createCallbackFcn(app, @pointButtonPushed, true);
app.point.BackgroundColor = [0.2353 0.6235 0.7804];
app.point.FontSize = 20;
app.point.Position = [95 58 55 38];
app.point.Text = '.';

% Create picture
app.picture = uiaxes(app.UIFigure);
title(app.picture, '函数图像（二维/三维）')
xlabel(app.picture, {''; ''})
ylabel(app.picture, {''; ''})
app.picture.PlotBoxAspectRatio = [1.72839506172839 1 1];
app.picture.FontName = '微软雅黑';
app.picture.FontSize = 10;
app.picture.Color = [0.9882 0.9882 0.9882];
app.picture.TitleFontWeight = 'bold';
app.picture.BackgroundColor = [0.6 0.5882 0.5882];
app.picture.Position = [342 145 271 239];

% Create func
app.func = uieditfield(app.UIFigure, 'text');
app.func.BackgroundColor = [0.3529 0.7059 0.8588];
app.func.Position = [456 120 146 23];
app.func.Value = 'y=cos(x)';

% Create draw
app.draw = uibutton(app.UIFigure, 'push');
app.draw.ButtonPushedFcn = createCallbackFcn(app, @drawButtonPushed, true);
app.draw.BackgroundColor = [0.2941 0.698 0.8706];
app.draw.Position = [523 70 79 34];
app.draw.Text = '生成函数图像';

% Create expression
app.expression = uilabel(app.UIFigure);
app.expression.BackgroundColor = [0.3765 0.7294 0.8784];
app.expression.Position = [384 120 69 22];
app.expression.Text = '函数表达式:';

% Show the figure after all components are created
app.UIFigure.Visible = 'on';
end
end

% App creation and deletion
methods (Access = public)

% Construct app
function app = app2

% Create UIFigure and components
createComponents(app)

% Register the app with App Designer
registerApp(app, app.UIFigure)

if nargout == 0
clear app
end
end

% Code that executes before app deletion
function delete(app)

% Delete UIFigure when app is deleted
delete(app.UIFigure)
end
end
end

三、运行输出结果

输出结果如下：

其中未输入参数的初始界面如前文图中所示。

  输入各参数运算前  

  

 点击‘=’键，‘相差天数’键，‘生成函数图像’键运算后

打包后形成app文件，App桌面样式如下图：