Laboratorio III Introducción a las interfaces de usuario

Universidad San Buenaventura (Sede Bogotá)

Ingeniería de sonido

Programación de audio aplicada

Dilan Saavedra vela cód.20141618044

Grupo de trabajo (Ricardo Reyes)

6 de septiembre del 2019 Bogotá DC

I. Introducción. Millones de ingenieros y científicos confían en

Se verán en los tres tipos de lenguajes de
programación requeridos, la programación en interfaz
de usuario, observando las diferentes formas de
sintaxis para lograr un mismo fin, además de las
diferencias esteticas.
II. Objetivos.
Conocer la definición y manejo básicos del uso de
interfaces gráficas para cada uno de los lenguajes
usados.
• Reconocer los diferentes componentes o
widgets que interfieren en el desarrollo de
interfaces gráficas de usuario usan Python,
Matlab y Unity3D.
• Comprender el funcionamiento de la interfaz
gráfica y su relación con las funciones de
código.
III. Palabras claves
MATLAB
MATLAB combina un entorno de escritorio
perfeccionado para el análisis iterativo y los procesos
de diseño con un lenguaje de programación que
expresa las matemáticas de matrices y arrays
directamente.
Fabricación profesional
Las toolboxes de MATLAB se desarrollan de forma
profesional, pasan pruebas rigurosas y están
totalmente documentadas.
Apps interactivas
Las apps de MATLAB le permiten ver cómo
funcionan diferentes algoritmos con sus datos.
Realice iteraciones hasta obtener los resultados
deseados y, después, genere automáticamente un
programa de MATLAB para reproducir o automatizar
su trabajo.

Guide, Tk, Ui, Interfaz, Gráficos.

Capacidad de escalación
IV. Marco teórico.
Escale sus análisis para la ejecución en clusters,
• MATLAB GPUs y nubes únicamente con cambios menores en
el código. No es necesario volver a escribir el código
ni aprender programación para Big Data y técnicas de
manejo de datos fuera de memoria.

Despliegue en aplicaciones empresariales

El código de MATLAB está listo para pasar a

producción, de forma que podrá ir directamente a la
nube y los sistemas empresariales para realizar la
integración con orígenes de datos y sistemas
empresariales.

Ejecución en dispositivos embebidos

5
Convierta automáticamente algoritmos de MATLAB
en código C/C++ y HDL para su ejecución en
dispositivos embebidos.
Integración con el diseño basado en modelos
MATLAB colabora con Simulink para permitir el
diseño basado en modelos, el cual se emplea para la
simulación multidominio, la generación automática
de código y la comprobación y verificación continuas
de sistemas embebidos.
• Python
Python es un lenguaje de programación interpretado
cuya filosofía hace hincapié en una sintaxis que
favorezca un código legible.
Se trata de un lenguaje de programación
multiparadigma, ya que soporta orientación a objetos,
programación imperativa y, en menor medida,
programación funcional. Es un lenguaje interpretado,
de tipado fuerte, dinámico y multiplataforma.
Es administrado por la Python Software Foundation.
Posee una licencia de código abierto, denominada
Python Software Foundation License, que es
compatible con la Licencia pública general de GNU a
partir de la versión 2.1.1, e incompatible en ciertas
versiones anteriores.
Python es un lenguaje de programación
multiparadigma. Esto significa que más que forzar a
los programadores a adoptar un estilo particular de
programación, permite varios estilos: programación
orientada a objetos, programación imperativa y
programación funcional. Otros paradigmas están
soportados mediante el uso de extensiones.
Python usa tipado dinámico y conteo de referencias
para la administración de memoria.
Una característica importante de Python es la
resolución dinámica de nombres; es decir, lo que
enlaza un método y un nombre de variable durante la
ejecución del programa (también llamado enlace
dinámico de métodos).
Otro objetivo del diseño del lenguaje es la facilidad
de extensión. Se pueden escribir nuevos módulos
fácilmente en C o C++. Python puede incluirse en
aplicaciones que necesitan una interfaz programable.
Aunque la programación en Python podría
considerarse en algunas situaciones hostil a la
programación funcional tradicional del Lisp, existen
2
bastantes analogías entre Python y los lenguajes
minimalistas de la familia Lisp como puede ser
Scheme.
• Unity (Visual Studio)
Unity es un motor de videojuego multiplataforma
creado por Unity Technologies. Unity está disponible
como plataforma de desarrollo para Microsoft
Windows, OS X, Linux. La plataforma de desarrollo
tiene soporte de compilación con diferentes tipos de
plataformas (Véase la sección Plataformas objetivo).
A partir de su versión 5.4.0 ya no soporta el
desarrollo de contenido para navegador a través de su
plugin web, en su lugar se utiliza WebGL. Unity
tiene dos versiones: Unity Professional (pro) y Unity
Personal.
La empresa Unity Technologies fue fundada en 2004
por David Helgason (CEO), Nicholas Francis (CCO),
y Joachim Ante (CTO) en Copenhague, Dinamarca
después de su primer juego, GooBall, que no obtuvo
éxito. Los tres reconocieron el valor del motor y las
herramientas de desarrollo y se dispusieron a crear un
motor que cualquiera pudiera usar a un precio
asequible. Unity Technologies ha recibido
financiación de Sequoia Capital, Capital WestSummit
y Socios iGlobe.
El éxito de Unity ha llegado en parte debido al
enfoque en las necesidades de los desarrolladores
independientes que no pueden crear ni su propio
motor del juego ni las herramientas necesarias o
adquirir licencias para utilizar plenamente las
opciones que aparecen disponibles. El enfoque de la
compañía es "democratizar el desarrollo de juegos", y
hacer el desarrollo de contenidos interactivos en 2D y
3D lo más accesible posible a tantas personas en todo
el mundo como sea posible.
En 2008, sobre una base mensual regular.
• Interfaz gráfica.
La interfaz gráfica de usuario, conocida también
como GUI (del inglés graphical user interface), es un
programa informático que actúa de interfaz de
usuario, utilizando un conjunto de imágenes y objetos
gráficos para representar la información y acciones
disponibles en la interfaz. Su principal uso, consiste
en proporcionar un entorno visual sencillo para
permitir la comunicación con el sistema operativo de
una máquina o computador.
Habitualmente las acciones se realizan mediante
manipulación directa, para facilitar la interacción del
usuario con la computadora. Surge como evolución
de las interfaces de línea de comandos que se usaban
para operar los primeros sistemas operativos y es
pieza fundamental en un entorno gráfico. Como
ejemplos de interfaz gráfica de usuario, cabe citar los
entornos de escritorio Windows, el X-Window de
GNU/Linux o el de Mac OS X, Aqua.
En el contexto del proceso de interacción persona-
computadora, la interfaz gráfica de usuario es el
artefacto tecnológico de un sistema interactivo que
posibilita, a través del uso y la representación del
lenguaje visual, una interacción amigable con un
sistema informático.
V. Procedimiento.
Esta etapa del laboratorio se dividirá en dos secciones
la teórica y la práctica, siendo la teórica donde se
verá una explicación breve de la programación
(Códigos) en los diferentes lenguajes, viendo sus
funciones y métodos utilizados, y la práctica en
donde se verá el análisis de resultados y
comparaciones debidas.
• Procedimiento teórico.
MATLAB
Como se puede observar en el archivo untitled.m que
se tiene en la carpeta de MATLAB, en la función del
primer botón (Cambio de texto) su código es muy
sencillo solo se trata de obtener el String que posee el
objeto y enseguida imprimir el valor que se desea al
mismo objeto. Su código es:
x=get(hObject, 'String');
if(x=="Hola")
set(hObject, 'String','Chao');
else
set(hObject, 'String','Hola');
end
5
disp(x)
Luego para el siguiente botón, -cabe aclarar que se
omiten los textview y el inputText ya que no se
programan, en cambio el botón si- se obtiene lo que
el usuario halla ingresado en el inputText y se
imprime este valor al textview, el código es el
siguiente:
x=get(handles.edit1,'String');
set(handles.text2,'String',x);
En seguida la programación para ambos Sliders es la
misma, solo se modifican sus valores máximos, ya
que los mínimos son los mismos. Se trata de obtener
los valores tipo value del objeto e imprimirlos en sus
respectivos textview, el código será:
x=get(hObject, 'value');
set(handles.text3,'String',x);
• Python 37
En Python el manejo de interfaz es mucho más
manual, ya que todo es programado por código, a
menos de que se use algún tipo de editor que permita
este uso en Python.
El primer botón se declara en la columna 0 y fila 0 de
la grilla que posee la librería de tk, además de que se
le da un valor inicial a su texto, y la función a la cual
el botón obedecerá, su código es:
self.button1 =
Button(self,text=texto1,command=self
.button_1,width=10)#.place(x=70,y=10
)
self.button1.grid(row=0,column=0)
Es los mismo para el segundo botón, cambiando la
función a la que obedece, su texto inicial, y su
ubicación en la grilla, será:
self.button2 = Button(self,
text="Click", command=self.button_2,
width=10 )
self.button2.grid(row=3, column=0)
Ahora para el inputText,, su código de inicialización
es solo el valor de ancho del objeto y su ubicación en
la grilla, será:
self.entry1 = Entry(self, width=10)
self.entry1.grid(row=2, column=0)
Para el textView, el código es el mismo que el
inputText, es decir:
self.label1 =
Label(self,text="...",width=10)#.pla
ce(x=70,y=50)
self.label1.grid(row=1, column=0)
Finalmente, el código para los sliders serán los sino por archivos c# (.cs), entonces cada archivo de
mismo, solo cambiará el valor máximo de estos y la esta clase, es capaz de modificar los valores de un
resolución, pero su orientación y función son las elemento en si en este entorno de programación.
mismas, entonces su resultado es:
No siendo más, se comenzará a explicar el código de
self.slider1 = Scale(self, cada elemento.
from_=0,to=100, orient=HORIZONTAL,
resolution=0.1,command=self.slider_1 El primer botón esta dado por él .cs llamado
) “cambiar_texto”, que se encarga de cambiar su texto.
self.slider1.grid(row=4, column=0) Comienza creando una función que permita esto,
como parámetro de entrada tiene un objeto Text, al
que luego se le abstraerá el texto, dependiendo de su
datos) valor toma una u otra decisión, su código es:
return wavearray
public void CambiaTexto(Text texto)
La función a la que obedecerá el botón 1, tiene un if {
que dependiendo el valor del texto del botón actúa de //texto.text = "Chao";
una u otra manera, el código es:
//Debug.Log(texto.text);
def button_1(self):
global texto1
if (texto.text == "Hola")
if texto1=="Hola":
{
texto1 = "Chao"
texto.text = "Chao";
self.button1 = Button(self,
}
text=texto1, command=self.button_1,
else
width=10 ) {
self.button1.grid(row=0, texto.text = "Hola";
column=0) }
else: }
texto1 = "Hola"
self.button1 = Button(self, Luego para el segundo botón, se necesita abstraer el
text=texto1, command=self.button_1, texto de inputText, y luego imprimiro en el textView,
width=10 ) entonces su codigo serán dos funciones, una que se
self.button1.grid(row=0, encargue de abstraer el texto y otra que lo muestre,
column=0) entonces será:
El código del botón 2, simplemente obtiene el valor string x;
del inputText, y lo imprime en su respectivo public void CambiaTexto(Text texto)
textView, entonces: {
//texto.text = "Chao";
def button_2(self):
x=self.entry1.get() Debug.Log(texto.text);
self.label1["text"]=(x) x = texto.text;
La función que tienen las sliders solo imprime su
valor, su código es: //texto2.text = "Hola";

def slider_1(self,y): }
#y = self.slider1.getvar() public void CambiaTexto2(Text texto)
print(y) {
//texto.text = "Chao";
Y para inicializar la interfaz, se obtiene su respectiva
función donde inicialmente se da los valores de ancho
texto.text=x;
y largo totales de la interfaz además de su título,
entonces quedará: //texto2.text = "Hola";
class Root(Tk):
def __init__(self):
}
super(Root,self).__init__()
self.title("Lab3")
Finalmente, para los sliders, primero se obtiene el
self.geometry("100x300")
valor tipo value de este objeto con una función, y en
• Unity3D otra se imprime a su text correspondiente. Entonces
su código es:
En unity3D la manera de programar cada elemento de public void varia(Slider variable)
interfaz, es bastante diferente a la que se conocieron {
anteriormente, ya que no se programan por funciones,

4
 //texto.text = "Chao";

x = string.Format("{0:N2}",
variable.value);
Debug.Log(x);

//texto2.text = "Hola";

}
public void CambiaTexto(Text texto)
{
//texto.text = "Chao";

texto.text = x;

//texto2.text = "Hola";

Lo interesante de este entorno de programación

aparte de que permite animar todo, es la forma en que
se llaman las funciones para específicamente un
objeto, ya que necesita de un archivo c#, un objeto
vacio que contenga dicho archivo, luego llamarlo en
su función oncClick (Para botones) u
onValueChanged(Para sliders), para posteriormente
encontrar las funciones ya del archivo c# y llamarlas
dependiendo de su requerimiento.
Imagen N°1. Interfaz en MATLAB.

• Procedimiento práctico.

Primero se mostrará las diferentes interfaces que se

obtienen en los 3 lenguajes, en seguida s dirán las
diferencias, y sus respectivas comparaciones entre
una y otra.

Imagen N°2. Interfaz en Pythoon37

5
 - https://la.mathworks.com/

- https://www.python.org/

- https://unity.com/es

- https://visualstudio.microsoft.com/es/

Imagen N°3. Interfaz en Unity3D

Como se puede ver la interfaz mas dinamica es la de

Unity3D sin dudas, mas sin embargo la mas facil de
trabajar es la de MATLAB, ya que no hay tantas
vueltas para progrmar un solo objeto, cuestion que en
Unity3D no pasa.

Sobre python la forma de progrmacion interfaces se

complica un poco con respecto a MATLAB, no es tan
amena con el usuario ademas de que su producto
final generalmente no es tan estetico como el de
Unity3D, pero su forma de programar tampoco es tan
compleja como este.

VI. Análisis de resultados.

• Se puede observar que el producto final mas

simple es de Matlab, ya que el de Python por
lo menos permite diseños 3D dependiendo
de la librería empleada, pero Unity, es todo
lo contrario.

• La forma más fácil de programar interfaces

de usuario entre estos tres entornos es la de
MATLAB.

• Al final todos los entornos de programación,

contienen funciones con el propósito de dar
vida a sus objetos.

VII. Conclusiones.

1. Por estética y diseño es mejor diseñar

interfaces en Unity3D

2. Por facilidad de programación, es mejor usar

un entorno como MATLAB

3. Es necesario tener conocimientos fuertes en

los tres entornos de programación.

VIII. Referencias.