Por qu utilizarunainterfaz grfica de usuario IGU enMATLAB?

La raznprincipal por la que se utilizan las IGUses porque hacenlas cosas simplespara los usuariosfinalesdel programa.Sino se usaran las IGUs, se tendra que trabajardesde la interfaz de la lnea de comandos del MATLAB, lo que puede ser extremadamentedifcil yfrustrante. Imagnese siusted tuviera que ingresarrdenesde textopara operar sunavegadorweb(s, el navegador web tambin es unainterfaz grfica de usuario).No seramuyprctico verdad?En estetutorial, vamos a crear unainterfaz grfica de usuariosimple quesumados nmeros, y que muestra la respuesta en uncampo de textodesignado.

Este tutorial ha sido escrito para aquellosconpoca o ninguna experienciaen la creacin deunainterfaz grfica deMATLAB (Interface Grafica del Usuario). No es obligatorio tener conocimientos bsicos deMATLAB,pero se recomienda.Para escribir estetutorial se utiliz MATLABversin2007a.Pensamos que las versionesanterioresy las nuevas versionesde MATLAB deberantambin ser compatibles(siempre que no sea demasiadoobsoleta). Vamos aempezar! contenido La inicializacin delGUIDE (Creador de la IGU) Creacin delaspecto visual de lainterfaz grfica de usuario: Parte 1 Creacin delaspecto visual de lainterfaz grfica de usuario: Parte 2 Escribirel Cdigo paralasdevoluciones de llamada de la interfaz grfica de usuario Lanzamiento de lainterfaz grfica de usuario Resolucin de problemasy problemas potenciales Foros relacionadosy otros enlaces La inicializacin delGUIDE (Creador de la IGU)

1. En primer lugar,abrirMATLAB.Vaya a la ventanade comandos y escribaguide.

2. Aparecer la siguiente pantalla.Seleccione laprimeraopcinBlank que sale por defecto).

GUI (que es la

3. Ahora debera verla siguiente pantalla(o algo similardependiendo de la

versindeMATLABque est utilizando yde cules seanlos valoresdesignados (configurados en el software) previamente):

4. Antes de empezar a aadircomponentesa ciegas, es bueno tener unaideaaproximada

decmo desea que se vea laparte grfica de lainterfaz grfica de usuariode tal maneraque seams fcil dedisearla. A continuacin se muestraunejemplo de cmo podra ser lainterfaz grfica de usuarioya acabada.

Creacindel aspecto visual de la interfaz grfica de usuario: Parte 1 Para la IGU del sumador, necesitaremos los siguientes componentes o o o

Dos componentes de edicin de texto Tres componente de Texto esttico Un componente pulsador

Aadir todos estoscomponentes a lainterfaz grfica de usuariohaciendo clicen el respectivo icono ycolocndolo enla parrilla.En este punto,suinterfaz grfica de usuariodebe ser similar ala que se muestra en la siguiente figura:

2. A continuacin,es el momento deeditarlas propiedades de estoscomponentes.Vamos a

empezar coneltexto esttico.Haga dobleclic en uno delos componentes con texto esttico.La siguiente tabla debe de aparecer. Se le llama elinspector de propiedadesy le permite modificarlas propiedades de uncomponente.

3. Nosinteresa cambiarel parmetro llamado String (cadena).Vamosediteeste texto y cmbielo a+.

Ttambincambiemosel tamao de la letra(fuente) de 8 a 20

Quizs despus de haber modificadoestas propiedades,el componente no pueda sercompletamentevisible en eleditor grfico. Como el tamao de la letra se ha hecho ms grande y no entra en la caja de texto, esto se puede solucionarsi se cambia el

tamaodel componente,es decir, utilizarel cursor del ratny estirarel componente parahacerlo ms grande.

4. Ahora, haga lo mismo para el siguiente componente de Texto esttico, peroen lugar de cambiarel parmetroString a+, cmbielo a =. 5. Para el tercer componente deTexto esttico, cambie el parmetro String (cadena)a lo
que usteddesea que sea elttulo de suinterfaz grfica de usuario. Por simplicidad lo he llamadoMyAdderGUI. Tambin aqu puede experimentarun poco con lasopciones de diferentes fuentes.

6. Para el componente final de Texto esttico, queremos establecer el parmetro de cadena (String) a 0. Adems, para este componente queremos modificar el parmetro llamado Tag (etiqueta). El parmetro Tages en realidad el nombre de la variable de este componente. Vamos a llamarle answer_staticText. Este componente se utilizara para mostrar nuestra respuesta, como usted probablemente ya se habr dado cuenta

7. Por lo tanto ahora,usted debe tener algoque se parece alasiguiente pantalla:

Creating the Visual Aspect of the GUI: Part 2

1. A continuacin,vamos a modificarlos componentesde texto editable. Haga dobleclic en

el primer componente de Textoeditable.Queremosestablecer el parmetroString en0 ytambin queremoscambiar elparmetroTag(etiqueta) para que ahora se llame input1_editText, tal como se muestra a continuacin.Este componente va a almacenar elprimerode los dos nmeros quese van a sumar.

2. Para el segundo componente de Texto editable, establezca el parmetro String a0,

peroestablezca elparmetroTag a input2_editText.Este componentealmacenara elsegundode los dos nmeros quese van a sumar.

3. Por ltimo, tenemos que modificar el componentepulsador.Cambie elparmetro String

a add (sumar)!y cambie elparmetrode etiqueta (Tag) aadd_pushbutton. Pulsando estebotn se mostrarla sumade los dos nmerosde entrada.

4. As que ahora,usted debetener algo parecido a esto:

Reorganicesuscomponentes para que se vean parecidos al dibujo.Cuando haya terminado Usted debertener algo parecido a esto:

5. Ahora, guarde su IGUcreada con cualquier nombre de archivoque

quiera.Decidnombrarlo con el nombre de myAdder.Al guardarel archivo, MATLAB automticamentegenera dosarchivos:myAdder.figymyAdder.m. Elarchivo .figcontiene losgrficosdela interfaz.Elarchivo .mcontienetodo el cdigo delainterfaz grfica del usuario. Escribiendo elCdigo paralasdevoluciones de llamada de la interfaz grfica del usuario.

MATLABgenera automticamente unarchivo .m acompaante cada vez que se crea una figura.Elarchivo.mes dondecolocamosel cdigo correspondienteala devolucin de llamadade cada componente.Para los efectos deeste tutorial,principalmenteslonos ocuparemos de lasfunciones dedevolucin de llamada.Usted no tieneque preocuparseacerca de cualquier otrotipo de funcin que encuentre en el cdigo del archivo .m.

1. Abra elarchivo .mque se generautomticamentecuando guard su IGU.En el editor

deMATLAB,haga clic en elicono y al hacerloaparecer unalista de las funciones que se encuentran dentro del archivo .m.Seleccioneinput1_editText_Callback.

2. Elcursordebe posicionarse en elsiguiente bloque de cdigo:

3. function input1_editText_Callback(hObject, eventdata, handles) 4. % hObject 5. % eventdata 6. % handles 7. 8. % Hint: get(hObject,'String') returns contents of input1_editText as text 9. % 10. % str2double(get(hObject,'String')) returns contents of input1_editText as a double handle to input1_editText (see GCBO) reserved - to be defined in a future version of MATLAB structure with handles and user data (see GUIDATA)

Agregue el cdigo siguientea la parte inferiorde dichobloque de cdigo:

%store the contents of input1_editText as a string. if the string %is not a number then input will be empty input = str2num(get(hObject,'String'));

%checks to see if input is empty. if so, default input1_editText to zero if (isempty(input)) set(hObject,'String','0') end guidata(hObject, handles);

Esta pieza de cdigosimplementese asegura de quelaentradaeste bien definida.No queremosque el usuario ingrese entradas que no sean nmeros!La ltima lneadel cdigo le indica a lainterfaz grfica del usuario que despus de que se ha completado la devolucin de llamada,debe de actualizar la estructura delos controladores o alias.Los controladores o aliasalmacenan todos losdatos pertinentes relacionados conlainterfaz grfica del usuario. Este temase tratar aprofundidad en untutorialdiferente.Por ahora,es unabuena idea que ustedlo acepte sin demostracin y que finalice todas las funcionesde devolucin de llamadacon la instruccinguidata(hObject, handles), de modo que los controladores o alias

seestnsiempreactualizando despus decadadevolucin de llamada.Estopuede salvarlo deposibles dolores de cabezams adelante.

11. Agregue el mismo bloque de cdigo anterior a input2_editText_Callback. 12. Ahoratenemos que editareladd_pushbutton_Callback. Haga clic enel icono
y seleccioneadd_pushbutton_Callback. Elsiguiente bloque de cdigoes lo que debera deveren el archivo .m.

13. % --- Executes on button press in add_pushbutton. 14. functionadd_pushbutton_Callback(hObject, eventdata, handles) 15. % hObject 16. % eventdata 17. % handles handle to add_pushbutton (see GCBO) reserved - to be defined in a future version of MATLAB structure with handles and user data (see GUIDATA)

A continuacin presentamos el cdigoquevamos a aadiraesta devolucin de llamada:

a = get(handles.input1_editText,'String'); b = get(handles.input2_editText,'String'); % a and b are variables of Strings type, and need to be converted % to variables of Number type before they can be added together

total = str2num(a) + str2num(b); c = num2str(total); % need to convert the answer back into String type to display it set(handles.answer_staticText,'String',c); guidata(hObject, handles);

18. Vamos a estudiarcmotrabaja el cdigo queacaba de agregar:

19. a = get(handles.input1_editText,'String'); 20. b = get(handles.input2_editText,'String');

Las dos lneas del cdigo anteriorleen las cadenas que estn dentro de los componentes de texto editable, y las almacenan en las variables a y b. Puesto que son variables del tipo cadena o String, y no son variables del tipo numrico, no podemos sumarlas. Por lo tanto, tenemos que convertir ay bal tipo numricopara que el MATLAB puedasumarlas. . 21. Podemos convertirvariables del tipocadena (String) altipo numricousando
elcomandode MATLABstr2num(argumento tipo cadena).Del mismo modo, podemos hacer lo contrarioconnum2str(argumento del tipo Numrico).La siguiente lnea decdigo se utiliza parasumarlas dos entradas.
22. total= (str2num(a) + str2num(b));

La siguiente lnea decdigo conviertela variablesuma una variable deltipocadenayla almacenaen la variablec.

c = num2str(total);

Larazn por la queconvertimosla respuesta finalnuevamente altipocadena, esporque el componentede Texto estticono muestraen pantalla variables del tiponumrico.Si noseconviertede nuevo en untipocadena,lainterfaz grfica del usuarioseencuentra con unerroral intentarmostrar la respuesta.

23. Ahoraslo tenemos queenviarla sumade las dos entradasa la caja derespuesta
quehemos creado.Esto se realiza utilizandolasiguiente lnea de cdigo. Esta lnea de cdigo rellena elcomponentede Texto estticoconla variable c.
24. set(handles.answer_staticText,'String',c);

La ltima lnea decdigo actualizalas estructurasde los aliascomose mencionanteriormente.

guidata(hObject, handles);

Felicidades,hemos terminadola codificacin de laIGU.No se olvide deguardar suarchivo-m.Ahora nos toca correrlaIGU!

25. If you dont want MATLAB to automatically generate all those comments for each of the callbacks, there is a way to disable this feature. From the GUI editor, go to File, then to Preferences.Sino desea queMATLABgenere automticamentetodos
loscomentarios paracada una de lasdevoluciones de llamada,hayuna manera de desactivaresta funcin.Desdeel editor deinterfaz grfica de usuario, vaya a Archivoy luegoa Preferencias

Como ejecutar la IGU

1. Hay dosformas de ejecutar o iniciarlaIGU.

o

Laprimera formaes a travs deleditor del GUIDE.Slo tiene que pulsarel icono editor del GUIDE como se muestraen la siguiente figura:

enel

Elsegundo mtodo consiste enlanzarla IGU desde el aviso de la ventana de comandosdel MATLAB.En primer lugar,establecer el directorioactualdel MATLABa cualquier lugar en elque guardsus archivos .fig y.m.

A continuacin, escribael nombre de lainterfaz grfica de usuarioenel smbolo del sistema(noes necesario que escribala extensin .fig o .m):

2. Lainterfaz grfica de usuariodebe comenzar a ejecutarseinmediatamente:

Trate deintroducir algunosnmerospara probarlainterfaz grfica de usuario.Felicitaciones porla creacin de suprimera interfaz grfica de usuario! Solucin de problemasy problemas potenciales As que suinterfaz grficano funciona yno sabespor qu.Aqu hay un pardeconsejos que puedenayudarte a encontrar elerror: Si no puedeaveriguar dnde podra estar el error,serauna buena idealeer estetutorialde nuevo.

1. La lnea de comandospuede darlemuchas pistassobre dndeexactamente reside el

problema.Si por alguna razn suinterfaz grfica de usuariono funciona,el error semuestra en elsmbolo del sistema. Elnmero de lnea delcdigo defectuosoy una breve descripcindel errorsonmostrados.Esto es siempreun buen lugar paracomenzar a investigar.

2. Asegrese de que todoslosnombres de las variablessean constantes enel

cdigo.Adems,asegrese de que lostagsde los componente(las etiquetas o nombres de las variables) sean coherentesentreel archivo .fig.y el archivo.m.Por ejemplo, siusted est tratando deextraer la cadenadel componente detexto editable, asegrese de que sus instrucciones get(leer la variable o tag) utilicen la etiquetacorrecta (tag)!Ms especficamente, siusted tiene lasiguiente lneaen el cdigo,asegrese de queusted ha le ha puesto el nombredel componente deedicin de textosegn le corresponda!
3. a = get(handles.input1_editText,'String');

4. El cdigofuenteest disponible aqu,y podra ser tilparapropsitos de depuracin

5. Si todolo anterior falla, deja un comentario aquy vamos ahacer todo lo posiblepara ayudarte.