TRABAJO EXTRA CLASE NRO.

Datos informativos:
Nombres y Apellidos: Ariana Isabel Córdova Córdova

Fecha: 2022-02-01

Tema: App Designer

Titulación: Electrónica y Telecomunicaciones

Calificación: 10/10

Problemas:

Problema 1
9.5 Escriba una interface gráfica en la que se lea alguna de las funciones trigonométricas y se grafique en
un rango dado por el usuario. Se debe leer la función como: sen(2*pi*x), cos(2*pi*x), tan(2*pi*x), cot(2*pi*x),
sec(2*pi*x), csc(2*pi*x).

Diseño:

Código:

1
classdef Tarea2_App1 < matlab.apps.AppBase

% Properties that correspond to app components

properties (Access = public)
FuncionesTrigonomtricasUIFigure matlab.ui.Figure
Titulo matlab.ui.control.Label
Instrucciones matlab.ui.control.Label
RangodexEditFieldLabel matlab.ui.control.Label
RangoEditField matlab.ui.control.EditField
FuncinEditFieldLabel matlab.ui.control.Label
FuncionEditField matlab.ui.control.EditField
GraficarButton matlab.ui.control.Button
UIAxes matlab.ui.control.UIAxes
end

% Callbacks that handle component events

methods (Access = private)

% Button pushed function: GraficarButton

function GraficarButtonPushed(app, event)
x= eval(app.RangoEditField.Value);
funcion=eval(app.FuncionEditField.Value);
plot(app.UIAxes,x,funcion)
title(app.UIAxes,app.FuncionEditField.Value)
ylim(app.UIAxes,[-10 10])
end
end

% Component initialization
methods (Access = private)

% Create UIFigure and components

function createComponents(app)

% Create FuncionesTrigonomtricasUIFigure and hide until all components are created

app.FuncionesTrigonomtricasUIFigure = uifigure('Visible', 'off');
app.FuncionesTrigonomtricasUIFigure.Position = [100 100 677 346];
app.FuncionesTrigonomtricasUIFigure.Name = 'Funciones Trigonométricas';

% Create Titulo
app.Titulo = uilabel(app.FuncionesTrigonomtricasUIFigure);
app.Titulo.FontWeight = 'bold';
app.Titulo.Position = [241 305 199 22];
app.Titulo.Text = 'FUNCIONES TRIGONOMÉTRICAS';

% Create Instrucciones
app.Instrucciones = uilabel(app.FuncionesTrigonomtricasUIFigure);
app.Instrucciones.Position = [39 167 652 147];
app.Instrucciones.Text = {'Intrucciones:Ingrese una función a graficar como: '; ''; 'sin(2*pi*x) ';...
'cos(2*pi*x)'; 'tan(2*pi*x)'; 'cot(2*pi*x)'; 'sec(2*pi*x)'; 'csc(2*pi*x)'};

% Create RangodexEditFieldLabel
app.RangodexEditFieldLabel = uilabel(app.FuncionesTrigonomtricasUIFigure);
app.RangodexEditFieldLabel.HorizontalAlignment = 'right';
app.RangodexEditFieldLabel.FontWeight = 'bold';
app.RangodexEditFieldLabel.Position = [29 154 70 22];
app.RangodexEditFieldLabel.Text = 'Rango de x';

2
% Create RangoEditField
app.RangoEditField = uieditfield(app.FuncionesTrigonomtricasUIFigure, 'text');
app.RangoEditField.Position = [120 154 125 22];

% Create FuncinEditFieldLabel
app.FuncinEditFieldLabel = uilabel(app.FuncionesTrigonomtricasUIFigure);
app.FuncinEditFieldLabel.HorizontalAlignment = 'right';
app.FuncinEditFieldLabel.FontWeight = 'bold';
app.FuncinEditFieldLabel.Position = [29 120 52 22];
app.FuncinEditFieldLabel.Text = 'Función';

% Create FuncionEditField
app.FuncionEditField = uieditfield(app.FuncionesTrigonomtricasUIFigure, 'text');
app.FuncionEditField.Position = [120 120 125 22];

% Create GraficarButton
app.GraficarButton = uibutton(app.FuncionesTrigonomtricasUIFigure, 'push');
app.GraficarButton.ButtonPushedFcn = createCallbackFcn(app, @GraficarButtonPushed, true);
app.GraficarButton.Position = [87 74 100 22];
app.GraficarButton.Text = 'Graficar';

% Create UIAxes
app.UIAxes = uiaxes(app.FuncionesTrigonomtricasUIFigure);
title(app.UIAxes, 'Title')
xlabel(app.UIAxes, 'x')
ylabel(app.UIAxes, 'f(x)')
app.UIAxes.Position = [309 57 353 217];

% Show the figure after all components are created

app.FuncionesTrigonomtricasUIFigure.Visible = 'on';
end
end

% App creation and deletion

methods (Access = public)

% Construct app
function app = Tarea2_App1

% Create UIFigure and components

createComponents(app)

% Register the app with App Designer

registerApp(app, app.FuncionesTrigonomtricasUIFigure)

if nargout == 0
clear app
end
end

% Code that executes before app deletion

function delete(app)

% Delete UIFigure when app is deleted

delete(app.FuncionesTrigonomtricasUIFigure)
end
end
end

3
Ejecución:

4
Se estableció los límites de y de -10 a 10 para obtener mejores gráficas, ya que si no se colocaba límites en y
se obtenían gráficas similares a la figura siguiente:

5
16. Escriba una función que cree una GUI para calcular el área de un rectángulo. Debería tener cuadros de
texto de edición para la longitud y el ancho, y un botón que haga que el área se calcule en un cuadro de texto
estático.

Diseño:

Código:
classdef Tarea2_App2 < matlab.apps.AppBase

% Properties that correspond to app components

properties (Access = public)
RectnguloUIFigure matlab.ui.Figure
TituloLabel matlab.ui.control.Label
LargoEditFieldLabel matlab.ui.control.Label
LargoEditField matlab.ui.control.NumericEditField
AnchoEditField matlab.ui.control.NumericEditField
AnchoEditFieldLabel matlab.ui.control.Label
CalcularButton matlab.ui.control.Button
reaEditFieldLabel matlab.ui.control.Label
AreaEditField matlab.ui.control.NumericEditField
Label matlab.ui.control.Label
MensajeTextArea matlab.ui.control.TextArea
UnidadEditFieldLabel matlab.ui.control.Label
UnidadEditField matlab.ui.control.EditField

6
Image matlab.ui.control.Image
end

% Callbacks that handle component events

methods (Access = private)

% Button pushed function: CalcularButton

function CalcularButtonPushed(app, event)
app.AreaEditField.Value=app.LargoEditField.Value*app.AnchoEditField.Value;
unidad=app.UnidadEditField.Value;
app.MensajeTextArea.Value=['El rectangulo cuyo largo y ancho es ',...
num2str(app.LargoEditField.Value)...
' y ',num2str(app.AnchoEditField.Value), unidad,' respectivamente, ',...
' su area es igual a ',...
num2str(app.AreaEditField.Value),unidad];
end
end

% Component initialization
methods (Access = private)

% Create UIFigure and components

function createComponents(app)

% Create RectnguloUIFigure and hide until all components are created

app.RectnguloUIFigure = uifigure('Visible', 'off');
app.RectnguloUIFigure.Position = [100 100 640 246];
app.RectnguloUIFigure.Name = 'Rectángulo';

% Create TituloLabel
app.TituloLabel = uilabel(app.RectnguloUIFigure);
app.TituloLabel.FontSize = 18;
app.TituloLabel.FontWeight = 'bold';
app.TituloLabel.Position = [217 199 208 22];
app.TituloLabel.Text = 'Área de un Rectángulo ';

% Create LargoEditFieldLabel
app.LargoEditFieldLabel = uilabel(app.RectnguloUIFigure);
app.LargoEditFieldLabel.HorizontalAlignment = 'right';
app.LargoEditFieldLabel.Position = [60 150 36 22];
app.LargoEditFieldLabel.Text = 'Largo';

% Create LargoEditField
app.LargoEditField = uieditfield(app.RectnguloUIFigure, 'numeric');
app.LargoEditField.Position = [111 150 100 22];

% Create AnchoEditField
app.AnchoEditField = uieditfield(app.RectnguloUIFigure, 'numeric');
app.AnchoEditField.Position = [111 111 100 22];

% Create AnchoEditFieldLabel
app.AnchoEditFieldLabel = uilabel(app.RectnguloUIFigure);
app.AnchoEditFieldLabel.HorizontalAlignment = 'right';
app.AnchoEditFieldLabel.Position = [53 111 43 22];
app.AnchoEditFieldLabel.Text = 'Ancho ';

% Create CalcularButton
app.CalcularButton = uibutton(app.RectnguloUIFigure, 'push');

7
app.CalcularButton.ButtonPushedFcn = createCallbackFcn(app, @CalcularButtonPushed, true);
app.CalcularButton.Position = [111 35 100 22];
app.CalcularButton.Text = 'Calcular';

% Create reaEditFieldLabel
app.reaEditFieldLabel = uilabel(app.RectnguloUIFigure);
app.reaEditFieldLabel.HorizontalAlignment = 'right';
app.reaEditFieldLabel.Position = [287 129 31 22];
app.reaEditFieldLabel.Text = 'Área';

% Create AreaEditField
app.AreaEditField = uieditfield(app.RectnguloUIFigure, 'numeric');
app.AreaEditField.Editable = 'off';
app.AreaEditField.Position = [333 129 100 22];

% Create Label
app.Label = uilabel(app.RectnguloUIFigure);
app.Label.Position = [299 23 307 64];
app.Label.Text = '';

% Create MensajeTextArea
app.MensajeTextArea = uitextarea(app.RectnguloUIFigure);
app.MensajeTextArea.Position = [333 35 265 50];

% Create UnidadEditFieldLabel
app.UnidadEditFieldLabel = uilabel(app.RectnguloUIFigure);
app.UnidadEditFieldLabel.HorizontalAlignment = 'right';
app.UnidadEditFieldLabel.Position = [52 75 44 22];
app.UnidadEditFieldLabel.Text = 'Unidad';

% Create UnidadEditField
app.UnidadEditField = uieditfield(app.RectnguloUIFigure, 'text');
app.UnidadEditField.Position = [111 75 100 22];

% Create Image
app.Image = uiimage(app.RectnguloUIFigure);
app.Image.Position = [460 129 146 118];
app.Image.ImageSource = 'tar2.png';

% Show the figure after all components are created

app.RectnguloUIFigure.Visible = 'on';
end
end

% App creation and deletion

methods (Access = public)

% Construct app
function app = Tarea2_App2

% Create UIFigure and components

createComponents(app)

% Register the app with App Designer

registerApp(app, app.RectnguloUIFigure)

if nargout == 0
clear app

8
 end
end

% Code that executes before app deletion

function delete(app)

% Delete UIFigure when app is deleted

delete(app.RectnguloUIFigure)
end
end
end

Ejecución:

19. El factor de sensación térmica (WFC) mide qué tan frío se siente con una temperatura del aire T (en °F) y
una velocidad del viento (V, en millas/h) dadas. La fórmula es aproximadamente

WCF=35.7+0.6T-35.7 (V^0.16)+0.43T (V^0.16)

Escriba una función Gui que muestre controles deslizantes para la temperatura y la velocidad del viento. la
interfaz gráfica de usuario calculará WCF para los valores dados y mostrará el resultado en un cuadro de texto.
Elija valores mínimos y máximos apropiados para los dos controles deslizantes.

Diseño:

9
Código:
classdef Tarea2_App3 < matlab.apps.AppBase

% Properties that correspond to app components

properties (Access = public)
WCFUIFigure matlab.ui.Figure
TituloLabel matlab.ui.control.Label
TemperaturaSliderLabel matlab.ui.control.Label
TemperaturaSlider matlab.ui.control.Slider
VelocidaddelvientoSliderLabel matlab.ui.control.Label
VelocidadSlider matlab.ui.control.Slider
TemperaturaLabel matlab.ui.control.Label
VelocidadLabel matlab.ui.control.Label
WCFEditFieldLabel matlab.ui.control.Label
WCFEditField matlab.ui.control.NumericEditField
Image matlab.ui.control.Image
end

% Callbacks that handle component events

methods (Access = private)

% Callback function: TemperaturaSlider, VelocidadSlider

function TemperaturaSliderValueChanging(app, event)
% changingValue = event.Value;
% WCF=35.7+0.6T-35.7 (V^0.16)+0.43T (V^0.16)
app.WCFEditField.Value=35.7+0.6*app.TemperaturaSlider.Value...
-35.7*((app.VelocidadSlider.Value).^(0.16))+...
0.43*(app.TemperaturaSlider.Value)*(app.VelocidadSlider.Value).^(0.16);
app.TemperaturaLabel.Text=[num2str(app.TemperaturaSlider.Value),' °F '];
app.VelocidadLabel.Text=[num2str(app.VelocidadSlider.Value),' mill/h '];
end
end

% Component initialization
methods (Access = private)

% Create UIFigure and components

function createComponents(app)

% Create WCFUIFigure and hide until all components are created

app.WCFUIFigure = uifigure('Visible', 'off');
app.WCFUIFigure.Position = [100 100 640 264];
app.WCFUIFigure.Name = 'WCF';

% Create TituloLabel
app.TituloLabel = uilabel(app.WCFUIFigure);
app.TituloLabel.FontSize = 18;
app.TituloLabel.FontWeight = 'bold';
app.TituloLabel.Position = [191 223 259 22];
app.TituloLabel.Text = 'Factor de Sensación Térmica';

% Create TemperaturaSliderLabel
app.TemperaturaSliderLabel = uilabel(app.WCFUIFigure);
app.TemperaturaSliderLabel.HorizontalAlignment = 'right';
app.TemperaturaSliderLabel.Position = [23 163 73 22];
app.TemperaturaSliderLabel.Text = 'Temperatura';

10
% Create TemperaturaSlider
app.TemperaturaSlider = uislider(app.WCFUIFigure);
app.TemperaturaSlider.ValueChangingFcn = createCallbackFcn(app, @TemperaturaSliderValueChanging, true);
app.TemperaturaSlider.Position = [168 173 150 3];

% Create VelocidaddelvientoSliderLabel
app.VelocidaddelvientoSliderLabel = uilabel(app.WCFUIFigure);
app.VelocidaddelvientoSliderLabel.HorizontalAlignment = 'right';
app.VelocidaddelvientoSliderLabel.Position = [23 105 112 22];
app.VelocidaddelvientoSliderLabel.Text = 'Velocidad del viento';

% Create VelocidadSlider
app.VelocidadSlider = uislider(app.WCFUIFigure);
app.VelocidadSlider.ValueChangedFcn = createCallbackFcn(app, @TemperaturaSliderValueChanging, true);
app.VelocidadSlider.Position = [168 115 150 3];

% Create TemperaturaLabel
app.TemperaturaLabel = uilabel(app.WCFUIFigure);
app.TemperaturaLabel.Position = [380 163 116 22];
app.TemperaturaLabel.Text = '';

% Create VelocidadLabel
app.VelocidadLabel = uilabel(app.WCFUIFigure);
app.VelocidadLabel.Position = [380 105 125 22];
app.VelocidadLabel.Text = '';

% Create WCFEditFieldLabel
app.WCFEditFieldLabel = uilabel(app.WCFUIFigure);
app.WCFEditFieldLabel.HorizontalAlignment = 'right';
app.WCFEditFieldLabel.FontWeight = 'bold';
app.WCFEditFieldLabel.Position = [247 31 33 22];
app.WCFEditFieldLabel.Text = 'WCF';

% Create WCFEditField
app.WCFEditField = uieditfield(app.WCFUIFigure, 'numeric');
app.WCFEditField.Editable = 'off';
app.WCFEditField.Position = [294 31 100 22];

% Create Image
app.Image = uiimage(app.WCFUIFigure);
app.Image.Position = [515 85 100 100];
app.Image.ImageSource = 'tar2.jpeg';

% Show the figure after all components are created

app.WCFUIFigure.Visible = 'on';
end
end

% App creation and deletion

methods (Access = public)

% Construct app
function app = Tarea2_App3

% Create UIFigure and components

createComponents(app)

% Register the app with App Designer

11
 registerApp(app, app.WCFUIFigure)

if nargout == 0
clear app
end
end

% Code that executes before app deletion

function delete(app)

% Delete UIFigure when app is deleted

delete(app.WCFUIFigure)
end
end
end

Ejecución:

27. Utilice el Diseñador de aplicaciones para crear un editor de texto. Cree una aplicación que tenga un cuadro
de texto grande como se ve en la figura 13.47. Debajo habrá un control deslizante que controla el tamaño
de fuente del texto y botones para poner el texto en negrita y/o cursiva. Comience arrastrando un cuadro de
texto al área de diseño. Haga clic en el cuadro y, a continuación, en la Vista de diseño, observe el explorador
Propiedades de campo de edición (texto). Al cambiar las propiedades, como el estilo, el nombre y el tamaño, y
luego inspeccionar el código en la Vista de código, puede ver qué cambiar en las funciones de devolución de
llamada.

Diseño:

12
Código:
classdef Tarea2_App4 < matlab.apps.AppBase

% Properties that correspond to app components

properties (Access = public)
EdicindeFuenteUIFigure matlab.ui.Figure
TextoTextAreaLabel matlab.ui.control.Label
TextoTextArea matlab.ui.control.TextArea
TamaodefuenteSliderLabel matlab.ui.control.Label
TamanioDeFuenteSlider matlab.ui.control.Slider
BoldButton matlab.ui.control.Button
ItalicButton matlab.ui.control.Button
end

% Callbacks that handle component events

methods (Access = private)

% Button pushed function: BoldButton

function BoldButtonPushed(app, event)
app.TextoTextArea.FontWeight='bold';
app.TextoTextArea.FontAngle='normal';
end

% Button pushed function: ItalicButton

function ItalicButtonPushed(app, event)
app.TextoTextArea.FontAngle='italic';
app.TextoTextArea.FontWeight='normal';
end

% Value changing function: TamanioDeFuenteSlider

function TamanioDeFuenteSliderValueChanging(app, event)

13
app.TextoTextArea.FontSize=app.TamanioDeFuenteSlider.Value;
end
end

% Component initialization
methods (Access = private)

% Create UIFigure and components

function createComponents(app)

% Create EdicindeFuenteUIFigure and hide until all components are created

app.EdicindeFuenteUIFigure = uifigure('Visible', 'off');
app.EdicindeFuenteUIFigure.Position = [100 100 640 480];
app.EdicindeFuenteUIFigure.Name = 'Edición de Fuente';

% Create TextoTextAreaLabel
app.TextoTextAreaLabel = uilabel(app.EdicindeFuenteUIFigure);
app.TextoTextAreaLabel.HorizontalAlignment = 'right';
app.TextoTextAreaLabel.Position = [304 397 34 22];
app.TextoTextAreaLabel.Text = 'Texto';

% Create TextoTextArea
app.TextoTextArea = uitextarea(app.EdicindeFuenteUIFigure);
app.TextoTextArea.Position = [108 187 448 202];

% Create TamaodefuenteSliderLabel
app.TamaodefuenteSliderLabel = uilabel(app.EdicindeFuenteUIFigure);
app.TamaodefuenteSliderLabel.HorizontalAlignment = 'right';
app.TamaodefuenteSliderLabel.Position = [20 104 102 22];
app.TamaodefuenteSliderLabel.Text = 'Tamaño de fuente';

% Create TamanioDeFuenteSlider
app.TamanioDeFuenteSlider = uislider(app.EdicindeFuenteUIFigure);
app.TamanioDeFuenteSlider.Limits = [8 32];
app.TamanioDeFuenteSlider.ValueChangingFcn = createCallbackFcn(app, @TamanioDeFuenteSliderValueChanging, true)
app.TamanioDeFuenteSlider.Position = [143 113 150 3];
app.TamanioDeFuenteSlider.Value = 12;

% Create BoldButton
app.BoldButton = uibutton(app.EdicindeFuenteUIFigure, 'push');
app.BoldButton.ButtonPushedFcn = createCallbackFcn(app, @BoldButtonPushed, true);
app.BoldButton.FontWeight = 'bold';
app.BoldButton.Position = [375 94 100 22];
app.BoldButton.Text = 'Bold';

% Create ItalicButton
app.ItalicButton = uibutton(app.EdicindeFuenteUIFigure, 'push');
app.ItalicButton.ButtonPushedFcn = createCallbackFcn(app, @ItalicButtonPushed, true);
app.ItalicButton.FontAngle = 'italic';
app.ItalicButton.Position = [490 94 100 22];
app.ItalicButton.Text = 'Italic';

% Show the figure after all components are created

app.EdicindeFuenteUIFigure.Visible = 'on';
end
end

% App creation and deletion

14
 methods (Access = public)

% Construct app
function app = Tarea2_App4

% Create UIFigure and components

createComponents(app)

% Register the app with App Designer

registerApp(app, app.EdicindeFuenteUIFigure)

if nargout == 0
clear app
end
end

% Code that executes before app deletion

function delete(app)

% Delete UIFigure when app is deleted

delete(app.EdicindeFuenteUIFigure)
end
end
end

Ejecución:

Se ingresa el mensaje y por defecto el tamaño de la letra es 12

Con el slider se aumentó el tamaño de la fuente y se activó el boton de Bold que hace que el texto se coloque
en negrita.

15
Cuando se presiona el boton Italic, el texto aparece en cursiva y sin negrita.

16