Elaboracin de una interfaz grfica

PROGRAMA 1: CALCULADORA CON FUNCIONES MS COMUNES

1) Creando GUI y acondicionando los componentes

Luego de haber iniciado Matlab, y se presenta la ventana de trabajo, hacemos clic
en el icono

Seleccionamos la opcin Blank GUI es decir una GUI en blanco.

Aparece la ventana de trabajo.

Para modificar las propiedades de la figura como tamao y color de fondo.

Hacemos clic en el icono Property Inspector
ventana:

y nos muestra la siguiente

En la opcin Color, elegimos que color deseamos que tenga nuestro fondo de GUI.
El tamao podemos modificarlo en la opcin Position, o tambin podemos darle
forma en la misma ventana de trabajo, arrastrando el icono de la parte inferior
derecha.

Modificando el color y el tamao, se obtiene el fondo ideal de una calculadora.

Agregamos al rea del formulario, un statictext, el cual simular la pantalla de la

calculadora. Para ello hacemos clic en la opcin Static text y arrastramos, dndole
forma.

Agregamos en la parte inferior 19 pushbutton, 3 filas de 5 y una fila de 4

pushbutton.

Luego agregamos 10 pushbutton en 2 filas de 5 y un botn al lado derecho del

Static Text.

Para alinear los objetos podemos usar la opcin Align Objects. Seleccionamos
primero los pushbutton de la primera fila, para ello seleccionamos uno luego
pulsamos Control y seleccionamos los dems. Luego hacemos clic en el siguiente
icono
. Y nos aparece una ventana, seleccionamos la alineacin tanto
horizontal como vertical.

Hacemos lo mismo para cada columna, seleccionamos y alineamos tanto

verticalmente y horizontalmente.

Alineado todos los pushbutton, tenemos la siguiente GUI.

2) Fijando propiedades para cada control

Para modificar las propiedades de cada control, damos dobeclic sobre el objeto y
definimos los siguientes valores:
Para el static text
Tag
Text1

BackgroundColor FontName FontSize ForegroundColor String

Arial Black

20

Los pushbutton de la parte de abajo sern de color negro, tendrn el mismo formato
(son 17 pusbutton).
Tag

BackgroundColor FontName

cero

Arial Black

uno

FontSize ForegroundColor

String

Enable

20

off

Arial Black

20

off

dos

Arial Black

20

off

tres

Arial Black

20

off

cuatro

Arial Black

20

off

cinco

Arial Black

20

off

seis

Arial Black

20

off

siete

Arial Black

20

off

ocho

Arial Black

20

off

nueve

Arial Black

20

off

punto

Arial Black

20

off

pi

Arial Black

20

pi

off

suma

Arial Black

20

off

menos

Arial Black

20

off

multi

Arial Black

20

off

divi

Arial Black

20

off

igual

Arial Black

20

off

String

Enable

Y los de la tercera fila a la derecha, tienen el siguiente formato:

Tag

BackgroundColor FontName FontSize ForegroundColor

borrar

Arial Black

20

AC

off

off

Arial Black

20

OFF

off

Luego le damos formato, a los 10 pushbutton de las dos primeras filas.

Tag

BackgroundColor FontName FontSize ForegroundColor

String

Enable

log

Arial Black

20

log

off

lognatural

Arial Black

20

ln

off

cuadrado

Arial Black

20

x^2

off

inversa

Arial Black

20

x^-1

off

elevado

Arial Black

20

x^

off

paretensis 2

Arial Black

20

off

Parentesis1

Arial Black

20

off

seno

Arial Black

20

sin

off

coseno

Arial Black

20

cos

off

tangente

Arial Black

20

tan

off

String

Enable

on

on

Al pushbutton cerca del static text, le damos el siguiente formato:

Tag
on

BackgroundColor

FontName FontSize ForegroundColor

Arial Black

El diseo de nuestra calculadora sera el siguiente:

20

3) Guardando y Programando el GUI

Guardar el GUI con el nombre Calculadora, usando la opcin Save As del men File.

Aparece la siguiente ventana, con los callback:

Colocamos los cdigos necesarios en cada callback, en primer lugar colocamos el

cdigo del pushbutton on, debido a que todos los pushbutton estn bloqueados y
necesitamos activarlos, para poder utilizar la calculadora. Utilizamos la funcin set,
para la cual indicamos el pushbutton, la propiedad y el valor de la propiedad. Lo que
realiza esta funcin set fija el valor on para la propiedad enable, activando los
pushbutton.
function on_Callback(hObject, eventdata, handles)
set(handles.inversa,'enable','on')
set(handles.cero,'enable','on')
set(handles.uno,'enable','on')
set(handles.dos,'enable','on')
set(handles.tres,'enable','on')
set(handles.cuatro,'enable','on')
set(handles.cinco,'enable','on')
set(handles.seis,'enable','on')
set(handles.siete,'enable','on')
set(handles.ocho,'enable','on')
set(handles.nueve,'enable','on')

set(handles.cero,'enable','on')
set(handles.punto,'enable','on')
set(handles.pi,'enable','on')
set(handles.seno,'enable','on')
set(handles.coseno,'enable','on')
set(handles.tangente,'enable','on')
set(handles.cuadrado,'enable','on')
set(handles.elevado,'enable','on')
set(handles.apagar,'enable','on')
set(handles.divi,'enable','on')
set(handles.suma,'enable','on')
set(handles.multi,'enable','on')
set(handles.borrar,'enable','on')
set(handles.apagar,'enable','on')
set(handles.menos,'enable','on')
set(handles.borrar,'enable','on')
set(handles.log,'enable','on')
set(handles.lognatural,'enable','on')
set(handles.parentesis1,'enable','on')
set(handles.parentesis2,'enable','on')
set(handles.igual,'enable','on')

Los siguientes pushbutton tiene un cdigo similar entre ellos, primero veremos el
cdigo de los pushbutton del cero al nueve. Primero utilizaremos la opcin get para
conseguir el valor de la propiedad del objeto deseado. En la primera lnea del cdigo,
dotamos a la variable textString del valor de la propiedad String del text1, es decir
tomamos los valores que se hayan ingresado en el static text. La segunda lnea del
cdigo indica que agregaremos el nmero indicado en cada pushbutton, que en este
caso ser del 0-9. Y la ltima lnea con la funcin set, al referirse a la propiedad String,
indica que se fijar el nuevo valor de textString en el text1, es decir aparecer en static
text, el valor anterior agregado con el valor indicado que ser del 0-9. El cdigo es el
siguiente y debemos modificarlo para cada pushbutton, daremos como ejemplo el 0.
function cero_Callback(hObject, eventdata, handles)
textString=get(handles.text1,'String');
textString=strcat(textString,'0');
set(handles.text1,'String',textString)

Ahora colocaremos el cdigo de las funciones, del punto y los parntesis, que son muy
similares al anterior. De igual manera utilizamos get, para obtener el valor de la
propiedad string del text1, y son strcat se concatena a la variable textstring la funcin
indicada, como seno, coseno, tangente, recuerde que para utilizar estas funcione se
tiene que utilizar los parntesis. Y por ltimo se devuelve el valor de la propiedad string
al text1.
function punto_Callback(hObject, eventdata, handles)
textString=get(handles.text1,'String');
textString=strcat(textString,'.');
set(handles.text1,'String',textString)
function pi_Callback(hObject, eventdata, handles)

textString=get(handles.text1,'String');
textString=strcat(textString,'pi');
set(handles.text1,'String',textString)
function divi_Callback(hObject, eventdata, handles)
textString=get(handles.text1,'String');
textString=strcat(textString,'/');
set(handles.text1,'String',textString)
function tangente_Callback(hObject, eventdata, handles)
textString=get(handles.text1,'String');
textString=strcat(textString,'tand');
set(handles.text1,'String',textString)
function parentesis1_Callback(hObject, eventdata, handles)
textString=get(handles.text1,'String');
textString=strcat(textString,'(');
set(handles.text1,'String',textString)
function log_Callback(hObject, eventdata, handles)
textString=get(handles.text1,'String');
textString=strcat(textString,'log10');
set(handles.text1,'String',textString)
function inversa_Callback(hObject, eventdata, handles)
textString=get(handles.text1,'String');
textString=strcat(textString,'^(-1)');
set(handles.text1,'String',textString)

Ahora debemos escribir los cdigos del pushbutton borrar y apagar. Para borrar, lo que
se desea es que text1 quede en blanco. Para ello usaremos otro variable, que estar sin
ningn caracter, dotaremos al valor de la propiedad String de esta nueva variable.
function borrar_Callback(hObject, eventdata, handles)
ini=char('');
set(handles.text1,'String',ini)

En el botn apagar, programamos para que a la propiedad enable se dote con el valor
off, es decir para los botones queden inactivos.
function apagar_Callback(hObject, eventdata, handles)
set(handles.inversa,'enable','off')
set(handles.cero,'enable','off')
set(handles.uno,'enable','off')
set(handles.dos,'enable','off')
set(handles.tres,'enable','off')
set(handles.cuatro,'enable','off')
set(handles.cinco,'enable','off')
set(handles.seis,'enable','off')
set(handles.siete,'enable','off')
set(handles.ocho,'enable','off')
set(handles.nueve,'enable','off')
set(handles.cero,'enable','off')

set(handles.punto,'enable','off')
set(handles.pi,'enable','off')
set(handles.seno,'enable','off')
set(handles.coseno,'enable','off')
set(handles.tangente,'enable','off')
set(handles.cuadrado,'enable','off')
set(handles.elevado,'enable','off')
set(handles.apagar,'enable','off')
set(handles.divi,'enable','off')
set(handles.suma,'enable','off')
set(handles.multi,'enable','off')
set(handles.borrar,'enable','off')
set(handles.apagar,'enable','off')
set(handles.menos,'enable','off')
set(handles.borrar,'enable','off')
set(handles.log,'enable','off')
set(handles.lognatural,'enable','off')
set(handles.parentesis1,'enable','off')
set(handles.parentesis2,'enable','off')
set(handles.igual,'enable','off')

4 ) Activando el GUI
Activamos el GUI presionando F5 o haciendo clic en la flecha verde del toolbar del
editor Callback. Se muestra la GUI:

Los pushbutton estn inactivos porque as se predetermino, por ello aparecen

sombreados de color plomizo.

Al hacer clic en ON, se activan todos los pushbutton, y la calculadora est lista para ser
utilizada.

Al presiona los pushbutton, los nmeros o funciones escogidas aparecern en el text de

la parte superior. Se debe recordar que las funciones sin, cos, tan, log, ln debe ser
digitadas con los parntesis correspondientes.

Luego se hace clic en el signo =, y se hallara el resultado.

Para borrar el resultado, hacemos clic en AC, lo cual limpia el text.

Si se quiere volver inactivos los pushbutton, se presiona en OFF, lo cual simula que la
calculadora se apaga.