Guia 4. Introduccion A GUI

 

Guía de Laboratorio 4  Ciclo 01/2014 

Universidad Centroamericana José Simeón Cañas

Métodos Numéricos y Programación

Introducción a Interfaz Gráfica de Usuario (GUI). La interfaz gráfica de usuario o GUI (por sus siglas en inglés), es un formato más 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 aplicación para realizar las GUI, sin embargo, dado que es un software libre, esta aplicación se puede descargar desde la pestaña Aplicaciones -> Administrador de módulos  – ATOMS. Luego de seleccionar estas opciones, se abrirá una nueva en donde aparecerán distintas carpetas. En donde se debe seleccionar la carpeta GUI, y luego la aplicación “guibuilder”, y finalmente, darle click al botón de instalar. Una vez instalado el “guibuilder”  en SciLab,

se escribe en la consola   la

palabra guibuilder , y

luego de unos instantes aparecerán 2 ventanas tal y como lo muestra la  la   Figura 1.  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 la Tabla 1 se detallan las herramientas u objetos más básicos y la función que cumplen estas dentro de una GUI. Tabla 1. Descripción de las herramientas u objetos del guibuilder.

Herramienta

Utilidad

Push Button Button Radio Button

Cuando el usuario usuario da click sobre estos, se genera una acción dentro dentro de la GUI Permite seleccionar seleccionar una una opción opción al darle click sobre ella (aparecerá un punto

 

Universidad Centroamericana José Simeón Cañas

Guía de Laboratorio 4  Ciclo 01/2014 

Métodos Numéricos y Programación

Herramienta Check Botton Edit Text Pop-up menú Axes

Utilidad rojo una vez se haya seleccionado la opción). Permite seleccionar una opción al darle click sobre ella (aparecerá un cheque sobre el recuadro blanco una vez se haya seleccionado la opción). Son cuadros de texto en los cuales el usuario puede introducir texto de cualquier tipo. Son cuadros de texto estático que solo muestran información al usuario. Es un menú desplegable que permite la selección de una opción por parte del usuario. Permite introducir un recuadro en el cual se pueden realizar gráficas.

Programación Programació n en GUI. Una vez definido el entorno de Scilab para la elaboración de GUI’s, se deben definir la terminología que se manera para poder realizar la correcta programación de las mismas. Esta se desarrolla a continuación. En primer lugar, una vez se da click en cualquiera de las herramientas, se desplegará inmediatamente un cuadro de diálogo (véase Figura (véase  Figura 2) en 2) en el cual se solicitará el Tag y el String de la herramienta que se desea utilizar. utili zar.

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 la Figura 2) 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 línea punteada color negro la cual permite elegir el tamaño 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, tamaño, 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.

 

Universidad Centroamericana José Simeón Cañas

Guía de Laboratorio 4  Ciclo 01/2014 

Métodos Numéricos y Programación

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 código en una SciNote en la cual aparecerán una cantidad de líneas 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 programación 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 programación, se procederá mediante dos ejemplos y se explicarán las estructuras en el camino.   EJEMPLO 1. Realice una GUI en la cual el usuario introduzca 2 números, y le permita la

selección de 4 operaciones diferentes (suma, resta, multiplicación y división). Luego de presionar un botón de “Calcular”, debe presentarse la respuesta de la operación seleccionada. En primer lugar, se debe proceder a realizar la GUI, para ello, se utilizará la Figura 3 con las propiedades de la

Tabla 2 para cada una de las herramientas utilizadas.

Figura 3. GUI para ejemplo 1

 

Universidad Centroamericana José Simeón Cañas

Guía de Laboratorio 4  Ciclo 01/2014 

Métodos Numéricos y Programación

Tabla 2. Propiedades de las herramientas a utilizar.

Objetos / numero Radiobutton 1 Radiobutton 2

String Suma Resta

Tag suma resta

Fontsize [12] [12]

Radiobutton 3 Radiobutton 4 Text1 Text2 Text3 Text 4 Text 5 Edit 1 Edit 1 Pushbutton

Multiplicación División Operaciones aritméticas Valor 1: Valor 2: Respuesta ------Calcular

mult div titulo Val Val resp val_res num1 num2 calc

[12] [12] [20] [12] [12] [12] [16] [14] [14] [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 que se muestre una una respuesta luego de dar click en el botón Calcular, este botón será el único en dónde se procederá a programar. Para poder realizar esto, siempre que se desee programar una de las herramientas de al GUI, se 1

debe buscar el Callback  del botón. “

”

Para el caso, se procede a buscar dentro del código el Callback del botón “Calcular”, que será la función que contenga el tag “calc”. Una vez localizado, debajo de la línea “function…” se procederá a realizar la programación. pro gramación. Sin embargo, antes de proceder a

esto, se deben definir algunas estructuras para la programación (véase Tabla (véase Tabla 3) 3)   Tabla 3. Estructuras de programación en GUI

Objeto 2  Radio button

Edit ----Text

1 2

Estructura

Función

Obtiene el valor uno o cero dependiendo si el usuario ha o no var=get(handles.nombre_de_tag,’value’) seleccionado la opción en el radio button respectivamente. Obtiene los datos que el usuario ha var=get(handles.nombre_de_tag,’string’)  introducido en los recuadros Edit en formato string. Transforma los datos de string a Var2=eval(var) double. Coloca la variable “var” en el recuadro set(handles.nombre_de_tag, ‘string’, var) Text.

 El callback es una función en donde se encuentra el “tag” del objeto (herramienta).  Se refiere a que el objeto posee el nombre del tag que se encuentra en la estructura.

 

Universidad Centroamericana José Simeón Cañas

Guía de Laboratorio 4  Ciclo 01/2014 

Métodos Numéricos y Programación

Una vez definido lo anterior, se procede a la programación del botón Calcular de la siguiente manera:

 //Tomamos los valores de la propiedad Value radiobutton  Value de los objetos radiobutton   //la propiedad value puede ser 0 o 1  val_sum= val_sum =get get((handles handles..suma suma,,'value' 'value'))  val_res= val_res =get get((handles handles..resta resta,,'value') 'value')  val_mult= val_mult =get get((handles handles..mult mult,,'value') 'value')  val_div= val_div =get get((handles handles..div div,,'value' 'value'))   //Tomando los valores de la propiedad string de los objetos edit   =get get((handles handles..num1 num1,,'string' 'string'))  valor1= valor1 valor2= valor2 =get get((handles handles..num2 num2,,'string' 'string'))  numericos    //convirtiendo los valores a numericos valor1= valor1 =eval eval((valor1 valor1))  valor2= valor2 =eval eval((valor2 valor2))  if  val_sum==  val_sum==1 1 then  then  =valor1 valor1+ +valor2 resultado= resultado  //Convirtiendo la variable resultado a string   result= result =string string((resultado resultado))  del objeto text    //Mostrando la variable result en la propiedad string del set((handles handles..val_res val_res,,'string',result 'string',result))  set  val_res==1 1 then then   elseif  val_res== resultado= resultado =valor1 valor1--valor2 result= result =string string((resultado resultado))  set(handles set( handles..val_res val_res,,'string',result 'string',result))   val_mult==1 1  then then   elseif  val_mult== resultado= resultado =valor1 valor1* *valor2 =string string((resultado resultado))  result= result set(handles set( handles..val_res val_res,,'string',result 'string',result))  elseif  val_div==  val_div==1 1 then then   =valor1 valor1//valor2 resultado= resultado =string string((resultado resultado))  result= result set(handles set( handles..val_res val_res,,'string',result 'string',result))  end end     EJEMPLO 2. Realice una GUI que permita graficar una función en términos de “x” y que

el usuario especifique el Dominio de la función para poder realizarlo. Así como en el ejemplo anterior, se procederá en primer lugar a la realización de la  figura de la GUI tal y como se muestra en la Figura 4.  Además en la askdjksadbags askdjksadbags se adjuntan las propiedades de cada uno de los objetos utilizados en la GUI.

 

Guía de Laboratorio 4  Ciclo 01/2014 

Universidad Centroamericana José Simeón Cañas

Métodos Numéricos y Programación

Figura 4. GUI para ejemplo 2. Tabla 4. Propiedades para herramientas en ejemplo 2.

Objeto Text Text Text Edit Edit Pushbutton Axes

String Graficos de F(x) F(x)= Dominio= --[Xo,Xf] Graficar ---

Tag titulo f_x val_do funcion dominio graf grafico

Fontsize [20] [16] [16] [16] [16] [18] ---

Una vez realizada la figura, se procederá a guardar g uardar con el nombre de “Graficas” y como archivo .sce .

 

Universidad Centroamericana José Simeón Cañas

Guía de Laboratorio 4  Ciclo 01/2014 

Métodos Numéricos y Programación

Una vez realizado esto, y dado que se desea programar un único botón, se debe proceder a buscar el callback del botón Graficar dentro del código de la Scinote. En este se digitará lo siguiente:

get((handles handles..funcion funcion,,'string') 'string')  fun=get fun= vec= vec =eval eval((get get((handles handles..valores valores,,'string')) 'string'))   linspace((vec vec((1),vec ,vec((2),1000) 1000)  x=linspace y=evstr (fun fun))   plot2d( x,y,style= =2)   plot2d(x,y,style

Finalmente, se debe aclarar que esta es una introducción a la elaboración de GUI’s, si el lector desea ampliar la información previamente descrita, puede consultar la siguiente dirección web: http://wiki.scilab.org/howto/guicontrol.