Universidad Centroamericana

Jos Simen Caas

Mtodos Numricos y Programacin
Introduccin a Interfaz Grfica de Usuario (GUI).
La interfaz grfica de usuario o GUI (por sus siglas en ingls), es un formato ms formal y
amigable con el usuario para poder realizar programas en SciLab. Este permite que el usuario
pueda correr las funciones, editar los campos de entrada requeridos por las mismas sin
necesidad de estar en la consola de Scilab.
En primer lugar, cabe notar que SciLab, no trae la aplicacin para realizar las GUI, sin embargo,
dado que es un software libre, esta aplicacin se puede descargar desde la pestaa
Aplicaciones -> Administrador de mdulos ATOMS. Luego de seleccionar estas opciones, se
abrir una nueva en donde aparecern distintas carpetas. En donde se debe seleccionar la
carpeta GUI, y luego la aplicacin guibuilder, y finalmente, darle click al botn de instalar.
Una vez instalado el guibuilder en SciLab, se escribe en la consola la palabra guibuilder, y
luego de unos instantes aparecern 2 ventanas tal y como lo muestra la Figura 1. En dicha
figura, se puede apreciar al lado izquierdo el panel de herramientas u objetos y a la derecha
(rea cuadriculada) el rea de trabajo.

Figura 1. Herramientas y rea de trabajo del guibuilder.
En la Tabla 1 se detallan las herramientas u objetos ms bsicos y la funcin que cumplen estas
dentro de una GUI.
Tabla 1. Descripcin de las herramientas u objetos del guibuilder.
Herramienta Utilidad
Push Button Cuando el usuario da click sobre estos, se genera una accin dentro de la GUI
Radio Button Permite seleccionar una opcin al darle click sobre ella (aparecer un punto
Gua de Laboratorio 4
Ciclo 01/2014
Universidad Centroamericana
Jos Simen Caas

Mtodos Numricos y Programacin
Herramienta Utilidad
rojo una vez se haya seleccionado la opcin).
Check Botton
Permite seleccionar una opcin al darle click sobre ella (aparecer un cheque
sobre el recuadro blanco una vez se haya seleccionado la opcin).
Edit
Son cuadros de texto en los cuales el usuario puede introducir texto de
cualquier tipo.
Text Son cuadros de texto esttico que solo muestran informacin al usuario.
Pop-up men
Es un men desplegable que permite la seleccin de una opcin por parte
del usuario.
Axes Permite introducir un recuadro en el cual se pueden realizar grficas.
Programacin en GUI.
Una vez definido el entorno de Scilab para la elaboracin de GUIs, se deben definir la
terminologa que se manera para poder realizar la correcta programacin de las mismas. Esta
se desarrolla a continuacin.
En primer lugar, una vez se da click en cualquiera de las herramientas, se desplegar
inmediatamente un cuadro de dilogo (vase Figura 2) en el cual se solicitar el Tag y el String
de la herramienta que se desea utilizar.

Figura 2. Propiedades de herramientas.
Por lo cual, se debe definir claramente que es cada una de estas opciones:
Tag: Es el nombre que se le adjudicar a la herramienta. Mediante este nombre, se
puede tener el control completo de la misma al momento de programar.
String: Es el texto que se desea que la herramienta contenga y que se muestra dentro
de la GUI (por ejemplo, OK o Cancel en los botones de la Figura 2).
Una vez introducido estos campos, presionamos OK, y luego damos click en el rea de trabajo.
Al hacer esto, y mover el mouse se observar una lnea punteada color negro la cual permite
elegir el tamao de la herramienta en uso y al darle nuevamente click, est se insertar dentro
del rea.
En caso se deseen modificar algunas propiedades como estilo de letra, tamao, color entre
otras, seleccionar la herramienta que se desea modificar y dar click en el Object Properties el
cual desplegar un recuadro con distintas opciones.
Gua de Laboratorio 4
Ciclo 01/2014
Universidad Centroamericana
Jos Simen Caas

Mtodos Numricos y Programacin
Una vez realizada la GUI con todas las especificaciones necesarias, se deber guardar en la
carpeta de preferencia del programador. Una vez se haga esto, se abrir un cdigo en una
SciNote en la cual aparecern una cantidad de lneas ya escritas las cuales corresponden a la
GUI previamente elaborada.
Un detalle muy importante es que el programador, una vez terminada su GUI, deber proceder
a la programacin de cada uno de los botones (push bottons generalmente) para que al ser
utilizada por el usuario, se ejecuten las distintas acciones que deban realizarse. Para observar
las estructuras de programacin, se proceder mediante dos ejemplos y se explicarn las
estructuras en el camino.
EJEMPLO 1. Realice una GUI en la cual el usuario introduzca 2 nmeros, y le permita la
seleccin de 4 operaciones diferentes (suma, resta, multiplicacin y divisin). Luego de
presionar un botn de Calcular, debe presentarse la respuesta de la operacin
seleccionada.
Tabla 2 para cada una de las herramientas utilizadas.

Figura 3. GUI para ejemplo 1

Gua de Laboratorio 4
Ciclo 01/2014
En primer lugar, se debe proceder a realizar la GUI, para ello, se utilizar la Figura 3 con las propiedades de la
Universidad Centroamericana
Jos Simen Caas

Mtodos Numricos y Programacin
Tabla 2. Propiedades de las herramientas a utilizar.
Objetos / numero String Tag Fontsize
Radiobutton 1 Suma suma [12]
Radiobutton 2 Resta resta [12]
Radiobutton 3 Multiplicacin mult [12]
Radiobutton 4 Divisin div [12]
Text1 Operaciones aritmticas titulo [20]
Text2 Valor 1: Val [12]
Text3 Valor 2: Val [12]
Text 4 Respuesta resp [12]
Text 5 --- val_res [16]
Edit 1 --- num1 [14]
Edit 1 --- num2 [14]
Pushbutton Calcular calc [16]

Una vez realizada la figura de la GUI, se proceder a guardar el archivo como
operaciones_aritmeticas y se guardar como un archivo .sce .
Luego, dado que se exige que se muestre una respuesta luego de dar click en el botn
Calcular, este botn ser el nico en dnde se proceder a programar. Para poder
realizar esto, siempre que se desee programar una de las herramientas de al GUI, se
debe buscar el Callback
1
del botn.
Para el caso, se procede a buscar dentro del cdigo el Callback del botn Calcular,
que ser la funcin que contenga el tag calc. Una vez localizado, debajo de la lnea
function se proceder a realizar la programacin. Sin embargo, antes de proceder a
esto, se deben definir algunas estructuras para la programacin (vase Tabla 3)
Tabla 3. Estructuras de programacin en GUI
Objeto
2
Estructura Funcin
Radio
button
var=get(handles.nombre_de_tag,value)
Obtiene el valor uno o cero
dependiendo si el usuario ha o no
seleccionado la opcin en el radio
button respectivamente.
Edit var=get(handles.nombre_de_tag,string)
Obtiene los datos que el usuario ha
introducido en los recuadros Edit en
formato string.
----- Var2=eval(var)
Transforma los datos de string a
double.
Text set(handles.nombre_de_tag, string, var)
Coloca la variable var en el recuadro
Text.


1
El callback es una funcin en donde se encuentra el tag del objeto (herramienta).
2
Se refiere a que el objeto posee el nombre del tag que se encuentra en la estructura.
Gua de Laboratorio 4
Ciclo 01/2014
Universidad Centroamericana
Jos Simen Caas

Mtodos Numricos y Programacin
Una vez definido lo anterior, se procede a la programacin del botn Calcular de la
siguiente manera:
//Tomamos los valores de la propiedad Value de los objetos radiobutton
//la propiedad value puede ser 0 o 1
val_sum=get(handles.suma,'value')
val_res=get(handles.resta,'value')
val_mult=get(handles.mult,'value')
val_div=get(handles.div,'value')

//Tomando los valores de la propiedad string de los objetos edit
valor1=get(handles.num1,'string')
valor2=get(handles.num2,'string')

//convirtiendo los valores a numericos
valor1=eval(valor1)
valor2=eval(valor2)

if val_sum==1 then
resultado=valor1+valor2
//Convirtiendo la variable resultado a string
result=string(resultado)
//Mostrando la variable result en la propiedad string del objeto text
set(handles.val_res,'string',result)
elseif val_res==1 then
resultado=valor1-valor2
result=string(resultado)
set(handles.val_res,'string',result)
elseif val_mult==1 then
resultado=valor1*valor2
result=string(resultado)
set(handles.val_res,'string',result)
elseif val_div==1 then
resultado=valor1/valor2
result=string(resultado)
set(handles.val_res,'string',result)
end

EJEMPLO 2. Realice una GUI que permita graficar una funcin en trminos de x y que
el usuario especifique el Dominio de la funcin para poder realizarlo.
Gua de Laboratorio 4
Ciclo 01/2014
As como en el ejemplo anterior, se proceder en primer lugar a la realizacin de la
figura de la GUI tal y como se muestra en la Figura 4. Adems en la askdjksadbags se
adjuntan las propiedades de cada uno de los objetos utilizados en la GUI.
Universidad Centroamericana
Jos Simen Caas

Mtodos Numricos y Programacin

Figura 4. GUI para ejemplo 2.
Tabla 4. Propiedades para herramientas en ejemplo 2.
Objeto String Tag Fontsize
Text Graficos de F(x) titulo [20]
Text F(x)= f_x [16]
Text Dominio= val_do [16]
Edit --- funcion [16]
Edit [Xo,Xf] dominio [16]
Pushbutton Graficar graf [18]
Axes --- grafico ---

Una vez realizada la figura, se proceder a guardar con el nombre de Graficas y como
archivo .sce .
Gua de Laboratorio 4
Ciclo 01/2014
Universidad Centroamericana
Jos Simen Caas

Mtodos Numricos y Programacin
Una vez realizado esto, y dado que se desea programar un nico botn, se debe
proceder a buscar el callback del botn Graficar dentro del cdigo de la Scinote. En
este se digitar lo siguiente:
fun=get(handles.funcion,'string')
vec=eval(get(handles.valores,'string'))
x=linspace(vec(1),vec(2),1000)

y=evstr(fun)
plot2d(x,y,style=2)

Finalmente, se debe aclarar que esta es una introduccin a la elaboracin de GUIs, si el lector
desea ampliar la informacin previamente descrita, puede consultar la siguiente direccin
web: http://wiki.scilab.org/howto/guicontrol.
Gua de Laboratorio 4
Ciclo 01/2014